251208:0010 Backend & Frontend Debug

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>