refactor(admin): refactor admin roles and users management

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

@@ -0,0 +1,142 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+import type { UseFormRegister } from 'react-hook-form';
+import { Loader2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { Role } from '@/types';
+import type { UserFormValues } from '../hooks/useUserForm';
+
+interface UserSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  userId?: number;
+  register: UseFormRegister<UserFormValues>;
+  onSubmit: ComponentProps<'form'>['onSubmit'];
+  roleId: string;
+  onRoleChange: (roleId: string) => void;
+  roles: Role[];
+  isRolesLoading: boolean;
+  isSaving: boolean;
+}
+
+export function UserSheet({
+  open,
+  onOpenChange,
+  userId,
+  register,
+  onSubmit,
+  roleId,
+  onRoleChange,
+  roles,
+  isRolesLoading,
+  isSaving,
+}: UserSheetProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>{userId ? 'Edit User' : 'Create User'}</DialogTitle>
+          <DialogDescription>Assign user details and a role.</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="first-name">First Name</Label>
+              <Input
+                id="first-name"
+                placeholder="Enter first name"
+                {...register('first_name', { required: true })}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="last-name">Last Name</Label>
+              <Input
+                id="last-name"
+                placeholder="Enter last name"
+                {...register('last_name', { required: true })}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="name@example.com"
+              {...register('email', { required: true })}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="phone-number">Phone Number</Label>
+            <Input
+              id="phone-number"
+              placeholder="Enter phone number"
+              {...register('phone_number')}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Role</Label>
+            <Select value={roleId} onValueChange={onRoleChange}>
+              <SelectTrigger>
+                <SelectValue placeholder={isRolesLoading ? 'Loading roles...' : 'Select role'} />
+              </SelectTrigger>
+              <SelectContent>
+                {roles.map((role) => (
+                  <SelectItem key={role.id} value={String(role.id)}>
+                    {role.display_name || role.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <input
+              type="hidden"
+              {...register('role_id', { required: true })}
+              value={roleId}
+              readOnly
+            />
+          </div>
+
+          <DialogFooter className="px-0">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isSaving}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSaving}>
+              {isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
+              {userId ? 'Update User' : 'Create User'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}