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

2025-12-09 14:53:42 +07:00
parent 8aceced902
commit aa96cd90e3
125 changed files with 11052 additions and 785 deletions
--- a/frontend/app/(dashboard)/circulation/[id]/page.tsx
+++ b/frontend/app/(dashboard)/circulation/[id]/page.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { circulationService } from "@/lib/services/circulation.service";
+import { Circulation, UpdateCirculationRoutingDto } from "@/types/circulation";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { ArrowLeft, RefreshCw, CheckCircle2 } from "lucide-react";
+import Link from "next/link";
+import { format } from "date-fns";
+import { toast } from "sonner";
+
+/**
+ * Get initials from name
+ */
+function getInitials(firstName?: string, lastName?: string): string {
+  const first = firstName?.charAt(0) || "";
+  const last = lastName?.charAt(0) || "";
+  return (first + last).toUpperCase() || "?";
+}
+
+/**
+ * Get status badge variant
+ */
+function getStatusVariant(status: string): "default" | "secondary" | "destructive" | "outline" {
+  switch (status?.toUpperCase()) {
+    case "PENDING":
+      return "outline";
+    case "IN_PROGRESS":
+      return "default";
+    case "COMPLETED":
+      return "secondary";
+    case "REJECTED":
+      return "destructive";
+    default:
+      return "outline";
+  }
+}
+
+export default function CirculationDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const id = params.id as string;
+
+  const { data: circulation, isLoading, error } = useQuery<Circulation>({
+    queryKey: ["circulation", id],
+    queryFn: () => circulationService.getById(id),
+    enabled: !!id,
+  });
+
+  const completeMutation = useMutation({
+    mutationFn: ({ routingId, data }: { routingId: number; data: UpdateCirculationRoutingDto }) =>
+      circulationService.updateRouting(routingId, data),
+    onSuccess: () => {
+      toast.success("Task completed successfully");
+      queryClient.invalidateQueries({ queryKey: ["circulation", id] });
+    },
+    onError: () => {
+      toast.error("Failed to update task status");
+    },
+  });
+
+  const handleComplete = (routingId: number) => {
+    completeMutation.mutate({
+      routingId,
+      data: { status: "COMPLETED", comments: "Completed via UI" },
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error || !circulation) {
+    return (
+      <div className="space-y-4">
+        <Link href="/circulation">
+          <Button variant="ghost">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Circulations
+          </Button>
+        </Link>
+        <div className="bg-destructive/10 text-destructive px-4 py-3 rounded-md">
+          Failed to load circulation details.
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <section className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link href="/circulation">
+            <Button variant="ghost" size="icon">
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-2xl font-bold">{circulation.circulationNo}</h1>
+            <p className="text-muted-foreground">{circulation.subject}</p>
+          </div>
+        </div>
+        <Badge variant={getStatusVariant(circulation.statusCode)}>
+          {circulation.statusCode}
+        </Badge>
+      </div>
+
+      {/* Info Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Circulation Details</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-2">
+          <div>
+            <p className="text-sm text-muted-foreground">Organization</p>
+            <p className="font-medium">
+              {circulation.organization?.organization_name || "-"}
+            </p>
+          </div>
+          <div>
+            <p className="text-sm text-muted-foreground">Created By</p>
+            <p className="font-medium">
+              {circulation.creator
+                ? `${circulation.creator.first_name || ""} ${circulation.creator.last_name || ""}`.trim() ||
+                  circulation.creator.username
+                : "-"}
+            </p>
+          </div>
+          <div>
+            <p className="text-sm text-muted-foreground">Created At</p>
+            <p className="font-medium">
+              {format(new Date(circulation.createdAt), "dd MMM yyyy, HH:mm")}
+            </p>
+          </div>
+          {circulation.correspondence && (
+            <div>
+              <p className="text-sm text-muted-foreground">Linked Document</p>
+              <Link
+                href={`/correspondences/${circulation.correspondenceId}`}
+                className="font-medium text-primary hover:underline"
+              >
+                {circulation.correspondence.correspondence_number}
+              </Link>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Assignees/Routings */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Assignees</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {circulation.routings && circulation.routings.length > 0 ? (
+            <div className="space-y-3">
+              {circulation.routings.map((routing) => (
+                <div
+                  key={routing.id}
+                  className="flex items-center justify-between p-3 border rounded-lg"
+                >
+                  <div className="flex items-center gap-3">
+                    <Avatar>
+                      <AvatarFallback>
+                        {getInitials(
+                          routing.assignee?.first_name,
+                          routing.assignee?.last_name
+                        )}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p className="font-medium">
+                        {routing.assignee
+                          ? `${routing.assignee.first_name || ""} ${routing.assignee.last_name || ""}`.trim() ||
+                            routing.assignee.username
+                          : "Unassigned"}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        Step {routing.stepNumber}
+                        {routing.comments && ` • ${routing.comments}`}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Badge variant={getStatusVariant(routing.status)}>
+                      {routing.status}
+                    </Badge>
+                    {routing.status === "PENDING" && (
+                      <Button
+                        size="sm"
+                        onClick={() => handleComplete(routing.id)}
+                        disabled={completeMutation.isPending}
+                      >
+                        <CheckCircle2 className="h-4 w-4 mr-1" />
+                        Complete
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-muted-foreground">No assignees found</p>
+          )}
+        </CardContent>
+      </Card>
+    </section>
+  );
+}