251208:0010 Backend & Frontend Debug

frontend/app/(admin)/admin/audit-logs/page.tsx

@@ -1,120 +1,53 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useAuditLogs } from "@/hooks/use-audit-logs";
 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();
-  }, []);
+  const { data: logs, isLoading } = useAuditLogs();
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="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" />
+      {isLoading ? (
+        <div className="flex justify-center p-8">
+            <Loader2 className="animate-spin" />
         </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>
-          ))}
+            {!logs || logs.length === 0 ? (
+                <div className="text-center text-muted-foreground py-10">No logs found</div>
+            ) : (
+                logs.map((log: any) => (
+                <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 text-sm">{log.user_name || `User #${log.user_id}`}</span>
+                        <Badge variant="outline" className="uppercase text-[10px]">{log.action}</Badge>
+                        <Badge variant="secondary" className="uppercase text-[10px]">{log.entity_type}</Badge>
+                        </div>
+                        <p className="text-sm text-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 font-mono bg-muted px-2 py-1 rounded">
+                        {log.ip_address}
+                        </span>
+                    )}
+                    </div>
+                </Card>
+                ))
+            )}
         </div>
       )}
     </div>

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { DataTable } from "@/components/common/data-table";
 import { Input } from "@/components/ui/input";
@@ -11,16 +11,32 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Organization } from "@/types/admin";
-import { adminApi } from "@/lib/api/admin";
+import { useOrganizations, useCreateOrganization, useUpdateOrganization, useDeleteOrganization } from "@/hooks/use-master-data";
 import { ColumnDef } from "@tanstack/react-table";
-import { Loader2, Plus } from "lucide-react";
+import { Pencil, Trash, Plus } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+interface Organization {
+    organization_id: number;
+    org_code: string;
+    org_name: string;
+    org_name_th: string;
+    description?: string;
+}
 
 export default function OrganizationsPage() {
-  const [organizations, setOrganizations] = useState<Organization[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: organizations, isLoading } = useOrganizations();
+  const createOrg = useCreateOrganization();
+  const updateOrg = useUpdateOrganization();
+  const deleteOrg = useDeleteOrganization();
+
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [editingOrg, setEditingOrg] = useState<Organization | null>(null);
   const [formData, setFormData] = useState({
     org_code: "",
     org_name: "",
@@ -28,127 +44,131 @@ export default function OrganizationsPage() {
     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" },
+    {
+        id: "actions",
+        header: "Actions",
+        cell: ({ row }) => (
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Open menu</span>
+                        <Pencil className="h-4 w-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => handleEdit(row.original)}>
+                        Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        className="text-red-600"
+                        onClick={() => {
+                            if (confirm("Delete this organization?")) {
+                                deleteOrg.mutate(row.original.organization_id);
+                            }
+                        }}
+                    >
+                        Delete
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        )
+    }
   ];
 
-  const handleSubmit = async () => {
-    setIsSubmitting(true);
-    try {
-      await adminApi.createOrganization(formData);
-      setDialogOpen(false);
+  const handleEdit = (org: Organization) => {
+      setEditingOrg(org);
       setFormData({
-        org_code: "",
-        org_name: "",
-        org_name_th: "",
-        description: "",
+          org_code: org.org_code,
+          org_name: org.org_name,
+          org_name_th: org.org_name_th,
+          description: org.description || ""
       });
-      fetchOrgs();
-    } catch (error) {
-      console.error(error);
-      alert("Failed to create organization");
-    } finally {
-      setIsSubmitting(false);
-    }
+      setDialogOpen(true);
+  };
+
+  const handleAdd = () => {
+      setEditingOrg(null);
+      setFormData({ org_code: "", org_name: "", org_name_th: "", description: "" });
+      setDialogOpen(true);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      if (editingOrg) {
+          updateOrg.mutate({ id: editingOrg.organization_id, data: formData }, {
+              onSuccess: () => setDialogOpen(false)
+          });
+      } else {
+          createOrg.mutate(formData, {
+              onSuccess: () => setDialogOpen(false)
+          });
+      }
   };
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="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>
+          <p className="text-muted-foreground mt-1">Manage project organizations system-wide</p>
         </div>
-        <Button onClick={() => setDialogOpen(true)}>
-          <Plus className="mr-2 h-4 w-4" />
-          Add Organization
+        <Button onClick={handleAdd}>
+            <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} />
-      )}
+      <DataTable columns={columns} data={organizations || []} />
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Add Organization</DialogTitle>
+            <DialogTitle>{editingOrg ? "Edit Organization" : "New Organization"}</DialogTitle>
           </DialogHeader>
-          <div className="space-y-4">
+          <form onSubmit={handleSubmit} className="space-y-4">
             <div>
-              <Label htmlFor="org_code">Organization Code *</Label>
+              <Label>Code</Label>
               <Input
-                id="org_code"
                 value={formData.org_code}
-                onChange={(e) =>
-                  setFormData({ ...formData, org_code: e.target.value })
-                }
-                placeholder="e.g., PAT"
+                onChange={(e) => setFormData({ ...formData, org_code: e.target.value })}
+                required
               />
             </div>
             <div>
-              <Label htmlFor="org_name">Name (English) *</Label>
+              <Label>Name (EN)</Label>
               <Input
-                id="org_name"
                 value={formData.org_name}
-                onChange={(e) =>
-                  setFormData({ ...formData, org_name: e.target.value })
-                }
+                onChange={(e) => setFormData({ ...formData, org_name: e.target.value })}
+                required
               />
             </div>
             <div>
-              <Label htmlFor="org_name_th">Name (Thai)</Label>
+              <Label>Name (TH)</Label>
               <Input
-                id="org_name_th"
                 value={formData.org_name_th}
-                onChange={(e) =>
-                  setFormData({ ...formData, org_name_th: e.target.value })
-                }
+                onChange={(e) => setFormData({ ...formData, org_name_th: e.target.value })}
               />
             </div>
             <div>
-              <Label htmlFor="description">Description</Label>
+              <Label>Description</Label>
               <Input
-                id="description"
                 value={formData.description}
-                onChange={(e) =>
-                  setFormData({ ...formData, description: e.target.value })
-                }
+                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}>
+              <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>
                 Cancel
               </Button>
