251209:1453 Frontend: progress nest = UAT & Bug Fixing
This commit is contained in:
admin
219
frontend/app/(dashboard)/circulation/[id]/page.tsx
Normal file
219
frontend/app/(dashboard)/circulation/[id]/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
335
frontend/app/(dashboard)/circulation/new/page.tsx
Normal file
335
frontend/app/(dashboard)/circulation/new/page.tsx
Normal file
@@ -0,0 +1,335 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { circulationService } from "@/lib/services/circulation.service";
|
||||
import { userService } from "@/lib/services/user.service";
|
||||
import { correspondenceService } from "@/lib/services/correspondence.service";
|
||||
import { CreateCirculationDto } from "@/types/circulation";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ArrowLeft, Check, ChevronsUpDown, X } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { toast } from "sonner";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Form validation schema
|
||||
const formSchema = z.object({
|
||||
correspondenceId: z.number({ required_error: "Please select a document" }),
|
||||
subject: z.string().min(1, "Subject is required"),
|
||||
assigneeIds: z.array(z.number()).min(1, "At least one assignee is required"),
|
||||
remarks: z.string().optional(),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof formSchema>;
|
||||
|
||||
export default function CreateCirculationPage() {
|
||||
const router = useRouter();
|
||||
const [assigneeOpen, setAssigneeOpen] = useState(false);
|
||||
const [docOpen, setDocOpen] = useState(false);
|
||||
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
subject: "",
|
||||
assigneeIds: [],
|
||||
remarks: "",
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch users for assignee selection
|
||||
const { data: users = [] } = useQuery({
|
||||
queryKey: ["users"],
|
||||
queryFn: () => userService.getAll(),
|
||||
});
|
||||
|
||||
// Fetch correspondences for document selection
|
||||
const { data: correspondences } = useQuery({
|
||||
queryKey: ["correspondences-dropdown"],
|
||||
queryFn: () => correspondenceService.getAll({ limit: 100 }),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: CreateCirculationDto) => circulationService.create(data),
|
||||
onSuccess: (result) => {
|
||||
toast.success("Circulation created successfully");
|
||||
router.push(`/circulation/${result.id}`);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("Failed to create circulation");
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
createMutation.mutate(data);
|
||||
};
|
||||
|
||||
const selectedAssignees = form.watch("assigneeIds");
|
||||
const selectedDocId = form.watch("correspondenceId");
|
||||
|
||||
const selectedDoc = correspondences?.data?.find(
|
||||
(c: { id: number }) => c.id === selectedDocId
|
||||
);
|
||||
|
||||
const toggleAssignee = (userId: number) => {
|
||||
const current = form.getValues("assigneeIds");
|
||||
if (current.includes(userId)) {
|
||||
form.setValue(
|
||||
"assigneeIds",
|
||||
current.filter((id) => id !== userId)
|
||||
);
|
||||
} else {
|
||||
form.setValue("assigneeIds", [...current, userId]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="space-y-6 max-w-2xl">
|
||||
{/* Header */}
|
||||
<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">Create Circulation</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Create a new internal document circulation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Circulation Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Document Selection */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="correspondenceId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Document</FormLabel>
|
||||
<Popover open={docOpen} onOpenChange={setDocOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className={cn(
|
||||
"justify-between",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{selectedDoc
|
||||
? selectedDoc.correspondence_number
|
||||
: "Select document..."}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search documents..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No document found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{correspondences?.data?.map((doc: { id: number; correspondence_number: string }) => (
|
||||
<CommandItem
|
||||
key={doc.id}
|
||||
value={doc.correspondence_number}
|
||||
onSelect={() => {
|
||||
form.setValue("correspondenceId", doc.id);
|
||||
setDocOpen(false);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
doc.id === field.value
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{doc.correspondence_number}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Subject */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="subject"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Subject</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter circulation subject" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Assignees Multi-select */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="assigneeIds"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Assignees</FormLabel>
|
||||
<Popover open={assigneeOpen} onOpenChange={setAssigneeOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className="justify-between h-auto min-h-10"
|
||||
>
|
||||
{selectedAssignees.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{selectedAssignees.map((userId) => {
|
||||
const user = users.find(
|
||||
(u: { user_id: number }) => u.user_id === userId
|
||||
);
|
||||
return user ? (
|
||||
<Badge
|
||||
key={userId}
|
||||
variant="secondary"
|
||||
className="mr-1"
|
||||
>
|
||||
{user.first_name || user.username}
|
||||
<X
|
||||
className="ml-1 h-3 w-3 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleAssignee(userId);
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
) : null;
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">
|
||||
Select assignees...
|
||||
</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search users..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No user found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{users.map((user: { user_id: number; username: string; first_name?: string; last_name?: string }) => (
|
||||
<CommandItem
|
||||
key={user.user_id}
|
||||
value={user.username}
|
||||
onSelect={() => toggleAssignee(user.user_id)}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedAssignees.includes(user.user_id)
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{user.first_name && user.last_name
|
||||
? `${user.first_name} ${user.last_name}`
|
||||
: user.username}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Remarks */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="remarks"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Remarks (Optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Additional notes..."
|
||||
className="resize-none"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Link href="/circulation">
|
||||
<Button variant="outline" type="button">
|
||||
Cancel
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? "Creating..." : "Create Circulation"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user