Fixes for the route

distribution_fe/app/(dashboard)/network/routes/_components/route-sheet.tsx

@@ -29,9 +29,9 @@ import type { RouteResponse, RegionResponse } from '@/types/api'
 const schema = z.object({
   regionId: z.string().min(1, 'Region is required'),
   routeName: z.string().min(1, 'Route name is required').max(100, 'Route name must be under 100 characters'),
-  startPoint: z.string().min(1, 'Start point is required').max(200),
-  endPoint: z.string().min(1, 'End point is required').max(200),
-  length: z.number().positive('Length must be greater than 0'),
+  startPoint: z.string().max(200),
+  endPoint: z.string().max(200),
+  length: z.number().nonnegative('Length cannot be negative').nullable(),
   isActive: z.boolean(),
 })
 
@@ -50,7 +50,7 @@ export function RouteSheet({ open, onClose, route, onSuccess }: RouteSheetProps)
 
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
-    defaultValues: { regionId: '', routeName: '', startPoint: '', endPoint: '', length: 0, isActive: true },
+    defaultValues: { regionId: '', routeName: '', startPoint: '', endPoint: '', length: null, isActive: true },
   })
 
   useEffect(() => {
@@ -63,17 +63,22 @@ export function RouteSheet({ open, onClose, route, onSuccess }: RouteSheetProps)
         ? {
             regionId: route.regionId,
             routeName: route.routeName,
-            startPoint: route.startPoint,
-            endPoint: route.endPoint,
+            startPoint: route.startPoint ?? '',
+            endPoint: route.endPoint ?? '',
             length: route.length,
             isActive: route.isActive,
           }
-        : { regionId: '', routeName: '', startPoint: '', endPoint: '', length: 0, isActive: true }
+        : { regionId: '', routeName: '', startPoint: '', endPoint: '', length: null, isActive: true }
       )
     }
   }, [open, route])
 
-  async function onSubmit(values: FormValues) {
+  async function onSubmit(formValues: FormValues) {
+    const values = {
+      ...formValues,
+      startPoint: formValues.startPoint.trim() || null,
+      endPoint: formValues.endPoint.trim() || null,
+    }
     try {
       if (isEdit) {
         await routesApi.update(route!.id, values)
@@ -145,7 +150,6 @@ export function RouteSheet({ open, onClose, route, onSuccess }: RouteSheetProps)
               control={form.control}
               name="startPoint"
               label="Start Point"
-              required
               render={({ field, invalid }) => (
                 <Input
                   id="startPoint"
@@ -164,7 +168,6 @@ export function RouteSheet({ open, onClose, route, onSuccess }: RouteSheetProps)
               control={form.control}
               name="endPoint"
               label="End Point"
-              required
               render={({ field, invalid }) => (
                 <Input
                   id="endPoint"
@@ -183,15 +186,17 @@ export function RouteSheet({ open, onClose, route, onSuccess }: RouteSheetProps)
               control={form.control}
               name="length"
               label="Length (km)"
-              required
               render={({ field, invalid }) => (
                 <Input
                   id="length"
                   type="number"
                   name={field.name}
                   ref={field.ref}
-                  value={field.value as number}
-                  onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
+                  value={(field.value as number | null) ?? ''}
+                  onChange={(e) => {
+                    const n = parseFloat(e.target.value)
+                    field.onChange(Number.isNaN(n) ? null : n)
+                  }}
                   onBlur={field.onBlur}
                   placeholder="e.g. 25"
                   min={0}

distribution_fe/app/(dashboard)/network/routes/_components/routes-client.tsx

@@ -72,7 +72,14 @@ export function RoutesClient() {
 
   async function toggleActive(route: RouteResponse) {
     try {
-      await routesApi.update(route.id, { isActive: !route.isActive })
+      await routesApi.update(route.id, {
+        regionId: route.regionId,
+        routeName: route.routeName,
+        startPoint: route.startPoint,
+        endPoint: route.endPoint,
+        length: route.length,
+        isActive: !route.isActive,
+      })
       toast.add({
         title: route.isActive ? 'Route deactivated' : 'Route activated',
         type: 'success',
@@ -104,14 +111,16 @@ export function RoutesClient() {
         minWidth: 200,
         cellRender: (row) => (
           <span className="text-sm text-muted-foreground">
-            {row.startPoint} <span className="mx-1 text-foreground">→</span> {row.endPoint}
+            {row.startPoint || row.endPoint
+              ? <>{row.startPoint ?? '—'} <span className="mx-1 text-foreground">→</span> {row.endPoint ?? '—'}</>
+              : '—'}
           </span>
         ),
       },
       {
         key: 'length',
         title: 'Length',
-        fields: [{ key: 'length', transform: (v) => `${v} km` }],
+        fields: [{ key: 'length', transform: (v) => (v == null ? '—' : `${v} km`) }],
         width: 100,
       },
       {