251205:0000 Just start debug backend/frontend

2025-12-05 00:32:02 +07:00
parent dc8b80c5f9
commit 2865bebdb1
88 changed files with 6751 additions and 1016 deletions
--- a/frontend/app/(admin)/admin/audit-logs/page.tsx
+++ b/frontend/app/(admin)/admin/audit-logs/page.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { formatDistanceToNow } from "date-fns";
+import { AuditLog } from "@/types/admin";
+import { adminApi } from "@/lib/api/admin";
+import { Loader2 } from "lucide-react";
+
+export default function AuditLogsPage() {
+  const [logs, setLogs] = useState<AuditLog[]>([]);
+  const [loading, setLoading] = useState(true);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [filters, setFilters] = useState({
+    user: "",
+    action: "",
+    entity: "",
+  });
+
+  useEffect(() => {
+    const fetchLogs = async () => {
+      setLoading(true);
+      try {
+        const data = await adminApi.getAuditLogs();
+        setLogs(data);
+      } catch (error) {
+        console.error("Failed to fetch audit logs", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchLogs();
+  }, []);
+
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold">Audit Logs</h1>
+        <p className="text-muted-foreground mt-1">View system activity and changes</p>
+      </div>
+
+      {/* Filters */}
+      <Card className="p-4">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div>
+            <Input placeholder="Search user..." />
+          </div>
+          <div>
+            <Select>
+              <SelectTrigger>
+                <SelectValue placeholder="Action" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="CREATE">Create</SelectItem>
+                <SelectItem value="UPDATE">Update</SelectItem>
+                <SelectItem value="DELETE">Delete</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Select>
+              <SelectTrigger>
+                <SelectValue placeholder="Entity Type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="correspondence">Correspondence</SelectItem>
+                <SelectItem value="rfa">RFA</SelectItem>
+                <SelectItem value="user">User</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </Card>
+
+      {/* Logs List */}
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {logs.map((log) => (
+            <Card key={log.audit_log_id} className="p-4">
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-2">
+                    <span className="font-medium">{log.user_name}</span>
+                    <Badge variant={log.action === "CREATE" ? "default" : "secondary"}>
+                      {log.action}
+                    </Badge>
+                    <Badge variant="outline">{log.entity_type}</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">{log.description}</p>
+                  <p className="text-xs text-muted-foreground mt-2">
+                    {formatDistanceToNow(new Date(log.created_at), {
+                      addSuffix: true,
+                    })}
+                  </p>
+                </div>
+                {log.ip_address && (
+                  <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
+                    IP: {log.ip_address}
+                  </span>
+                )}
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/app/(admin)/admin/numbering/[id]/edit/page.tsx
+++ b/frontend/app/(admin)/admin/numbering/[id]/edit/page.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { TemplateEditor } from "@/components/numbering/template-editor";
+import { SequenceViewer } from "@/components/numbering/sequence-viewer";
+import { numberingApi } from "@/lib/api/numbering";
+import { CreateTemplateDto } from "@/types/numbering";
+import { useRouter } from "next/navigation";
+import { Loader2 } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function EditTemplatePage({ params }: { params: { id: string } }) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+  const [initialData, setInitialData] = useState<Partial<CreateTemplateDto> | null>(null);
+
+  useEffect(() => {
+    const fetchTemplate = async () => {
+      setLoading(true);
+      try {
+        const data = await numberingApi.getTemplate(parseInt(params.id));
+        if (data) {
+          setInitialData({
+            document_type_id: data.document_type_id,
+            discipline_code: data.discipline_code,
+            template_format: data.template_format,
+            reset_annually: data.reset_annually,
+            padding_length: data.padding_length,
+            starting_number: 1, // Default for edit view as we don't usually reset this
+          });
+        }
+      } catch (error) {
+        console.error("Failed to fetch template", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTemplate();
+  }, [params.id]);
+
+  const handleSave = async (data: CreateTemplateDto) => {
+    try {
+      await numberingApi.updateTemplate(parseInt(params.id), data);
+      router.push("/admin/numbering");
+    } catch (error) {
+      console.error("Failed to update template", error);
+      alert("Failed to update template");
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-3xl font-bold">Edit Numbering Template</h1>
+
+      <Tabs defaultValue="config">
+        <TabsList>
+          <TabsTrigger value="config">Configuration</TabsTrigger>
+          <TabsTrigger value="sequences">Sequences</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="config" className="mt-4">
+          {initialData && (
+            <TemplateEditor initialData={initialData} onSave={handleSave} />
+          )}
+        </TabsContent>
+
+        <TabsContent value="sequences" className="mt-4">
+          <SequenceViewer templateId={parseInt(params.id)} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
--- a/frontend/app/(admin)/admin/numbering/new/page.tsx
+++ b/frontend/app/(admin)/admin/numbering/new/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { TemplateEditor } from "@/components/numbering/template-editor";
+import { numberingApi } from "@/lib/api/numbering";
+import { CreateTemplateDto } from "@/types/numbering";
+import { useRouter } from "next/navigation";
+
+export default function NewTemplatePage() {
+  const router = useRouter();
+
+  const handleSave = async (data: CreateTemplateDto) => {
+    try {
+      await numberingApi.createTemplate(data);
+      router.push("/admin/numbering");
+    } catch (error) {
+      console.error("Failed to create template", error);
+      alert("Failed to create template");
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-3xl font-bold">New Numbering Template</h1>
+      <TemplateEditor onSave={handleSave} />
+    </div>
+  );
+}
--- a/frontend/app/(admin)/admin/numbering/page.tsx
+++ b/frontend/app/(admin)/admin/numbering/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Edit, Eye, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { NumberingTemplate } from "@/types/numbering";
+import { numberingApi } from "@/lib/api/numbering";
+import { TemplateTester } from "@/components/numbering/template-tester";
+
+export default function NumberingPage() {
+  const [templates, setTemplates] = useState<NumberingTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [testerOpen, setTesterOpen] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] = useState<NumberingTemplate | null>(null);
+
+  useEffect(() => {
+    const fetchTemplates = async () => {
+      setLoading(true);
+      try {
+        const data = await numberingApi.getTemplates();
+        setTemplates(data);
+      } catch (error) {
+        console.error("Failed to fetch templates", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTemplates();
+  }, []);
+
+  const handleTest = (template: NumberingTemplate) => {
+    setSelectedTemplate(template);
+    setTesterOpen(true);
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">
+            Document Numbering Configuration
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            Manage document numbering templates and sequences
+          </p>
+        </div>
+        <Link href="/admin/numbering/new">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            New Template
+          </Button>
+        </Link>
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {templates.map((template) => (
+            <Card key={template.template_id} className="p-6">
+              <div className="flex justify-between items-start">
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-2">
+                    <h3 className="text-lg font-semibold">
+                      {template.document_type_name}
+                    </h3>
+                    <Badge variant="outline">{template.discipline_code || "All"}</Badge>
+                    <Badge variant={template.is_active ? "default" : "secondary"} className={template.is_active ? "bg-green-600 hover:bg-green-700" : ""}>
+                      {template.is_active ? "Active" : "Inactive"}
+                    </Badge>
+                  </div>
+
+                  <div className="bg-muted rounded px-3 py-2 mb-3 font-mono text-sm">
+                    {template.template_format}
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4 text-sm">
+                    <div>
+                      <span className="text-muted-foreground">Example: </span>
+                      <span className="font-medium">
+                        {template.example_number}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="text-muted-foreground">Current Sequence: </span>
+                      <span className="font-medium">
+                        {template.current_number}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="text-muted-foreground">Annual Reset: </span>
+                      <span className="font-medium">
+                        {template.reset_annually ? "Yes" : "No"}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="text-muted-foreground">Padding: </span>
+                      <span className="font-medium">
+                        {template.padding_length} digits
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex gap-2">
+                  <Link href={`/admin/numbering/${template.template_id}/edit`}>
+                    <Button variant="outline" size="sm">
+                      <Edit className="mr-2 h-4 w-4" />
+                      Edit
+                    </Button>
+                  </Link>
+                  <Button variant="outline" size="sm" onClick={() => handleTest(template)}>
+                    <Eye className="mr-2 h-4 w-4" />
+                    Test & View
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <TemplateTester
+        open={testerOpen}
+        onOpenChange={setTesterOpen}
+        template={selectedTemplate}
+      />
+    </div>
+  );
+}
--- a/frontend/app/(admin)/admin/organizations/page.tsx
+++ b/frontend/app/(admin)/admin/organizations/page.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { DataTable } from "@/components/common/data-table";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Organization } from "@/types/admin";
+import { adminApi } from "@/lib/api/admin";
+import { ColumnDef } from "@tanstack/react-table";
+import { Loader2, Plus } from "lucide-react";
+
+export default function OrganizationsPage() {
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState({
+    org_code: "",
+    org_name: "",
+    org_name_th: "",
+    description: "",
+  });
+
+  const fetchOrgs = async () => {
+    setLoading(true);
+    try {
+      const data = await adminApi.getOrganizations();
+      setOrganizations(data);
+    } catch (error) {
+      console.error("Failed to fetch organizations", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchOrgs();
+  }, []);
+
+  const columns: ColumnDef<Organization>[] = [
+    { accessorKey: "org_code", header: "Code" },
+    { accessorKey: "org_name", header: "Name (EN)" },
+    { accessorKey: "org_name_th", header: "Name (TH)" },
+    { accessorKey: "description", header: "Description" },
+  ];
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    try {
+      await adminApi.createOrganization(formData);
+      setDialogOpen(false);
+      setFormData({
+        org_code: "",
+        org_name: "",
+        org_name_th: "",
+        description: "",
+      });
+      fetchOrgs();
+    } catch (error) {
+      console.error(error);
+      alert("Failed to create organization");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <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</p>
+        </div>
+        <Button onClick={() => setDialogOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Organization
+        </Button>
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <DataTable columns={columns} data={organizations} />
+      )}
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add Organization</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="org_code">Organization Code *</Label>
+              <Input
+                id="org_code"
+                value={formData.org_code}
+                onChange={(e) =>
+                  setFormData({ ...formData, org_code: e.target.value })
+                }
+                placeholder="e.g., PAT"
+              />
+            </div>
+            <div>
+              <Label htmlFor="org_name">Name (English) *</Label>
+              <Input
+                id="org_name"
+                value={formData.org_name}
+                onChange={(e) =>
+                  setFormData({ ...formData, org_name: e.target.value })
+                }
+              />
+            </div>
+            <div>
+              <Label htmlFor="org_name_th">Name (Thai)</Label>
+              <Input
+                id="org_name_th"
+                value={formData.org_name_th}
+                onChange={(e) =>
+                  setFormData({ ...formData, org_name_th: e.target.value })
+                }
+              />
+            </div>
+            <div>
+              <Label htmlFor="description">Description</Label>
+              <Input
+                id="description"
+                value={formData.description}
+                onChange={(e) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+              />
+            </div>
+            <div className="flex justify-end gap-2 pt-4">
+              <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={isSubmitting}>
+                Cancel
+              </Button>
+              <Button onClick={handleSubmit} disabled={isSubmitting}>
+                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Create
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
--- a/frontend/app/(admin)/admin/users/page.tsx
+++ b/frontend/app/(admin)/admin/users/page.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { DataTable } from "@/components/common/data-table";
+import { UserDialog } from "@/components/admin/user-dialog";
+import { ColumnDef } from "@tanstack/react-table";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { MoreHorizontal, Plus, Loader2 } from "lucide-react";
+import { User } from "@/types/admin";
+import { adminApi } from "@/lib/api/admin";
+
+export default function UsersPage() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+
+  const fetchUsers = async () => {
+    setLoading(true);
+    try {
+      const data = await adminApi.getUsers();
+      setUsers(data);
+    } catch (error) {
+      console.error("Failed to fetch users", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  const columns: ColumnDef<User>[] = [
+    {
+      accessorKey: "username",
+      header: "Username",
+    },
+    {
+      accessorKey: "email",
+      header: "Email",
+    },
+    {
+      accessorKey: "first_name",
+      header: "Name",
+      cell: ({ row }) => `${row.original.first_name} ${row.original.last_name}`,
+    },
+    {
+      accessorKey: "is_active",
+      header: "Status",
+      cell: ({ row }) => (
+        <Badge variant={row.original.is_active ? "default" : "secondary"} className={row.original.is_active ? "bg-green-600 hover:bg-green-700" : ""}>
+          {row.original.is_active ? "Active" : "Inactive"}
+        </Badge>
+      ),
+    },
+    {
+      id: "roles",
+      header: "Roles",
+      cell: ({ row }) => (
+        <div className="flex gap-1 flex-wrap">
+          {row.original.roles?.map((role) => (
+            <Badge key={role.role_id} variant="outline">
+              {role.role_name}
+            </Badge>
+          ))}
+        </div>
+      ),
+    },
+    {
+      id: "actions",
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={() => {
+                setSelectedUser(row.original);
+                setDialogOpen(true);
+              }}
+            >
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="text-destructive"
+              onClick={() => alert("Deactivate not implemented in mock")}
+            >
+              {row.original.is_active ? "Deactivate" : "Activate"}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">User Management</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage system users and their roles
+          </p>
+        </div>
+        <Button
+          onClick={() => {
+            setSelectedUser(null);
+            setDialogOpen(true);
+          }}
+        >
+          <Plus className="mr-2 h-4 w-4" />
+          Add User
+        </Button>
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <DataTable columns={columns} data={users} />
+      )}
+
+      <UserDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        user={selectedUser}
+        onSuccess={fetchUsers}
+      />
+    </div>
+  );
+}
--- a/frontend/app/(admin)/admin/workflows/[id]/edit/page.tsx
+++ b/frontend/app/(admin)/admin/workflows/[id]/edit/page.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { DSLEditor } from "@/components/workflows/dsl-editor";
+import { VisualWorkflowBuilder } from "@/components/workflows/visual-builder";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Card } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { workflowApi } from "@/lib/api/workflows";
+import { WorkflowType } from "@/types/workflow";
+import { useRouter } from "next/navigation";
+import { Loader2 } from "lucide-react";
+
+export default function WorkflowEditPage({ params }: { params: { id: string } }) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [workflowData, setWorkflowData] = useState({
+    workflow_name: "",
+    description: "",
+    workflow_type: "CORRESPONDENCE" as WorkflowType,
+    dsl_definition: "",
+  });
+
+  useEffect(() => {
+    const fetchWorkflow = async () => {
+      setLoading(true);
+      try {
+        const data = await workflowApi.getWorkflow(parseInt(params.id));
+        if (data) {
+          setWorkflowData({
+            workflow_name: data.workflow_name,
+            description: data.description,
+            workflow_type: data.workflow_type,
+            dsl_definition: data.dsl_definition,
+          });
+        }
+      } catch (error) {
+        console.error("Failed to fetch workflow", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchWorkflow();
+  }, [params.id]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await workflowApi.updateWorkflow(parseInt(params.id), workflowData);
+      router.push("/admin/workflows");
+    } catch (error) {
+      console.error("Failed to save workflow", error);
+      alert("Failed to save workflow");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-3xl font-bold">Edit Workflow</h1>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => router.back()}>Cancel</Button>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Save Workflow
+          </Button>
+        </div>
+      </div>
+
+      <Card className="p-6">
+        <div className="grid gap-4">
+          <div>
+            <Label htmlFor="workflow_name">Workflow Name *</Label>
+            <Input
+              id="workflow_name"
+              value={workflowData.workflow_name}
+              onChange={(e) =>
+                setWorkflowData({
+                  ...workflowData,
+                  workflow_name: e.target.value,
+                })
+              }
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={workflowData.description}
+              onChange={(e) =>
+                setWorkflowData({
+                  ...workflowData,
+                  description: e.target.value,
+                })
+              }
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="workflow_type">Workflow Type</Label>
+            <Select
+              value={workflowData.workflow_type}
+              onValueChange={(value) =>
+                setWorkflowData({ ...workflowData, workflow_type: value as WorkflowType })
+              }
+            >
+              <SelectTrigger id="workflow_type">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="CORRESPONDENCE">Correspondence</SelectItem>
+                <SelectItem value="RFA">RFA</SelectItem>
+                <SelectItem value="DRAWING">Drawing</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </Card>
+
+      <Tabs defaultValue="dsl">
+        <TabsList>
+          <TabsTrigger value="dsl">DSL Editor</TabsTrigger>
+          <TabsTrigger value="visual">Visual Builder</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="dsl" className="mt-4">
+          <DSLEditor
+            initialValue={workflowData.dsl_definition}
+            onChange={(value) =>
+              setWorkflowData({ ...workflowData, dsl_definition: value })
+            }
+          />
+        </TabsContent>
+
+        <TabsContent value="visual" className="mt-4">
+          <VisualWorkflowBuilder />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
--- a/frontend/app/(admin)/admin/workflows/new/page.tsx
+++ b/frontend/app/(admin)/admin/workflows/new/page.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { DSLEditor } from "@/components/workflows/dsl-editor";
+import { VisualWorkflowBuilder } from "@/components/workflows/visual-builder";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Card } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { workflowApi } from "@/lib/api/workflows";
+import { WorkflowType } from "@/types/workflow";
+import { useRouter } from "next/navigation";
+import { Loader2 } from "lucide-react";
+
+export default function NewWorkflowPage() {
+  const router = useRouter();
+  const [saving, setSaving] = useState(false);
+  const [workflowData, setWorkflowData] = useState({
+    workflow_name: "",
+    description: "",
+    workflow_type: "CORRESPONDENCE" as WorkflowType,
+    dsl_definition: "name: New Workflow\nsteps: []",
+  });
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await workflowApi.createWorkflow(workflowData);
+      router.push("/admin/workflows");
+    } catch (error) {
+      console.error("Failed to create workflow", error);
+      alert("Failed to create workflow");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-3xl font-bold">New Workflow</h1>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => router.back()}>Cancel</Button>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Create Workflow
+          </Button>
+        </div>
+      </div>
+
+      <Card className="p-6">
+        <div className="grid gap-4">
+          <div>
+            <Label htmlFor="workflow_name">Workflow Name *</Label>
+            <Input
+              id="workflow_name"
+              value={workflowData.workflow_name}
+              onChange={(e) =>
+                setWorkflowData({
+                  ...workflowData,
+                  workflow_name: e.target.value,
+                })
+              }
+              placeholder="e.g., Special RFA Approval"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={workflowData.description}
+              onChange={(e) =>
+                setWorkflowData({
+                  ...workflowData,
+                  description: e.target.value,
+                })
+              }
+              placeholder="Describe the purpose of this workflow"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="workflow_type">Workflow Type</Label>
+            <Select
+              value={workflowData.workflow_type}
+              onValueChange={(value) =>
+                setWorkflowData({ ...workflowData, workflow_type: value as WorkflowType })
+              }
+            >
+              <SelectTrigger id="workflow_type">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="CORRESPONDENCE">Correspondence</SelectItem>
+                <SelectItem value="RFA">RFA</SelectItem>
+                <SelectItem value="DRAWING">Drawing</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </Card>
+
+      <Tabs defaultValue="dsl">
+        <TabsList>
+          <TabsTrigger value="dsl">DSL Editor</TabsTrigger>
+          <TabsTrigger value="visual">Visual Builder</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="dsl" className="mt-4">
+          <DSLEditor
+            initialValue={workflowData.dsl_definition}
+            onChange={(value) =>
+              setWorkflowData({ ...workflowData, dsl_definition: value })
+            }
+          />
+        </TabsContent>
+
+        <TabsContent value="visual" className="mt-4">
+          <VisualWorkflowBuilder />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
--- a/frontend/app/(admin)/admin/workflows/page.tsx
+++ b/frontend/app/(admin)/admin/workflows/page.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Edit, Copy, Trash, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { Workflow } from "@/types/workflow";
+import { workflowApi } from "@/lib/api/workflows";
+
+export default function WorkflowsPage() {
+  const [workflows, setWorkflows] = useState<Workflow[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchWorkflows = async () => {
+      setLoading(true);
+      try {
+        const data = await workflowApi.getWorkflows();
+        setWorkflows(data);
+      } catch (error) {
+        console.error("Failed to fetch workflows", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchWorkflows();
+  }, []);
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">Workflow Configuration</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage workflow definitions and routing rules
+          </p>
+        </div>
+        <Link href="/admin/workflows/new">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            New Workflow
+          </Button>
+        </Link>
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {workflows.map((workflow) => (
+            <Card key={workflow.workflow_id} className="p-6">
+              <div className="flex justify-between items-start">
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-2">
+                    <h3 className="text-lg font-semibold">
+                      {workflow.workflow_name}
+                    </h3>
+                    <Badge variant={workflow.is_active ? "default" : "secondary"} className={workflow.is_active ? "bg-green-600 hover:bg-green-700" : ""}>
+                      {workflow.is_active ? "Active" : "Inactive"}
+                    </Badge>
+                    <Badge variant="outline">v{workflow.version}</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground mb-3">
+                    {workflow.description}
+                  </p>
+                  <div className="flex gap-6 text-sm text-muted-foreground">
+                    <span>Type: {workflow.workflow_type}</span>
+                    <span>Steps: {workflow.step_count}</span>
+                    <span>
+                      Updated:{" "}
+                      {new Date(workflow.updated_at).toLocaleDateString()}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex gap-2">
+                  <Link href={`/admin/workflows/${workflow.workflow_id}/edit`}>
+                    <Button variant="outline" size="sm">
+                      <Edit className="mr-2 h-4 w-4" />
+                      Edit
+                    </Button>
+                  </Link>
+                  <Button variant="outline" size="sm" onClick={() => alert("Clone functionality mocked")}>
+                    <Copy className="mr-2 h-4 w-4" />
+                    Clone
+                  </Button>
+                  <Button variant="outline" size="sm" className="text-destructive hover:text-destructive" onClick={() => alert("Delete functionality mocked")}>
+                    <Trash className="mr-2 h-4 w-4" />
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/app/(admin)/layout.tsx
+++ b/frontend/app/(admin)/layout.tsx
@@ -0,0 +1,30 @@
+import { AdminSidebar } from "@/components/admin/sidebar";
+import { redirect } from "next/navigation";
+// import { getServerSession } from "next-auth"; // Commented out for now as we are mocking auth
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Mock Admin Check
+  // const session = await getServerSession();
+  // if (!session?.user?.roles?.some((r) => r.role_name === 'ADMIN')) {
+  //   redirect('/');
+  // }
+
+  // For development, we assume user is admin
+  const isAdmin = true;
+  if (!isAdmin) {
+    redirect("/");
+  }
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)]"> {/* Subtract header height */}
+      <AdminSidebar />
+      <div className="flex-1 overflow-auto bg-muted/10">
+        {children}
+      </div>
+    </div>
+  );
+}
--- a/frontend/app/(dashboard)/correspondences/[id]/page.tsx
+++ b/frontend/app/(dashboard)/correspondences/[id]/page.tsx
@@ -0,0 +1,22 @@
+import { correspondenceApi } from "@/lib/api/correspondences";
+import { CorrespondenceDetail } from "@/components/correspondences/detail";
+import { notFound } from "next/navigation";
+
+export default async function CorrespondenceDetailPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const id = parseInt(params.id);
+  if (isNaN(id)) {
+    notFound();
+  }
+
+  const correspondence = await correspondenceApi.getById(id);
+
+  if (!correspondence) {
+    notFound();
+  }
+
+  return <CorrespondenceDetail data={correspondence} />;
+}
--- a/frontend/app/(dashboard)/correspondences/new/page.tsx
+++ b/frontend/app/(dashboard)/correspondences/new/page.tsx
@@ -1,355 +1,18 @@
-// File: app/(dashboard)/correspondences/new/page.tsx
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-import { format } from "date-fns";
-import { CalendarIcon, ChevronLeft, Save, Loader2, Send } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import { FileUpload } from "@/components/forms/file-upload";
-import { cn } from "@/lib/utils";
-
-// --- Schema Definition ---
-const correspondenceSchema = z.object({
-  projectId: z.string().min(1, "กรุณาเลือกโครงการ"),
-  originatorId: z.string().min(1, "กรุณาเลือกองค์กรผู้ส่ง"),
-  type: z.string().min(1, "กรุณาเลือกประเภทเอกสาร"),
-  discipline: z.string().optional(), // สำหรับ RFA/Letter ที่มีสาขา
-  subType: z.string().optional(), // สำหรับแบ่งประเภทย่อย
-  recipientId: z.string().min(1, "กรุณาเลือกผู้รับ (To)"),
-  subject: z.string().min(5, "หัวข้อต้องยาวอย่างน้อย 5 ตัวอักษร"),
-  message: z.string().optional(),
-  replyRequiredBy: z.date().optional(),
-});
-
-type FormValues = z.infer<typeof correspondenceSchema>;
-
-// --- Mock Data for Dropdowns ---
-const projects = [
-  { id: "1", code: "LCBP3-C1", name: "งานก่อสร้างงานทางทะเล (ส่วนที่ 1)" },
-  { id: "2", code: "LCBP3-C2", name: "งานก่อสร้างอาคาร (ส่วนที่ 2)" },
-];
-
-const organizations = [
-  { id: "1", code: "PAT", name: "การท่าเรือฯ (Owner)" },
-  { id: "2", code: "CSC", name: "ที่ปรึกษาคุมงาน (Consult)" },
-  { id: "3", code: "CNNC", name: "ผู้รับเหมา C1" },
-];
-
-const docTypes = [
-  { id: "LET", name: "Letter (จดหมาย)" },
-  { id: "MEM", name: "Memo (บันทึกข้อความ)" },
-  { id: "RFA", name: "RFA (ขออนุมัติ)" },
-  { id: "RFI", name: "RFI (ขอข้อมูล)" },
-];
-
-const disciplines = [
-  { id: "GEN", name: "General (ทั่วไป)" },
-  { id: "STR", name: "Structural (โครงสร้าง)" },
-  { id: "ARC", name: "Architectural (สถาปัตยกรรม)" },
-  { id: "MEP", name: "MEP (งานระบบ)" },
-];
-
-export default function CreateCorrespondencePage() {
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-  const [files, setFiles] = useState<File[]>([]);
-
-  // React Hook Form
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    watch,
-    formState: { errors },
-  } = useForm<FormValues>({
-    resolver: zodResolver(correspondenceSchema),
-    defaultValues: {
-      originatorId: "3", // Default เป็น Org ของ User (Mock: CNNC)
-    },
-  });
-
-  // Watch values to update dynamic parts
-  const selectedProject = watch("projectId");
-  const selectedType = watch("type");
-  const selectedDiscipline = watch("discipline");
-  
-  // Logic จำลองการ Preview เลขที่เอกสาร (Document Numbering)
-  const getPreviewNumber = () => {
-    if (!selectedProject || !selectedType) return "---";
-    const proj = projects.find(p => p.id === selectedProject)?.code || "PROJ";
-    const type = selectedType;
-    const disc = selectedDiscipline ? `-${selectedDiscipline}` : "";
-    return `${proj}-${type}${disc}-0001 (Draft)`;
-  };
-
-  const onSubmit = async (data: FormValues) => {
-    setIsLoading(true);
-    try {
-      console.log("Form Data:", data);
-      console.log("Files:", files);
-      
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 1500));
-      
-      alert("บันทึกเอกสารเรียบร้อยแล้ว");
-      router.push("/correspondences");
-    } catch (error) {
-      console.error(error);
-      alert("เกิดข้อผิดพลาดในการบันทึก");
-    } finally {
-      setIsLoading(false);
-    }
-  };
+import { CorrespondenceForm } from "@/components/correspondences/form";

+export default function NewCorrespondencePage() {
  return (
-    <div className="max-w-4xl mx-auto space-y-6 pb-10">
-      {/* Header */}
-      <div className="flex items-center gap-4">
-        <Button variant="outline" size="icon" onClick={() => router.back()}>
-          <ChevronLeft className="h-5 w-5" />
-        </Button>
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight">Create Correspondence</h2>
-          <p className="text-muted-foreground">
-            สร้างเอกสารใหม่เพื่อส่งออกไปยังหน่วยงานอื่น
-          </p>
-        </div>
+    <div className="max-w-4xl mx-auto py-6">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">New Correspondence</h1>
+        <p className="text-muted-foreground mt-1">
+          Create a new official letter or communication record.
+        </p>
      </div>

-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
-        
-        {/* Section 1: Basic Info */}
-        <Card>
-          <CardHeader>
-            <CardTitle>ข้อมูลเบื้องต้น (Basic Information)</CardTitle>
-            <CardDescription>
-              ระบุโครงการและประเภทของเอกสาร เลขที่เอกสารจะถูกสร้างอัตโนมัติ
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="grid gap-6 md:grid-cols-2">
-            {/* Project Select */}
-            <div className="space-y-2">
-              <Label className="after:content-['*'] after:text-red-500">โครงการ (Project)</Label>
-              <Select onValueChange={(val) => setValue("projectId", val)}>
-                <SelectTrigger className={errors.projectId ? "border-destructive" : ""}>
-                  <SelectValue placeholder="เลือกโครงการ..." />
-                </SelectTrigger>
-                <SelectContent>
-                  {projects.map((p) => (
-                    <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {errors.projectId && <p className="text-xs text-destructive">{errors.projectId.message}</p>}
-            </div>
-
-            {/* Document Type Select */}
-            <div className="space-y-2">
-              <Label className="after:content-['*'] after:text-red-500">ประเภทเอกสาร (Type)</Label>
-              <Select onValueChange={(val) => setValue("type", val)}>
-                <SelectTrigger className={errors.type ? "border-destructive" : ""}>
-                  <SelectValue placeholder="เลือกประเภท..." />
-                </SelectTrigger>
-                <SelectContent>
-                  {docTypes.map((t) => (
-                    <SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {errors.type && <p className="text-xs text-destructive">{errors.type.message}</p>}
-            </div>
-
-            {/* Discipline (Conditional) */}
-            <div className="space-y-2">
-              <Label>สาขางาน (Discipline)</Label>
-              <Select onValueChange={(val) => setValue("discipline", val)}>
-                <SelectTrigger>
-                  <SelectValue placeholder="ระบุสาขา (ถ้ามี)..." />
-                </SelectTrigger>
-                <SelectContent>
-                  {disciplines.map((d) => (
-                    <SelectItem key={d.id} value={d.id}>{d.name}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <p className="text-[10px] text-muted-foreground">จำเป็นสำหรับ RFA/RFI เพื่อการรันเลขที่ถูกต้อง</p>
-            </div>
-
-            {/* Originator (Sender) */}
-            <div className="space-y-2">
-              <Label className="after:content-['*'] after:text-red-500">ผู้ส่ง (From)</Label>
-              <Select defaultValue="3" onValueChange={(val) => setValue("originatorId", val)} disabled>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select Originator" />
-                </SelectTrigger>
-                <SelectContent>
-                  {organizations.map((o) => (
-                    <SelectItem key={o.id} value={o.id}>{o.name}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* Document Number Preview */}
-            <div className="md:col-span-2 p-4 bg-muted/30 rounded-lg border border-dashed flex items-center justify-between">
-              <span className="text-sm font-medium text-muted-foreground">Preview Document No:</span>
-              <span className="font-mono text-lg font-bold text-primary">{getPreviewNumber()}</span>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Section 2: Details & Recipients */}
-        <Card>
-          <CardHeader>
-            <CardTitle>รายละเอียดและผู้รับ (Details & Recipients)</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            
-            {/* Recipient */}
-            <div className="space-y-2">
-              <Label className="after:content-['*'] after:text-red-500">ผู้รับ (To)</Label>
-              <Select onValueChange={(val) => setValue("recipientId", val)}>
-                <SelectTrigger className={errors.recipientId ? "border-destructive" : ""}>
-                  <SelectValue placeholder="เลือกหน่วยงานผู้รับ..." />
-                </SelectTrigger>
-                <SelectContent>
-                  {organizations.filter(o => o.id !== "3").map((o) => (
-                    <SelectItem key={o.id} value={o.id}>{o.name}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {errors.recipientId && <p className="text-xs text-destructive">{errors.recipientId.message}</p>}
-            </div>
-
-            {/* Subject */}
-            <div className="space-y-2">
-              <Label className="after:content-['*'] after:text-red-500">หัวข้อเรื่อง (Subject)</Label>
-              <Input 
-                placeholder="ระบุหัวข้อเอกสาร..." 
-                className={errors.subject ? "border-destructive" : ""}
-                {...register("subject")} 
-              />
-              {errors.subject && <p className="text-xs text-destructive">{errors.subject.message}</p>}
-            </div>
-
-            {/* Message/Body */}
-            <div className="space-y-2">
-              <Label>รายละเอียด (Message)</Label>
-              <Textarea 
-                placeholder="พิมพ์รายละเอียดเพิ่มเติม..." 
-                className="min-h-[120px]"
-                {...register("message")}
-              />
-            </div>
-
-            {/* Reply Required Date */}
-            <div className="flex flex-col space-y-2">
-              <Label>วันที่ต้องการคำตอบ (Reply Required By)</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant={"outline"}
-                    className={cn(
-                      "w-[240px] pl-3 text-left font-normal",
-                      !watch("replyRequiredBy") && "text-muted-foreground"
-                    )}
-                  >
-                    {watch("replyRequiredBy") ? (
-                      format(watch("replyRequiredBy")!, "PPP")
-                    ) : (
-                      <span>Pick a date</span>
-                    )}
-                    <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="start">
-                  <Calendar
-                    mode="single"
-                    selected={watch("replyRequiredBy")}
-                    onSelect={(date) => setValue("replyRequiredBy", date)}
-                    disabled={(date) => date < new Date()}
-                    initialFocus
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-
-          </CardContent>
-        </Card>
-
-        {/* Section 3: Attachments */}
-        <Card>
-          <CardHeader>
-            <CardTitle>เอกสารแนบ (Attachments)</CardTitle>
-            <CardDescription>
-              รองรับไฟล์ PDF, DWG, Office (สูงสุด 50MB ต่อไฟล์)
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FileUpload 
-              onFilesChange={setFiles} 
-              maxFiles={10}
-              accept=".pdf,.doc,.docx,.xls,.xlsx,.dwg,.zip,.jpg,.png"
-            />
-          </CardContent>
-        </Card>
-
-        {/* Actions */}
-        <div className="flex justify-end gap-4">
-          <Button variant="outline" type="button" onClick={() => router.back()} disabled={isLoading}>
-            ยกเลิก
-          </Button>
-          <Button type="submit" disabled={isLoading} className="min-w-[120px]">
-            {isLoading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Saving...
-              </>
-            ) : (
-              <>
-                <Save className="mr-2 h-4 w-4" /> Save as Draft
-              </>
-            )}
-          </Button>
-          <Button type="submit" disabled={isLoading} className="min-w-[120px] bg-green-600 hover:bg-green-700">
-            {isLoading ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" /> 
-            ) : (
-              <Send className="mr-2 h-4 w-4" />
-            )}
-            Submit
-          </Button>
-        </div>
-
-      </form>
+      <div className="bg-card border rounded-lg p-6 shadow-sm">
+        <CorrespondenceForm />
+      </div>
    </div>
  );
-}
+}
--- a/frontend/app/(dashboard)/correspondences/page.tsx
+++ b/frontend/app/(dashboard)/correspondences/page.tsx
@@ -1,290 +1,50 @@
-// File: app/(dashboard)/correspondences/page.tsx
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { 
-  Plus, 
-  Search, 
-  Filter, 
-  MoreHorizontal, 
-  FileText, 
-  Calendar,
-  Eye
-} from "lucide-react";
-
+import { CorrespondenceList } from "@/components/correspondences/list";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+import { Plus } from "lucide-react";
+import { correspondenceApi } from "@/lib/api/correspondences";
+import { Pagination } from "@/components/common/pagination";

-// --- Type Definitions ---
-type Correspondence = {
-  id: string;
-  documentNumber: string;
-  subject: string;
-  type: "Letter" | "Memo" | "RFI" | "Transmittal";
-  status: "Draft" | "Submitted" | "Approved" | "Rejected";
-  project: string;
-  date: string;
-  from: string;
-  to: string;
-};
-
-// --- Mock Data ---
-const mockData: Correspondence[] = [
-  {
-    id: "1",
-    documentNumber: "LCBP3-LET-GEN-001",
-    subject: "Submission of Monthly Progress Report - January 2025",
-    type: "Letter",
-    status: "Submitted",
-    project: "LCBP3-C1",
-    date: "2025-01-05",
-    from: "CNNC",
-    to: "PAT",
-  },
-  {
-    id: "2",
-    documentNumber: "LCBP3-RFI-STR-024",
-    subject: "Clarification on Beam Reinforcement Detail at Zone A",
-    type: "RFI",
-    status: "Approved",
-    project: "LCBP3-C2",
-    date: "2025-01-10",
-    from: "ITD-NWR",
-    to: "TEAM",
-  },
-  {
-    id: "3",
-    documentNumber: "LCBP3-MEMO-HR-005",
-    subject: "Site Access Protocol Update",
-    type: "Memo",
-    status: "Draft",
-    project: "LCBP3",
-    date: "2025-01-12",
-    from: "PAT",
-    to: "All Contractors",
-  },
-  {
-    id: "4",
-    documentNumber: "LCBP3-TRN-STR-011",
-    subject: "Transmittal of Shop Drawings for Piling Works",
-    type: "Transmittal",
-    status: "Submitted",
-    project: "LCBP3-C1",
-    date: "2025-01-15",
-    from: "CNNC",
-    to: "CSC",
-  },
-];
-
-export default function CorrespondencesPage() {
-  const router = useRouter();
-  const [searchTerm, setSearchTerm] = useState("");
-  const [typeFilter, setTypeFilter] = useState("ALL");
-
-  // Filter Logic
-  const filteredData = mockData.filter((item) => {
-    const matchesSearch = 
-      item.subject.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      item.documentNumber.toLowerCase().includes(searchTerm.toLowerCase());
-    
-    const matchesType = typeFilter === "ALL" || item.type === typeFilter;
-
-    return matchesSearch && matchesType;
+export default async function CorrespondencesPage({
+  searchParams,
+}: {
+  searchParams: { page?: string; status?: string; search?: string };
+}) {
+  const page = parseInt(searchParams.page || "1");
+  const data = await correspondenceApi.getAll({
+    page,
+    status: searchParams.status,
+    search: searchParams.search,
  });

-  const getStatusVariant = (status: string) => {
-    switch (status) {
-      case "Approved": return "success";
-      case "Rejected": return "destructive";
-      case "Draft": return "secondary";
-      default: return "default"; // Submitted
-    }
-  };
-
-  const handleCreate = () => {
-    router.push("/correspondences/new");
-  };
-
  return (
    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+      <div className="flex justify-between items-center">
        <div>
-          <h2 className="text-2xl font-bold tracking-tight">Correspondences</h2>
-          <p className="text-muted-foreground">
-            จัดการเอกสารเข้า-ออกทั้งหมดในโครงการ
+          <h1 className="text-3xl font-bold">Correspondences</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage official letters and communications
          </p>
        </div>
-        <Button onClick={handleCreate} className="w-full md:w-auto">
-          <Plus className="mr-2 h-4 w-4" /> สร้างเอกสารใหม่
-        </Button>
-      </div>
-
-      {/* Toolbar (Search & Filter) */}
-      <div className="flex flex-col gap-4 md:flex-row md:items-center">
-        <div className="relative flex-1">
-          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="ค้นหาจากเลขที่เอกสาร หรือ หัวข้อ..."
-            className="pl-8"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-        </div>
-        <div className="flex gap-2">
-          <Select defaultValue="ALL" onValueChange={setTypeFilter}>
-            <SelectTrigger className="w-[150px]">
-              <SelectValue placeholder="ประเภทเอกสาร" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="ALL">ทั้งหมด</SelectItem>
-              <SelectItem value="Letter">Letter</SelectItem>
-              <SelectItem value="Memo">Memo</SelectItem>
-              <SelectItem value="RFI">RFI</SelectItem>
-              <SelectItem value="Transmittal">Transmittal</SelectItem>
-            </SelectContent>
-          </Select>
-          <Button variant="outline" size="icon">
-            <Filter className="h-4 w-4" />
+        <Link href="/correspondences/new">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            New Correspondence
          </Button>
-        </div>
+        </Link>
      </div>

-      {/* Desktop View: Table */}
-      <div className="hidden rounded-md border bg-card md:block">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[40px]">
-                <Checkbox />
-              </TableHead>
-              <TableHead>Document No.</TableHead>
-              <TableHead className="w-[400px]">Subject</TableHead>
-              <TableHead>Type</TableHead>
-              <TableHead>From/To</TableHead>
-              <TableHead>Date</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead className="text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredData.map((item) => (
-              <TableRow key={item.id} className="cursor-pointer hover:bg-muted/50" onClick={() => router.push(`/correspondences/${item.id}`)}>
-                <TableCell onClick={(e) => e.stopPropagation()}>
-                  <Checkbox />
-                </TableCell>
-                <TableCell className="font-medium text-primary">
-                  {item.documentNumber}
-                  <div className="text-xs text-muted-foreground mt-0.5">{item.project}</div>
-                </TableCell>
-                <TableCell>
-                  <span className="line-clamp-2">{item.subject}</span>
-                </TableCell>
-                <TableCell>{item.type}</TableCell>
-                <TableCell>
-                  <div className="text-xs">
-                    <div className="text-muted-foreground">From: <span className="text-foreground font-medium">{item.from}</span></div>
-                    <div className="text-muted-foreground">To: <span className="text-foreground font-medium">{item.to}</span></div>
-                  </div>
-                </TableCell>
-                <TableCell>{item.date}</TableCell>
-                <TableCell>
-                  <Badge variant={getStatusVariant(item.status)}>{item.status}</Badge>
-                </TableCell>
-                <TableCell className="text-right">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" className="h-8 w-8 p-0">
-                        <span className="sr-only">Open menu</span>
-                        <MoreHorizontal className="h-4 w-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); router.push(`/correspondences/${item.id}`); }}>
-                        View Details
-                      </DropdownMenuItem>
-                      <DropdownMenuItem>Download PDF</DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem>Create Transmittal</DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+      {/* Filters component could go here */}

-      {/* Mobile View: Cards */}
-      <div className="grid gap-4 md:hidden">
-        {filteredData.map((item) => (
-          <Card key={item.id} onClick={() => router.push(`/correspondences/${item.id}`)}>
-            <CardHeader className="pb-2">
-              <div className="flex justify-between items-start">
-                <div className="flex flex-col">
-                  <Badge variant="outline" className="w-fit mb-2">{item.type}</Badge>
-                  <CardTitle className="text-base font-bold">{item.documentNumber}</CardTitle>
-                </div>
-                <Badge variant={getStatusVariant(item.status)}>{item.status}</Badge>
-              </div>
-            </CardHeader>
-            <CardContent className="pb-2 text-sm">
-              <p className="line-clamp-2 mb-3">{item.subject}</p>
-              <div className="grid grid-cols-2 gap-2 text-muted-foreground">
-                <div className="flex items-center gap-1">
-                  <FileText className="h-3 w-3" /> {item.project}
-                </div>
-                <div className="flex items-center gap-1">
-                  <Calendar className="h-3 w-3" /> {item.date}
-                </div>
-              </div>
-              <div className="mt-3 pt-3 border-t grid grid-cols-2 gap-2 text-xs">
-                <div>
-                  <span className="text-muted-foreground block">From</span>
-                  <span className="font-medium">{item.from}</span>
-                </div>
-                <div>
-                  <span className="text-muted-foreground block">To</span>
-                  <span className="font-medium">{item.to}</span>
-                </div>
-              </div>
-            </CardContent>
-            <CardFooter className="pt-2">
-              <Button variant="ghost" size="sm" className="w-full text-primary">
-                <Eye className="mr-2 h-4 w-4" /> View Details
-              </Button>
-            </CardFooter>
-          </Card>
-        ))}
+      <CorrespondenceList data={data} />
+
+      <div className="mt-4">
+        <Pagination
+          currentPage={data.page}
+          totalPages={data.totalPages}
+          total={data.total}
+        />
      </div>
    </div>
  );
-}
+}
--- a/frontend/app/(dashboard)/dashboard/page.tsx
+++ b/frontend/app/(dashboard)/dashboard/page.tsx
@@ -1,67 +1,39 @@
-// File: app/(dashboard)/dashboard/page.tsx
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatsCards } from "@/components/dashboard/stats-cards";
 import { RecentActivity } from "@/components/dashboard/recent-activity";
+import { PendingTasks } from "@/components/dashboard/pending-tasks";
+import { QuickActions } from "@/components/dashboard/quick-actions";
+import { dashboardApi } from "@/lib/api/dashboard";
+
+export default async function DashboardPage() {
+  // Fetch data in parallel
+  const [stats, activities, tasks] = await Promise.all([
+    dashboardApi.getStats(),
+    dashboardApi.getRecentActivity(),
+    dashboardApi.getPendingTasks(),
+  ]);

-export default function DashboardPage() {
  return (
-    <div className="flex flex-col gap-4">
-      {/* Header Section */}
-      <div className="flex items-center">
-        <h1 className="text-lg font-semibold md:text-2xl">Dashboard</h1>
-      </div>
-      
-      {/* KPI Cards Section */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              เอกสารรออนุมัติ
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">12</div>
-            <p className="text-xs text-muted-foreground">
-              +2 จากเมื่อวาน
-            </p>
-          </CardContent>
-        </Card>
-        
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              RFAs ที่กำลังดำเนินการ
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">24</div>
-            <p className="text-xs text-muted-foreground">
-              อยู่ในขั้นตอนตรวจสอบ
-            </p>
-          </CardContent>
-        </Card>
-        
-        {/* Add more KPI cards as needed */}
+    <div className="space-y-8">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+          <p className="text-muted-foreground mt-1">
+            Welcome back! Here's an overview of your project status.
+          </p>
+        </div>
+        <QuickActions />
      </div>

-      {/* Main Content Section (My Tasks + Recent Activity) */}
-      <div className="grid gap-4 md:gap-8 lg:grid-cols-3">
-        
-        {/* Content Area หลัก (My Tasks) กินพื้นที่ 2 ส่วน */}
-        <Card className="lg:col-span-2">
-          <CardHeader>
-            <CardTitle>งานของฉัน (My Tasks)</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="h-[300px] w-full rounded bg-muted/20 flex items-center justify-center text-muted-foreground">
-              Table Placeholder (My Tasks)
-            </div>
-          </CardContent>
-        </Card>
+      <StatsCards stats={stats} />

-        {/* Recent Activity กินพื้นที่ 1 ส่วนด้านขวา */}
-        <RecentActivity />
-        
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2">
+          <RecentActivity activities={activities} />
+        </div>
+        <div className="lg:col-span-1">
+          <PendingTasks tasks={tasks} />
+        </div>
      </div>
    </div>
  );
-}
+}
--- a/frontend/app/(dashboard)/drawings/[id]/page.tsx
+++ b/frontend/app/(dashboard)/drawings/[id]/page.tsx
@@ -0,0 +1,112 @@
+import { drawingApi } from "@/lib/api/drawings";
+import { notFound } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, Download, FileText, GitCompare } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { RevisionHistory } from "@/components/drawings/revision-history";
+import { format } from "date-fns";
+
+export default async function DrawingDetailPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const id = parseInt(params.id);
+  if (isNaN(id)) {
+    notFound();
+  }
+
+  const drawing = await drawingApi.getById(id);
+
+  if (!drawing) {
+    notFound();
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link href="/drawings">
+            <Button variant="ghost" size="icon">
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-2xl font-bold">{drawing.drawing_number}</h1>
+            <p className="text-muted-foreground">
+              {drawing.title}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            Download Current
+          </Button>
+          {drawing.revision_count > 1 && (
+            <Button variant="outline">
+              <GitCompare className="mr-2 h-4 w-4" />
+              Compare Revisions
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Main Info */}
+        <div className="lg:col-span-2 space-y-6">
+          <Card>
+            <CardHeader>
+              <div className="flex justify-between items-start">
+                <CardTitle className="text-xl">Drawing Details</CardTitle>
+                <Badge>{drawing.type}</Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="grid grid-cols-2 gap-6">
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">Discipline</p>
+                  <p className="font-medium mt-1">{drawing.discipline?.discipline_name} ({drawing.discipline?.discipline_code})</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">Sheet Number</p>
+                  <p className="font-medium mt-1">{drawing.sheet_number}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">Scale</p>
+                  <p className="font-medium mt-1">{drawing.scale || "N/A"}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">Latest Issue Date</p>
+                  <p className="font-medium mt-1">{format(new Date(drawing.issue_date), "dd MMM yyyy")}</p>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div>
+                <h3 className="font-semibold mb-3">Preview</h3>
+                <div className="aspect-video bg-muted rounded-lg flex items-center justify-center border-2 border-dashed">
+                  <div className="text-center">
+                    <FileText className="h-12 w-12 mx-auto text-muted-foreground mb-2" />
+                    <p className="text-muted-foreground">PDF Preview Placeholder</p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Revisions */}
+        <div className="space-y-6">
+          <RevisionHistory revisions={drawing.revisions || []} />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/app/(dashboard)/drawings/page.tsx
+++ b/frontend/app/(dashboard)/drawings/page.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { DrawingList } from "@/components/drawings/list";
+import { Button } from "@/components/ui/button";
+import { Upload } from "lucide-react";
+import Link from "next/link";
+
+export default function DrawingsPage() {
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">Drawings</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage contract and shop drawings
+          </p>
+        </div>
+        <Link href="/drawings/upload">
+          <Button>
+            <Upload className="mr-2 h-4 w-4" />
+            Upload Drawing
+          </Button>
+        </Link>
+      </div>
+
+      <Tabs defaultValue="contract" className="w-full">
+        <TabsList className="grid w-full grid-cols-2 max-w-[400px]">
+          <TabsTrigger value="contract">Contract Drawings</TabsTrigger>
+          <TabsTrigger value="shop">Shop Drawings</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="contract" className="mt-6">
+          <DrawingList type="CONTRACT" />
+        </TabsContent>
+
+        <TabsContent value="shop" className="mt-6">
+          <DrawingList type="SHOP" />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
--- a/frontend/app/(dashboard)/drawings/upload/page.tsx
+++ b/frontend/app/(dashboard)/drawings/upload/page.tsx
@@ -0,0 +1,16 @@
+import { DrawingUploadForm } from "@/components/drawings/upload-form";
+
+export default function DrawingUploadPage() {
+  return (
+    <div className="max-w-4xl mx-auto py-6">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Upload Drawing</h1>
+        <p className="text-muted-foreground mt-1">
+          Upload a new contract or shop drawing revision.
+        </p>
+      </div>
+
+      <DrawingUploadForm />
+    </div>
+  );
+}
--- a/frontend/app/(dashboard)/layout.tsx
+++ b/frontend/app/(dashboard)/layout.tsx
@@ -1,7 +1,5 @@
-// File: app/(dashboard)/layout.tsx
+import { Header } from "@/components/layout/header";
 import { Sidebar } from "@/components/layout/sidebar";
-import { Navbar } from "@/components/layout/navbar";
-import { DashboardShell } from "@/components/layout/dashboard-shell"; // Import Wrapper

 export default function DashboardLayout({
  children,
@@ -9,17 +7,14 @@ export default function DashboardLayout({
  children: React.ReactNode;
 }) {
  return (
-    <div className="relative min-h-screen bg-muted/10">
-      {/* Sidebar (Fixed Position) */}
+    <div className="flex min-h-screen bg-background">
      <Sidebar />
-
-      {/* Main Content (Dynamic Margin) */}
-      <DashboardShell>
-        <Navbar />
-        <main className="flex-1 p-4 lg:p-6 overflow-x-hidden">
+      <div className="flex-1 flex flex-col min-h-screen overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-y-auto p-6 bg-muted/10">
          {children}
        </main>
-      </DashboardShell>
+      </div>
    </div>
  );
-}
+}
--- a/frontend/app/(dashboard)/rfas/[id]/page.tsx
+++ b/frontend/app/(dashboard)/rfas/[id]/page.tsx
@@ -0,0 +1,22 @@
+import { rfaApi } from "@/lib/api/rfas";
+import { RFADetail } from "@/components/rfas/detail";
+import { notFound } from "next/navigation";
+
+export default async function RFADetailPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const id = parseInt(params.id);
+  if (isNaN(id)) {
+    notFound();
+  }
+
+  const rfa = await rfaApi.getById(id);
+
+  if (!rfa) {
+    notFound();
+  }
+
+  return <RFADetail data={rfa} />;
+}
--- a/frontend/app/(dashboard)/rfas/new/page.tsx
+++ b/frontend/app/(dashboard)/rfas/new/page.tsx
@@ -0,0 +1,16 @@
+import { RFAForm } from "@/components/rfas/form";
+
+export default function NewRFAPage() {
+  return (
+    <div className="max-w-4xl mx-auto py-6">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">New RFA</h1>
+        <p className="text-muted-foreground mt-1">
+          Create a new Request for Approval.
+        </p>
+      </div>
+
+      <RFAForm />
+    </div>
+  );
+}
--- a/frontend/app/(dashboard)/rfas/page.tsx
+++ b/frontend/app/(dashboard)/rfas/page.tsx
@@ -0,0 +1,48 @@
+import { RFAList } from "@/components/rfas/list";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { Plus } from "lucide-react";
+import { rfaApi } from "@/lib/api/rfas";
+import { Pagination } from "@/components/common/pagination";
+
+export default async function RFAsPage({
+  searchParams,
+}: {
+  searchParams: { page?: string; status?: string; search?: string };
+}) {
+  const page = parseInt(searchParams.page || "1");
+  const data = await rfaApi.getAll({
+    page,
+    status: searchParams.status,
+    search: searchParams.search,
+  });
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">RFAs (Request for Approval)</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage approval requests and submissions
+          </p>
+        </div>
+        <Link href="/rfas/new">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            New RFA
+          </Button>
+        </Link>
+      </div>
+
+      <RFAList data={data} />
+
+      <div className="mt-4">
+        <Pagination
+          currentPage={data.page}
+          totalPages={data.totalPages}
+          total={data.total}
+        />
+      </div>
+    </div>
+  );
+}
--- a/frontend/app/(dashboard)/search/page.tsx
+++ b/frontend/app/(dashboard)/search/page.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+import { SearchFilters } from "@/components/search/filters";
+import { SearchResults } from "@/components/search/results";
+import { searchApi } from "@/lib/api/search";
+import { SearchResult, SearchFilters as FilterType } from "@/types/search";
+
+export default function SearchPage() {
+  const searchParams = useSearchParams();
+  const query = searchParams.get("q") || "";
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [filters, setFilters] = useState<FilterType>({});
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchResults = async () => {
+      setLoading(true);
+      try {
+        const data = await searchApi.search({ query, ...filters });
+        setResults(data);
+      } catch (error) {
+        console.error("Search failed", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchResults();
+  }, [query, filters]);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold">Search Results</h1>
+        <p className="text-muted-foreground mt-1">
+          {loading
+            ? "Searching..."
+            : `Found ${results.length} results for "${query}"`
+          }
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        <div className="lg:col-span-1">
+          <SearchFilters onFilterChange={setFilters} />
+        </div>
+
+        <div className="lg:col-span-3">
+          <SearchResults results={results} query={query} loading={loading} />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/app/demo/page.tsx
+++ b/frontend/app/demo/page.tsx
@@ -1,85 +1,147 @@
-// File: app/demo/page.tsx
-
 "use client";

-import { ResponsiveDataTable, ColumnDef } from "@/components/custom/responsive-data-table";
-import { FileUploadZone, FileWithMeta } from "@/components/custom/file-upload-zone";
-import { WorkflowVisualizer, WorkflowStep } from "@/components/custom/workflow-visualizer";
-import { Badge } from "@/components/ui/badge";
+import { useState } from "react";
+import { DataTable } from "@/components/common/data-table";
+import { FileUpload } from "@/components/common/file-upload";
+import { StatusBadge } from "@/components/common/status-badge";
+import { ConfirmDialog } from "@/components/common/confirm-dialog";
+import { Pagination } from "@/components/common/pagination";
 import { Button } from "@/components/ui/button";
+import { ColumnDef } from "@tanstack/react-table";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

-// --- Mock Data ---
-interface DocItem {
+// Mock Data for Table
+interface Payment {
  id: string;
-  title: string;
+  amount: number;
  status: string;
-  date: string;
+  email: string;
 }

-const mockData: DocItem[] = [
-  { id: "RFA-001", title: "แบบก่อสร้างฐานราก", status: "Approved", date: "2023-11-01" },
-  { id: "RFA-002", title: "วัสดุงานผนัง", status: "Pending", date: "2023-11-05" },
-];
-
-const columns: ColumnDef<DocItem>[] = [
-  { key: "id", header: "Document No." },
-  { key: "title", header: "Subject" },
-  { 
-    key: "status", 
+const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: "status",
    header: "Status",
-    cell: (item) => (
-      <Badge variant={item.status === 'Approved' ? 'default' : 'secondary'}>
-        {item.status}
-      </Badge>
-    ) 
+    cell: ({ row }) => <StatusBadge status={row.getValue("status")} />,
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+  },
+  {
+    accessorKey: "amount",
+    header: "Amount",
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"));
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount);
+      return <div className="font-medium">{formatted}</div>;
+    },
  },
-  { key: "date", header: "Date" },
 ];

-const mockSteps: WorkflowStep[] = [
-    { id: 1, label: "ผู้รับเหมา", subLabel: "Submit", status: "completed", date: "10/11/2023" },
-    { id: 2, label: "CSC", subLabel: "Review", status: "current" },
-    { id: 3, label: "Designer", subLabel: "Approve", status: "pending" },
-    { id: 4, label: "Owner", subLabel: "Acknowledge", status: "pending" },
+const data: Payment[] = [
+  { id: "1", amount: 100, status: "PENDING", email: "m@example.com" },
+  { id: "2", amount: 200, status: "APPROVED", email: "test@example.com" },
+  { id: "3", amount: 300, status: "REJECTED", email: "fail@example.com" },
+  { id: "4", amount: 400, status: "IN_REVIEW", email: "review@example.com" },
+  { id: "5", amount: 500, status: "DRAFT", email: "draft@example.com" },
 ];

 export default function DemoPage() {
+  const [files, setFiles] = useState<File[]>([]);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [page, setPage] = useState(1);
+
  return (
-    <div className="container mx-auto py-10 space-y-10">
-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold">1. Responsive Data Table</h2>
-        <ResponsiveDataTable 
-            data={mockData} 
-            columns={columns} 
-            keyExtractor={(i) => i.id}
-            renderMobileCard={(item) => (
-                <div className="border p-4 rounded-lg shadow-sm bg-card">
-                    <div className="flex justify-between items-center mb-2">
-                        <span className="font-bold">{item.id}</span>
-                        <Badge>{item.status}</Badge>
-                    </div>
-                    <p className="text-sm mb-2">{item.title}</p>
-                    <div className="text-xs text-muted-foreground text-right">{item.date}</div>
-                    <Button size="sm" className="w-full mt-2" variant="outline">View Detail</Button>
-                </div>
-            )}
-        />
-      </section>
+    <div className="p-8 space-y-8">
+      <h1 className="text-3xl font-bold">Common Components Demo</h1>

-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold">2. File Upload Zone</h2>
-        <FileUploadZone 
-            onFilesChanged={(files) => console.log("Files:", files)}
-            accept={[".pdf", ".jpg", ".png"]}
-        />
-      </section>
+      {/* Status Badges */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Status Badges</CardTitle>
+        </CardHeader>
+        <CardContent className="flex gap-4 flex-wrap">
+          <StatusBadge status="DRAFT" />
+          <StatusBadge status="PENDING" />
+          <StatusBadge status="IN_REVIEW" />
+          <StatusBadge status="APPROVED" />
+          <StatusBadge status="REJECTED" />
+          <StatusBadge status="CLOSED" />
+          <StatusBadge status="UNKNOWN" />
+        </CardContent>
+      </Card>

-      <section className="space-y-4">
-        <h2 className="text-2xl font-bold">3. Workflow Visualizer</h2>
-        <div className="border p-6 rounded-lg">
-             <WorkflowVisualizer steps={mockSteps} />
-        </div>
-      </section>
+      {/* File Upload */}
+      <Card>
+        <CardHeader>
+          <CardTitle>File Upload</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <FileUpload
+            onFilesSelected={(files) => setFiles(files)}
+            maxFiles={3}
+          />
+          <div className="mt-4">
+            <h3 className="font-semibold">Selected Files:</h3>
+            <ul className="list-disc pl-5">
+              {files.map((f, i) => (
+                <li key={i}>
+                  {f.name} ({(f.size / 1024).toFixed(2)} KB)
+                </li>
+              ))}
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Data Table */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Data Table</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DataTable columns={columns} data={data} />
+        </CardContent>
+      </Card>
+
+      {/* Pagination */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Pagination</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Pagination
+            currentPage={page}
+            totalPages={10}
+            total={100}
+          />
+          {/* Note: In a real app, clicking pagination would update 'page' via URL or state */}
+        </CardContent>
+      </Card>
+
+      {/* Confirm Dialog */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Confirmation Dialog</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
+          <ConfirmDialog
+            open={dialogOpen}
+            onOpenChange={setDialogOpen}
+            title="Are you sure?"
+            description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
+            onConfirm={() => {
+              alert("Confirmed!");
+              setDialogOpen(false);
+            }}
+          />
+        </CardContent>
+      </Card>
    </div>
  );
-}
+}