251208:1625 Frontend: to be complete admin panel, Backend: tobe recheck all task

2025-12-08 16:25:56 +07:00
parent dcd126d704
commit 863a727756
64 changed files with 5956 additions and 1256 deletions
--- a/frontend/components/admin/sidebar.tsx
+++ b/frontend/components/admin/sidebar.tsx
@@ -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() {
--- a/frontend/components/auth/auth-sync.tsx
+++ b/frontend/components/auth/auth-sync.tsx
@@ -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

--- a/frontend/components/correspondences/detail.tsx
+++ b/frontend/components/correspondences/detail.tsx
@@ -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>
--- a/frontend/components/correspondences/form.tsx
+++ b/frontend/components/correspondences/form.tsx
@@ -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
--- a/frontend/components/drawings/list.tsx
+++ b/frontend/components/drawings/list.tsx
@@ -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>
  );
--- a/frontend/components/layout/sidebar.tsx
+++ b/frontend/components/layout/sidebar.tsx
@@ -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
    },
  ];

--- a/frontend/components/numbering/sequence-viewer.tsx
+++ b/frontend/components/numbering/sequence-viewer.tsx
@@ -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>
  );
 }
--- a/frontend/components/numbering/template-editor.tsx
+++ b/frontend/components/numbering/template-editor.tsx
@@ -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>
  );
--- a/frontend/components/numbering/template-tester.tsx
+++ b/frontend/components/numbering/template-tester.tsx
@@ -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>
--- a/frontend/components/rfas/detail.tsx
+++ b/frontend/components/rfas/detail.tsx
@@ -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>
  );
 }
--- a/frontend/components/rfas/form.tsx
+++ b/frontend/components/rfas/form.tsx
@@ -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"} />
--- a/frontend/components/rfas/list.tsx
+++ b/frontend/components/rfas/list.tsx
@@ -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>
  );
--- a/frontend/components/ui/alert.tsx
+++ b/frontend/components/ui/alert.tsx
@@ -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 }
--- a/frontend/components/ui/dialog.tsx
+++ b/frontend/components/ui/dialog.tsx
@@ -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,
+}
--- a/frontend/components/workflows/dsl-editor.tsx
+++ b/frontend/components/workflows/dsl-editor.tsx
@@ -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>
  );
 }
--- a/frontend/components/workflows/visual-builder.tsx
+++ b/frontend/components/workflows/visual-builder.tsx
@@ -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>
+    )
+}