251208:1625 Frontend: to be complete admin panel, Backend: tobe recheck all task
Some checks failed
Spec Validation / validate-markdown (push) Has been cancelled
Spec Validation / validate-diagrams (push) Has been cancelled
Spec Validation / check-todos (push) Has been cancelled

This commit is contained in:
admin
2025-12-08 16:25:56 +07:00
parent dcd126d704
commit 863a727756
64 changed files with 5956 additions and 1256 deletions

View File

@@ -7,18 +7,9 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { format } from "date-fns";
import { ArrowLeft, CheckCircle, XCircle, Loader2 } from "lucide-react";
import Link from "next/link";
import { Separator } from "@/components/ui/separator";
import { useState } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { rfaApi } from "@/lib/api/rfas"; // Deprecated, remove if possible
import { useRouter } from "next/navigation";
import { useProcessRFA } from "@/hooks/use-rfa";
@@ -28,12 +19,14 @@ interface RFADetailProps {
export function RFADetail({ data }: RFADetailProps) {
const router = useRouter();
const [approvalDialog, setApprovalDialog] = useState<"approve" | "reject" | null>(null);
const [actionState, setActionState] = useState<"approve" | "reject" | null>(null);
const [comments, setComments] = useState("");
const processMutation = useProcessRFA();
const handleApproval = async (action: "approve" | "reject") => {
const apiAction = action === "approve" ? "APPROVE" : "REJECT";
const handleProcess = () => {
if (!actionState) return;
const apiAction = actionState === "approve" ? "APPROVE" : "REJECT";
processMutation.mutate(
{
@@ -45,7 +38,8 @@ export function RFADetail({ data }: RFADetailProps) {
},
{
onSuccess: () => {
setApprovalDialog(null);
setActionState(null);
setComments("");
// Query invalidation handled in hook
},
}
@@ -75,14 +69,14 @@ export function RFADetail({ data }: RFADetailProps) {
<Button
variant="outline"
className="text-destructive hover:text-destructive hover:bg-destructive/10"
onClick={() => setApprovalDialog("reject")}
onClick={() => setActionState("reject")}
>
<XCircle className="mr-2 h-4 w-4" />
Reject
</Button>
<Button
className="bg-green-600 hover:bg-green-700 text-white"
onClick={() => setApprovalDialog("approve")}
onClick={() => setActionState("approve")}
>
<CheckCircle className="mr-2 h-4 w-4" />
Approve
@@ -91,6 +85,39 @@ export function RFADetail({ data }: RFADetailProps) {
)}
</div>
{/* Action Input Area */}
{actionState && (
<Card className="border-primary">
<CardHeader>
<CardTitle className="text-lg">
{actionState === "approve" ? "Confirm Approval" : "Confirm Rejection"}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label>Comments</Label>
<Textarea
value={comments}
onChange={(e) => setComments(e.target.value)}
placeholder="Enter comments..."
/>
</div>
<div className="flex justify-end gap-2">
<Button variant="ghost" onClick={() => setActionState(null)}>Cancel</Button>
<Button
variant={actionState === "approve" ? "default" : "destructive"}
onClick={handleProcess}
disabled={processMutation.isPending}
className={actionState === "approve" ? "bg-green-600 hover:bg-green-700" : ""}
>
{processMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Confirm {actionState === "approve" ? "Approve" : "Reject"}
</Button>
</div>
</CardContent>
</Card>
)}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main Content */}
<div className="lg:col-span-2 space-y-6">
@@ -109,7 +136,7 @@ export function RFADetail({ data }: RFADetailProps) {
</p>
</div>
<Separator />
<hr className="my-4 border-t" />
<div>
<h3 className="font-semibold mb-3">RFA Items</h3>
@@ -156,7 +183,7 @@ export function RFADetail({ data }: RFADetailProps) {
<p className="font-medium mt-1">{data.contract_name}</p>
</div>
<Separator />
<hr className="my-4 border-t" />
<div>
<p className="text-sm font-medium text-muted-foreground">Discipline</p>
@@ -166,42 +193,6 @@ export function RFADetail({ data }: RFADetailProps) {
</Card>
</div>
</div>
{/* Approval Dialog */}
<Dialog open={!!approvalDialog} onOpenChange={(open) => !open && setApprovalDialog(null)}>
<DialogContent>
<DialogHeader>
<DialogTitle>
{approvalDialog === "approve" ? "Approve RFA" : "Reject RFA"}
</DialogTitle>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label>Comments</Label>
<Textarea
value={comments}
onChange={(e) => setComments(e.target.value)}
placeholder="Enter your comments here..."
rows={4}
/>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setApprovalDialog(null)} disabled={processMutation.isPending}>
Cancel
</Button>
<Button
variant={approvalDialog === "approve" ? "default" : "destructive"}
onClick={() => handleApproval(approvalDialog!)}
disabled={processMutation.isPending}
className={approvalDialog === "approve" ? "bg-green-600 hover:bg-green-700" : ""}
>
{processMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{approvalDialog === "approve" ? "Confirm Approval" : "Confirm Rejection"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
);
}