251211:1622 Frontend: refactor Dashboard (not finish)

frontend/app/(admin)/admin/contracts/page.tsx

@@ -34,11 +34,40 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select";
-// import { useProjects } from "@/lib/services/project.service"; // Removed invalid import
-// I need to import useProjects hook from the page where it was defined or create it.
-// Checking projects/page.tsx, it uses useProjects from somewhere?
-// Ah, usually I define hooks in a separate file or inline if simple.
-// Let's rely on standard react-query params here.
+import { contractService } from "@/lib/services/contract.service";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+import { SearchContractDto, CreateContractDto, UpdateContractDto } from "@/types/dto/contract/contract.dto";
+import { AxiosError } from "axios";
+
+interface Project {
+  id: number;
+  projectCode: string;
+  projectName: string;
+}
+
+interface Contract {
+    id: number;
+    contractCode: string;
+    contractName: string;
+    projectId: number;
+    description?: string;
+    startDate?: string;
+    endDate?: string;
+    project?: {
+      projectCode: string;
+      projectName: string;
+    }
+}
 
 const contractSchema = z.object({
   contractCode: z.string().min(1, "Contract Code is required"),
@@ -51,10 +80,7 @@ const contractSchema = z.object({
 
 type ContractFormData = z.infer<typeof contractSchema>;
 
-import { contractService } from "@/lib/services/contract.service";
-
-// Inline hooks for simplicity, or could move to hooks/use-master-data
-const useContracts = (params?: any) => {
+const useContracts = (params?: SearchContractDto) => {
     return useQuery({
         queryKey: ['contracts', params],
         queryFn: () => contractService.getAll(params),
@@ -76,23 +102,23 @@ export default function ContractsPage() {
   const queryClient = useQueryClient();
 
   const createContract = useMutation({
-      mutationFn: (data: any) => apiClient.post("/contracts", data).then(res => res.data),
+      mutationFn: (data: CreateContractDto) => apiClient.post("/contracts", data).then(res => res.data),
       onSuccess: () => {
           toast.success("Contract created successfully");
           queryClient.invalidateQueries({ queryKey: ['contracts'] });
           setDialogOpen(false);
       },
-      onError: (err: any) => toast.error(err.message || "Failed to create contract")
+      onError: (err: AxiosError<{ message: string }>) => toast.error(err.response?.data?.message || "Failed to create contract")
   });
 
   const updateContract = useMutation({
-      mutationFn: ({ id, data }: { id: number, data: any }) => apiClient.patch(`/contracts/${id}`, data).then(res => res.data),
+      mutationFn: ({ id, data }: { id: number, data: UpdateContractDto }) => apiClient.patch(`/contracts/${id}`, data).then(res => res.data),
       onSuccess: () => {
           toast.success("Contract updated successfully");
           queryClient.invalidateQueries({ queryKey: ['contracts'] });
           setDialogOpen(false);
       },
-      onError: (err: any) => toast.error(err.message || "Failed to update contract")
+      onError: (err: AxiosError<{ message: string }>) => toast.error(err.response?.data?.message || "Failed to update contract")
   });
 
   const deleteContract = useMutation({
@@ -101,12 +127,32 @@ export default function ContractsPage() {
           toast.success("Contract deleted successfully");
           queryClient.invalidateQueries({ queryKey: ['contracts'] });
       },
-      onError: (err: any) => toast.error(err.message || "Failed to delete contract")
+      onError: (err: AxiosError<{ message: string }>) => toast.error(err.response?.data?.message || "Failed to delete contract")
   });
 
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingId, setEditingId] = useState<number | null>(null);
 
+  // Stats for Delete Dialog
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [contractToDelete, setContractToDelete] = useState<Contract | null>(null);
+
+  const handleDeleteClick = (contract: Contract) => {
+    setContractToDelete(contract);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = () => {
+    if (contractToDelete) {
+      deleteContract.mutate(contractToDelete.id, {
+        onSuccess: () => {
+          setDeleteDialogOpen(false);
+          setContractToDelete(null);
+        },
+      });
+    }
+  };
+
   const {
       register,
       handleSubmit,
@@ -124,7 +170,7 @@ export default function ContractsPage() {
       },
   });
 
-  const columns: ColumnDef<any>[] = [
+  const columns: ColumnDef<Contract>[] = [
     {
        accessorKey: "contractCode",
        header: "Code",
@@ -154,12 +200,8 @@ export default function ContractsPage() {
                         <Pencil className="mr-2 h-4 w-4" /> Edit
                     </DropdownMenuItem>
                     <DropdownMenuItem
-                        className="text-red-600"
-                        onClick={() => {
-                            if (confirm(`Delete contract ${row.original.contractCode}?`)) {
-                                deleteContract.mutate(row.original.id);
-                            }
-                        }}
+                        className="text-red-600 focus:text-red-600"
+                        onClick={() => handleDeleteClick(row.original)}
                     >
                         <Trash className="mr-2 h-4 w-4" /> Delete
                     </DropdownMenuItem>
@@ -169,7 +211,7 @@ export default function ContractsPage() {
     }
   ];
 
-  const handleEdit = (contract: any) => {
+  const handleEdit = (contract: Contract) => {
       setEditingId(contract.id);
       reset({
           contractCode: contract.contractCode,
@@ -233,7 +275,13 @@ export default function ContractsPage() {
        </div>
 
       {isLoading ? (
-          <div className="text-center py-10">Loading contracts...</div>
+        <div className="space-y-2">
+            {[1, 2, 3, 4, 5].map((i) => (
+            <div key={i} className="flex items-center space-x-4">
+                <Skeleton className="h-12 w-full" />
+            </div>
+            ))}
+        </div>
       ) : (
           <DataTable columns={columns} data={contracts || []} />
       )}
@@ -255,7 +303,7 @@ export default function ContractsPage() {
                         <SelectValue placeholder="Select Project" />
                     </SelectTrigger>
                     <SelectContent>
-                        {projects?.map((p: any) => (
+                        {(projects as Project[])?.map((p) => (
                             <SelectItem key={p.id} value={p.id.toString()}>
                                 {p.projectCode} - {p.projectName}
                             </SelectItem>
@@ -321,6 +369,28 @@ export default function ContractsPage() {
           </form>
         </DialogContent>
       </Dialog>
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete the contract
+              <span className="font-semibold text-foreground"> {contractToDelete?.contractCode} </span>
+              and remove it from the system.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+                onClick={confirmDelete}
+                className="bg-red-600 hover:bg-red-700"
+            >
+                {deleteContract.isPending ? "Deleting..." : "Delete Contract"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

frontend/app/(admin)/admin/organizations/page.tsx

@@ -19,6 +19,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Organization } from "@/types/organization";
 import { OrganizationDialog } from "@/components/admin/organization-dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Skeleton } from "@/components/ui/skeleton";
 
 // Organization role types for display
 const ORGANIZATION_ROLES = [
@@ -41,6 +52,26 @@ export default function OrganizationsPage() {
   const [selectedOrganization, setSelectedOrganization] =
     useState<Organization | null>(null);
 
+  // Stats for Delete Dialog
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [orgToDelete, setOrgToDelete] = useState<Organization | null>(null);
+
+  const handleDeleteClick = (org: Organization) => {
+    setOrgToDelete(org);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = () => {
+    if (orgToDelete) {
+      deleteOrg.mutate(orgToDelete.id, {
+        onSuccess: () => {
+          setDeleteDialogOpen(false);
+          setOrgToDelete(null);
+        },
+      });
+    }
+  };
+
   const columns: ColumnDef<Organization>[] = [
     {
       accessorKey: "organizationCode",
@@ -101,12 +132,8 @@ export default function OrganizationsPage() {
                 <Pencil className="mr-2 h-4 w-4" /> Edit
               </DropdownMenuItem>
               <DropdownMenuItem
-                className="text-red-600"
-                onClick={() => {
-                  if (confirm(`Delete organization ${org.organizationCode}?`)) {
-                    deleteOrg.mutate(org.id);
-                  }
-                }}
+                className="text-red-600 focus:text-red-600"
+                onClick={() => handleDeleteClick(org)}
               >
                 <Trash className="mr-2 h-4 w-4" /> Delete
               </DropdownMenuItem>
@@ -149,7 +176,13 @@ export default function OrganizationsPage() {
       </div>
 
       {isLoading ? (
-        <div className="text-center py-10">Loading organizations...</div>
+          <div className="space-y-2">
+            {[1, 2, 3, 4, 5].map((i) => (
+              <div key={i} className="flex items-center space-x-4">
+                <Skeleton className="h-12 w-full" />
+              </div>
+            ))}
+          </div>
       ) : (
         <DataTable columns={columns} data={organizations || []} />
       )}
@@ -159,6 +192,28 @@ export default function OrganizationsPage() {
         onOpenChange={setDialogOpen}
         organization={selectedOrganization}
       />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete the organization
+              <span className="font-semibold text-foreground"> {orgToDelete?.organizationName} </span>
+              and remove it from the system.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+                onClick={confirmDelete}
+                className="bg-red-600 hover:bg-red-700"
+            >
+                {deleteOrg.isPending ? "Deleting..." : "Delete Organization"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

frontend/app/(admin)/admin/page.tsx

@@ -1,5 +1,147 @@
-import { redirect } from 'next/navigation';
+"use client";
+
+import { useOrganizations } from "@/hooks/use-master-data";
+import { useUsers } from "@/hooks/use-users";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Users,
+  Building2,
+  FileText,
+  Settings,
+  Shield,
+  Activity,
+  ArrowRight,
+} from "lucide-react";
+import Link from "next/link";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
 
 export default function AdminPage() {
-  redirect('/admin/workflows');
+  const { data: organizations, isLoading: orgsLoading } = useOrganizations();
+  const { data: users, isLoading: usersLoading } = useUsers();
+
+  const stats = [
+    {
+      title: "Total Users",
+      value: users?.length || 0,
+      icon: Users,
+      loading: usersLoading,
+      href: "/admin/users",
+      color: "text-blue-600",
+    },
+    {
+      title: "Organizations",
+      value: organizations?.length || 0,
+      icon: Building2,
+      loading: orgsLoading,
+      href: "/admin/organizations",
+      color: "text-green-600",
+    },
+    {
+        title: "System Logs",
+        value: "View",
+        icon: Activity,
+        loading: false,
+        href: "/admin/system-logs",
+        color: "text-orange-600",
+      }
+  ];
+
+  const quickLinks = [
+    {
+      title: "User Management",
+      description: "Manage system users, roles, and permissions",
+      href: "/admin/users",
+      icon: Users,
+    },
+    {
+      title: "Organizations",
+      description: "Manage project organizations and companies",
+      href: "/admin/organizations",
+      icon: Building2,
+    },
+    {
+      title: "Workflow Config",
+      description: "Configure document approval workflows",
+      href: "/admin/workflows",
+      icon: FileText,
+    },
+    {
+      title: "Security & RBAC",
+      description: "Configure roles, permissions, and security settings",
+      href: "/admin/security/roles",
+      icon: Shield,
+    },
+    {
+      title: "Numbering System",
+      description: "Setup document numbering templates",
+      href: "/admin/numbering",
+      icon: Settings,
+    },
+  ];
+
+  return (
+    <div className="space-y-8 p-8">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Admin Dashboard</h1>
+        <p className="text-muted-foreground mt-2">
+          System overview and quick access to administrative functions.
+        </p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {stats.map((stat, index) => (
+          <Card key={index} className="hover:shadow-md transition-shadow">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                {stat.title}
+              </CardTitle>
+              <stat.icon className={`h-4 w-4 ${stat.color}`} />
+            </CardHeader>
+            <CardContent>
+              {stat.loading ? (
+                <Skeleton className="h-8 w-20" />
+              ) : (
+                <div className="text-2xl font-bold">{stat.value}</div>
+              )}
+              {stat.href && (
+                <Link
+                  href={stat.href}
+                  className="text-xs text-muted-foreground hover:underline mt-1 inline-block"
+                >
+                  View details
+                </Link>
+              )}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div>
+        <h2 className="text-xl font-semibold mb-4">Quick Access</h2>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {quickLinks.map((link, index) => (
+            <Link key={index} href={link.href}>
+              <Card className="h-full hover:bg-muted/50 transition-colors cursor-pointer border-l-4 border-l-transparent hover:border-l-primary">
+                <CardHeader>
+                  <CardTitle className="flex items-center text-lg">
+                    <link.icon className="mr-2 h-5 w-5 text-primary" />
+                    {link.title}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm text-muted-foreground">
+                    {link.description}
+                  </p>
+                  <Button variant="ghost" className="mt-4 p-0 h-auto font-normal text-primary hover:no-underline group">
+                    Go to module <ArrowRight className="ml-1 h-3 w-3 group-hover:translate-x-1 transition-transform" />
+                  </Button>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 }

frontend/app/(admin)/admin/projects/page.tsx

@@ -31,6 +31,17 @@ import { Badge } from "@/components/ui/badge";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Skeleton } from "@/components/ui/skeleton";
 
 interface Project {
   id: number;
@@ -60,6 +71,26 @@ export default function ProjectsPage() {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingId, setEditingId] = useState<number | null>(null);
 
+  // Stats for Delete Dialog
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [projectToDelete, setProjectToDelete] = useState<Project | null>(null);
+
+  const handleDeleteClick = (project: Project) => {
+    setProjectToDelete(project);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = () => {
+    if (projectToDelete) {
+      deleteProject.mutate(projectToDelete.id, {
+        onSuccess: () => {
+          setDeleteDialogOpen(false);
+          setProjectToDelete(null);
+        },
+      });
+    }
+  };
+
   const {
     register,
     handleSubmit,
@@ -113,12 +144,8 @@ export default function ProjectsPage() {
               <Pencil className="mr-2 h-4 w-4" /> Edit
             </DropdownMenuItem>
             <DropdownMenuItem
-              className="text-red-600"
-              onClick={() => {
-                if (confirm(`Delete project ${row.original.projectCode}?`)) {
-                  deleteProject.mutate(row.original.id);
-                }
-              }}
+              className="text-red-600 focus:text-red-600"
+              onClick={() => handleDeleteClick(row.original)}
             >
               <Trash className="mr-2 h-4 w-4" /> Delete
             </DropdownMenuItem>
@@ -190,7 +217,13 @@ export default function ProjectsPage() {
       </div>
 
       {isLoading ? (
-         <div className="text-center py-10">Loading projects...</div>
+         <div className="space-y-2">
+           {[1, 2, 3, 4, 5].map((i) => (
+             <div key={i} className="flex items-center space-x-4">
+               <Skeleton className="h-12 w-full" />
+             </div>
+           ))}
+         </div>
       ) : (
          <DataTable columns={columns} data={projects || []} />
       )}
@@ -253,6 +286,28 @@ export default function ProjectsPage() {
           </form>
         </DialogContent>
       </Dialog>
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete the project
+              <span className="font-semibold text-foreground"> {projectToDelete?.projectCode} </span>
+              and remove it from the system.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+                onClick={confirmDelete}
+                className="bg-red-600 hover:bg-red-700"
+            >
+                {deleteProject.isPending ? "Deleting..." : "Delete Project"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

frontend/app/(admin)/admin/reference/drawing-categories/page.tsx

@@ -7,21 +7,21 @@ import { ColumnDef } from "@tanstack/react-table";
 export default function DrawingCategoriesPage() {
   const columns: ColumnDef<any>[] = [
     {
-      accessorKey: "type_code",
+      accessorKey: "subTypeCode",
       header: "Code",
       cell: ({ row }) => (
-        <span className="font-mono font-bold">{row.getValue("type_code")}</span>
+        <span className="font-mono font-bold">{row.getValue("subTypeCode")}</span>
       ),
     },
     {
-      accessorKey: "type_name",
+      accessorKey: "subTypeName",
       header: "Name",
     },
     {
-      accessorKey: "classification",
-      header: "Classification",
+      accessorKey: "subTypeNumber",
+      header: "Running Code",
       cell: ({ row }) => (
-        <span className="capitalize">{row.getValue("classification") || "General"}</span>
+        <span className="font-mono">{row.getValue("subTypeNumber") || "-"}</span>
       ),
     },
   ];
@@ -34,14 +34,14 @@ export default function DrawingCategoriesPage() {
         description="Manage drawing sub-types and categories"
         queryKey={["drawing-categories"]}
         fetchFn={() => masterDataService.getSubTypes(1)} // Default contract ID 1
-        createFn={(data) => masterDataService.createSubType({ ...data, contractId: 1 })}
-        updateFn={(id, data) => Promise.reject("Not implemented yet")}
-        deleteFn={(id) => Promise.reject("Not implemented yet")} // Delete might be restricted
+        createFn={(data) => masterDataService.createSubType({ ...data, contractId: 1, correspondenceTypeId: 3 })} // Assuming 3 is Drawings, hardcoded for now to prevent error
+        updateFn={() => Promise.reject("Not implemented yet")}
+        deleteFn={() => Promise.reject("Not implemented yet")} // Delete might be restricted
         columns={columns}
         fields={[
-          { name: "type_code", label: "Code", type: "text", required: true },
-          { name: "type_name", label: "Name", type: "text", required: true },
-          { name: "classification", label: "Classification", type: "text" },
+          { name: "subTypeCode", label: "Code", type: "text", required: true },
+          { name: "subTypeName", label: "Name", type: "text", required: true },
+          { name: "subTypeNumber", label: "Running Code", type: "text" },
         ]}
       />
     </div>

frontend/app/(admin)/admin/reference/page.tsx

@@ -27,6 +27,12 @@ const refMenu = [
     href: "/admin/reference/tags",
     icon: Tag,
   },
+  {
+    title: "Drawing Categories",
+    description: "Manage drawing sub-types and classifications",
+    href: "/admin/reference/drawing-categories",
+    icon: Layers,
+  },
 ];
 
 export default function ReferenceDataPage() {

frontend/app/(admin)/admin/users/page.tsx

@@ -24,6 +24,19 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+
+import { Organization } from "@/types/organization";
 
 export default function UsersPage() {
   const [search, setSearch] = useState("");
@@ -40,6 +53,27 @@ export default function UsersPage() {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
 
+  // Stats for Delete Dialog
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [userToDelete, setUserToDelete] = useState<User | null>(null);
+
+  const handleDeleteClick = (user: User) => {
+    setUserToDelete(user);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = () => {
+    if (userToDelete) {
+      deleteMutation.mutate(userToDelete.userId, {
+        onSuccess: () => {
+            setDeleteDialogOpen(false);
+            setUserToDelete(null);
+        },
+      });
+    }
+  };
+
+
   const columns: ColumnDef<User>[] = [
     {
       accessorKey: "username",
@@ -59,12 +93,8 @@ export default function UsersPage() {
       id: "organization",
       header: "Organization",
       cell: ({ row }) => {
-        // Need to find org in list if not populated or if only ID exists
-        // Assuming backend populates organization object or we map it from ID
-        // Currently User type has organization?
-        // Let's rely on finding it from the master data if missing
         const orgId = row.original.primaryOrganizationId;
-        const org = organizations.find((o: any) => o.id === orgId);
+        const org = (organizations as Organization[]).find((o) => o.id === orgId);
         return org ? org.organizationCode : "-";
       },
     },
@@ -73,7 +103,6 @@ export default function UsersPage() {
       header: "Roles",
       cell: ({ row }) => {
         const roles = row.original.roles || [];
-        // If roles is empty, it might be lazy loaded or just assignments
         return (
           <div className="flex flex-wrap gap-1">
             {roles.map((r) => (
@@ -112,10 +141,8 @@ export default function UsersPage() {
                 <Pencil className="mr-2 h-4 w-4" /> Edit
               </DropdownMenuItem>
               <DropdownMenuItem
-                className="text-red-600"
-                onClick={() => {
-                  if (confirm("Are you sure?")) deleteMutation.mutate(user.userId);
-                }}
+                className="text-red-600 focus:text-red-600"
+                onClick={() => handleDeleteClick(user)}
               >
                 <Trash className="mr-2 h-4 w-4" /> Delete
               </DropdownMenuItem>
@@ -158,7 +185,7 @@ export default function UsersPage() {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All Organizations</SelectItem>
-                {Array.isArray(organizations) && organizations.map((org: any) => (
+                {Array.isArray(organizations) && (organizations as Organization[]).map((org) => (
                   <SelectItem key={org.id} value={org.id.toString()}>
                     {org.organizationCode} - {org.organizationName}
                   </SelectItem>
@@ -169,7 +196,13 @@ export default function UsersPage() {
       </div>
 
       {isLoading ? (
-          <div className="text-center py-10">Loading users...</div>
+          <div className="space-y-2">
+            {[1, 2, 3, 4, 5].map((i) => (
+              <div key={i} className="flex items-center space-x-4">
+                <Skeleton className="h-12 w-full" />
+              </div>
+            ))}
+          </div>
       ) : (
           <DataTable columns={columns} data={users || []} />
       )}
@@ -179,6 +212,28 @@ export default function UsersPage() {
          onOpenChange={setDialogOpen}
          user={selectedUser}
       />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete the user
+              <span className="font-semibold text-foreground"> {userToDelete?.username} </span>
+              and remove them from the system.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+                onClick={confirmDelete}
+                className="bg-red-600 hover:bg-red-700"
+            >
+                {deleteMutation.isPending ? "Deleting..." : "Delete User"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }