style: do inputs design modification

src/app/(modules)/package/components/PackageDialog.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 { Globe, Loader2, Package as PackageIcon } from 'lucide-react';
 
 import { FormField } from '@/components/form';
@@ -36,7 +36,7 @@ interface PackageDialogProps {
   onProjectChange: (projectId: string) => void;
   register: UseFormRegister<PackageFormValues>;
   errors: FieldErrors<PackageFormValues>;
-  touchedFields: UseFormReturn<PackageFormValues>['formState']['touchedFields'];
+  isSubmitted: boolean;
   onSubmit: ComponentProps<'form'>['onSubmit'];
   canSubmit: boolean;
   isSaving: boolean;
@@ -52,19 +52,15 @@ export function PackageDialog({
   onProjectChange,
   register,
   errors,
-  touchedFields,
+  isSubmitted,
   onSubmit,
   canSubmit,
   isSaving,
 }: PackageDialogProps) {
-  const projectErrorMessage = touchedFields.project_id ? errors.project_id?.message : undefined;
-  const nameErrorMessage = touchedFields.name ? errors.name?.message : undefined;
-  const startErrorMessage = touchedFields.chainage_start_km
-    ? errors.chainage_start_km?.message
-    : undefined;
-  const endErrorMessage = touchedFields.chainage_end_km
-    ? errors.chainage_end_km?.message
-    : undefined;
+  const projectErrorMessage = isSubmitted ? errors.project_id?.message : undefined;
+  const nameErrorMessage = isSubmitted ? errors.name?.message : undefined;
+  const startErrorMessage = isSubmitted ? errors.chainage_start_km?.message : undefined;
+  const endErrorMessage = isSubmitted ? errors.chainage_end_km?.message : undefined;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -155,7 +151,12 @@ export function PackageDialog({
           </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)/package/components/PackageTable.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 { Package } from '@/types';
@@ -35,8 +36,19 @@ export function PackageTable({
       title="Packages"
       data={packages}
       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 packages found."
       pagination={{

src/app/(modules)/package/hooks/usePackageForm.ts

@@ -67,10 +67,10 @@ export function usePackageForm({ onSaved }: { onSaved: () => void }) {
     reset,
     setValue,
     control,
-    formState: { errors, isSubmitting, touchedFields },
+    formState: { errors, isSubmitting, isSubmitted },
   } = useForm<PackageFormValues>({
     defaultValues,
-    mode: 'onTouched',
+    mode: 'onSubmit',
     reValidateMode: 'onChange',
     resolver: zodResolver(packageFormSchema),
   });
@@ -144,7 +144,7 @@ export function usePackageForm({ onSaved }: { onSaved: () => void }) {
     projectId,
     setProjectId,
     errors,
-    touchedFields,
+    isSubmitted,
     canSubmit,
     isSaving: isSubmitting || saveMutation.isPending,
   };

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

@@ -37,7 +37,7 @@ export default function PackagePage() {
     projectId,
     setProjectId,
     errors,
-    touchedFields,
+    isSubmitted,
     canSubmit,
     isSaving,
   } = packageForm;
@@ -119,7 +119,7 @@ export default function PackagePage() {
         onProjectChange={setProjectId}
         register={register}
         errors={errors}
-        touchedFields={touchedFields}
+        isSubmitted={isSubmitted}
         onSubmit={onSubmit}
         canSubmit={canSubmit}
         isSaving={isSaving}