np-dms/lcbp3
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

264
frontend/app/(admin)/admin/numbering/page.tsx
View File

@@ -1,135 +1,193 @@
"use client";
'use client';
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Plus, Edit, Eye, Loader2 } from "lucide-react";
import Link from "next/link";
import { NumberingTemplate } from "@/types/numbering";
import { numberingApi } from "@/lib/api/numbering";
import { TemplateTester } from "@/components/numbering/template-tester";
import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Plus, Edit, Play } from 'lucide-react';
import { numberingApi, NumberingTemplate } from '@/lib/api/numbering';
import { TemplateEditor } from '@/components/numbering/template-editor';
import { SequenceViewer } from '@/components/numbering/sequence-viewer';
import { TemplateTester } from '@/components/numbering/template-tester';
import { toast } from 'sonner';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
const PROJECTS = [
{ id: '1', name: 'LCBP3' },
{ id: '2', name: 'LCBP3-Maintenance' },
];
export default function NumberingPage() {
const [selectedProjectId, setSelectedProjectId] = useState("1");
const [templates, setTemplates] = useState<NumberingTemplate[]>([]);
const [loading, setLoading] = useState(true);
const [testerOpen, setTesterOpen] = useState(false);
const [selectedTemplate, setSelectedTemplate] = useState<NumberingTemplate | null>(null);
const [, setLoading] = useState(true);
useEffect(() => {
const fetchTemplates = async () => {
setLoading(true);
try {
// View states
const [isEditing, setIsEditing] = useState(false);
const [activeTemplate, setActiveTemplate] = useState<NumberingTemplate | undefined>(undefined);
const [isTesting, setIsTesting] = useState(false);
const [testTemplate, setTestTemplate] = useState<NumberingTemplate | null>(null);
const selectedProjectName = PROJECTS.find(p => p.id === selectedProjectId)?.name || 'Unknown Project';
const loadTemplates = async () => {
setLoading(true);
try {
const data = await numberingApi.getTemplates();
setTemplates(data);
} catch (error) {
console.error("Failed to fetch templates", error);
} finally {
} catch {
toast.error("Failed to load templates");
} finally {
setLoading(false);
}
};
}
};
fetchTemplates();
useEffect(() => {
loadTemplates();
}, []);
const handleTest = (template: NumberingTemplate) => {
setSelectedTemplate(template);
setTesterOpen(true);
const handleEdit = (template?: NumberingTemplate) => {
setActiveTemplate(template);
setIsEditing(true);
};
const handleSave = async (data: Partial<NumberingTemplate>) => {
try {
await numberingApi.saveTemplate(data);
toast.success(data.template_id ? "Template updated" : "Template created");
setIsEditing(false);
loadTemplates();
} catch {
toast.error("Failed to save template");
}
};
const handleTest = (template: NumberingTemplate) => {
setTestTemplate(template);
setIsTesting(true);
};
if (isEditing) {
return (
<div className="p-6 max-w-4xl mx-auto animate-in fade-in slide-in-from-bottom-4">
<TemplateEditor
template={activeTemplate}
projectId={Number(selectedProjectId)}
projectName={selectedProjectName}
onSave={handleSave}
onCancel={() => setIsEditing(false)}
/>
</div>
);
}
return (
<div className="p-6 space-y-6">
<div className="flex justify-between items-center">
<div>
<h1 className="text-3xl font-bold">
Document Numbering Configuration
<h1 className="text-3xl font-bold tracking-tight">
Document Numbering
</h1>
<p className="text-muted-foreground mt-1">
Manage document numbering templates and sequences
Manage numbering templates and sequences
</p>
</div>
<Link href="/admin/numbering/new">
<Button>
<Plus className="mr-2 h-4 w-4" />
New Template
</Button>
</Link>
<div className="flex gap-2">
<Select value={selectedProjectId} onValueChange={setSelectedProjectId}>
<SelectTrigger className="w-[200px]">
<SelectValue placeholder="Select Project" />
</SelectTrigger>
<SelectContent>
{PROJECTS.map(project => (
<SelectItem key={project.id} value={project.id}>
{project.name}
</SelectItem>
))}
</SelectContent>
</Select>
<Button onClick={() => handleEdit(undefined)}>
<Plus className="mr-2 h-4 w-4" />
New Template
</Button>
</div>
</div>
{loading ? (
<div className="flex justify-center py-12">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</div>
) : (
<div className="grid gap-4">
{templates.map((template) => (
<Card key={template.template_id} className="p-6">
<div className="flex justify-between items-start">
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h3 className="text-lg font-semibold">
{template.document_type_name}
</h3>
<Badge variant="outline">{template.discipline_code || "All"}</Badge>
<Badge variant={template.is_active ? "default" : "secondary"} className={template.is_active ? "bg-green-600 hover:bg-green-700" : ""}>
{template.is_active ? "Active" : "Inactive"}
</Badge>
</div>
<div className="grid lg:grid-cols-3 gap-6">
<div className="lg:col-span-2 space-y-4">
<h2 className="text-lg font-semibold">Templates - {selectedProjectName}</h2>
<div className="grid gap-4">
{templates
.filter(t => !t.project_id || t.project_id === Number(selectedProjectId)) // Show all if no project_id (legacy mock), or match
.map((template) => (
<Card key={template.template_id} className="p-6 hover:shadow-md transition-shadow">
<div className="flex justify-between items-start">
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h3 className="text-lg font-semibold">
{template.document_type_name}
</h3>
<Badge variant="outline" className="text-xs">
{PROJECTS.find(p => p.id === template.project_id?.toString())?.name || selectedProjectName}
</Badge>
{template.discipline_code && <Badge>{template.discipline_code}</Badge>}
<Badge variant={template.is_active ? 'default' : 'secondary'}>
{template.is_active ? 'Active' : 'Inactive'}
</Badge>
</div>
<div className="bg-muted rounded px-3 py-2 mb-3 font-mono text-sm">
{template.template_format}
</div>
<div className="bg-slate-100 dark:bg-slate-900 rounded px-3 py-2 mb-3 font-mono text-sm inline-block border">
{template.template_format}
</div>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<span className="text-muted-foreground">Example: </span>
<span className="font-medium">
{template.example_number}
</span>
<div className="grid grid-cols-2 gap-4 text-sm mt-2">
<div>
<span className="text-muted-foreground">Example: </span>
<span className="font-medium font-mono text-green-600 dark:text-green-400">
{template.example_number}
</span>
</div>
<div>
<span className="text-muted-foreground">Reset: </span>
<span>
{template.reset_annually ? 'Annually' : 'Never'}
</span>
</div>
</div>
</div>
<div>
<span className="text-muted-foreground">Current Sequence: </span>
<span className="font-medium">
{template.current_number}
</span>
</div>
<div>
<span className="text-muted-foreground">Annual Reset: </span>
<span className="font-medium">
{template.reset_annually ? "Yes" : "No"}
</span>
</div>
<div>
<span className="text-muted-foreground">Padding: </span>
<span className="font-medium">
{template.padding_length} digits
</span>
</div>
</div>
</div>
<div className="flex gap-2">
<Link href={`/admin/numbering/${template.template_id}/edit`}>
<Button variant="outline" size="sm">
<Edit className="mr-2 h-4 w-4" />
Edit
</Button>
</Link>
<Button variant="outline" size="sm" onClick={() => handleTest(template)}>
<Eye className="mr-2 h-4 w-4" />
Test & View
</Button>
</div>
</div>
</Card>
))}
</div>
)}
<div className="flex flex-col gap-2">
<Button variant="outline" size="sm" onClick={() => handleEdit(template)}>
<Edit className="mr-2 h-4 w-4" />
Edit
</Button>
<Button variant="outline" size="sm" onClick={() => handleTest(template)}>
<Play className="mr-2 h-4 w-4" />
Test
</Button>
</div>
</div>
</Card>
))}
</div>
</div>
<div className="space-y-4">
{/* Sequence Viewer Sidebar */}
<SequenceViewer />
</div>
</div>
<TemplateTester
open={testerOpen}
onOpenChange={setTesterOpen}
template={selectedTemplate}
open={isTesting}
onOpenChange={setIsTesting}
template={testTemplate}
/>
</div>
);

5
frontend/app/(admin)/admin/page.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { redirect } from 'next/navigation';
export default function AdminPage() {
redirect('/admin/workflows');
}

296
frontend/app/(admin)/admin/workflows/[id]/edit/page.tsx
View File

@@ -1,164 +1,206 @@
"use client";
'use client';
import { useState, useEffect } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { DSLEditor } from "@/components/workflows/dsl-editor";
import { VisualWorkflowBuilder } from "@/components/workflows/visual-builder";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Card } from "@/components/ui/card";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { workflowApi } from "@/lib/api/workflows";
import { WorkflowType } from "@/types/workflow";
import { useRouter } from "next/navigation";
import { Loader2 } from "lucide-react";
import { useState, useEffect } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { DSLEditor } from '@/components/workflows/dsl-editor';
import { VisualWorkflowBuilder } from '@/components/workflows/visual-builder';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Card } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { workflowApi } from '@/lib/api/workflows';
import { Workflow, CreateWorkflowDto } from '@/types/workflow';
import { toast } from 'sonner';
import { Save, ArrowLeft, Loader2 } from 'lucide-react';
import Link from 'next/link';
export default function WorkflowEditPage({ params }: { params: { id: string } }) {
export default function WorkflowEditPage() {
const params = useParams();
const router = useRouter();
const [loading, setLoading] = useState(true);
const id = params?.id === 'new' ? null : Number(params?.id);
const [loading, setLoading] = useState(!!id);
const [saving, setSaving] = useState(false);
const [workflowData, setWorkflowData] = useState({
workflow_name: "",
description: "",
workflow_type: "CORRESPONDENCE" as WorkflowType,
dsl_definition: "",
const [workflowData, setWorkflowData] = useState<Partial<Workflow>>({
workflow_name: '',
description: '',
workflow_type: 'CORRESPONDENCE',
dsl_definition: 'name: New Workflow\nversion: 1.0\nsteps: []',
is_active: true,
});
useEffect(() => {
const fetchWorkflow = async () => {
setLoading(true);
try {
const data = await workflowApi.getWorkflow(parseInt(params.id));
if (data) {
setWorkflowData({
workflow_name: data.workflow_name,
description: data.description,
workflow_type: data.workflow_type,
dsl_definition: data.dsl_definition,
});
}
} catch (error) {
console.error("Failed to fetch workflow", error);
} finally {
setLoading(false);
}
};
fetchWorkflow();
}, [params.id]);
if (id) {
const fetchWorkflow = async () => {
try {
const data = await workflowApi.getWorkflow(id);
if (data) {
setWorkflowData(data);
} else {
toast.error("Workflow not found");
router.push('/admin/workflows');
}
} catch (error) {
toast.error("Failed to load workflow");
console.error(error);
} finally {
setLoading(false);
}
};
fetchWorkflow();
}
}, [id, router]);
const handleSave = async () => {
if (!workflowData.workflow_name) {
toast.error("Workflow name is required");
return;
}
setSaving(true);
try {
await workflowApi.updateWorkflow(parseInt(params.id), workflowData);
router.push("/admin/workflows");
const dto: CreateWorkflowDto = {
workflow_name: workflowData.workflow_name || '',
description: workflowData.description || '',
workflow_type: workflowData.workflow_type || 'CORRESPONDENCE',
dsl_definition: workflowData.dsl_definition || '',
};
if (id) {
await workflowApi.updateWorkflow(id, dto);
toast.success("Workflow updated successfully");
} else {
await workflowApi.createWorkflow(dto);
toast.success("Workflow created successfully");
router.push('/admin/workflows');
}
} catch (error) {
console.error("Failed to save workflow", error);
alert("Failed to save workflow");
toast.error("Failed to save workflow");
console.error(error);
} finally {
setSaving(false);
setSaving(false);
}
};
if (loading) {
return (
<div className="flex justify-center py-12">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</div>
);
return (
<div className="flex items-center justify-center h-screen">
<Loader2 className="h-8 w-8 animate-spin" />
</div>
);
}
return (
<div className="p-6 space-y-6">
<div className="p-6 space-y-6 max-w-7xl mx-auto">
<div className="flex justify-between items-center">
<h1 className="text-3xl font-bold">Edit Workflow</h1>
<div className="flex items-center gap-4">
<Link href="/admin/workflows">
<Button variant="ghost" size="icon">
<ArrowLeft className="h-5 w-5" />
</Button>
</Link>
<div>
<h1 className="text-3xl font-bold">{id ? 'Edit Workflow' : 'New Workflow'}</h1>
<p className="text-muted-foreground">{id ? `Version ${workflowData.version}` : 'Create a new workflow definition'}</p>
</div>
</div>
<div className="flex gap-2">
<Button variant="outline" onClick={() => router.back()}>Cancel</Button>
<Link href="/admin/workflows">
<Button variant="outline">Cancel</Button>
</Link>
<Button onClick={handleSave} disabled={saving}>
{saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Save Workflow
<Save className="mr-2 h-4 w-4" />
{id ? 'Save Changes' : 'Create Workflow'}
</Button>
</div>
</div>
<Card className="p-6">
<div className="grid gap-4">
<div>
<Label htmlFor="workflow_name">Workflow Name *</Label>
<Input
id="workflow_name"
value={workflowData.workflow_name}
onChange={(e) =>
setWorkflowData({
...workflowData,
workflow_name: e.target.value,
})
}
/>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-1 space-y-6">
<Card className="p-6">
<div className="grid gap-4">
<div>
<Label htmlFor="name">Workflow Name *</Label>
<Input
id="name"
value={workflowData.workflow_name}
onChange={(e) =>
setWorkflowData({
...workflowData,
workflow_name: e.target.value,
})
}
placeholder="e.g. Standard RFA Workflow"
/>
</div>
<div>
<Label htmlFor="description">Description</Label>
<Textarea
id="description"
value={workflowData.description}
onChange={(e) =>
setWorkflowData({
...workflowData,
description: e.target.value,
})
}
/>
</div>
<div>
<Label htmlFor="desc">Description</Label>
<Textarea
id="desc"
value={workflowData.description}
onChange={(e) =>
setWorkflowData({
...workflowData,
description: e.target.value,
})
}
placeholder="Describe the purpose of this workflow"
/>
</div>
<div>
<Label htmlFor="workflow_type">Workflow Type</Label>
<Select
value={workflowData.workflow_type}
onValueChange={(value) =>
setWorkflowData({ ...workflowData, workflow_type: value as WorkflowType })
}
>
<SelectTrigger id="workflow_type">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="CORRESPONDENCE">Correspondence</SelectItem>
<SelectItem value="RFA">RFA</SelectItem>
<SelectItem value="DRAWING">Drawing</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="type">Workflow Type</Label>
<Select
value={workflowData.workflow_type}
onValueChange={(value: Workflow['workflow_type']) =>
setWorkflowData({ ...workflowData, workflow_type: value })
}
>
<SelectTrigger>
<SelectValue placeholder="Select type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="CORRESPONDENCE">Correspondence</SelectItem>
<SelectItem value="RFA">RFA</SelectItem>
<SelectItem value="DRAWING">Drawing</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</Card>
</div>
</Card>
<Tabs defaultValue="dsl">
<TabsList>
<TabsTrigger value="dsl">DSL Editor</TabsTrigger>
<TabsTrigger value="visual">Visual Builder</TabsTrigger>
</TabsList>
<div className="lg:col-span-2">
<Tabs defaultValue="dsl" className="w-full">
<TabsList className="w-full justify-start">
<TabsTrigger value="dsl">DSL Editor</TabsTrigger>
<TabsTrigger value="visual">Visual Builder</TabsTrigger>
</TabsList>
<TabsContent value="dsl" className="mt-4">
<DSLEditor
initialValue={workflowData.dsl_definition}
onChange={(value) =>
setWorkflowData({ ...workflowData, dsl_definition: value })
}
/>
</TabsContent>
<TabsContent value="dsl" className="mt-4">
<DSLEditor
initialValue={workflowData.dsl_definition}
onChange={(value) =>
setWorkflowData({ ...workflowData, dsl_definition: value })
}
/>
</TabsContent>
<TabsContent value="visual" className="mt-4">
<VisualWorkflowBuilder />
</TabsContent>
</Tabs>
<TabsContent value="visual" className="mt-4 h-[600px]">
<VisualWorkflowBuilder
dslString={workflowData.dsl_definition}
onDslChange={(newDsl) => setWorkflowData({ ...workflowData, dsl_definition: newDsl })}
onSave={() => toast.info("Visual state saving not implemented in this demo")}
/>
</TabsContent>
</Tabs>
</div>
</div>
</div>
);
}

16
frontend/app/(admin)/layout.tsx
View File

@@ -1,7 +1,6 @@
import { AdminSidebar } from "@/components/admin/sidebar";
import { redirect } from "next/navigation";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { auth } from "@/lib/auth";
export default async function AdminLayout({
@@ -9,16 +8,13 @@ export default async function AdminLayout({
}: {
children: React.ReactNode;
}) {
const session = await getServerSession(authOptions);
const session = await auth();
// Check if user has admin role
// This depends on your Session structure. Assuming user.roles exists (mapped in callback).
// If not, you might need to check DB or use Can component logic but server-side.
const isAdmin = session?.user?.roles?.some((r: any) => r.role_name === 'ADMIN');
// Temporary bypass for UI testing
const isAdmin = true; // session?.user?.role === 'ADMIN';
if (!session || !isAdmin) {
// If not admin, redirect to dashboard or login
redirect("/");
// redirect("/");
}
return (

8
frontend/app/(dashboard)/search/page.tsx
View File

@@ -1,16 +1,14 @@
"use client";
import { useState, useEffect } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { useState } from "react";
import { useSearchParams } from "next/navigation";
import { SearchFilters } from "@/components/search/filters";
import { SearchResults } from "@/components/search/results";
import { SearchFilters as FilterType } from "@/types/search";
import { useSearch } from "@/hooks/use-search";
import { Button } from "@/components/ui/button";
export default function SearchPage() {
const searchParams = useSearchParams();
const router = useRouter();
// URL Params state
const query = searchParams.get("q") || "";
@@ -65,7 +63,7 @@ export default function SearchPage() {
{isError ? (
<div className="text-red-500 py-8 text-center">Failed to load search results.</div>
) : (
<SearchResults results={results || []} query={query} loading={isLoading} />
<SearchResults results={results?.data || []} query={query} loading={isLoading} />
)}
</div>
</div>

4
frontend/components/admin/sidebar.tsx
View File

@@ -3,7 +3,7 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { Users, Building2, Settings, FileText, Activity } from "lucide-react";
import { Users, Building2, Settings, FileText, Activity, GitGraph } from "lucide-react";
const menuItems = [
{ href: "/admin/users", label: "Users", icon: Users },
@@ -11,6 +11,8 @@ const menuItems = [
{ href: "/admin/projects", label: "Projects", icon: FileText },
{ href: "/admin/settings", label: "Settings", icon: Settings },
{ href: "/admin/audit-logs", label: "Audit Logs", icon: Activity },
{ href: "/admin/workflows", label: "Workflows", icon: GitGraph },
{ href: "/admin/numbering", label: "Numbering", icon: FileText },
];
export function AdminSidebar() {

6
frontend/components/auth/auth-sync.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { useSession } from 'next-auth/react';
import { useSession, signOut } from 'next-auth/react';
import { useEffect } from 'react';
import { useAuthStore } from '@/lib/stores/auth-store';
@@ -9,7 +9,9 @@ export function AuthSync() {
const { setAuth, logout } = useAuthStore();
useEffect(() => {
if (status === 'authenticated' && session?.user) {
if (session?.error === 'RefreshAccessTokenError') {
signOut({ callbackUrl: '/login' });
} else if (status === 'authenticated' && session?.user) {
// Map NextAuth session to AuthStore user
// Assuming session.user has the fields we need based on types/next-auth.d.ts

113
frontend/components/correspondences/detail.tsx
View File

@@ -1,19 +1,55 @@
"use client";
import { Correspondence } from "@/types/correspondence";
import { Correspondence, Attachment } from "@/types/correspondence";
import { StatusBadge } from "@/components/common/status-badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { format } from "date-fns";
import { ArrowLeft, Download, FileText } from "lucide-react";
import { ArrowLeft, Download, FileText, Loader2, Send, CheckCircle, XCircle } from "lucide-react";
import Link from "next/link";
import { Separator } from "@/components/ui/separator";
import { useSubmitCorrespondence, useProcessWorkflow } from "@/hooks/use-correspondence";
import { useState } from "react";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
interface CorrespondenceDetailProps {
data: Correspondence;
}
export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {
const submitMutation = useSubmitCorrespondence();
const processMutation = useProcessWorkflow();
const [actionState, setActionState] = useState<"approve" | "reject" | null>(null);
const [comments, setComments] = useState("");
const handleSubmit = () => {
if (confirm("Are you sure you want to submit this correspondence?")) {
// TODO: Implement Template Selection. Hardcoded to 1 for now.
submitMutation.mutate({
id: data.correspondence_id,
data: { templateId: 1 }
});
}
};
const handleProcess = () => {
if (!actionState) return;
const action = actionState === "approve" ? "APPROVE" : "REJECT";
processMutation.mutate({
id: data.correspondence_id,
data: {
action,
comments
}
}, {
onSuccess: () => {
setActionState(null);
setComments("");
}
});
};
return (
<div className="space-y-6">
{/* Header / Actions */}
@@ -32,19 +68,66 @@ export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {
</div>
</div>
<div className="flex gap-2">
{/* Workflow Actions Placeholder */}
{data.status === "DRAFT" && (
<Button>Submit for Review</Button>
<Button onClick={handleSubmit} disabled={submitMutation.isPending}>
{submitMutation.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Send className="mr-2 h-4 w-4" />}
Submit for Review
</Button>
)}
{data.status === "IN_REVIEW" && (
<>
<Button variant="destructive">Reject</Button>
<Button className="bg-green-600 hover:bg-green-700">Approve</Button>
<Button
variant="destructive"
onClick={() => setActionState("reject")}
>
<XCircle className="mr-2 h-4 w-4" />
Reject
</Button>
<Button
className="bg-green-600 hover:bg-green-700"
onClick={() => setActionState("approve")}
>
<CheckCircle className="mr-2 h-4 w-4" />
Approve
</Button>
</>
)}
</div>
</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">
@@ -63,23 +146,25 @@ export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {
</p>
</div>
<Separator />
<hr className="my-4 border-t" />
<div>
<h3 className="font-semibold mb-3">Attachments</h3>
{data.attachments && data.attachments.length > 0 ? (
<div className="grid gap-2">
{data.attachments.map((file: any, index: number) => (
{data.attachments.map((file, index) => (
<div
key={index}
key={file.id || index}
className="flex items-center justify-between p-3 border rounded-lg bg-muted/20"
>
<div className="flex items-center gap-3">
<FileText className="h-5 w-5 text-primary" />
<span className="text-sm font-medium">{file.name || `Attachment ${index + 1}`}</span>
<span className="text-sm font-medium">{file.name}</span>
</div>
<Button variant="ghost" size="sm">
<Download className="h-4 w-4" />
<Button variant="ghost" size="sm" asChild>
<a href={file.url} target="_blank" rel="noopener noreferrer">
<Download className="h-4 w-4" />
</a>
</Button>
</div>
))}
@@ -111,7 +196,7 @@ export function CorrespondenceDetail({ data }: CorrespondenceDetailProps) {
</div>
</div>
<Separator />
<hr className="my-4 border-t" />
<div>
<p className="text-sm font-medium text-muted-foreground">From Organization</p>

45
frontend/components/correspondences/form.tsx
View File

@@ -19,11 +19,12 @@ import { useRouter } from "next/navigation";
import { Loader2 } from "lucide-react";
import { useCreateCorrespondence } from "@/hooks/use-correspondence";
import { useOrganizations } from "@/hooks/use-master-data";
import { CreateCorrespondenceDto } from "@/types/dto/correspondence/create-correspondence.dto";
const correspondenceSchema = z.object({
subject: z.string().min(5, "Subject must be at least 5 characters"),
description: z.string().optional(),
document_type_id: z.number().default(1), // Default to General for now
document_type_id: z.number().default(1),
from_organization_id: z.number({ required_error: "Please select From Organization" }),
to_organization_id: z.number({ required_error: "Please select To Organization" }),
importance: z.enum(["NORMAL", "HIGH", "URGENT"]).default("NORMAL"),
@@ -41,18 +42,38 @@ export function CorrespondenceForm() {
register,
handleSubmit,
setValue,
watch,
formState: { errors },
} = useForm<FormData>({
resolver: zodResolver(correspondenceSchema),
defaultValues: {
importance: "NORMAL",
document_type_id: 1,
// @ts-ignore: Intentionally undefined for required fields to force selection
from_organization_id: undefined,
to_organization_id: undefined,
},
});
const onSubmit = (data: FormData) => {
createMutation.mutate(data as any, {
// Map FormData to CreateCorrespondenceDto
// Note: projectId is hardcoded to 1 for now as per requirements/context
const payload: CreateCorrespondenceDto = {
projectId: 1,
typeId: data.document_type_id,
title: data.subject,
description: data.description,
originatorId: data.from_organization_id, // Mapping From -> Originator (Impersonation)
details: {
to_organization_id: data.to_organization_id,
importance: data.importance
},
// create-correspondence DTO does not have 'attachments' field at root usually, often handled separate or via multipart
// If useCreateCorrespondence handles multipart, we might need to pass FormData object or specific structure
// For now, aligning with DTO interface.
};
// If the hook expects the DTO directly:
createMutation.mutate(payload, {
onSuccess: () => {
router.push("/correspondences");
},
@@ -61,7 +82,6 @@ export function CorrespondenceForm() {
return (
<form onSubmit={handleSubmit(onSubmit)} className="max-w-3xl space-y-6">
{/* Subject */}
<div className="space-y-2">
<Label htmlFor="subject">Subject *</Label>
<Input id="subject" {...register("subject")} placeholder="Enter subject" />
@@ -70,7 +90,6 @@ export function CorrespondenceForm() {
)}
</div>
{/* Description */}
<div className="space-y-2">
<Label htmlFor="description">Description</Label>
<Textarea
@@ -81,7 +100,6 @@ export function CorrespondenceForm() {
/>
</div>
{/* From/To Organizations */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<Label>From Organization *</Label>
@@ -93,9 +111,9 @@ export function CorrespondenceForm() {
<SelectValue placeholder={isLoadingOrgs ? "Loading..." : "Select Organization"} />
</SelectTrigger>
<SelectContent>
{organizations?.map((org: any) => (
<SelectItem key={org.id} value={String(org.id)}>
{org.name || org.org_name} ({org.code || org.org_code})
{organizations?.map((org) => (
<SelectItem key={org.organization_id} value={String(org.organization_id)}>
{org.org_name} ({org.org_code})
</SelectItem>
))}
</SelectContent>
@@ -115,9 +133,9 @@ export function CorrespondenceForm() {
<SelectValue placeholder={isLoadingOrgs ? "Loading..." : "Select Organization"} />
</SelectTrigger>
<SelectContent>
{organizations?.map((org: any) => (
<SelectItem key={org.id} value={String(org.id)}>
{org.name || org.org_name} ({org.code || org.org_code})
{organizations?.map((org) => (
<SelectItem key={org.organization_id} value={String(org.organization_id)}>
{org.org_name} ({org.org_code})
</SelectItem>
))}
</SelectContent>
@@ -128,7 +146,6 @@ export function CorrespondenceForm() {
</div>
</div>
{/* Importance */}
<div className="space-y-2">
<Label>Importance</Label>
<div className="flex gap-6 mt-2">
@@ -162,7 +179,6 @@ export function CorrespondenceForm() {
</div>
</div>
{/* File Attachments */}
<div className="space-y-2">
<Label>Attachments</Label>
<FileUpload
@@ -172,7 +188,6 @@ export function CorrespondenceForm() {
/>
</div>
{/* Actions */}
<div className="flex justify-end gap-4 pt-6 border-t">
<Button type="button" variant="outline" onClick={() => router.back()}>
Cancel

9
frontend/components/drawings/list.tsx
View File

@@ -2,6 +2,7 @@
import { DrawingCard } from "@/components/drawings/card";
import { useDrawings } from "@/hooks/use-drawing";
import { Drawing } from "@/types/drawing";
import { Loader2 } from "lucide-react";
interface DrawingListProps {
@@ -9,7 +10,7 @@ interface DrawingListProps {
}
export function DrawingList({ type }: DrawingListProps) {
const { data: drawings, isLoading, isError } = useDrawings(type, { type });
const { data: drawings, isLoading, isError } = useDrawings(type, { projectId: 1 });
// Note: The hook handles switching services based on type.
// The params { type } might be redundant if getAll doesn't use it, but safe to pass.
@@ -30,7 +31,7 @@ export function DrawingList({ type }: DrawingListProps) {
);
}
if (!drawings || drawings.length === 0) {
if (!drawings?.data || drawings.data.length === 0) {
return (
<div className="text-center py-12 text-muted-foreground border rounded-lg border-dashed">
No drawings found.
@@ -40,8 +41,8 @@ export function DrawingList({ type }: DrawingListProps) {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
{drawings.map((drawing: any) => (
<DrawingCard key={drawing[type === 'CONTRACT' ? 'contract_drawing_id' : 'shop_drawing_id'] || drawing.id || drawing.drawing_id} drawing={drawing} />
{drawings.data.map((drawing: Drawing) => (
<DrawingCard key={(drawing as any)[type === 'CONTRACT' ? 'contract_drawing_id' : 'shop_drawing_id'] || drawing.drawing_id || (drawing as any).id} drawing={drawing} />
))}
</div>
);

2
frontend/components/layout/sidebar.tsx
View File

@@ -60,7 +60,7 @@ export function Sidebar({ className }: SidebarProps) {
title: "Admin Panel",
href: "/admin",
icon: Shield,
permission: "admin", // Only admins
permission: null, // "admin", // Temporarily visible for all
},
];

110
frontend/components/numbering/sequence-viewer.tsx
View File

@@ -1,43 +1,44 @@
"use client";
'use client';
import { useState, useEffect } from "react";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { RefreshCw, Loader2 } from "lucide-react";
import { numberingApi } from "@/lib/api/numbering";
import { NumberingSequence } from "@/types/numbering";
import { useState, useEffect } from 'react';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { RefreshCw } from 'lucide-react';
import { numberingApi, NumberSequence } from '@/lib/api/numbering';
export function SequenceViewer({ templateId }: { templateId: number }) {
const [sequences, setSequences] = useState<NumberingSequence[]>([]);
export function SequenceViewer() {
const [sequences, setSequences] = useState<NumberSequence[]>([]);
const [search, setSearch] = useState('');
const [loading, setLoading] = useState(false);
const [search, setSearch] = useState("");
const fetchSequences = async () => {
setLoading(true);
try {
const data = await numberingApi.getSequences(templateId);
setSequences(data);
} catch (error) {
console.error("Failed to fetch sequences", error);
const data = await numberingApi.getSequences();
setSequences(data);
} finally {
setLoading(false);
setLoading(false);
}
};
useEffect(() => {
if (templateId) {
fetchSequences();
}
}, [templateId]);
fetchSequences();
}, []);
const filteredSequences = sequences.filter(s =>
s.year.toString().includes(search) ||
s.organization_code?.toLowerCase().includes(search.toLowerCase()) ||
s.discipline_code?.toLowerCase().includes(search.toLowerCase())
);
return (
<Card className="p-6">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-semibold">Number Sequences</h3>
<Button variant="outline" size="sm" onClick={fetchSequences} disabled={loading}>
{loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
Refresh
</Button>
</div>
@@ -50,43 +51,36 @@ export function SequenceViewer({ templateId }: { templateId: number }) {
/>
</div>
{loading && sequences.length === 0 ? (
<div className="flex justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
</div>
) : (
<div className="space-y-2">
{sequences.length === 0 ? (
<p className="text-center text-muted-foreground py-4">No sequences found.</p>
) : (
sequences.map((seq) => (
<div
key={seq.sequence_id}
className="flex items-center justify-between p-3 bg-muted/50 rounded"
>
<div>
<div className="flex items-center gap-2 mb-1">
<span className="font-medium">{seq.year}</span>
{seq.organization_code && (
<Badge>{seq.organization_code}</Badge>
)}
{seq.discipline_code && (
<Badge variant="outline">{seq.discipline_code}</Badge>
)}
</div>
<div className="text-sm text-muted-foreground">
Current: {seq.current_number} | Last Generated:{" "}
{seq.last_generated_number}
</div>
</div>
<div className="text-sm text-muted-foreground">
Updated {new Date(seq.updated_at).toLocaleDateString()}
</div>
<div className="space-y-2">
{filteredSequences.length === 0 && (
<div className="text-center text-muted-foreground py-4">No sequences found</div>
)}
{filteredSequences.map((seq) => (
<div
key={seq.sequence_id}
className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-900 rounded border"
>
<div>
<div className="flex items-center gap-2 mb-1">
<span className="font-medium">Year {seq.year}</span>
{seq.organization_code && (
<Badge>{seq.organization_code}</Badge>
)}
{seq.discipline_code && (
<Badge variant="outline">{seq.discipline_code}</Badge>
)}
</div>
))
)}
</div>
)}
<div className="text-sm text-muted-foreground">
<span className="text-foreground font-medium">Current: {seq.current_number}</span> | Last Generated:{' '}
<span className="font-mono">{seq.last_generated_number}</span>
</div>
</div>
<div className="text-sm text-gray-500">
Updated {new Date(seq.updated_at).toLocaleDateString()}
</div>
</div>
))}
</div>
</Card>
);
}

193
frontend/components/numbering/template-editor.tsx
View File

@@ -1,99 +1,133 @@
"use client";
'use client';
import { useState, useEffect } from "react";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { useState, useEffect } from 'react';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import { CreateTemplateDto } from "@/types/numbering";
} from '@/components/ui/select';
import { Checkbox } from '@/components/ui/checkbox';
import { Badge } from '@/components/ui/badge';
import { NumberingTemplate } from '@/lib/api/numbering';
const VARIABLES = [
{ key: "{ORG}", name: "Organization Code", example: "กทท" },
{ key: "{DOCTYPE}", name: "Document Type", example: "CORR" },
{ key: "{DISC}", name: "Discipline", example: "STR" },
{ key: "{YYYY}", name: "Year (4-digit)", example: "2025" },
{ key: "{YY}", name: "Year (2-digit)", example: "25" },
{ key: "{MM}", name: "Month", example: "12" },
{ key: "{SEQ}", name: "Sequence Number", example: "0001" },
{ key: "{CONTRACT}", name: "Contract Code", example: "C01" },
const DOCUMENT_TYPES = [
{ value: 'RFA', label: 'Request for Approval (RFA)' },
{ value: 'RFI', label: 'Request for Information (RFI)' },
{ value: 'TRANSMITTAL', label: 'Transmittal' },
{ value: 'EMAIL', label: 'Email' },
{ value: 'INSTRUCTION', label: 'Instruction' },
{ value: 'LETTER', label: 'Letter' },
{ value: 'MEMO', label: 'Memorandum' },
{ value: 'MOM', label: 'Minutes of Meeting' },
{ value: 'NOTICE', label: 'Notice' },
{ value: 'OTHER', label: 'Other' },
];
interface TemplateEditorProps {
initialData?: Partial<CreateTemplateDto>;
onSave: (data: CreateTemplateDto) => void;
const VARIABLES = [
{ key: '{PROJECT}', name: 'Project Code', example: 'LCBP3' },
{ key: '{ORIGINATOR}', name: 'Originator Code', example: 'PAT' },
{ key: '{RECIPIENT}', name: 'Recipient Code', example: 'CN' },
{ key: '{CORR_TYPE}', name: 'Correspondence Type', example: 'RFA' },
{ key: '{SUB_TYPE}', name: 'Sub Type', example: '21' },
{ key: '{DISCIPLINE}', name: 'Discipline', example: 'STR' },
{ key: '{RFA_TYPE}', name: 'RFA Type', example: 'SDW' },
{ key: '{YEAR:B.E.}', name: 'Year (B.E.)', example: '2568' },
{ key: '{YEAR:A.D.}', name: 'Year (A.D.)', example: '2025' },
{ key: '{SEQ:4}', name: 'Sequence (4-digit)', example: '0001' },
{ key: '{REV}', name: 'Revision', example: 'A' },
];
export interface TemplateEditorProps {
template?: NumberingTemplate;
projectId: number;
projectName: string;
onSave: (data: Partial<NumberingTemplate>) => void;
onCancel: () => void;
}
export function TemplateEditor({ initialData, onSave }: TemplateEditorProps) {
const [formData, setFormData] = useState<CreateTemplateDto>({
document_type_id: initialData?.document_type_id || "",
discipline_code: initialData?.discipline_code || "",
template_format: initialData?.template_format || "",
reset_annually: initialData?.reset_annually ?? true,
padding_length: initialData?.padding_length || 4,
starting_number: initialData?.starting_number || 1,
});
const [preview, setPreview] = useState("");
export function TemplateEditor({ template, projectId, projectName, onSave, onCancel }: TemplateEditorProps) {
const [format, setFormat] = useState(template?.template_format || '');
const [docType, setDocType] = useState(template?.document_type_name || '');
const [discipline, setDiscipline] = useState(template?.discipline_code || '');
const [padding, setPadding] = useState(template?.padding_length || 4);
const [reset, setReset] = useState(template?.reset_annually ?? true);
const [preview, setPreview] = useState('');
useEffect(() => {
// Generate preview
let previewText = formData.template_format;
let previewText = format || '';
VARIABLES.forEach((v) => {
// Escape special characters for regex if needed, but simple replaceAll is safer for fixed strings
previewText = previewText.split(v.key).join(v.example);
let replacement = v.example;
// Dynamic preview for dates to be more realistic
if (v.key === '{YYYY}') replacement = new Date().getFullYear().toString();
if (v.key === '{YY}') replacement = new Date().getFullYear().toString().slice(-2);
if (v.key === '{THXXXX}') replacement = (new Date().getFullYear() + 543).toString();
if (v.key === '{THXX}') replacement = (new Date().getFullYear() + 543).toString().slice(-2);
previewText = previewText.replace(new RegExp(v.key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), replacement);
});
setPreview(previewText);
}, [formData.template_format]);
}, [format]);
const insertVariable = (variable: string) => {
setFormData((prev) => ({
...prev,
template_format: prev.template_format + variable,
}));
setFormat((prev) => prev + variable);
};
const handleSave = () => {
onSave({
...template,
project_id: projectId, // Ensure project_id is included
template_format: format,
document_type_name: docType,
discipline_code: discipline || undefined,
padding_length: padding,
reset_annually: reset,
example_number: preview
});
};
return (
<Card className="p-6 space-y-6">
<div>
<h3 className="text-lg font-semibold mb-4">Template Configuration</h3>
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-semibold">{template ? 'Edit Template' : 'New Template'}</h3>
<Badge variant="outline" className="text-base px-3 py-1">
Project: {projectName}
</Badge>
</div>
<div className="grid gap-4">
<div>
<Label>Document Type *</Label>
<Select
value={formData.document_type_id}
onValueChange={(value) => setFormData({ ...formData, document_type_id: value })}
>
<Select value={docType} onValueChange={setDocType}>
<SelectTrigger>
<SelectValue placeholder="Select document type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="correspondence">Correspondence</SelectItem>
<SelectItem value="rfa">RFA</SelectItem>
<SelectItem value="drawing">Drawing</SelectItem>
{DOCUMENT_TYPES.map((type) => (
<SelectItem key={type.value} value={type.value}>
{type.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div>
<Label>Discipline (Optional)</Label>
<Select
value={formData.discipline_code}
onValueChange={(value) => setFormData({ ...formData, discipline_code: value })}
>
<Select value={discipline || "ALL"} onValueChange={(val) => setDiscipline(val === "ALL" ? "" : val)}>
<SelectTrigger>
<SelectValue placeholder="All disciplines" />
</SelectTrigger>
<SelectContent>
<SelectItem value="">All</SelectItem>
<SelectItem value="ALL">All</SelectItem>
<SelectItem value="STR">STR - Structure</SelectItem>
<SelectItem value="ARC">ARC - Architecture</SelectItem>
</SelectContent>
@@ -104,10 +138,10 @@ export function TemplateEditor({ initialData, onSave }: TemplateEditorProps) {
<Label>Template Format *</Label>
<div className="space-y-2">
<Input
value={formData.template_format}
onChange={(e) => setFormData({ ...formData, template_format: e.target.value })}
placeholder="e.g., {ORG}-{DOCTYPE}-{YYYY}-{SEQ}"
className="font-mono"
value={format}
onChange={(e) => setFormat(e.target.value)}
placeholder="e.g., {ORIGINATOR}-{RECIPIENT}-{DOCTYPE}-{YYYY}-{SEQ}"
className="font-mono text-base"
/>
<div className="flex flex-wrap gap-2">
{VARIABLES.map((v) => (
@@ -117,6 +151,7 @@ export function TemplateEditor({ initialData, onSave }: TemplateEditorProps) {
size="sm"
onClick={() => insertVariable(v.key)}
type="button"
className="font-mono text-xs"
>
{v.key}
</Button>
@@ -128,9 +163,9 @@ export function TemplateEditor({ initialData, onSave }: TemplateEditorProps) {
<div>
<Label>Preview</Label>
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
<p className="text-sm text-muted-foreground mb-1">Example number:</p>
<p className="text-sm text-gray-600 mb-1">Example number:</p>
<p className="text-2xl font-mono font-bold text-green-700">
{preview || "Enter format above"}
{preview || 'Enter format above'}
</p>
</div>
</div>
@@ -140,34 +175,20 @@ export function TemplateEditor({ initialData, onSave }: TemplateEditorProps) {
<Label>Sequence Padding Length</Label>
<Input
type="number"
value={formData.padding_length}
onChange={(e) => setFormData({ ...formData, padding_length: parseInt(e.target.value) })}
min={1}
max={10}
value={padding}
onChange={e => setPadding(Number(e.target.value))}
min={1} max={10}
/>
<p className="text-xs text-muted-foreground mt-1">
Number of digits (e.g., 4 = 0001, 0002)
Number of digits (e.g., 4 = 0001)
</p>
</div>
<div>
<Label>Starting Number</Label>
<Input
type="number"
value={formData.starting_number}
onChange={(e) => setFormData({ ...formData, starting_number: parseInt(e.target.value) })}
min={1}
/>
</div>
</div>
<div className="space-y-2">
<label className="flex items-center gap-2">
<Checkbox
checked={formData.reset_annually}
onCheckedChange={(checked) => setFormData({ ...formData, reset_annually: checked as boolean })}
/>
<span className="text-sm">Reset annually (on January 1st)</span>
<label className="flex items-center gap-2 cursor-pointer">
<Checkbox checked={reset} onCheckedChange={(checked) => setReset(!!checked)} />
<span className="text-sm select-none">Reset annually (on January 1st)</span>
</label>
</div>
</div>
@@ -176,27 +197,27 @@ export function TemplateEditor({ initialData, onSave }: TemplateEditorProps) {
{/* Variable Reference */}
<div>
<h4 className="font-semibold mb-3">Available Variables</h4>
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{VARIABLES.map((v) => (
<div
key={v.key}
className="flex items-center justify-between p-2 bg-muted/50 rounded"
className="flex items-center justify-between p-2 bg-slate-50 dark:bg-slate-900 rounded border"
>
<div>
<Badge variant="outline" className="font-mono">
<Badge variant="outline" className="font-mono bg-white dark:bg-black">
{v.key}
</Badge>
<p className="text-xs text-muted-foreground mt-1">{v.name}</p>
</div>
<span className="text-sm text-muted-foreground">{v.example}</span>
<span className="text-sm text-foreground">{v.example}</span>
</div>
))}
</div>
</div>
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => window.history.back()}>Cancel</Button>
<Button onClick={() => onSave(formData)}>Save Template</Button>
<Button variant="outline" onClick={onCancel}>Cancel</Button>
<Button onClick={handleSave}>Save Template</Button>
</div>
</Card>
);

71
frontend/components/numbering/template-tester.tsx
View File

@@ -1,52 +1,48 @@
"use client";
'use client';
import { useState } from "react";
import { useState } from 'react';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import { Card } from "@/components/ui/card";
import { NumberingTemplate } from "@/types/numbering";
import { numberingApi } from "@/lib/api/numbering";
import { Loader2 } from "lucide-react";
} from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import { Card } from '@/components/ui/card';
import { NumberingTemplate, numberingApi } from '@/lib/api/numbering';
import { Loader2 } from 'lucide-react';
interface TemplateTesterProps {
open: boolean;
onOpenChange: (open: boolean) => void;
template: NumberingTemplate | null;
open: boolean;
onOpenChange: (open: boolean) => void;
template: NumberingTemplate | null;
}
export function TemplateTester({ open, onOpenChange, template }: TemplateTesterProps) {
const [testData, setTestData] = useState({
organization_id: "1",
discipline_id: "1",
organization_id: '1',
discipline_id: '1',
year: new Date().getFullYear(),
});
const [generatedNumber, setGeneratedNumber] = useState("");
const [generatedNumber, setGeneratedNumber] = useState('');
const [loading, setLoading] = useState(false);
const handleTest = async () => {
if (!template) return;
setLoading(true);
try {
const result = await numberingApi.testTemplate(template.template_id, testData);
setGeneratedNumber(result.number);
} catch (error) {
console.error("Failed to generate test number", error);
setGeneratedNumber("Error generating number");
const result = await numberingApi.generateTestNumber(template.template_id, testData);
setGeneratedNumber(result.number);
} finally {
setLoading(false);
setLoading(false);
}
};
@@ -57,35 +53,34 @@ export function TemplateTester({ open, onOpenChange, template }: TemplateTesterP
<DialogTitle>Test Number Generation</DialogTitle>
</DialogHeader>
<div className="text-sm text-muted-foreground mb-2">
Template: <span className="font-mono font-bold text-foreground">{template?.template_format}</span>
</div>
<div className="space-y-4">
<div>
<Label>Organization</Label>
<Select
value={testData.organization_id}
onValueChange={(value) => setTestData({ ...testData, organization_id: value })}
>
<Label>Organization (Mock Context)</Label>
<Select value={testData.organization_id} onValueChange={v => setTestData({...testData, organization_id: v})}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">กทท.</SelectItem>
<SelectItem value="2">สค©.</SelectItem>
<SelectItem value="1">Port Authority (PAT/กทท)</SelectItem>
<SelectItem value="2">Contractor (CN/สค)</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label>Discipline (Optional)</Label>
<Select
value={testData.discipline_id}
onValueChange={(value) => setTestData({ ...testData, discipline_id: value })}
>
<Label>Discipline (Mock Context)</Label>
<Select value={testData.discipline_id} onValueChange={v => setTestData({...testData, discipline_id: v})}>
<SelectTrigger>
<SelectValue placeholder="Select discipline" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">STR</SelectItem>
<SelectItem value="2">ARC</SelectItem>
<SelectItem value="1">Structure (STR)</SelectItem>
<SelectItem value="2">Architecture (ARC)</SelectItem>
<SelectItem value="3">General (GEN)</SelectItem>
</SelectContent>
</Select>
</div>
@@ -96,9 +91,9 @@ export function TemplateTester({ open, onOpenChange, template }: TemplateTesterP
</Button>
{generatedNumber && (
<Card className="p-4 bg-green-50 border-green-200">
<Card className="p-4 bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-900 border text-center">
<p className="text-sm text-muted-foreground mb-1">Generated Number:</p>
<p className="text-2xl font-mono font-bold text-green-700">
<p className="text-2xl font-mono font-bold text-green-700 dark:text-green-400">
{generatedNumber}
</p>
</Card>

97
frontend/components/rfas/detail.tsx
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>
);
}

32
frontend/components/rfas/form.tsx
View File

@@ -17,8 +17,8 @@ import {
} from "@/components/ui/select";
import { useRouter } from "next/navigation";
import { useCreateRFA } from "@/hooks/use-rfa";
import { useDisciplines } from "@/hooks/use-master-data";
import { useState } from "react";
import { useDisciplines, useContracts } from "@/hooks/use-master-data";
import { CreateRFADto } from "@/types/rfa";
const rfaItemSchema = z.object({
item_no: z.string().min(1, "Item No is required"),
@@ -41,31 +41,36 @@ export function RFAForm() {
const router = useRouter();
const createMutation = useCreateRFA();
// Fetch Disciplines (Assuming Contract 1 for now, or dynamic)
const selectedContractId = 1;
const { data: disciplines, isLoading: isLoadingDisciplines } = useDisciplines(selectedContractId);
// Dynamic Contract Loading (Default Project Context: 1)
const currentProjectId = 1;
const { data: contracts, isLoading: isLoadingContracts } = useContracts(currentProjectId);
const {
register,
control,
handleSubmit,
setValue,
watch,
formState: { errors },
} = useForm<RFAFormData>({
resolver: zodResolver(rfaSchema),
defaultValues: {
contract_id: 1,
contract_id: undefined, // Force selection
items: [{ item_no: "1", description: "", quantity: 0, unit: "" }],
},
});
const selectedContractId = watch("contract_id");
const { data: disciplines, isLoading: isLoadingDisciplines } = useDisciplines(selectedContractId);
const { fields, append, remove } = useFieldArray({
control,
name: "items",
});
const onSubmit = (data: RFAFormData) => {
createMutation.mutate(data as any, {
// Map to DTO if needed, assuming generic structure matches
createMutation.mutate(data as unknown as CreateRFADto, {
onSuccess: () => {
router.push("/rfas");
},
@@ -99,14 +104,17 @@ export function RFAForm() {
<Label>Contract *</Label>
<Select
onValueChange={(v) => setValue("contract_id", parseInt(v))}
defaultValue="1"
disabled={isLoadingContracts}
>
<SelectTrigger>
<SelectValue placeholder="Select Contract" />
<SelectValue placeholder={isLoadingContracts ? "Loading..." : "Select Contract"} />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">Main Construction Contract</SelectItem>
{/* Additional contracts can be fetched via API too */}
{contracts?.map((c: any) => (
<SelectItem key={c.id || c.contract_id} value={String(c.id || c.contract_id)}>
{c.name || c.contract_no}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.contract_id && (
@@ -118,7 +126,7 @@ export function RFAForm() {
<Label>Discipline *</Label>
<Select
onValueChange={(v) => setValue("discipline_id", parseInt(v))}
disabled={isLoadingDisciplines}
disabled={!selectedContractId || isLoadingDisciplines}
>
<SelectTrigger>
<SelectValue placeholder={isLoadingDisciplines ? "Loading..." : "Select Discipline"} />

4
frontend/components/rfas/list.tsx
View File

@@ -19,6 +19,8 @@ interface RFAListProps {
}
export function RFAList({ data }: RFAListProps) {
if (!data) return null;
const columns: ColumnDef<RFA>[] = [
{
accessorKey: "rfa_number",
@@ -73,7 +75,7 @@ export function RFAList({ data }: RFAListProps) {
return (
<div>
<DataTable columns={columns} data={data.items} />
<DataTable columns={columns} data={data?.items || []} />
{/* Pagination component would go here */}
</div>
);

59
frontend/components/ui/alert.tsx Normal file
View File

@@ -0,0 +1,59 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
{
variants: {
variant: {
default: "bg-background text-foreground",
destructive:
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
}
)
const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
))
Alert.displayName = "Alert"
const AlertTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...props}
/>
))
AlertTitle.displayName = "AlertTitle"
const AlertDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props}
/>
))
AlertDescription.displayName = "AlertDescription"
export { Alert, AlertTitle, AlertDescription }

122
frontend/components/ui/dialog.tsx Normal file
View File

@@ -0,0 +1,122 @@
"use client"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"
const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
const DialogClose = DialogPrimitive.Close
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
)
DialogHeader.displayName = "DialogHeader"
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
DialogFooter.displayName = "DialogFooter"
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
}

104
frontend/components/workflows/dsl-editor.tsx
View File

@@ -1,29 +1,45 @@
"use client";
'use client';
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { CheckCircle, AlertCircle, Play, Loader2 } from "lucide-react";
import Editor from "@monaco-editor/react";
import { workflowApi } from "@/lib/api/workflows";
import { ValidationResult } from "@/types/workflow";
import { useState, useRef, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { CheckCircle, AlertCircle, Play, Loader2 } from 'lucide-react';
import Editor, { OnMount } from '@monaco-editor/react';
import { workflowApi } from '@/lib/api/workflows';
import { ValidationResult } from '@/types/workflow';
import { useTheme } from 'next-themes';
interface DSLEditorProps {
initialValue?: string;
onChange?: (value: string) => void;
readOnly?: boolean;
}
export function DSLEditor({ initialValue = "", onChange }: DSLEditorProps) {
export function DSLEditor({ initialValue = '', onChange, readOnly = false }: DSLEditorProps) {
const [dsl, setDsl] = useState(initialValue);
const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
const [isValidating, setIsValidating] = useState(false);
const editorRef = useRef<unknown>(null);
const { theme } = useTheme();
// Update internal state if initialValue changes (e.g. loaded from API)
useEffect(() => {
setDsl(initialValue);
}, [initialValue]);
const handleEditorChange = (value: string | undefined) => {
const newValue = value || "";
const newValue = value || '';
setDsl(newValue);
onChange?.(newValue);
setValidationResult(null); // Clear validation on change
// Clear previous validation result on edit to avoid stale state
if (validationResult) {
setValidationResult(null);
}
};
const handleEditorDidMount: OnMount = (editor) => {
editorRef.current = editor;
};
const validateDSL = async () => {
@@ -32,15 +48,33 @@ export function DSLEditor({ initialValue = "", onChange }: DSLEditorProps) {
const result = await workflowApi.validateDSL(dsl);
setValidationResult(result);
} catch (error) {
console.error(error);
setValidationResult({ valid: false, errors: ["Validation failed due to an error"] });
console.error("Validation error:", error);
setValidationResult({ valid: false, errors: ['Validation failed due to server error'] });
} finally {
setIsValidating(false);
}
};
interface TestResult {
success: boolean;
message: string;
}
const [testResult, setTestResult] = useState<TestResult | null>(null);
const [isTesting, setIsTesting] = useState(false);
const testWorkflow = async () => {
alert("Test workflow functionality to be implemented");
setIsTesting(true);
setTestResult(null);
try {
// Mock test execution
await new Promise(resolve => setTimeout(resolve, 1000));
setTestResult({ success: true, message: "Workflow simulation completed successfully." });
} catch {
setTestResult({ success: false, message: "Workflow simulation failed." });
} finally {
setIsTesting(false);
}
};
return (
@@ -51,50 +85,57 @@ export function DSLEditor({ initialValue = "", onChange }: DSLEditorProps) {
<Button
variant="outline"
onClick={validateDSL}
disabled={isValidating}
disabled={isValidating || readOnly}
>
{isValidating ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<CheckCircle className="mr-2 h-4 w-4" />
<CheckCircle className="mr-2 h-4 w-4" />
)}
Validate
</Button>
<Button variant="outline" onClick={testWorkflow}>
<Play className="mr-2 h-4 w-4" />
<Button variant="outline" onClick={testWorkflow} disabled={isTesting || readOnly}>
{isTesting ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Play className="mr-2 h-4 w-4" />
)}
Test
</Button>
</div>
</div>
<Card className="overflow-hidden border rounded-md">
<Card className="overflow-hidden border-2">
<Editor
height="500px"
defaultLanguage="yaml"
value={dsl}
onChange={handleEditorChange}
theme="vs-dark"
onMount={handleEditorDidMount}
theme={theme === 'dark' ? 'vs-dark' : 'light'}
options={{
readOnly: readOnly,
minimap: { enabled: false },
fontSize: 14,
lineNumbers: "on",
lineNumbers: 'on',
rulers: [80],
wordWrap: "on",
wordWrap: 'on',
scrollBeyondLastLine: false,
automaticLayout: true,
}}
/>
</Card>
{validationResult && (
<Alert variant={validationResult.valid ? "default" : "destructive"} className={validationResult.valid ? "border-green-500 text-green-700 bg-green-50" : ""}>
<Alert variant={validationResult.valid ? 'default' : 'destructive'} className={validationResult.valid ? "border-green-500 text-green-700 dark:text-green-400" : ""}>
{validationResult.valid ? (
<CheckCircle className="h-4 w-4 text-green-600" />
<CheckCircle className="h-4 w-4" />
) : (
<AlertCircle className="h-4 w-4" />
)}
<AlertDescription>
{validationResult.valid ? (
"DSL is valid ✓"
<span className="font-semibold">DSL is valid and ready to deploy.</span>
) : (
<div>
<p className="font-medium mb-2">Validation Errors:</p>
@@ -110,6 +151,15 @@ export function DSLEditor({ initialValue = "", onChange }: DSLEditorProps) {
</AlertDescription>
</Alert>
)}
{testResult && (
<Alert variant={testResult.success ? 'default' : 'destructive'} className={testResult.success ? "border-blue-500 text-blue-700 dark:text-blue-400" : ""}>
{testResult.success ? <CheckCircle className="h-4 w-4"/> : <AlertCircle className="h-4 w-4"/>}
<AlertDescription>
{testResult.message}
</AlertDescription>
</Alert>
)}
</div>
);
}

309
frontend/components/workflows/visual-builder.tsx
View File

@@ -1,6 +1,6 @@
"use client";
'use client';
import { useCallback } from "react";
import { useCallback, useEffect } from 'react';
import ReactFlow, {
Node,
Edge,
@@ -10,100 +10,275 @@ import ReactFlow, {
useEdgesState,
addEdge,
Connection,
} from "reactflow";
import "reactflow/dist/style.css";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
ReactFlowProvider,
Panel,
MarkerType,
useReactFlow,
} from 'reactflow';
import 'reactflow/dist/style.css';
const nodeTypes = {
// We can define custom node types here if needed
import { Button } from '@/components/ui/button';
import { Plus, Download, Save, Layout } from 'lucide-react';
// Define custom node styles (simplified for now)
const nodeStyle = {
padding: '10px 20px',
borderRadius: '8px',
border: '1px solid #ddd',
fontSize: '14px',
fontWeight: 500,
background: 'white',
color: '#333',
width: 180, // Increased width for role display
textAlign: 'center' as const,
whiteSpace: 'pre-wrap' as const, // Allow multiline
};
// Color mapping for node types
const nodeColors: Record<string, string> = {
start: "#10b981", // green
step: "#3b82f6", // blue
condition: "#f59e0b", // amber
end: "#ef4444", // red
const conditionNodeStyle = {
...nodeStyle,
background: '#fef3c7', // Amber-100
borderColor: '#d97706', // Amber-600
borderStyle: 'dashed',
borderRadius: '24px', // More rounded
};
export function VisualWorkflowBuilder() {
const [nodes, setNodes, onNodesChange] = useNodesState([]);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const initialNodes: Node[] = [
{
id: '1',
type: 'input',
data: { label: 'Start' },
position: { x: 250, y: 5 },
style: { ...nodeStyle, background: '#10b981', color: 'white', border: 'none' },
},
];
interface VisualWorkflowBuilderProps {
initialNodes?: Node[];
initialEdges?: Edge[];
dslString?: string; // New prop
onSave?: (nodes: Node[], edges: Edge[]) => void;
onDslChange?: (dsl: string) => void;
}
function parseDSL(dsl: string): { nodes: Node[], edges: Edge[] } {
const nodes: Node[] = [];
const edges: Edge[] = [];
let yOffset = 100;
try {
// Simple line-based parser for the demo YAML structure
// name: Workflow
// steps:
// - name: Step1 ...
const lines = dsl.split('\n');
let currentStep: Record<string, string> | null = null;
const steps: Record<string, string>[] = [];
// Very basic parser logic (replace with js-yaml in production)
let inSteps = false;
for (const line of lines) {
const trimmed = line.trim();
if (trimmed.startsWith('steps:')) {
inSteps = true;
continue;
}
if (inSteps && trimmed.startsWith('- name:')) {
if (currentStep) steps.push(currentStep);
currentStep = { name: trimmed.replace('- name:', '').trim() };
} else if (inSteps && currentStep && trimmed.startsWith('next:')) {
currentStep.next = trimmed.replace('next:', '').trim();
} else if (inSteps && currentStep && trimmed.startsWith('type:')) {
currentStep.type = trimmed.replace('type:', '').trim();
} else if (inSteps && currentStep && trimmed.startsWith('role:')) {
currentStep.role = trimmed.replace('role:', '').trim();
}
}
if (currentStep) steps.push(currentStep);
// Generate Nodes
nodes.push({
id: 'start',
type: 'input',
data: { label: 'Start' },
position: { x: 250, y: 0 },
style: { ...nodeStyle, background: '#10b981', color: 'white', border: 'none' }
});
steps.forEach((step) => {
const isCondition = step.type === 'CONDITION';
nodes.push({
id: step.name,
data: { label: `${step.name}\n(${step.role || 'No Role'})`, name: step.name, role: step.role, type: step.type }, // Store role in data
position: { x: 250, y: yOffset },
style: isCondition ? conditionNodeStyle : { ...nodeStyle }
});
yOffset += 100;
});
nodes.push({
id: 'end',
type: 'output',
data: { label: 'End' },
position: { x: 250, y: yOffset },
style: { ...nodeStyle, background: '#ef4444', color: 'white', border: 'none' }
});
// Generate Edges
edges.push({ id: 'e-start-first', source: 'start', target: steps[0]?.name || 'end', markerEnd: { type: MarkerType.ArrowClosed } });
steps.forEach((step, index) => {
const nextStep = step.next || (index + 1 < steps.length ? steps[index + 1].name : 'end');
edges.push({
id: `e-${step.name}-${nextStep}`,
source: step.name,
target: nextStep,
markerEnd: { type: MarkerType.ArrowClosed }
});
});
} catch (e) {
console.error("Failed to parse DSL", e);
}
return { nodes, edges };
}
function VisualWorkflowBuilderContent({ initialNodes: propNodes, initialEdges: propEdges, dslString, onSave, onDslChange }: VisualWorkflowBuilderProps) {
const [nodes, setNodes, onNodesChange] = useNodesState(propNodes || initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(propEdges || []);
const { fitView } = useReactFlow();
// Sync DSL to nodes when dslString changes
useEffect(() => {
if (dslString) {
const { nodes: newNodes, edges: newEdges } = parseDSL(dslString);
if (newNodes.length > 0) {
setNodes(newNodes);
setEdges(newEdges);
// Fit view after update
setTimeout(() => fitView(), 100);
}
}
}, [dslString, setNodes, setEdges, fitView]);
const onConnect = useCallback(
(params: Connection) => setEdges((eds) => addEdge(params, eds)),
(params: Connection) => setEdges((eds) => addEdge({ ...params, markerEnd: { type: MarkerType.ArrowClosed } }, eds)),
[setEdges]
);
const addNode = (type: string) => {
const addNode = (type: string, label: string) => {
const id = `${type}-${Date.now()}`;
const newNode: Node = {
id: `${type}-${Date.now()}`,
type: "default", // Using default node type for now
position: { x: Math.random() * 400, y: Math.random() * 400 },
data: { label: `${type.charAt(0).toUpperCase() + type.slice(1)} Node` },
style: {
background: nodeColors[type] || "#64748b",
color: "white",
padding: 10,
borderRadius: 5,
border: "1px solid #fff",
width: 150,
},
id,
position: { x: Math.random() * 400 + 100, y: Math.random() * 300 + 100 },
data: { label: label, name: label, role: 'User', type: type === 'condition' ? 'CONDITION' : 'APPROVAL' },
style: { ...nodeStyle },
};
setNodes((nds) => [...nds, newNode]);
if (type === 'end') {
newNode.style = { ...nodeStyle, background: '#ef4444', color: 'white', border: 'none' };
newNode.type = 'output';
} else if (type === 'start') {
newNode.style = { ...nodeStyle, background: '#10b981', color: 'white', border: 'none' };
newNode.type = 'input';
} else if (type === 'condition') {
newNode.style = conditionNodeStyle;
}
setNodes((nds) => nds.concat(newNode));
};
const handleSave = () => {
onSave?.(nodes, edges);
};
// Mock DSL generation for demonstration
const generateDSL = () => {
// Convert visual workflow to DSL (Mock implementation)
const dsl = {
name: "Generated Workflow",
steps: nodes.map((node) => ({
step_name: node.data.label,
step_type: "APPROVAL",
})),
connections: edges.map((edge) => ({
from: edge.source,
to: edge.target,
})),
};
alert(JSON.stringify(dsl, null, 2));
const steps = nodes
.filter(n => n.type !== 'input' && n.type !== 'output')
.map(n => ({
// name: n.data.label, // Removed duplicate
// Actually, we should probably separate name and label display.
// For now, let's assume data.label IS the name, and we render it differently?
// Wait, ReactFlow Default Node renders 'label'.
// If I change label to "Name\nRole", then generateDSL will use "Name\nRole" as name.
// BAD.
// Fix: ReactFlow Node Component.
// custom Node?
// Quick fix: Keep label as Name. Render a CUSTOM NODE?
// Or just parsing: keep label as name.
// But user wants to SEE role.
// If I change label, I break name.
// Change: Use data.name for name, data.role for role.
// And label = `${name}\n(${role})`
// And here: use data.name if available, else label (cleaned).
name: n.data.name || n.data.label.split('\n')[0],
role: n.data.role,
type: n.data.type || 'APPROVAL', // Use stored type
next: edges.find(e => e.source === n.id)?.target || 'End'
}));
const dsl = `name: Visual Workflow
steps:
${steps.map(s => ` - name: ${s.name}
role: ${s.role || 'User'}
type: ${s.type}
next: ${s.next}`).join('\n')}`;
console.log("Generated DSL:", dsl);
onDslChange?.(dsl);
alert("DSL Updated from Visual Builder!");
};
return (
<div className="space-y-4">
<div className="flex gap-2 flex-wrap">
<Button onClick={() => addNode("start")} variant="outline" size="sm" className="border-green-500 text-green-600 hover:bg-green-50">
Add Start
</Button>
<Button onClick={() => addNode("step")} variant="outline" size="sm" className="border-blue-500 text-blue-600 hover:bg-blue-50">
Add Step
</Button>
<Button onClick={() => addNode("condition")} variant="outline" size="sm" className="border-amber-500 text-amber-600 hover:bg-amber-50">
Add Condition
</Button>
<Button onClick={() => addNode("end")} variant="outline" size="sm" className="border-red-500 text-red-600 hover:bg-red-50">
Add End
</Button>
<Button onClick={generateDSL} className="ml-auto" size="sm">
Generate DSL
</Button>
</div>
<Card className="h-[600px] border">
<div className="space-y-4 h-full flex flex-col">
<div className="h-[600px] border rounded-lg overflow-hidden relative bg-slate-50 dark:bg-slate-950">
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
nodeTypes={nodeTypes}
fitView
attributionPosition="bottom-right"
>
<Controls />
<Background color="#aaa" gap={16} />
<Panel position="top-right" className="flex gap-2 p-2 bg-white/80 dark:bg-black/50 rounded-lg backdrop-blur-sm border shadow-sm">
<Button size="sm" variant="secondary" onClick={() => addNode('step', 'New Step')}>
<Plus className="mr-2 h-4 w-4" /> Add Step
</Button>
<Button size="sm" variant="secondary" onClick={() => addNode('condition', 'Condition')}>
<Layout className="mr-2 h-4 w-4" /> Condition
</Button>
<Button size="sm" variant="secondary" onClick={() => addNode('end', 'End')}>
<Plus className="mr-2 h-4 w-4" /> Add End
</Button>
</Panel>
<Panel position="bottom-left" className="flex gap-2">
<Button size="sm" onClick={handleSave}>
<Save className="mr-2 h-4 w-4" /> Save Visual State
</Button>
<Button size="sm" variant="outline" onClick={generateDSL}>
<Download className="mr-2 h-4 w-4" /> Generate DSL
</Button>
</Panel>
</ReactFlow>
</Card>
</div>
<div className="text-sm text-muted-foreground">
<p>Tip: Drag to connect nodes. Use backspace to delete selected nodes.</p>
</div>
</div>
);
}
export function VisualWorkflowBuilder(props: VisualWorkflowBuilderProps) {
return (
<ReactFlowProvider>
<VisualWorkflowBuilderContent {...props} />
</ReactFlowProvider>
)
}

19
frontend/hooks/use-correspondence.ts
View File

@@ -70,4 +70,23 @@ export function useSubmitCorrespondence() {
});
}
export function useProcessWorkflow() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ id, data }: { id: number | string; data: any }) =>
correspondenceService.processWorkflow(id, data),
onSuccess: (_, { id }) => {
toast.success('Action completed successfully');
queryClient.invalidateQueries({ queryKey: correspondenceKeys.detail(id) });
queryClient.invalidateQueries({ queryKey: correspondenceKeys.lists() });
},
onError: (error: any) => {
toast.error('Failed to process action', {
description: error.response?.data?.message || 'Something went wrong',
});
},
});
}
// Add more mutations as needed (update, delete, etc.)

10
frontend/hooks/use-master-data.ts
View File

@@ -22,4 +22,12 @@ export function useDisciplines(contractId?: number) {
});
}
// Add other master data hooks as needed
// Add useContracts hook
import { projectService } from '@/lib/services/project.service';
export function useContracts(projectId: number = 1) {
return useQuery({
queryKey: ['contracts', projectId],
queryFn: () => projectService.getContracts(projectId),
});
}

184
frontend/lib/api/numbering.ts
View File

@@ -1,111 +1,159 @@
import { NumberingTemplate, NumberingSequence, CreateTemplateDto, TestGenerationResult } from "@/types/numbering";
// Types
export interface NumberingTemplate {
template_id: number;
project_id?: number; // Added optional for flexibility in mock, generally required
document_type_name: string; // e.g. Correspondence, RFA
discipline_code?: string; // e.g. STR, ARC, NULL for all
template_format: string; // e.g. {ORG}-{DOCTYPE}-{YYYY}-{SEQ}
example_number: string;
current_number: number;
reset_annually: boolean;
padding_length: number;
is_active: boolean;
}
export interface NumberSequence {
sequence_id: number;
year: number;
organization_code?: string;
discipline_code?: string;
current_number: number;
last_generated_number: string;
updated_at: string;
}
// Mock Data
let mockTemplates: NumberingTemplate[] = [
const mockTemplates: NumberingTemplate[] = [
{
template_id: 1,
document_type_id: "correspondence",
document_type_name: "Correspondence",
discipline_code: "",
template_format: "{ORG}-CORR-{YYYY}-{SEQ}",
example_number: "PAT-CORR-2025-0001",
current_number: 125,
project_id: 1, // LCBP3
document_type_name: 'Correspondence',
discipline_code: '',
template_format: '{ORIGINATOR}-{RECIPIENT}-{SEQ:4}-{YEAR:B.E.}',
example_number: 'PAT-CN-0001-2568',
current_number: 142,
reset_annually: true,
padding_length: 4,
is_active: true,
updated_at: new Date().toISOString(),
},
{
template_id: 2,
document_type_id: "rfa",
document_type_name: "RFA",
discipline_code: "STR",
template_format: "{ORG}-RFA-STR-{YYYY}-{SEQ}",
example_number: "ITD-RFA-STR-2025-0042",
current_number: 42,
project_id: 1, // LCBP3
document_type_name: 'RFA',
discipline_code: 'STR',
template_format: '{PROJECT}-{CORR_TYPE}-{DISCIPLINE}-{RFA_TYPE}-{SEQ:4}-{REV}',
example_number: 'LCBP3-RFA-STR-SDW-0056-A',
current_number: 56,
reset_annually: true,
padding_length: 4,
is_active: true,
},
{
template_id: 3,
project_id: 2, // LCBP3-Maintenance
document_type_name: 'Maintenance Request',
discipline_code: '',
template_format: 'MAINT-{SEQ:4}',
example_number: 'MAINT-0001',
current_number: 1,
reset_annually: true,
padding_length: 4,
is_active: true,
updated_at: new Date(Date.now() - 86400000).toISOString(),
},
];
const mockSequences: NumberingSequence[] = [
const mockSequences: NumberSequence[] = [
{
sequence_id: 1,
template_id: 1,
year: 2025,
organization_code: "PAT",
current_number: 125,
last_generated_number: "PAT-CORR-2025-0125",
organization_code: 'PAT',
current_number: 142,
last_generated_number: 'PAT-CORR-2025-0142',
updated_at: new Date().toISOString(),
},
{
sequence_id: 2,
template_id: 2,
year: 2025,
organization_code: "ITD",
discipline_code: "STR",
current_number: 42,
last_generated_number: "ITD-RFA-STR-2025-0042",
discipline_code: 'STR',
current_number: 56,
last_generated_number: 'RFA-STR-2025-0056',
updated_at: new Date().toISOString(),
},
];
export const numberingApi = {
getTemplates: async (): Promise<NumberingTemplate[]> => {
await new Promise((resolve) => setTimeout(resolve, 500));
return [...mockTemplates];
return new Promise((resolve) => {
setTimeout(() => resolve([...mockTemplates]), 500);
});
},
getTemplate: async (id: number): Promise<NumberingTemplate | undefined> => {
await new Promise((resolve) => setTimeout(resolve, 300));
return mockTemplates.find((t) => t.template_id === id);
return new Promise((resolve) => {
setTimeout(() => resolve(mockTemplates.find(t => t.template_id === id)), 300);
});
},
createTemplate: async (data: CreateTemplateDto): Promise<NumberingTemplate> => {
await new Promise((resolve) => setTimeout(resolve, 800));
const newTemplate: NumberingTemplate = {
template_id: Math.max(...mockTemplates.map((t) => t.template_id)) + 1,
document_type_name: data.document_type_id.toUpperCase(), // Simplified
...data,
example_number: "TEST-0001", // Simplified
current_number: data.starting_number - 1,
is_active: true,
updated_at: new Date().toISOString(),
};
mockTemplates.push(newTemplate);
return newTemplate;
saveTemplate: async (template: Partial<NumberingTemplate>): Promise<NumberingTemplate> => {
return new Promise((resolve) => {
setTimeout(() => {
if (template.template_id) {
// Update
const index = mockTemplates.findIndex(t => t.template_id === template.template_id);
if (index !== -1) {
mockTemplates[index] = { ...mockTemplates[index], ...template } as NumberingTemplate;
resolve(mockTemplates[index]);
}
} else {
// Create
const newTemplate: NumberingTemplate = {
template_id: Math.floor(Math.random() * 1000),
document_type_name: 'New Type',
is_active: true,
current_number: 0,
example_number: 'PREVIEW',
template_format: template.template_format || '',
discipline_code: template.discipline_code,
padding_length: template.padding_length ?? 4,
reset_annually: template.reset_annually ?? true,
...template
} as NumberingTemplate;
mockTemplates.push(newTemplate);
resolve(newTemplate);
}
}, 500);
});
},
updateTemplate: async (id: number, data: Partial<CreateTemplateDto>): Promise<NumberingTemplate> => {
await new Promise((resolve) => setTimeout(resolve, 600));
const index = mockTemplates.findIndex((t) => t.template_id === id);
if (index === -1) throw new Error("Template not found");
const updatedTemplate = { ...mockTemplates[index], ...data, updated_at: new Date().toISOString() };
mockTemplates[index] = updatedTemplate;
return updatedTemplate;
getSequences: async (): Promise<NumberSequence[]> => {
return new Promise((resolve) => {
setTimeout(() => resolve([...mockSequences]), 500);
});
},
getSequences: async (templateId: number): Promise<NumberingSequence[]> => {
await new Promise((resolve) => setTimeout(resolve, 400));
return mockSequences.filter((s) => s.template_id === templateId);
},
generateTestNumber: async (templateId: number, context: { organization_id: string, discipline_id: string }): Promise<{ number: string }> => {
return new Promise((resolve) => {
setTimeout(() => {
const template = mockTemplates.find(t => t.template_id === templateId);
if (!template) return resolve({ number: 'ERROR' });
testTemplate: async (templateId: number, data: any): Promise<TestGenerationResult> => {
await new Promise((resolve) => setTimeout(resolve, 500));
const template = mockTemplates.find(t => t.template_id === templateId);
if (!template) throw new Error("Template not found");
let format = template.template_format;
// Mock replacement
format = format.replace('{PROJECT}', 'LCBP3');
format = format.replace('{ORIGINATOR}', context.organization_id === '1' ? 'PAT' : 'CN');
format = format.replace('{RECIPIENT}', context.organization_id === '1' ? 'CN' : 'PAT');
format = format.replace('{CORR_TYPE}', template.document_type_name === 'Correspondence' ? 'CORR' : 'RFA');
format = format.replace('{DISCIPLINE}', context.discipline_id === '1' ? 'STR' : (context.discipline_id === '2' ? 'ARC' : 'GEN'));
format = format.replace('{RFA_TYPE}', 'SDW'); // Mock
// Mock generation logic
let number = template.template_format;
number = number.replace("{ORG}", data.organization_id === "1" ? "PAT" : "ITD");
number = number.replace("{DOCTYPE}", template.document_type_id.toUpperCase());
number = number.replace("{DISC}", data.discipline_id === "1" ? "STR" : "ARC");
number = number.replace("{YYYY}", data.year.toString());
number = number.replace("{SEQ}", "0001");
const year = new Date().getFullYear();
format = format.replace('{YEAR:A.D.}', year.toString());
format = format.replace('{YEAR:B.E.}', (year + 543).toString());
format = format.replace('{SEQ:4}', '0001');
format = format.replace('{REV}', 'A');
return { number };
},
resolve({ number: format });
}, 800);
});
}
};

5
frontend/lib/auth.ts
View File

@@ -136,6 +136,11 @@ export const {
return token;
}
// If existing token has an error, do not retry refresh (prevents infinite loop)
if (token.error) {
return token;
}
// Token expired, refresh it
return refreshAccessToken(token);
},

2
frontend/lib/stores/auth-store.ts
View File

@@ -44,7 +44,7 @@ export const useAuthStore = create<AuthState>()(
if (!user) return false;
if (user.permissions?.includes(requiredPermission)) return true;
if (user.role === 'Admin') return true;
if (['Admin', 'ADMIN', 'admin'].includes(user.role)) return true;
return false;
},

11
frontend/types/correspondence.ts
View File

@@ -4,6 +4,15 @@ export interface Organization {
org_code: string;
}
export interface Attachment {
id: number;
name: string;
url: string;
size?: number;
type?: string;
created_at?: string;
}
export interface Correspondence {
correspondence_id: number;
document_number: string;
@@ -18,7 +27,7 @@ export interface Correspondence {
from_organization?: Organization;
to_organization?: Organization;
document_type_id: number;
attachments?: any[]; // Define Attachment type if needed
attachments?: Attachment[];
}
export interface CreateCorrespondenceDto {