260322:1648 Correct Coresspondence / Doing RFA / Correct CI

frontend/app/(admin)/admin/access-control/organizations/page.tsx

@@ -1,24 +1,21 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/common/data-table";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import {
-  useOrganizations,
-  useDeleteOrganization,
-} from "@/hooks/use-master-data";
-import { ColumnDef } from "@tanstack/react-table";
-import { Pencil, Trash, Plus, Search, MoreHorizontal } from "lucide-react";
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { DataTable } from '@/components/common/data-table';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { useOrganizations, useDeleteOrganization } from '@/hooks/use-master-data';
+import { ColumnDef } from '@tanstack/react-table';
+import { Pencil, Trash, Plus, Search, MoreHorizontal } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Organization } from "@/types/organization";
-import { OrganizationDialog } from "@/components/admin/organization-dialog";
+} from '@/components/ui/dropdown-menu';
+import { Organization } from '@/types/organization';
+import { OrganizationDialog } from '@/components/admin/organization-dialog';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -28,20 +25,20 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Skeleton } from "@/components/ui/skeleton";
+} from '@/components/ui/alert-dialog';
+import { Skeleton } from '@/components/ui/skeleton';
 
 // Organization role types for display
 const ORGANIZATION_ROLES = [
-  { value: "1", label: "Owner" },
-  { value: "2", label: "Designer" },
-  { value: "3", label: "Consultant" },
-  { value: "4", label: "Contractor" },
-  { value: "5", label: "Third Party" },
+  { value: '1', label: 'Owner' },
+  { value: '2', label: 'Designer' },
+  { value: '3', label: 'Consultant' },
+  { value: '4', label: 'Contractor' },
+  { value: '5', label: 'Third Party' },
 ] as const;
 
 export default function OrganizationsPage() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   const { data: organizations, isLoading } = useOrganizations({
     search: search || undefined,
   });
