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

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>
   );