260322:1648 Correct Coresspondence / Doing RFA / Correct CI

frontend/components/circulation/circulation-list.tsx

@@ -1,14 +1,14 @@
-"use client";
+'use client';
 
-import { Circulation, CirculationListResponse } from "@/types/circulation";
-import { DataTable } from "@/components/common/data-table";
-import { ColumnDef } from "@tanstack/react-table";
-import { StatusBadge } from "@/components/common/status-badge";
-import { Button } from "@/components/ui/button";
-import { Eye, CheckCircle2 } from "lucide-react";
-import Link from "next/link";
-import { format } from "date-fns";
-import { Badge } from "@/components/ui/badge";
+import { Circulation, CirculationListResponse } from '@/types/circulation';
+import { DataTable } from '@/components/common/data-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { _StatusBadge } from '@/components/common/status-badge';
+import { Button } from '@/components/ui/button';
+import { Eye, _CheckCircle2 } from 'lucide-react';
+import Link from 'next/link';
+import { format } from 'date-fns';
+import { Badge } from '@/components/ui/badge';
 
 interface CirculationListProps {
   data: CirculationListResponse;
@@ -17,29 +17,27 @@ interface CirculationListProps {
 /**
  * Calculate progress of circulation routings
  */
-function getProgress(routings?: Circulation["routings"]) {
+function getProgress(routings?: Circulation['routings']) {
   if (!routings || routings.length === 0) return { completed: 0, total: 0 };
-  const completed = routings.filter((r) => r.status === "COMPLETED").length;
+  const completed = routings.filter((r) => r.status === 'COMPLETED').length;
   return { completed, total: routings.length };
 }
 
 /**
  * Get status color variant for circulation status
  */
-function getStatusVariant(
-  statusCode: string
-): "default" | "secondary" | "destructive" | "outline" {
+function getStatusVariant(statusCode: string): 'default' | 'secondary' | 'destructive' | 'outline' {
   switch (statusCode?.toUpperCase()) {
-    case "DRAFT":
-      return "outline";
-    case "ACTIVE":
-    case "IN_PROGRESS":
-      return "default";
-    case "COMPLETED":
-    case "CLOSED":
-      return "secondary";
+    case 'DRAFT':
+      return 'outline';
+    case 'ACTIVE':
+    case 'IN_PROGRESS':
+      return 'default';
+    case 'COMPLETED':
+    case 'CLOSED':
+      return 'secondary';
     default:
-      return "outline";
+      return 'outline';
   }
 }
 
@@ -48,51 +46,46 @@ export function CirculationList({ data }: CirculationListProps) {
 
   const columns: ColumnDef<Circulation>[] = [
     {
-      accessorKey: "circulationNo",
-      header: "Circulation No.",
-      cell: ({ row }) => (
-        <span className="font-medium">{row.getValue("circulationNo")}</span>
-      ),
+      accessorKey: 'circulationNo',
+      header: 'Circulation No.',
+      cell: ({ row }) => <span className="font-medium">{row.getValue('circulationNo')}</span>,
     },
     {
-      accessorKey: "subject",
-      header: "Subject",
+      accessorKey: 'subject',
+      header: 'Subject',
       cell: ({ row }) => (
-        <div className="max-w-[250px] truncate" title={row.getValue("subject")}>
-          {row.getValue("subject")}
+        <div className="max-w-[250px] truncate" title={row.getValue('subject')}>
+          {row.getValue('subject')}
         </div>
       ),
     },
     {
-      accessorKey: "organization",
-      header: "Organization",
+      accessorKey: 'organization',
+      header: 'Organization',
       cell: ({ row }) => {
         const org = row.original.organization;
-        return org?.organization_name || "-";
+        return org?.organization_name || '-';
       },
     },
     {
-      accessorKey: "statusCode",
-      header: "Status",
+      accessorKey: 'statusCode',
+      header: 'Status',
       cell: ({ row }) => {
-        const status = row.getValue("statusCode") as string;
+        const status = row.getValue('statusCode') as string;
         return <Badge variant={getStatusVariant(status)}>{status}</Badge>;
       },
     },
     {
-      id: "progress",
-      header: "Progress",
+      id: 'progress',
+      header: 'Progress',
       cell: ({ row }) => {
         const { completed, total } = getProgress(row.original.routings);
-        if (total === 0) return "-";
+        if (total === 0) return '-';
         const percent = Math.round((completed / total) * 100);
         return (
           <div className="flex items-center gap-2">
             <div className="w-20 h-2 bg-muted rounded-full overflow-hidden">
-              <div
-                className="h-full bg-primary transition-all"
-                style={{ width: `${percent}%` }}
-              />
+              <div className="h-full bg-primary transition-all" style={{ width: `${percent}%` }} />
             </div>
             <span className="text-xs text-muted-foreground">
               {completed}/{total}
@@ -102,13 +95,12 @@ export function CirculationList({ data }: CirculationListProps) {
       },
     },
     {
-      accessorKey: "createdAt",
-      header: "Created",
-      cell: ({ row }) =>
-        format(new Date(row.getValue("createdAt")), "dd MMM yyyy"),
+      accessorKey: 'createdAt',
+      header: 'Created',
+      cell: ({ row }) => format(new Date(row.getValue('createdAt')), 'dd MMM yyyy'),
     },
     {
-      id: "actions",
+      id: 'actions',
       cell: ({ row }) => {
         const item = row.original;
         return (