style: do inputs design modification

src/app/(modules)/roles/components/RoleColumns.tsx

@@ -2,31 +2,13 @@
 
 import { useMemo } from 'react';
 import type { ColumnDef } from '@tanstack/react-table';
-import { Edit, RotateCcw } from 'lucide-react';
 
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { PERMISSIONS } from '@/constants/permissions';
-import { usePermissions } from '@/hooks/usePermissions';
 import type { Role } from '@/types';
 
-interface UseRoleColumnsParams {
-  onEdit: (role: Role) => void;
-  onToggleStatus: (role: Role) => void;
-  isStatusPending: boolean;
-}
-
-export function useRoleColumns({
-  onEdit,
-  onToggleStatus,
-  isStatusPending,
-}: UseRoleColumnsParams): ColumnDef<Role>[] {
-  const { hasPermission } = usePermissions();
-  const canEdit = hasPermission(PERMISSIONS.ROLE.UPDATE);
-  const canDelete = hasPermission(PERMISSIONS.ROLE.DELETE);
-
+export function useRoleColumns(): ColumnDef<Role>[] {
   return useMemo(() => {
-    const columns: ColumnDef<Role>[] = [
+    return [
       {
         accessorKey: 'name',
         header: 'Name',
@@ -60,38 +42,5 @@ export function useRoleColumns({
         ),
       },
     ];
-
-    if (!canEdit && !canDelete) return columns;
-
-    columns.push({
-      id: 'actions',
-      header: () => <div className="text-right">Actions</div>,
-      enableSorting: false,
-      cell: ({ row }) => {
-        const role = row.original;
-        return (
-          <div className="flex justify-end gap-2">
-            {canEdit ? (
-              <Button variant="outline" size="sm" onClick={() => onEdit(role)}>
-                <Edit className="size-4" />
-              </Button>
-            ) : null}
-            {canDelete ? (
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={isStatusPending}
-                onClick={() => onToggleStatus(role)}
-              >
-                <RotateCcw className="mr-2 size-4" />
-                {role.effective_status ? 'Deactivate' : 'Activate'}
-              </Button>
-            ) : null}
-          </div>
-        );
-      },
-    });
-
-    return columns;
-  }, [canDelete, canEdit, isStatusPending, onEdit, onToggleStatus]);
+  }, []);
 }

src/app/(modules)/roles/components/RoleSheet.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 } from 'lucide-react';
 
 import { FormField } from '@/components/form';
