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/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>
+  );
+}