@@ -49,8 +46,7 @@ export default function OrganizationsPage() {
   const deleteOrg = useDeleteOrganization();
 
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [selectedOrganization, setSelectedOrganization] =
-    useState<Organization | null>(null);
+  const [selectedOrganization, setSelectedOrganization] = useState<Organization | null>(null);
 
   // Stats for Delete Dialog
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -74,44 +70,40 @@ export default function OrganizationsPage() {
 
   const columns: ColumnDef<Organization>[] = [
     {
-      accessorKey: "organizationCode",
-      header: "Code",
-      cell: ({ row }) => (
-        <span className="font-medium">{row.original.organizationCode}</span>
-      ),
+      accessorKey: 'organizationCode',
+      header: 'Code',
+      cell: ({ row }) => <span className="font-medium">{row.original.organizationCode}</span>,
     },
-    { accessorKey: "organizationName", header: "Name" },
+    { accessorKey: 'organizationName', header: 'Name' },
     {
-      accessorKey: "roleId",
-      header: "Role",
+      accessorKey: 'roleId',
+      header: 'Role',
       cell: ({ row }) => {
-        const roleId = row.getValue("roleId") as number;
-        const role = ORGANIZATION_ROLES.find(
-          (r) => r.value === roleId?.toString()
-        );
-        return role ? role.label : "-";
+        const roleId = row.getValue('roleId') as number;
+        const role = ORGANIZATION_ROLES.find((r) => r.value === roleId?.toString());
+        return role ? role.label : '-';
       },
     },
     {
-      accessorKey: "isActive",
-      header: "Status",
+      accessorKey: 'isActive',
+      header: 'Status',
       cell: ({ row }) => (
-        <Badge variant={row.original.isActive ? "default" : "destructive"}>
-          {row.original.isActive ? "Active" : "Inactive"}
+        <Badge variant={row.original.isActive ? 'default' : 'destructive'}>
+          {row.original.isActive ? 'Active' : 'Inactive'}
         </Badge>
       ),
     },
     {
-      accessorKey: "createdAt",
-      header: "Created At",
+      accessorKey: 'createdAt',
+      header: 'Created At',
       cell: ({ row }) => {
-        if (!row.original.createdAt) return "-";
-        return new Date(row.original.createdAt).toLocaleDateString("en-GB");
+        if (!row.original.createdAt) return '-';
+        return new Date(row.original.createdAt).toLocaleDateString('en-GB');
       },
     },
     {
-      id: "actions",
-      header: "Actions",
+      id: 'actions',
+      header: 'Actions',
       cell: ({ row }) => {
         const org = row.original;
         return (
@@ -131,10 +123,7 @@ export default function OrganizationsPage() {
               >
                 <Pencil className="mr-2 h-4 w-4" /> Edit
               </DropdownMenuItem>
-              <DropdownMenuItem
-                className="text-red-600 focus:text-red-600"
-                onClick={() => handleDeleteClick(org)}
-              >
+              <DropdownMenuItem className="text-red-600 focus:text-red-600" onClick={() => handleDeleteClick(org)}>
                 <Trash className="mr-2 h-4 w-4" /> Delete
               </DropdownMenuItem>
             </DropdownMenuContent>
@@ -149,9 +138,7 @@ export default function OrganizationsPage() {
       <div className="flex justify-between items-center">
         <div>
           <h1 className="text-3xl font-bold">Organizations</h1>
-          <p className="text-muted-foreground mt-1">
-            Manage project organizations system-wide
-          </p>
+          <p className="text-muted-foreground mt-1">Manage project organizations system-wide</p>
         </div>
         <Button
           onClick={() => {
@@ -176,22 +163,18 @@ export default function OrganizationsPage() {
       </div>
 
       {isLoading ? (
-          <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>
+        <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 || []} />
       )}
 
-      <OrganizationDialog
-        open={dialogOpen}
-        onOpenChange={setDialogOpen}
-        organization={selectedOrganization}
-      />
+      <OrganizationDialog open={dialogOpen} onOpenChange={setDialogOpen} organization={selectedOrganization} />
 
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <AlertDialogContent>
@@ -205,11 +188,8 @@ export default function OrganizationsPage() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-                onClick={confirmDelete}
-                className="bg-red-600 hover:bg-red-700"
-            >
-                {deleteOrg.isPending ? "Deleting..." : "Delete Organization"}
+            <AlertDialogAction onClick={confirmDelete} className="bg-red-600 hover:bg-red-700">
+              {deleteOrg.isPending ? 'Deleting...' : 'Delete Organization'}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

frontend/app/(admin)/admin/access-control/roles/page.tsx

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { RbacMatrix } from "@/components/admin/security/rbac-matrix";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { RbacMatrix } from '@/components/admin/security/rbac-matrix';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function RolesPage() {
   return (
@@ -9,9 +9,7 @@ export default function RolesPage() {
       <div className="flex justify-between items-center">
         <div>
           <h1 className="text-2xl font-bold">Roles & Permissions</h1>
-          <p className="text-muted-foreground">
-            Manage system roles and their assigned permissions
-          </p>
+          <p className="text-muted-foreground">Manage system roles and their assigned permissions</p>
         </div>
       </div>
 

frontend/app/(admin)/admin/access-control/users/page.tsx

@@ -1,29 +1,23 @@
-"use client";
+'use client';
 
-import { useUsers, useDeleteUser } from "@/hooks/use-users";
-import { useOrganizations } from "@/hooks/use-master-data";
-import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/common/data-table";
-import { Plus, MoreHorizontal, Pencil, Trash, Search } from "lucide-react";
-import { useState } from "react";
-import { UserDialog } from "@/components/admin/user-dialog";
+import { useUsers, useDeleteUser } from '@/hooks/use-users';
+import { useOrganizations } from '@/hooks/use-master-data';
+import { Button } from '@/components/ui/button';
+import { DataTable } from '@/components/common/data-table';
+import { Plus, MoreHorizontal, Pencil, Trash, Search } from 'lucide-react';
+import { useState } from 'react';
+import { UserDialog } from '@/components/admin/user-dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Badge } from "@/components/ui/badge";
-import { ColumnDef } from "@tanstack/react-table";
-import { User } from "@/types/user";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+} from '@/components/ui/dropdown-menu';
+import { Badge } from '@/components/ui/badge';
+import { ColumnDef } from '@tanstack/react-table';
+import { User } from '@/types/user';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -33,17 +27,22 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Skeleton } from "@/components/ui/skeleton";
+} from '@/components/ui/alert-dialog';
+import { Skeleton } from '@/components/ui/skeleton';
 
-import { Organization } from "@/types/organization";
-import { getApiErrorMessage } from "@/types/api-error";
+import { _Organization } from '@/types/organization';
+import { getApiErrorMessage } from '@/types/api-error';
 
 export default function UsersPage() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);
 
-  const { data: users, isLoading, isError, error } = useUsers({
+  const {
+    data: users,
+    isLoading,
+    isError,
+    error,
+  } = useUsers({
     search: search || undefined,
     primaryOrganizationId: selectedOrgId ?? undefined,
   });
@@ -69,45 +68,46 @@ export default function UsersPage() {
     if (userToDelete) {
       deleteMutation.mutate(userToDelete.uuid, {
         onSuccess: () => {
-            setDeleteDialogOpen(false);
-            setUserToDelete(null);
+          setDeleteDialogOpen(false);
+          setUserToDelete(null);
         },
       });
     }
   };
 
-
   const columns: ColumnDef<User>[] = [
     {
-      accessorKey: "username",
-      header: "Username",
-      cell: ({ row }) => <span className="font-semibold">{row.original.username}</span>
+      accessorKey: 'username',
+      header: 'Username',
+      cell: ({ row }) => <span className="font-semibold">{row.original.username}</span>,
     },
     {
-      accessorKey: "email",
-      header: "Email",
+      accessorKey: 'email',
+      header: 'Email',
     },
     {
-      id: "name",
-      header: "Name",
+      id: 'name',
+      header: 'Name',
       cell: ({ row }) => `${row.original.firstName} ${row.original.lastName}`,
     },
     {
-      id: "organization",
-      header: "Organization",
+      id: 'organization',
+      header: 'Organization',
       cell: ({ row }) => {
         const orgId = row.original.primaryOrganizationId;
         if (!orgId) {
-          return "All Organizations";
+          return 'All Organizations';
         }
 
-        const org = organizationList.find((o) => (o.id ?? o.uuid) === orgId?.toString() || o.uuid === orgId?.toString());
-        return org ? org.organizationCode : "All Organizations";
+        const org = organizationList.find(
+          (o) => (o.id ?? o.uuid) === orgId?.toString() || o.uuid === orgId?.toString()
+        );
+        return org ? org.organizationCode : 'All Organizations';
       },
     },
     {
-      id: "roles",
-      header: "Roles",
+      id: 'roles',
+      header: 'Roles',
       cell: ({ row }) => {
         const roles = row.original.roles || [];
         return (
@@ -119,20 +119,20 @@ export default function UsersPage() {
             ))}
           </div>
         );
-      }
+      },
     },
     {
-      accessorKey: "isActive",
-      header: "Status",
+      accessorKey: 'isActive',
+      header: 'Status',
       cell: ({ row }) => (
-        <Badge variant={row.original.isActive ? "default" : "secondary"}>
-          {row.original.isActive ? "Active" : "Inactive"}
+        <Badge variant={row.original.isActive ? 'default' : 'secondary'}>
+          {row.original.isActive ? 'Active' : 'Inactive'}
         </Badge>
       ),
     },
     {
-      id: "actions",
-      header: "Actions",
+      id: 'actions',
+      header: 'Actions',
       cell: ({ row }) => {
         const user = row.original;
         return (
@@ -144,20 +144,22 @@ export default function UsersPage() {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => { setSelectedUser(user); setDialogOpen(true); }}>
+              <DropdownMenuItem
+                onClick={() => {
+                  setSelectedUser(user);
+                  setDialogOpen(true);
+                }}
+              >
                 <Pencil className="mr-2 h-4 w-4" /> Edit
               </DropdownMenuItem>
-              <DropdownMenuItem
-                className="text-red-600 focus:text-red-600"
-                onClick={() => handleDeleteClick(user)}
-              >
+              <DropdownMenuItem className="text-red-600 focus:text-red-600" onClick={() => handleDeleteClick(user)}>
                 <Trash className="mr-2 h-4 w-4" /> Delete
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-        )
-      }
-    }
+        );
+      },
+    },
   ];
 
   return (
@@ -167,64 +169,62 @@ export default function UsersPage() {
           <h1 className="text-3xl font-bold">User Management</h1>
           <p className="text-muted-foreground mt-1">Manage system users and roles</p>
         </div>
-        <Button onClick={() => { setSelectedUser(null); setDialogOpen(true); }}>
+        <Button
+          onClick={() => {
+            setSelectedUser(null);
+            setDialogOpen(true);
+          }}
+        >
           <Plus className="mr-2 h-4 w-4" /> Add User
         </Button>
       </div>
 
       <div className="flex gap-4 items-center bg-muted/30 p-4 rounded-lg">
-         <div className="relative flex-1 max-w-sm">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              placeholder="Search users..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              className="pl-8 bg-background"
-            />
-         </div>
-         <div className="w-[250px]">
-            <Select
-              value={selectedOrgId || "all"}
-              onValueChange={(val) => setSelectedOrgId(val === "all" ? null : val)}
-            >
-              <SelectTrigger className="bg-background">
-                <SelectValue placeholder="All Organizations" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All Organizations</SelectItem>
-                {organizationList.map((org) => (
-                  <SelectItem key={org.uuid} value={org.uuid}>
-                    {org.organizationCode} - {org.organizationName}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-         </div>
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search users..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-8 bg-background"
+          />
+        </div>
+        <div className="w-[250px]">
+          <Select value={selectedOrgId || 'all'} onValueChange={(val) => setSelectedOrgId(val === 'all' ? null : val)}>
+            <SelectTrigger className="bg-background">
+              <SelectValue placeholder="All Organizations" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Organizations</SelectItem>
+              {organizationList.map((org) => (
+                <SelectItem key={org.uuid} value={org.uuid}>
+                  {org.organizationCode} - {org.organizationName}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
       </div>
 
       {isError && (
         <div className="rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
-          {getApiErrorMessage(error, "Failed to load users")}
+          {getApiErrorMessage(error, 'Failed to load users')}
         </div>
       )}
 
       {isLoading ? (
-          <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>
+        <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={userList} />
+        <DataTable columns={columns} data={userList} />
       )}
 
-      <UserDialog
-         open={dialogOpen}
-         onOpenChange={setDialogOpen}
-         user={selectedUser}
-      />
+      <UserDialog open={dialogOpen} onOpenChange={setDialogOpen} user={selectedUser} />
 
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <AlertDialogContent>
@@ -238,11 +238,8 @@ export default function UsersPage() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-                onClick={confirmDelete}
-                className="bg-red-600 hover:bg-red-700"
-            >
-                {deleteMutation.isPending ? "Deleting..." : "Delete User"}
+            <AlertDialogAction onClick={confirmDelete} className="bg-red-600 hover:bg-red-700">
+              {deleteMutation.isPending ? 'Deleting...' : 'Delete User'}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>