251209:1453 Frontend: progress nest = UAT & Bug Fixing

frontend/app/(dashboard)/circulation/page.tsx

@@ -1,16 +1,72 @@
-// File: e:/np-dms/lcbp3/frontend/app/(dashboard)/circulation/page.tsx
-// Change Log: Added circulation page under dashboard layout
+"use client";
 
-import CirculationList from "@/components/CirculationList";
+import { useQuery } from "@tanstack/react-query";
+import { CirculationList } from "@/components/circulation/circulation-list";
+import { circulationService } from "@/lib/services/circulation.service";
+import { Button } from "@/components/ui/button";
+import { Plus, RefreshCw } from "lucide-react";
+import Link from "next/link";
+import { CirculationListResponse } from "@/types/circulation";
 
 /**
- * หน้าแสดงรายการการหมุนเวียนเอกสาร (อยู่ใน Dashboard)
+ * Circulation list page - displays circulations for the current user's organization
  */
 export default function CirculationPage() {
+  const {
+    data,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<CirculationListResponse>({
+    queryKey: ["circulations"],
+    queryFn: () => circulationService.getAll(),
+  });
+
   return (
-    <section>
-      <h1 className="text-2xl font-bold mb-4">Circulation</h1>
-      <CirculationList />
+    <section className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Circulation</h1>
+          <p className="text-muted-foreground">
+            Manage internal document circulation and assignments
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => refetch()}
+            disabled={isLoading}
+            title="Refresh"
+          >
+            <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
+          </Button>
+          <Link href="/circulation/new">
+            <Button>
+              <Plus className="h-4 w-4 mr-2" />
+              Create Circulation
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      {error && (
+        <div className="bg-destructive/10 text-destructive px-4 py-3 rounded-md">
+          Failed to load circulations. Please try again.
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      ) : data ? (
+        <CirculationList data={data} />
+      ) : (
+        <div className="text-center py-12 text-muted-foreground">
+          No circulations found
+        </div>
+      )}
     </section>
   );
 }