dashboard design

distribution_fe/app/(dashboard)/operations/rides/_components/ride-sheet.tsx

@@ -34,7 +34,7 @@ import type { VehicleResponse, DriverProfileResponse } from '@/types/api'
 const schema = z.object({
   vehicleId: z.string().min(1, 'Vehicle is required'),
   driverProfileId: z.string().min(1, 'Driver is required'),
-  meterstart: z.number().min(0, 'Meter start must be 0 or more'),
+  meterstart: z.number().min(0, 'Meter start must be 0 or more').optional(),
 })
 
 type FormValues = z.infer<typeof schema>
@@ -54,7 +54,7 @@ export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
     defaultValues: {
       vehicleId: '',
       driverProfileId: '',
-      meterstart: 0,
+      meterstart: undefined,
     },
   })
 
@@ -64,7 +64,7 @@ export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
     form.reset({
       vehicleId: '',
       driverProfileId: '',
-      meterstart: 0,
+      meterstart: undefined,
     })
 
     Promise.all([
@@ -82,7 +82,7 @@ export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
 
   async function onSubmit(values: FormValues) {
     try {
-      await ridesApi.create(values)
+      await ridesApi.create({ ...values, meterstart: values.meterstart ?? 0 })
       toast.add({ title: 'Ride created', type: 'success' })
       onSuccess()
       onClose()
@@ -149,7 +149,6 @@ export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
               control={form.control}
               name="meterstart"
               label="Meter Start (km)"
-              required
               render={({ field, invalid }) => (
                 <Input
                   id="meterstart"
@@ -157,8 +156,8 @@ export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
                   ref={field.ref}
                   type="number"
                   min={0}
-                  value={Number(field.value as number)}
-                  onChange={(e) => field.onChange(Number(e.target.value))}
+                  value={field.value === undefined ? '' : Number(field.value as number)}
+                  onChange={(e) => field.onChange(e.target.value === '' ? undefined : Number(e.target.value))}
                   onBlur={field.onBlur}
                   placeholder="0"
                   aria-invalid={invalid}