-              <Button onClick={handleSubmit} disabled={isSubmitting}>
-                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                Create
+              <Button type="submit" disabled={createOrg.isPending || updateOrg.isPending}>
+                Save
               </Button>
             </div>
-          </div>
+          </form>
         </DialogContent>
       </Dialog>
     </div>

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

@@ -1,43 +1,27 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useUsers, useDeleteUser } from "@/hooks/use-users";
 import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/common/data-table";
+import { DataTable } from "@/components/common/data-table"; // Reuse Data Table
+import { Plus, MoreHorizontal, Pencil, Trash } from "lucide-react"; // Import Icons
+import { useState } from "react";
 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";
+import { Badge } from "@/components/ui/badge";
+import { ColumnDef } from "@tanstack/react-table";
+import { User } from "@/types/user";
 
 export default function UsersPage() {
-  const [users, setUsers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: users, isLoading } = useUsers();
+  const deleteMutation = useDeleteUser();
   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",
@@ -48,95 +32,73 @@ export default function UsersPage() {
       header: "Email",
     },
     {
-      accessorKey: "first_name",
-      header: "Name",
-      cell: ({ row }) => `${row.original.first_name} ${row.original.last_name}`,
+        id: "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" : ""}>
+        <Badge variant={row.original.is_active ? "default" : "secondary"}>
           {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>
-      ),
-    },
+        id: "actions",
+        header: "Actions",
+        cell: ({ row }) => {
+            const user = row.original;
+            return (
+                <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">
+                        <DropdownMenuItem onClick={() => { setSelectedUser(user); setDialogOpen(true); }}>
+                            <Pencil className="mr-2 h-4 w-4" /> Edit
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                            className="text-red-600"
+                            onClick={() => {
+                                if (confirm("Are you sure?")) deleteMutation.mutate(user.user_id);
+                            }}
+                        >
+                            <Trash className="mr-2 h-4 w-4" /> Delete
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            )
+        }
+    }
   ];
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="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>
+          <p className="text-muted-foreground mt-1">Manage system users and roles</p>
         </div>
-        <Button
-          onClick={() => {
-            setSelectedUser(null);
-            setDialogOpen(true);
-          }}
-        >
-          <Plus className="mr-2 h-4 w-4" />
-          Add User
+        <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>
+      {isLoading ? (
+          <div>Loading...</div>
       ) : (
-        <DataTable columns={columns} data={users} />
+          <DataTable columns={columns} data={users || []} />
       )}
 
       <UserDialog
-        open={dialogOpen}
-        onOpenChange={setDialogOpen}
-        user={selectedUser}
-        onSuccess={fetchUsers}
+         open={dialogOpen}
+         onOpenChange={setDialogOpen}
+         user={selectedUser}
       />
     </div>
   );

frontend/app/(admin)/layout.tsx

@@ -1,28 +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
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/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('/');
-  // }
+  const session = await getServerSession(authOptions);
 
-  // For development, we assume user is admin
-  const isAdmin = true;
-  if (!isAdmin) {
-    redirect("/");
+  // Check if user has admin role
+  // This depends on your Session structure. Assuming user.roles exists (mapped in callback).
+  // If not, you might need to check DB or use Can component logic but server-side.
+  const isAdmin = session?.user?.roles?.some((r: any) => r.role_name === 'ADMIN');
+
+  if (!session || !isAdmin) {
+    // If not admin, redirect to dashboard or login
+     redirect("/");
   }
 
   return (
-    <div className="flex h-[calc(100vh-4rem)]"> {/* Subtract header height */}
+    <div className="flex h-screen w-full bg-background">
       <AdminSidebar />
-      <div className="flex-1 overflow-auto bg-muted/10">
+      <div className="flex-1 overflow-auto bg-muted/10 p-4">
         {children}
       </div>
     </div>