style: do inputs design modification

src/app/(modules)/segment/components/SegmentDialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ComponentProps } from 'react';
-import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
+import type { FieldErrors, UseFormRegister } from 'react-hook-form';
 import { Loader2, MapPin, Milestone } from 'lucide-react';
 
 import { FormField } from '@/components/form';
@@ -42,7 +42,7 @@ interface SegmentDialogProps {
   onDirectionChange: (direction: 'UP' | 'DOWN') => void;
   register: UseFormRegister<SegmentFormValues>;
   errors: FieldErrors<SegmentFormValues>;
-  touchedFields: UseFormReturn<SegmentFormValues>['formState']['touchedFields'];
+  isSubmitted: boolean;
   onSubmit: ComponentProps<'form'>['onSubmit'];
   canSubmit: boolean;
   isSaving: boolean;
@@ -64,13 +64,13 @@ export function SegmentDialog({
   onDirectionChange,
   register,
   errors,
-  touchedFields,
+  isSubmitted,
   onSubmit,
   canSubmit,
   isSaving,
 }: SegmentDialogProps) {
   const getError = (field: keyof SegmentFormValues) =>
-    touchedFields[field] ? errors[field]?.message : undefined;
+    isSubmitted ? errors[field]?.message : undefined;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -131,7 +131,9 @@ export function SegmentDialog({
                         Loading...
                       </span>
                     ) : (
-                      <SelectValue placeholder={projectId ? 'Choose a package' : 'Select project first'} />
+                      <SelectValue
+                        placeholder={projectId ? 'Choose a package' : 'Select project first'}
+                      />
                     )}
                   </SelectTrigger>
                   <SelectContent>
@@ -278,7 +280,12 @@ export function SegmentDialog({
           </div>
 
           <DialogFooter>
-            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isSaving}
+            >
               Cancel
             </Button>
             <Button type="submit" disabled={isSaving || !canSubmit}>

src/app/(modules)/segment/components/SegmentTable.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type { ColumnDef } from '@tanstack/react-table';
+import { Edit3, Trash2 } from 'lucide-react';
 
 import { DataTable } from '@/components/data-table';
 import type { Chainage } from '@/types';
@@ -35,8 +36,19 @@ export function SegmentTable({
       title="Segments"
       data={segments}
       columns={columns}
-      onEdit={onEdit}
-      onDelete={onDelete}
+      actions={[
+        {
+          label: 'Edit',
+          icon: <Edit3 className="size-4" />,
+          onClick: onEdit,
+        },
+        {
+          label: 'Delete',
+          icon: <Trash2 className="size-4" />,
+          className: 'text-destructive',
+          onClick: onDelete,
+        },
+      ]}
       isLoading={isLoading}
       emptyTitle="No segments found."
       pagination={{

src/app/(modules)/segment/hooks/useSegmentForm.ts

@@ -86,10 +86,10 @@ export function useSegmentForm({ onSaved }: { onSaved: () => void }) {
     reset,
     setValue,
     control,
-    formState: { errors, isSubmitting, touchedFields },
+    formState: { errors, isSubmitting, isSubmitted },
   } = useForm<SegmentFormValues>({
     defaultValues,
-    mode: 'onTouched',
+    mode: 'onSubmit',
     reValidateMode: 'onChange',
     resolver: zodResolver(segmentFormSchema),
   });
@@ -200,7 +200,7 @@ export function useSegmentForm({ onSaved }: { onSaved: () => void }) {
     direction,
     setDirection,
     errors,
-    touchedFields,
+    isSubmitted,
     canSubmit,
     isSaving: isSubmitting || saveMutation.isPending,
   };

src/app/(modules)/segment/page.tsx

@@ -44,7 +44,7 @@ export default function SegmentPage() {
     direction,
     setDirection,
     errors,
-    touchedFields,
+    isSubmitted,
     canSubmit,
     isSaving,
   } = segmentForm;
@@ -136,7 +136,7 @@ export default function SegmentPage() {
         onDirectionChange={setDirection}
         register={register}
         errors={errors}
-        touchedFields={touchedFields}
+        isSubmitted={isSubmitted}
         onSubmit={onSubmit}
         canSubmit={canSubmit}
         isSaving={isSaving}