style: do inputs design modification

src/app/(modules)/users/components/UserColumns.tsx

@@ -2,12 +2,8 @@
 
 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 { AdministrationUser } from '@/types';
 
 function formatDate(value?: string | null) {
@@ -19,23 +15,9 @@ function formatDate(value?: string | null) {
   }).format(new Date(value));
 }
 
-interface UseUserColumnsParams {
-  onEdit: (user: AdministrationUser) => void;
-  onToggleStatus: (user: AdministrationUser) => void;
-  pendingUserId?: number;
-}
-
-export function useUserColumns({
-  onEdit,
-  onToggleStatus,
-  pendingUserId,
-}: UseUserColumnsParams): ColumnDef<AdministrationUser>[] {
-  const { hasPermission } = usePermissions();
-  const canEdit = hasPermission(PERMISSIONS.USER.UPDATE);
-  const canDelete = hasPermission(PERMISSIONS.USER.DELETE);
-
+export function useUserColumns(): ColumnDef<AdministrationUser>[] {
   return useMemo(() => {
-    const columns: ColumnDef<AdministrationUser>[] = [
+    return [
       {
         accessorKey: 'first_name',
         header: 'Name',
@@ -88,38 +70,5 @@ export function useUserColumns({
         ),
       },
     ];
-
-    if (!canEdit && !canDelete) return columns;
-
-    columns.push({
-      id: 'actions',
-      header: () => <div className="text-right">Actions</div>,
-      enableSorting: false,
-      cell: ({ row }) => {
-        const user = row.original;
-        return (
-          <div className="flex justify-end gap-2">
-            {canEdit ? (
-              <Button variant="outline" size="sm" onClick={() => onEdit(user)}>
-                <Edit className="size-4" />
-              </Button>
-            ) : null}
-            {canDelete ? (
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={pendingUserId === user.id || user.effective_status === 'pending'}
-                onClick={() => onToggleStatus(user)}
-              >
-                <RotateCcw className="mr-2 size-4" />
-                {user.effective_status === 'active' ? 'Deactivate' : 'Activate'}
-              </Button>
-            ) : null}
-          </div>
-        );
-      },
-    });
-
-    return columns;
-  }, [canDelete, canEdit, onEdit, onToggleStatus, pendingUserId]);
+  }, []);
 }

src/app/(modules)/users/components/UserSheet.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRef, 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';
@@ -24,7 +24,7 @@ interface UserSheetProps {
   userId?: number;
   register: UseFormRegister<UserFormValues>;
   errors: FieldErrors<UserFormValues>;
-  touchedFields: UseFormReturn<UserFormValues>['formState']['touchedFields'];
+  isSubmitted: boolean;
   onSubmit: ComponentProps<'form'>['onSubmit'];
   roleId: string;
   onRoleChange: (roleId: string) => void;
@@ -38,7 +38,7 @@ export function UserSheet({
   userId,
   register,
   errors,
-  touchedFields,
+  isSubmitted,
   onSubmit,
   roleId,
   onRoleChange,
@@ -46,11 +46,11 @@ export function UserSheet({
   isSaving,
 }: UserSheetProps) {
   const roleComboboxPortalRef = useRef<HTMLDivElement | null>(null);
-  const firstNameErrorMessage = touchedFields.first_name ? errors.first_name?.message : undefined;
-  const lastNameErrorMessage = touchedFields.last_name ? errors.last_name?.message : undefined;
-  const emailErrorMessage = touchedFields.email ? errors.email?.message : undefined;
-  const phoneErrorMessage = touchedFields.phone_number ? errors.phone_number?.message : undefined;
-  const roleErrorMessage = touchedFields.role_id ? errors.role_id?.message : undefined;
+  const firstNameErrorMessage = isSubmitted ? errors.first_name?.message : undefined;
+  const lastNameErrorMessage = isSubmitted ? errors.last_name?.message : undefined;
+  const emailErrorMessage = isSubmitted ? errors.email?.message : undefined;
+  const phoneErrorMessage = isSubmitted ? errors.phone_number?.message : undefined;
+  const roleErrorMessage = isSubmitted ? errors.role_id?.message : undefined;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -63,12 +63,7 @@ export function UserSheet({
 
         <form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
           <div className="grid gap-4 md:grid-cols-2">
-            <FormField
-              id="first-name"
-              label="First Name"
-              required
-              error={firstNameErrorMessage}
-            >
+            <FormField id="first-name" label="First Name" required error={firstNameErrorMessage}>
               <Input
                 id="first-name"
                 placeholder="Enter first name"
@@ -77,12 +72,7 @@ export function UserSheet({
               />
             </FormField>
 
-            <FormField
-              id="last-name"
-              label="Last Name"
-              required
-              error={lastNameErrorMessage}
-            >
+            <FormField id="last-name" label="Last Name" required error={lastNameErrorMessage}>
               <Input
                 id="last-name"
                 placeholder="Enter last name"
@@ -92,12 +82,7 @@ export function UserSheet({
             </FormField>
           </div>
 
-          <FormField
-            id="email"
-            label="Email"
-            required
-            error={emailErrorMessage}
-          >
+          <FormField id="email" label="Email" required error={emailErrorMessage}>
             <Input
               id="email"
               placeholder="name@example.com"
@@ -106,11 +91,7 @@ export function UserSheet({
             />
           </FormField>
 
-          <FormField
-            id="phone-number"
-            label="Phone Number"
-            error={phoneErrorMessage}
-          >
+          <FormField id="phone-number" label="Phone Number" error={phoneErrorMessage}>
             <Input
               id="phone-number"
               placeholder="+919876543210"
@@ -130,12 +111,7 @@ export function UserSheet({
 
             <div ref={roleComboboxPortalRef} />
 
-            <input
-              type="hidden"
-              {...register('role_id')}
-              value={roleId}
-              readOnly
-            />
+            <input type="hidden" {...register('role_id')} value={roleId} readOnly />
           </FormField>
 
           <DialogFooter className="px-0">

src/app/(modules)/users/components/UserTable.tsx

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