@@ -28,7 +28,7 @@ interface RoleSheetProps {
   roleId?: number;
   register: UseFormRegister<RoleFormValues>;
   errors: FieldErrors<RoleFormValues>;
-  touchedFields: UseFormReturn<RoleFormValues>['formState']['touchedFields'];
+  isSubmitted: boolean;
   onSubmit: ComponentProps<'form'>['onSubmit'];
   permissionTree: PermissionTreeItem[];
   permissionIds: number[];
@@ -44,7 +44,7 @@ export function RoleSheet({
   roleId,
   register,
   errors,
-  touchedFields,
+  isSubmitted,
   onSubmit,
   permissionTree,
   permissionIds,
@@ -53,10 +53,8 @@ export function RoleSheet({
   canSubmit,
   isSaving,
 }: RoleSheetProps) {
-  const nameErrorMessage = touchedFields.name ? errors.name?.message : undefined;
-  const displayNameErrorMessage = touchedFields.display_name
-    ? errors.display_name?.message
-    : undefined;
+  const nameErrorMessage = isSubmitted ? errors.name?.message : undefined;
+  const displayNameErrorMessage = isSubmitted ? errors.display_name?.message : undefined;
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
@@ -74,12 +72,7 @@ export function RoleSheet({
         <form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
           <div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
             <div className="grid gap-4 md:grid-cols-2">
-              <FormField
-                id="role-name"
-                label="Role Name"
-                required
-                error={nameErrorMessage}
-              >
+              <FormField id="role-name" label="Role Name" required error={nameErrorMessage}>
                 <Input
                   id="role-name"
                   placeholder="Enter role name"
@@ -114,7 +107,7 @@ export function RoleSheet({
             <FormField
               label="Permissions"
               required
-              error={errors.permission_ids?.message}
+              error={isSubmitted ? errors.permission_ids?.message : undefined}
               className="space-y-3"
               labelEnd={
                 <span className="text-muted-foreground">{permissionIds.length} selected</span>

src/app/(modules)/roles/components/RoleTable.tsx

@@ -2,8 +2,10 @@
 
 import type { ColumnDef, SortingState } from '@tanstack/react-table';
 import type { ReactNode } from 'react';
+import { Edit, RotateCcw } from 'lucide-react';
 
 import { DataTable } from '@/components/data-table';
+import { PERMISSIONS } from '@/constants/permissions';
 import type { Role } from '@/types';
 
 interface RoleTableProps {
@@ -18,6 +20,9 @@ interface RoleTableProps {
   onPageChange: (skip: number) => void;
   onLimitChange: (limit: number) => void;
   onSortingChange: (sorting: SortingState) => void;
+  onEdit: (role: Role) => void;
+  onToggleStatus: (role: Role) => void;
+  isStatusPending: boolean;
 }
 
 export function RoleTable({
@@ -32,6 +37,9 @@ export function RoleTable({
   onPageChange,
   onLimitChange,
   onSortingChange,
+  onEdit,
+  onToggleStatus,
+  isStatusPending,
 }: RoleTableProps) {
   return (
     <DataTable
@@ -41,6 +49,21 @@ export function RoleTable({
       isLoading={isLoading}
       toolbar={toolbar}
       emptyTitle="No roles found."
+      actions={[
+        {
+          label: 'Edit',
+          icon: <Edit className="size-4" />,
+          permission: PERMISSIONS.ROLE.UPDATE,
+          onClick: onEdit,
+        },
+        {
+          label: (role) => (role.effective_status ? 'Deactivate' : 'Activate'),
+          icon: <RotateCcw className="size-4" />,
+          permission: PERMISSIONS.ROLE.DELETE,
+          disabled: () => isStatusPending,
+          onClick: onToggleStatus,
+        },
+      ]}
       pagination={{
         skip,
         limit,

src/app/(modules)/roles/hooks/useRoleForm.ts

@@ -48,10 +48,10 @@ export function useRoleForm({
     handleSubmit,
     reset,
     setValue,
-    formState: { errors, isSubmitting, touchedFields },
+    formState: { errors, isSubmitting, isSubmitted },
   } = useForm<RoleFormValues>({
     defaultValues,
-    mode: 'onTouched',
+    mode: 'onSubmit',
     reValidateMode: 'onChange',
     resolver: zodResolver(roleFormSchema),
   });
@@ -136,7 +136,7 @@ export function useRoleForm({
     permissionIds,
     roleId,
     errors,
-    touchedFields,
+    isSubmitted,
     canSubmit,
     isSaving: isSubmitting || saveMutation.isPending,
   };

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

@@ -61,7 +61,7 @@ export default function RolesPage() {
     permissionIds,
     setPermissionIds,
     errors,
-    touchedFields,
+    isSubmitted,
     canSubmit,
     isSaving,
   } = roleForm;
@@ -88,11 +88,7 @@ export default function RolesPage() {
     [updateRoleStatus],
   );
 
-  const columns = useRoleColumns({
-    onEdit: openEdit,
-    onToggleStatus: toggleStatus,
-    isStatusPending,
-  });
+  const columns = useRoleColumns();
 
   const total = rolesQuery.data?.total ?? 0;
   const roles = rolesQuery.data?.items ?? [];
@@ -134,6 +130,9 @@ export default function RolesPage() {
           onPageChange={setSkip}
           onLimitChange={setLimit}
           onSortingChange={setSorting}
+          onEdit={openEdit}
+          onToggleStatus={toggleStatus}
+          isStatusPending={isStatusPending}
         />
       </main>
 
@@ -143,7 +142,7 @@ export default function RolesPage() {
         roleId={roleId}
         register={register}
         errors={errors}
-        touchedFields={touchedFields}
+        isSubmitted={isSubmitted}
         onSubmit={onSubmit}
         permissionTree={permissionsQuery.permissionTree}
         permissionIds={permissionIds}