251211:1622 Frontend: refactor Dashboard (not finish)

2025-12-11 16:22:50 +07:00
parent 3fa28bd14f
commit 2473c4c474
32 changed files with 1115 additions and 260 deletions
--- a/frontend/app/(admin)/admin/contracts/page.tsx
+++ b/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>
  );
 }
--- a/frontend/app/(admin)/admin/organizations/page.tsx
+++ b/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>
  );
 }
--- a/frontend/app/(admin)/admin/page.tsx
+++ b/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>
+  );
 }
--- a/frontend/app/(admin)/admin/projects/page.tsx
+++ b/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>
  );
 }
--- a/frontend/app/(admin)/admin/reference/drawing-categories/page.tsx
+++ b/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>
--- a/frontend/app/(admin)/admin/reference/page.tsx
+++ b/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() {
--- a/frontend/app/(admin)/admin/users/page.tsx
+++ b/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>
  );
 }
--- a/frontend/app/(dashboard)/correspondences/[id]/edit/page.tsx
+++ b/frontend/app/(dashboard)/correspondences/[id]/edit/page.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { CorrespondenceForm } from "@/components/correspondences/form";
+import { useCorrespondence } from "@/hooks/use-correspondence";
+import { Loader2 } from "lucide-react";
+import { useParams } from "next/navigation";
+
+export default function EditCorrespondencePage() {
+  const params = useParams();
+  const id = Number(params?.id);
+
+  const { data: correspondence, isLoading, isError } = useCorrespondence(id);
+
+  if (isLoading) {
+    return (
+       <div className="flex bg-muted/20 min-h-screen justify-center items-center">
+          <Loader2 className="h-8 w-8 animate-spin" />
+       </div>
+    );
+  }
+
+  if (isError || !correspondence) {
+    return (
+       <div className="flex flex-col items-center justify-center min-h-screen">
+          <h1 className="text-xl font-bold text-red-500">Failed to load correspondence</h1>
+       </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto py-6">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Edit Correspondence</h1>
+        <p className="text-muted-foreground mt-1">
+          {correspondence.correspondenceNumber}
+        </p>
+      </div>
+
+      <div className="bg-card border rounded-lg p-6 shadow-sm">
+        <CorrespondenceForm initialData={correspondence} id={id} />
+      </div>
+    </div>
+  );
+}
--- a/frontend/app/(dashboard)/correspondences/[id]/page.tsx
+++ b/frontend/app/(dashboard)/correspondences/[id]/page.tsx
@@ -1,23 +1,45 @@
-import { correspondenceApi } from "@/lib/api/correspondences";
+"use client";
+
 import { CorrespondenceDetail } from "@/components/correspondences/detail";
-import { notFound } from "next/navigation";
+import { useCorrespondence } from "@/hooks/use-correspondence";
+import { Loader2 } from "lucide-react";
+import { notFound, useParams } from "next/navigation";

-export const dynamic = "force-dynamic";
+export default function CorrespondenceDetailPage() {
+  const params = useParams();
+  const id = Number(params?.id); // useParams returns string | string[]

-export default async function CorrespondenceDetailPage({
-  params,
-}: {
-  params: { id: string };
-}) {
-  const id = parseInt(params.id);
  if (isNaN(id)) {
-    notFound();
+    // We can't use notFound() directly in client component render without breaking sometimes,
+    // but typically it works. Better to handle gracefully or redirect.
+    // For now, let's keep it or return 404 UI.
+    // Actually notFound() is for server components mostly.
+    // Let's just return our error UI if ID is invalid.
+    return (
+       <div className="flex flex-col items-center justify-center min-h-screen">
+          <h1 className="text-xl font-bold text-red-500">Invalid Correspondence ID</h1>
+       </div>
+    );
  }

-  const correspondence = await correspondenceApi.getById(id);
+  const { data: correspondence, isLoading, isError } = useCorrespondence(id);

-  if (!correspondence) {
-    notFound();
+  if (isLoading) {
+    return (
+       <div className="flex bg-muted/20 min-h-screen justify-center items-center">
+          <Loader2 className="h-8 w-8 animate-spin" />
+       </div>
+    );
+  }
+
+  if (isError || !correspondence) {
+    // Optionally handle 404 vs other errors differently, but for now simple handling
+    return (
+       <div className="flex flex-col items-center justify-center min-h-screen">
+          <h1 className="text-xl font-bold text-red-500">Failed to load correspondence</h1>
+          <p>Please try again later or verify the ID.</p>
+       </div>
+    );
  }

  return <CorrespondenceDetail data={correspondence} />;
--- a/frontend/app/(dashboard)/rfas/page.tsx
+++ b/frontend/app/(dashboard)/rfas/page.tsx
@@ -16,11 +16,30 @@ function RFAsContent() {
  const search = searchParams.get('search') || undefined;
  const projectId = searchParams.get('projectId') ? parseInt(searchParams.get('projectId')!) : undefined;

-  const { data, isLoading, isError } = useRFAs({ page, statusId, search, projectId });
+  const revisionStatus = (searchParams.get('revisionStatus') as 'CURRENT' | 'ALL' | 'OLD') || 'CURRENT';
+
+  const { data, isLoading, isError } = useRFAs({ page, statusId, search, projectId, revisionStatus });
+
+

  return (
    <>
-      {/* RFAFilters component could be added here if needed */}
+      <div className="mb-4 flex gap-2">
+        {/* Simple Filter Buttons using standard Buttons for now, or use a Select if imported */}
+        <div className="flex gap-1 bg-muted p-1 rounded-md">
+           {['ALL', 'CURRENT', 'OLD'].map((status) => (
+             <Link key={status} href={`?${new URLSearchParams({...Object.fromEntries(searchParams.entries()), revisionStatus: status, page: '1'}).toString()}`}>
+               <Button
+                 variant={revisionStatus === status ? 'default' : 'ghost'}
+                 size="sm"
+                 className="text-xs px-3"
+               >
+                 {status === 'CURRENT' ? 'Latest' : status === 'OLD' ? 'Previous' : 'All'}
+               </Button>
+             </Link>
+           ))}
+        </div>
+      </div>

      {isLoading ? (
        <div className="flex justify-center py-8">
@@ -32,12 +51,12 @@ function RFAsContent() {
        </div>
      ) : (
        <>
-          <RFAList data={data} />
+          <RFAList data={data?.data || []} />
           <div className="mt-4">
            <Pagination
-              currentPage={data?.page || 1}
-              totalPages={data?.lastPage || data?.totalPages || 1}
-              total={data?.total || 0}
+              currentPage={data?.meta?.page || 1}
+              totalPages={data?.meta?.totalPages || 1}
+              total={data?.meta?.total || 0}
            />
          </div>
        </>
--- a/frontend/components/admin/reference/generic-crud-table.tsx
+++ b/frontend/components/admin/reference/generic-crud-table.tsx
@@ -25,6 +25,17 @@ import {
 import { Plus, Pencil, Trash2, RefreshCw } from "lucide-react";
 import { toast } from "sonner";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Skeleton } from "@/components/ui/skeleton";

 interface FieldConfig {
  name: string;
@@ -66,6 +77,10 @@ export function GenericCrudTable({
  const [editingItem, setEditingItem] = useState<any>(null);
  const [formData, setFormData] = useState<any>({});

+  // Delete Dialog State
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [itemToDelete, setItemToDelete] = useState<number | null>(null);
+
  const { data, isLoading, refetch } = useQuery({
    queryKey,
    queryFn: fetchFn,
@@ -96,6 +111,8 @@ export function GenericCrudTable({
    onSuccess: () => {
      toast.success(`${entityName} deleted successfully`);
      queryClient.invalidateQueries({ queryKey });
+      setDeleteDialogOpen(false);
+      setItemToDelete(null);
    },
    onError: () => toast.error(`Failed to delete ${entityName}`),
  });
@@ -112,9 +129,14 @@ export function GenericCrudTable({
    setIsOpen(true);
  };

-  const handleDelete = (id: number) => {
-    if (confirm(`Are you sure you want to delete this ${entityName}?`)) {
-      deleteMutation.mutate(id);
+  const handleDeleteClick = (id: number) => {
+    setItemToDelete(id);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = () => {
+    if (itemToDelete) {
+      deleteMutation.mutate(itemToDelete);
    }
  };

@@ -156,7 +178,7 @@ export function GenericCrudTable({
            variant="ghost"
            size="icon"
            className="text-destructive"
-            onClick={() => handleDelete(row.original.id)}
+            onClick={() => handleDeleteClick(row.original.id)}
          >
            <Trash2 className="h-4 w-4" />
          </Button>
@@ -191,7 +213,17 @@ export function GenericCrudTable({
        </div>
      </div>

-      <DataTable columns={tableColumns} data={data || []} />
+      {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>
+      ) : (
+          <DataTable columns={tableColumns} data={data || []} />
+      )}

      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent>
@@ -270,6 +302,26 @@ export function GenericCrudTable({
          </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 {entityName.toLowerCase()} and remove it from the system.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+                onClick={confirmDelete}
+                className="bg-red-600 hover:bg-red-700"
+            >
+                {deleteMutation.isPending ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
    </div>
  );
 }
--- a/frontend/components/correspondences/correspondences-content.tsx
+++ b/frontend/components/correspondences/correspondences-content.tsx
@@ -5,6 +5,8 @@ import { Pagination } from "@/components/common/pagination";
 import { useCorrespondences } from "@/hooks/use-correspondence";
 import { useSearchParams } from "next/navigation";
 import { Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";

 export function CorrespondencesContent() {
  const searchParams = useSearchParams();
@@ -12,10 +14,13 @@ export function CorrespondencesContent() {
  const status = searchParams.get("status") || undefined;
  const search = searchParams.get("search") || undefined;

+  const revisionStatus = (searchParams.get('revisionStatus') as 'CURRENT' | 'ALL' | 'OLD') || 'CURRENT';
+
  const { data, isLoading, isError } = useCorrespondences({
    page,
    status,
    search,
+    revisionStatus,
  } as any);

  if (isLoading) {
@@ -36,12 +41,27 @@ export function CorrespondencesContent() {

  return (
    <>
-      <CorrespondenceList data={data} />
+      <div className="mb-4 flex gap-2">
+         <div className="flex gap-1 bg-muted p-1 rounded-md">
+           {['ALL', 'CURRENT', 'OLD'].map((status) => (
+             <Link key={status} href={`?${new URLSearchParams({...Object.fromEntries(searchParams.entries()), revisionStatus: status, page: '1'}).toString()}`}>
+               <Button
+                 variant={revisionStatus === status ? 'default' : 'ghost'}
+                 size="sm"
+                 className="text-xs px-3"
+               >
+                 {status === 'CURRENT' ? 'Latest' : status === 'OLD' ? 'Previous' : 'All'}
+               </Button>
+             </Link>
+           ))}
+        </div>
+      </div>
+      <CorrespondenceList data={data?.data || []} />
      <div className="mt-4">
        <Pagination
-          currentPage={data?.page || 1}
-          totalPages={data?.totalPages || 1}
-          total={data?.total || 0}
+          currentPage={data?.meta?.page || 1}
+          totalPages={data?.meta?.totalPages || 1}
+          total={data?.meta?.total || 0}
        />
      </div>
    </>
--- a/frontend/components/correspondences/detail.tsx
+++ b/frontend/components/correspondences/detail.tsx
@@ -1,11 +1,11 @@
 "use client";

-import { Correspondence, Attachment } from "@/types/correspondence";
+import { Correspondence } from "@/types/correspondence";
 import { StatusBadge } from "@/components/common/status-badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { format } from "date-fns";
-import { ArrowLeft, Download, FileText, Loader2, Send, CheckCircle, XCircle } from "lucide-react";
+import { ArrowLeft, Download, FileText, Loader2, Send, CheckCircle, XCircle, Edit } from "lucide-react";
 import Link from "next/link";
 import { useSubmitCorrespondence, useProcessWorkflow } from "@/hooks/use-correspondence";
 import { useState } from "react";
@@ -22,11 +22,24 @@ export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {
  const [actionState, setActionState] = useState<"approve" | "reject" | null>(null);
  const [comments, setComments] = useState("");

+  if (!data) return <div>No data found</div>;
+
+  console.log("Correspondence Detail Data:", data);
+
+  // Derive Current Revision Data
+  const currentRevision = data.revisions?.find(r => r.isCurrent) || data.revisions?.[0];
+  const subject = currentRevision?.title || "-";
+  const description = currentRevision?.description || "-";
+  const status = currentRevision?.status?.statusCode || "UNKNOWN"; // e.g. DRAFT
+  const attachments = currentRevision?.attachments || [];
+
+  // Note: Importance might be in details
+  const importance = currentRevision?.details?.importance || "NORMAL";
+
  const handleSubmit = () => {
    if (confirm("Are you sure you want to submit this correspondence?")) {
-      // TODO: Implement Template Selection. Hardcoded to 1 for now.
      submitMutation.mutate({
-        id: data.correspondenceId,
+        id: data.id,
        data: {}
      });
    }
@@ -37,7 +50,7 @@ export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {

    const action = actionState === "approve" ? "APPROVE" : "REJECT";
    processMutation.mutate({
-      id: data.correspondenceId,
+      id: data.id,
      data: {
        action,
        comments
@@ -61,20 +74,30 @@ export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {
            </Button>
          </Link>
          <div>
-            <h1 className="text-2xl font-bold">{data.documentNumber}</h1>
+            <h1 className="text-2xl font-bold">{data.correspondenceNumber}</h1>
            <p className="text-muted-foreground">
-              Created on {format(new Date(data.createdAt), "dd MMM yyyy HH:mm")}
+              Created on {data.createdAt ? format(new Date(data.createdAt), "dd MMM yyyy HH:mm") : '-'}
            </p>
          </div>
        </div>
        <div className="flex gap-2">
-          {data.status === "DRAFT" && (
+           {/* EDIT BUTTON LOGIC: Show if DRAFT */}
+          {status === "DRAFT" && (
+             <Link href={`/correspondences/${data.id}/edit`}>
+                <Button variant="outline">
+                  <Edit className="mr-2 h-4 w-4" />
+                  Edit
+                </Button>
+             </Link>
+          )}
+
+          {status === "DRAFT" && (
            <Button onClick={handleSubmit} disabled={submitMutation.isPending}>
              {submitMutation.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Send className="mr-2 h-4 w-4" />}
              Submit for Review
            </Button>
          )}
-          {data.status === "IN_REVIEW" && (
+          {status === "IN_REVIEW" && (
            <>
              <Button
                variant="destructive"
@@ -134,15 +157,15 @@ export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {
          <Card>
            <CardHeader>
              <div className="flex justify-between items-start">
-                <CardTitle className="text-xl">{data.subject}</CardTitle>
-                <StatusBadge status={data.status} />
+                <CardTitle className="text-xl">{subject}</CardTitle>
+                <StatusBadge status={status} />
              </div>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <h3 className="font-semibold mb-2">Description</h3>
                <p className="text-gray-700 whitespace-pre-wrap">
-                  {data.description || "No description provided."}
+                  {description}
                </p>
              </div>

@@ -150,9 +173,9 @@ export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {

              <div>
                <h3 className="font-semibold mb-3">Attachments</h3>
-                {data.attachments && data.attachments.length > 0 ? (
+                {attachments && attachments.length > 0 ? (
                  <div className="grid gap-2">
-                    {data.attachments.map((file, index) => (
+                    {attachments.map((file, index) => (
                      <div
                        key={file.id || index}
                        className="flex items-center justify-between p-3 border rounded-lg bg-muted/20"
@@ -170,7 +193,7 @@ export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {
                    ))}
                  </div>
                ) : (
-                  <p className="text-sm text-muted-foreground italic">No attachments.</p>
+                  <p className="text-sm text-muted-foreground italic">No attachments found.</p>
                )}
              </div>
            </CardContent>
@@ -188,10 +211,10 @@ export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {
                <p className="text-sm font-medium text-muted-foreground">Importance</p>
                <div className="mt-1">
                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
-                    ${data.importance === 'URGENT' ? 'bg-red-100 text-red-800' :
-                      data.importance === 'HIGH' ? 'bg-orange-100 text-orange-800' :
+                    ${importance === 'URGENT' ? 'bg-red-100 text-red-800' :
+                      importance === 'HIGH' ? 'bg-orange-100 text-orange-800' :
                      'bg-blue-100 text-blue-800'}`}>
-                    {data.importance}
+                    {importance}
                  </span>
                </div>
              </div>
@@ -199,15 +222,15 @@ export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {
              <hr className="my-4 border-t" />

              <div>
-                <p className="text-sm font-medium text-muted-foreground">From Organization</p>
-                <p className="font-medium mt-1">{data.fromOrganization?.orgName}</p>
-                <p className="text-xs text-muted-foreground">{data.fromOrganization?.orgCode}</p>
+                <p className="text-sm font-medium text-muted-foreground">Originator</p>
+                <p className="font-medium mt-1">{data.originator?.orgName || '-'}</p>
+                <p className="text-xs text-muted-foreground">{data.originator?.orgCode || '-'}</p>
              </div>

-              <div>
-                <p className="text-sm font-medium text-muted-foreground">To Organization</p>
-                <p className="font-medium mt-1">{data.toOrganization?.orgName}</p>
-                <p className="text-xs text-muted-foreground">{data.toOrganization?.orgCode}</p>
+               <div>
+                <p className="text-sm font-medium text-muted-foreground">Project</p>
+                <p className="font-medium mt-1">{data.project?.projectName || '-'}</p>
+                <p className="text-xs text-muted-foreground">{data.project?.projectCode || '-'}</p>
              </div>
            </CardContent>
          </Card>
--- a/frontend/components/correspondences/form.tsx
+++ b/frontend/components/correspondences/form.tsx
@@ -17,7 +17,7 @@ import {
 import { FileUpload } from "@/components/common/file-upload";
 import { useRouter } from "next/navigation";
 import { Loader2 } from "lucide-react";
-import { useCreateCorrespondence } from "@/hooks/use-correspondence";
+import { useCreateCorrespondence, useUpdateCorrespondence } from "@/hooks/use-correspondence";
 import { Organization } from "@/types/organization";
 import { useOrganizations } from "@/hooks/use-master-data";
 import { CreateCorrespondenceDto } from "@/types/dto/correspondence/create-correspondence.dto";
@@ -34,50 +34,66 @@ const correspondenceSchema = z.object({

 type FormData = z.infer<typeof correspondenceSchema>;

-export function CorrespondenceForm() {
+export function CorrespondenceForm({ initialData, id }: { initialData?: any, id?: number }) {
  const router = useRouter();
  const createMutation = useCreateCorrespondence();
+  const updateMutation = useUpdateCorrespondence(); // Add this hook
  const { data: organizations, isLoading: isLoadingOrgs } = useOrganizations();

+  // Extract initial values if editing
+  const currentRev = initialData?.revisions?.find((r: any) => r.isCurrent) || initialData?.revisions?.[0];
+  const defaultValues: Partial<FormData> = {
+    subject: currentRev?.title || "",
+    description: currentRev?.description || "",
+    documentTypeId: initialData?.correspondenceTypeId || 1,
+    fromOrganizationId: initialData?.originatorId || undefined,
+    toOrganizationId: currentRev?.details?.to_organization_id || undefined,
+    importance: currentRev?.details?.importance || "NORMAL",
+  };
+
  const {
    register,
    handleSubmit,
    setValue,
+    watch, // Watch values to control Select value props if needed, or rely on RHF
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(correspondenceSchema),
-    defaultValues: {
-      importance: "NORMAL",
-      documentTypeId: 1,
-    } as any, // Cast to any to handle partial defaults for required fields
+    defaultValues: defaultValues as any,
  });

+  // Watch for controlled inputs to set value in Select components if needed for better UX
+  const fromOrgId = watch("fromOrganizationId");
+  const toOrgId = watch("toOrganizationId");
+
  const onSubmit = (data: FormData) => {
-    // Map FormData to CreateCorrespondenceDto
-    // Note: projectId is hardcoded to 1 for now as per requirements/context
    const payload: CreateCorrespondenceDto = {
      projectId: 1,
      typeId: data.documentTypeId,
      title: data.subject,
      description: data.description,
-      originatorId: data.fromOrganizationId, // Mapping From -> Originator (Impersonation)
+      originatorId: data.fromOrganizationId,
      details: {
        to_organization_id: data.toOrganizationId,
        importance: data.importance
      },
-      // create-correspondence DTO does not have 'attachments' field at root usually, often handled separate or via multipart
-      // If useCreateCorrespondence handles multipart, we might need to pass FormData object or specific structure
-      // For now, aligning with DTO interface.
    };

-    // If the hook expects the DTO directly:
-    createMutation.mutate(payload, {
-      onSuccess: () => {
-        router.push("/correspondences");
-      },
-    });
+    if (id && initialData) {
+       // UPDATE Mode
+       updateMutation.mutate({ id, data: payload }, {
+         onSuccess: () => router.push(`/correspondences/${id}`)
+       });
+    } else {
+       // CREATE Mode
+       createMutation.mutate(payload, {
+         onSuccess: () => router.push("/correspondences"),
+       });
+    }
  };

+  const isPending = createMutation.isPending || updateMutation.isPending;
+
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="max-w-3xl space-y-6">
      <div className="space-y-2">
@@ -103,6 +119,7 @@ export function CorrespondenceForm() {
          <Label>From Organization *</Label>
          <Select
            onValueChange={(v) => setValue("fromOrganizationId", parseInt(v))}
+            value={fromOrgId ? String(fromOrgId) : undefined}
            disabled={isLoadingOrgs}
          >
            <SelectTrigger>
@@ -125,6 +142,7 @@ export function CorrespondenceForm() {
          <Label>To Organization *</Label>
          <Select
            onValueChange={(v) => setValue("toOrganizationId", parseInt(v))}
+            value={toOrgId ? String(toOrgId) : undefined}
            disabled={isLoadingOrgs}
          >
            <SelectTrigger>
@@ -177,22 +195,24 @@ export function CorrespondenceForm() {
        </div>
      </div>

-      <div className="space-y-2">
-        <Label>Attachments</Label>
-        <FileUpload
-          onFilesSelected={(files) => setValue("attachments", files)}
-          maxFiles={10}
-          accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png"
-        />
-      </div>
+      {!initialData && (
+        <div className="space-y-2">
+          <Label>Attachments</Label>
+          <FileUpload
+            onFilesSelected={(files) => setValue("attachments", files)}
+            maxFiles={10}
+            accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png"
+          />
+        </div>
+      )}

      <div className="flex justify-end gap-4 pt-6 border-t">
        <Button type="button" variant="outline" onClick={() => router.back()}>
          Cancel
        </Button>
-        <Button type="submit" disabled={createMutation.isPending}>
-          {createMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          Create Correspondence
+        <Button type="submit" disabled={isPending}>
+          {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          {id ? "Update Correspondence" : "Create Correspondence"}
        </Button>
      </div>
    </form>
--- a/frontend/components/correspondences/list.tsx
+++ b/frontend/components/correspondences/list.tsx
@@ -1,48 +1,49 @@
 "use client";

-import { Correspondence } from "@/types/correspondence";
+import { CorrespondenceRevision } from "@/types/correspondence";
 import { DataTable } from "@/components/common/data-table";
 import { ColumnDef } from "@tanstack/react-table";
 import { StatusBadge } from "@/components/common/status-badge";
 import { Button } from "@/components/ui/button";
-import { Eye, Edit } from "lucide-react";
+import { Eye, Edit, FileText } from "lucide-react";
 import Link from "next/link";
 import { format } from "date-fns";

 interface CorrespondenceListProps {
-  data?: {
-    items: Correspondence[];
-    total: number;
-    page: number;
-    totalPages: number;
-  };
+  data: CorrespondenceRevision[];
 }

 export function CorrespondenceList({ data }: CorrespondenceListProps) {
-  const columns: ColumnDef<Correspondence>[] = [
+  const columns: ColumnDef<CorrespondenceRevision>[] = [
    {
-      accessorKey: "documentNumber",
+      accessorKey: "correspondence.correspondenceNumber",
      header: "Document No.",
      cell: ({ row }) => (
-        <span className="font-medium">{row.getValue("documentNumber")}</span>
+        <span className="font-medium">{row.original.correspondence?.correspondenceNumber}</span>
      ),
    },
    {
-      accessorKey: "subject",
+      accessorKey: "revisionLabel",
+      header: "Rev",
+      cell: ({ row }) => (
+        <span className="font-medium">{row.original.revisionLabel || row.original.revisionNumber}</span>
+      ),
+    },
+    {
+      accessorKey: "title",
      header: "Subject",
      cell: ({ row }) => (
-        <div className="max-w-[300px] truncate" title={row.getValue("subject")}>
-          {row.getValue("subject")}
+        <div className="max-w-[300px] truncate" title={row.original.title}>
+          {row.original.title}
        </div>
      ),
    },
    {
-      accessorKey: "fromOrganization.orgName",
+      accessorKey: "correspondence.originator.orgName",
      header: "From",
-    },
-    {
-      accessorKey: "toOrganization.orgName",
-      header: "To",
+      cell: ({ row }) => (
+        <span>{row.original.correspondence?.originator?.orgName || '-'}</span>
+      ),
    },
    {
      accessorKey: "createdAt",
@@ -50,23 +51,45 @@ export function CorrespondenceList({ data }: CorrespondenceListProps) {
      cell: ({ row }) => format(new Date(row.getValue("createdAt")), "dd MMM yyyy"),
    },
    {
-      accessorKey: "status",
+      accessorKey: "status.statusName",
      header: "Status",
-      cell: ({ row }) => <StatusBadge status={row.getValue("status")} />,
+      cell: ({ row }) => <StatusBadge status={row.original.status?.statusCode || "UNKNOWN"} />,
    },
    {
      id: "actions",
      cell: ({ row }) => {
        const item = row.original;
+        // Edit/View link goes to the DOCUMENT detail (correspondence.id)
+        // Ideally we might pass ?revId=item.id to view specific revision, but detail page defaults to latest.
+        // For editing, we edit the document.
+        const docId = item.correspondence.id;
+        const statusCode = item.status?.statusCode;
+
        return (
          <div className="flex gap-2">
-            <Link href={`/correspondences/${row.original.correspondenceId}`}>
-              <Button variant="ghost" size="icon" title="View">
+            <Link href={`/correspondences/${docId}`}>
+              <Button variant="ghost" size="icon" title="View Details">
                <Eye className="h-4 w-4" />
              </Button>
            </Link>
-            {item.status === "DRAFT" && (
-              <Link href={`/correspondences/${row.original.correspondenceId}/edit`}>
+             <Button variant="ghost" size="icon" title="View File" onClick={() => {
+                const attachments = item.attachments; // Now we are on Revision, so attachments might be here if joined
+                if (attachments && attachments.length > 0 && attachments[0].url) {
+                   window.open(attachments[0].url, '_blank');
+                } else {
+                   // Fallback check if attachments are on details json inside revision
+                   // or if we simply didn't join them yet.
+                   // Current Backend join: leftJoinAndSelect('rev.status', 'status') doesn't join attachments explicitly but maybe relation exists?
+                   // Wait, checking Entity... CorrespondenceRevision does NOT have attachments relation in code snippet provided earlier.
+                   // It might be in 'details' JSON or implied.
+                   // Just Alert for now as per previous logic.
+                   alert("ไม่พบไฟล์แนบ (No file attached)");
+                }
+             }}>
+                <FileText className="h-4 w-4" />
+              </Button>
+            {statusCode === "DRAFT" && (
+              <Link href={`/correspondences/${docId}/edit`}>
                <Button variant="ghost" size="icon" title="Edit">
                  <Edit className="h-4 w-4" />
                </Button>
@@ -80,8 +103,7 @@ export function CorrespondenceList({ data }: CorrespondenceListProps) {

  return (
    <div>
-      <DataTable columns={columns} data={data?.items || []} />
-      {/* Pagination component would go here, receiving props from data */}
+      <DataTable columns={columns} data={data || []} />
    </div>
  );
 }
--- a/frontend/components/dashboard/stats-cards.tsx
+++ b/frontend/components/dashboard/stats-cards.tsx
@@ -22,14 +22,14 @@ export function StatsCards({ stats, isLoading }: StatsCardsProps) {
  const cards = [
    {
      title: "Total Correspondences",
-      value: stats.correspondences,
+      value: stats.totalDocuments,
      icon: FileText,
      color: "text-blue-600",
      bgColor: "bg-blue-50",
    },
    {
      title: "Active RFAs",
-      value: stats.rfas,
+      value: stats.totalRfas,
      icon: Clipboard,
      color: "text-purple-600",
      bgColor: "bg-purple-50",
@@ -43,7 +43,7 @@ export function StatsCards({ stats, isLoading }: StatsCardsProps) {
    },
    {
      title: "Pending Approvals",
-      value: stats.pending,
+      value: stats.pendingApprovals,
      icon: Clock,
      color: "text-orange-600",
      bgColor: "bg-orange-50",
--- a/frontend/components/rfas/list.tsx
+++ b/frontend/components/rfas/list.tsx
@@ -5,17 +5,12 @@ import { DataTable } from "@/components/common/data-table";
 import { ColumnDef } from "@tanstack/react-table";
 import { StatusBadge } from "@/components/common/status-badge";
 import { Button } from "@/components/ui/button";
-import { Eye } from "lucide-react";
+import { Eye, Edit, FileText } from "lucide-react";
 import Link from "next/link";
 import { format } from "date-fns";

 interface RFAListProps {
-  data: {
-    items: RFA[];
-    total: number;
-    page: number;
-    totalPages: number;
-  };
+  data: RFA[];
 }

 export function RFAList({ data }: RFAListProps) {
@@ -25,48 +20,87 @@ export function RFAList({ data }: RFAListProps) {
    {
      accessorKey: "rfa_number",
      header: "RFA No.",
-      cell: ({ row }) => (
-        <span className="font-medium">{row.getValue("rfa_number")}</span>
-      ),
+      cell: ({ row }) => {
+        const rev = row.original.revisions?.[0];
+        return <span className="font-medium">{rev?.correspondence?.correspondenceNumber || '-'}</span>;
+      },
    },
    {
      accessorKey: "subject",
      header: "Subject",
-      cell: ({ row }) => (
-        <div className="max-w-[300px] truncate" title={row.getValue("subject")}>
-          {row.getValue("subject")}
-        </div>
-      ),
+      cell: ({ row }) => {
+        const rev = row.original.revisions?.[0];
+        return (
+          <div className="max-w-[300px] truncate" title={rev?.title}>
+            {rev?.title || '-'}
+          </div>
+        );
+      },
    },
    {
-      accessorKey: "contract_name",
+      accessorKey: "contract_name", // AccessorKey can be anything if we provide cell
      header: "Contract",
+      cell: ({ row }) => {
+        const rev = row.original.revisions?.[0];
+        return <span>{rev?.correspondence?.project?.projectName || '-'}</span>;
+      },
    },
    {
      accessorKey: "discipline_name",
      header: "Discipline",
+      cell: ({ row }) => <span>{row.original.discipline?.name || '-'}</span>,
    },
    {
      accessorKey: "createdAt",
      header: "Created",
-      cell: ({ row }) => format(new Date(row.getValue("createdAt")), "dd MMM yyyy"),
+      cell: ({ row }) => {
+         const date = row.original.revisions?.[0]?.correspondence?.createdAt;
+         return date ? format(new Date(date), "dd MMM yyyy") : '-';
+      },
    },
    {
      accessorKey: "status",
      header: "Status",
-      cell: ({ row }) => <StatusBadge status={row.getValue("status")} />,
+      cell: ({ row }) => {
+        const status = row.original.revisions?.[0]?.statusCode?.statusName || row.original.revisions?.[0]?.statusCode?.statusCode;
+        return <StatusBadge status={status || 'Unknown'} />;
+      },
    },
    {
      id: "actions",
      cell: ({ row }) => {
        const item = row.original;
+
+        const handleViewFile = (e: React.MouseEvent) => {
+           e.preventDefault();
+           // Logic to find first attachment: Check items -> shopDrawingRevision -> attachments
+           const firstAttachment = item.revisions?.[0]?.items?.[0]?.shopDrawingRevision?.attachments?.[0];
+           if (firstAttachment?.url) {
+             window.open(firstAttachment.url, '_blank');
+           } else {
+             // Use alert or toast. Assuming toast is available or use generic alert for now if toast not imported
+             // But rfa.service.ts in use-rfa.ts uses 'sonner', so 'sonner' is likely available.
+             // I will try to use toast from 'sonner' if I import it, or just window.alert for safety.
+             // User said "หน้าต่างแจ้งเตือน" -> Alert window.
+             alert("ไม่พบไฟล์แนบ (No file attached)");
+           }
+        };
+
        return (
          <div className="flex gap-2">
-            <Link href={`/rfas/${row.original.rfaId}`}>
-              <Button variant="ghost" size="icon" title="View">
+            <Link href={`/rfas/${row.original.id}`}>
+              <Button variant="ghost" size="icon" title="View Details">
                <Eye className="h-4 w-4" />
              </Button>
            </Link>
+             <Button variant="ghost" size="icon" title="View File" onClick={handleViewFile}>
+                <FileText className="h-4 w-4" />
+              </Button>
+            <Link href={`/rfas/${row.original.id}/edit`}>
+               <Button variant="ghost" size="icon" title="Edit">
+                <Edit className="h-4 w-4" />
+              </Button>
+            </Link>
          </div>
        );
      },
@@ -75,7 +109,7 @@ export function RFAList({ data }: RFAListProps) {

  return (
    <div>
-      <DataTable columns={columns} data={data?.items || []} />
+      <DataTable columns={columns} data={data || []} />
      {/* Pagination component would go here */}
    </div>
  );
--- a/frontend/components/ui/skeleton.tsx
+++ b/frontend/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
--- a/frontend/lib/services/correspondence.service.ts
+++ b/frontend/lib/services/correspondence.service.ts
@@ -17,7 +17,7 @@ export const correspondenceService = {

  getById: async (id: string | number) => {
    const response = await apiClient.get(`/correspondences/${id}`);
-    return response.data;
+    return response.data.data; // Unwrap NestJS Interceptor 'data' wrapper
  },

  create: async (data: CreateCorrespondenceDto) => {
@@ -71,4 +71,4 @@ export const correspondenceService = {
    });
    return response.data;
  }
-};
+};
--- a/frontend/types/correspondence.ts
+++ b/frontend/types/correspondence.ts
@@ -13,21 +13,51 @@ export interface Attachment {
  createdAt?: string;
 }

-export interface Correspondence {
-  correspondenceId: number;
-  documentNumber: string;
-  subject: string;
+// Used in List View mainly
+export interface CorrespondenceRevision {
+  id: number;
+  revisionNumber: number;
+  revisionLabel?: string; // e.g. "A", "00"
+  title: string;
  description?: string;
-  status: "DRAFT" | "PENDING" | "IN_REVIEW" | "APPROVED" | "REJECTED" | "CLOSED";
-  importance: "NORMAL" | "HIGH" | "URGENT";
-  createdAt: string;
-  updatedAt: string;
-  fromOrganizationId: number;
-  toOrganizationId: number;
-  fromOrganization?: Organization;
-  toOrganization?: Organization;
-  documentTypeId: number;
+  isCurrent: boolean;
+  status?: {
+    id: number;
+    statusCode: string;
+    statusName: string;
+  };
+  details?: any;
  attachments?: Attachment[];
+  createdAt: string;
+
+  // Nested Relation from Backend Refactor
+  correspondence: {
+    id: number;
+    correspondenceNumber: string;
+    projectId: number;
+    originatorId?: number;
+    isInternal: boolean;
+    originator?: Organization;
+    project?: { id: number; projectName: string; projectCode: string };
+    type?: { id: number; typeName: string; typeCode: string };
+  }
+}
+
+// Keep explicit Correspondence for Detail View if needed, or merge concepts
+export interface Correspondence {
+  id: number;
+  correspondenceNumber: string;
+  projectId: number;
+  originatorId?: number;
+  correspondenceTypeId: number;
+  isInternal: boolean;
+  createdAt: string;
+
+  // Relations
+  originator?: Organization;
+  project?: { id: number; projectName: string; projectCode: string };
+  type?: { id: number; typeName: string; typeCode: string };
+  revisions?: CorrespondenceRevision[]; // Nested revisions
 }

 export interface CreateCorrespondenceDto {
--- a/frontend/types/dashboard.ts
+++ b/frontend/types/dashboard.ts
@@ -1,8 +1,10 @@
 export interface DashboardStats {
-  correspondences: number;
-  rfas: number;
+  totalDocuments: number;
+  documentsThisMonth: number;
+  pendingApprovals: number;
  approved: number;
-  pending: number;
+  totalRfas: number;
+  totalCirculations: number;
 }

 export interface ActivityLog {
--- a/frontend/types/dto/correspondence/search-correspondence.dto.ts
+++ b/frontend/types/dto/correspondence/search-correspondence.dto.ts
@@ -5,8 +5,9 @@ export interface SearchCorrespondenceDto {
  typeId?: number;      // กรองตามประเภทเอกสาร
  projectId?: number;   // กรองตามโครงการ
  statusId?: number;    // กรองตามสถานะ (จาก Revision ปัจจุบัน)
-  
+  revisionStatus?: 'CURRENT' | 'ALL' | 'OLD'; // กรองตามสถานะ Revision
+
  // เพิ่มเติมสำหรับการแบ่งหน้า (Pagination)
  page?: number;
  limit?: number;
-}
+}
--- a/frontend/types/dto/rfa/rfa.dto.ts
+++ b/frontend/types/dto/rfa/rfa.dto.ts
@@ -52,4 +52,7 @@ export interface SearchRfaDto {

  /** จำนวนต่อหน้า (Default: 20) */
  pageSize?: number;
+
+  /** Revision Status Filter */
+  revisionStatus?: 'CURRENT' | 'ALL' | 'OLD';
 }
--- a/frontend/types/rfa.ts
+++ b/frontend/types/rfa.ts
@@ -8,17 +8,28 @@ export interface RFAItem {
 }

 export interface RFA {
-  rfaId: number;
-  rfaNumber: string;
-  subject: string;
-  description?: string;
-  contractId: number;
-  disciplineId: number;
-  status: "DRAFT" | "PENDING" | "IN_REVIEW" | "APPROVED" | "REJECTED" | "CLOSED";
-  createdAt: string;
-  updatedAt: string;
-  items: RFAItem[];
-  // Mock fields for display
+  id: number;
+  rfaTypeId: number;
+  createdBy: number;
+  disciplineId?: number;
+  revisions: {
+    items?: {
+       shopDrawingRevision?: {
+         attachments?: { id: number; url: string; name: string }[]
+       }
+    }[];
+  }[];
+  discipline?: {
+    id: number;
+    name: string;
+    code: string;
+  };
+  // Deprecated/Mapped fields (keep optional if frontend uses them elsewhere)
+  rfaId?: number;
+  rfaNumber?: string;
+  subject?: string;
+  status?: string;
+  createdAt?: string;
  contractName?: string;
  disciplineName?: string;
 }