690514:2019 204-rfa-approval-refactor #01

frontend/components/reminder/ReminderHistory.tsx

@@ -1,84 +1,81 @@
 'use client';
 
 // File: components/reminder/ReminderHistory.tsx
-// แสดงประวัติ Reminder และ Escalation ของ Review Task (T050)
-import React from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Clock, AlertTriangle, Bell } from 'lucide-react';
-
-type ReminderType = 'DUE_SOON' | 'ON_DUE' | 'OVERDUE' | 'ESCALATION_L1' | 'ESCALATION_L2';
-
-interface ReminderEntry {
-  id: string;
-  type: ReminderType;
-  sentAt: string;
-  recipient?: string;
-  isDelivered?: boolean;
-}
+import { format } from 'date-fns';
+import { History, Bell, ShieldAlert, AlertTriangle } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useReminderHistory } from '@/hooks/use-reminder';
+import { ReminderType } from '@/types/workflow';
 
 interface ReminderHistoryProps {
-  reminders: ReminderEntry[];
-  isLoading?: boolean;
+  taskPublicId: string;
 }
 
-const TYPE_CONFIG: Record<
-  ReminderType,
-  { label: string; icon: React.ElementType; variant: 'default' | 'secondary' | 'destructive' | 'outline' }
-> = {
-  DUE_SOON: { label: 'Due Soon', icon: Clock, variant: 'outline' },
-  ON_DUE: { label: 'Due Today', icon: Bell, variant: 'secondary' },
-  OVERDUE: { label: 'Overdue', icon: AlertTriangle, variant: 'destructive' },
-  ESCALATION_L1: { label: 'Escalation L1', icon: AlertTriangle, variant: 'destructive' },
-  ESCALATION_L2: { label: 'Escalation L2 (PM)', icon: AlertTriangle, variant: 'destructive' },
-};
+export function ReminderHistoryViewer({ taskPublicId }: ReminderHistoryProps) {
+  const { data: history = [], isLoading } = useReminderHistory(taskPublicId);
 
-export function ReminderHistory({ reminders, isLoading }: ReminderHistoryProps) {
-  if (isLoading) {
-    return <div className="text-sm text-muted-foreground">Loading reminder history...</div>;
-  }
-
-  if (reminders.length === 0) {
-    return <div className="text-sm text-muted-foreground">No reminders sent yet.</div>;
-  }
+  const getIcon = (type: ReminderType) => {
+    switch (type) {
+      case ReminderType.ESCALATION_L1:
+        return <AlertTriangle className="h-4 w-4 text-orange-500" />;
+      case ReminderType.ESCALATION_L2:
+        return <ShieldAlert className="h-4 w-4 text-red-500" />;
+      default:
+        return <Bell className="h-4 w-4 text-blue-500" />;
+    }
+  };
 
   return (
-    <div className="space-y-2">
-      {reminders.map((entry) => {
-        const config = TYPE_CONFIG[entry.type];
-        const Icon = config.icon;
-
-        return (
-          <div
-            key={entry.id}
-            className="flex items-center justify-between py-1.5 border-b last:border-0"
-          >
-            <div className="flex items-center gap-2">
-              <Icon className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
-              <Badge variant={config.variant} className="text-xs">
-                {config.label}
-              </Badge>
-              {entry.recipient && (
-                <span className="text-xs text-muted-foreground">→ {entry.recipient}</span>
-              )}
-            </div>
-            <div className="flex items-center gap-2">
-              {entry.isDelivered !== undefined && (
-                <span className={`text-xs ${entry.isDelivered ? 'text-green-600' : 'text-orange-500'}`}>
-                  {entry.isDelivered ? '✓ Delivered' : '⏳ Pending'}
-                </span>
-              )}
-              <span className="text-xs text-muted-foreground">
-                {new Date(entry.sentAt).toLocaleDateString('th-TH', {
-                  day: '2-digit',
-                  month: 'short',
-                  hour: '2-digit',
-                  minute: '2-digit',
-                })}
-              </span>
-            </div>
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-center gap-2">
+          <History className="h-4 w-4 text-muted-foreground" />
+          <CardTitle className="text-sm font-semibold">Reminder History</CardTitle>
+        </div>
+        <CardDescription>ประวัติการแจ้งเตือนและการยกระดับ</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className="text-xs text-muted-foreground py-4 text-center">
+            Loading history...
           </div>
-        );
-      })}
-    </div>
+        ) : history.length === 0 ? (
+          <div className="text-xs text-muted-foreground py-4 text-center border rounded-md border-dashed">
+            No reminders sent yet.
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {history.map((item) => (
+              <div
+                key={item.publicId}
+                className="flex items-start gap-3 text-xs border-b pb-3 last:border-0 last:pb-0"
+              >
+                <div className="mt-0.5">{getIcon(item.reminderType)}</div>
+                <div className="flex-1 space-y-1">
+                  <div className="flex items-center justify-between">
+                    <span className="font-semibold uppercase tracking-wider">
+                      {item.reminderType.replace('_', ' ')}
+                    </span>
+                    <span className="text-muted-foreground">
+                      {format(new Date(item.sentAt), 'dd MMM yyyy HH:mm')}
+                    </span>
+                  </div>
+                  <p className="text-muted-foreground">
+                    Sent to: <span className="text-foreground">{item.user?.fullName ?? 'Unknown User'}</span>
+                    {item.escalationLevel > 0 && ` (L${item.escalationLevel})`}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
   );
 }

frontend/components/reminder/ReminderRuleForm.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+// File: components/reminder/ReminderRuleForm.tsx
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, FormDescription } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { ReminderType } from '@/types/workflow';
+import { CreateReminderRuleDto } from '@/hooks/use-reminder';
+
+const formSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(100),
+  documentTypeCode: z.string().optional(),
+  reminderType: z.nativeEnum(ReminderType),
+  daysBeforeDue: z.coerce.number(),
+  escalationLevel: z.coerce.number().min(0).max(2).default(0),
+  messageTemplate: z.string().optional(),
+});
+
+interface ReminderRuleFormProps {
+  onSubmit: (data: CreateReminderRuleDto) => void;
+  isLoading?: boolean;
+  defaultValues?: Partial<CreateReminderRuleDto>;
+}
+
+export function ReminderRuleForm({ onSubmit, isLoading, defaultValues }: ReminderRuleFormProps) {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: defaultValues?.name ?? '',
+      documentTypeCode: defaultValues?.documentTypeCode ?? '',
+      reminderType: defaultValues?.reminderType ?? ReminderType.DUE_SOON,
+      daysBeforeDue: defaultValues?.daysBeforeDue ?? 2,
+      escalationLevel: defaultValues?.escalationLevel ?? 0,
+      messageTemplate: defaultValues?.messageTemplate ?? '',
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Rule Name</FormLabel>
+              <FormControl>
+                <Input placeholder="e.g. 2 Days Before Reminder" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="grid grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="reminderType"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Reminder Type</FormLabel>
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select type" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value={ReminderType.DUE_SOON}>Due Soon</SelectItem>
+                    <SelectItem value={ReminderType.ON_DUE}>On Due</SelectItem>
+                    <SelectItem value={ReminderType.OVERDUE}>Overdue</SelectItem>
+                    <SelectItem value={ReminderType.ESCALATION_L1}>Escalation L1</SelectItem>
+                    <SelectItem value={ReminderType.ESCALATION_L2}>Escalation L2</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="daysBeforeDue"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Trigger Days</FormLabel>
+                <FormControl>
+                  <Input type="number" {...field} />
+                </FormControl>
+                <FormDescription>+ for before, - for after due</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <FormField
+          control={form.control}
+          name="escalationLevel"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Escalation Level</FormLabel>
+              <Select onValueChange={(val) => field.onChange(Number(val))} defaultValue={field.value.toString()}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select level" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="0">0 - Normal Reminder</SelectItem>
+                  <SelectItem value="1">1 - Escalation L1 (Lead)</SelectItem>
+                  <SelectItem value="2">2 - Escalation L2 (PM)</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="messageTemplate"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Message Template (Optional)</FormLabel>
+              <FormControl>
+                <Textarea placeholder="Custom message for notification..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? 'Saving...' : 'Save Rule'}
+        </Button>
+      </form>
+    </Form>
+  );
+}

frontend/components/response-code/ResponseCodeSelector.test.tsx

@@ -0,0 +1,63 @@
+// File: frontend/components/response-code/ResponseCodeSelector.test.tsx
+// Unit tests สำหรับ ResponseCodeSelector component (T078)
+import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import { ResponseCodeSelector } from '@/components/response-code/ResponseCodeSelector';
+
+vi.mock('@/hooks/use-response-codes', () => ({
+  useResponseCodesByDocType: vi.fn(() => ({
+    data: [
+      {
+        publicId: 'uuid-1',
+        code: '1A',
+        category: 'ENGINEERING',
+        descriptionEn: 'Approved — No Comments',
+        descriptionTh: 'ผ่าน — ไม่มีเงื่อนไข',
+        implications: {},
+        notifyRoles: [],
+        isActive: true,
+        isSystem: true,
+      },
+      {
+        publicId: 'uuid-2',
+        code: '2',
+        category: 'ENGINEERING',
+        descriptionEn: 'Approved with Comments',
+        descriptionTh: 'ผ่าน — มีเงื่อนไข',
+        implications: { affectsSchedule: true },
+        notifyRoles: ['CONTRACT_MANAGER'],
+        isActive: true,
+        isSystem: true,
+      },
+    ],
+    isLoading: false,
+  })),
+}));
+
+describe('ResponseCodeSelector', () => {
+  it('renders the trigger with placeholder text', () => {
+    render(
+      <ResponseCodeSelector
+        documentTypeId={1}
+        value={undefined}
+        onChange={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole('combobox')).toBeTruthy();
+    expect(screen.getByText('Select Response Code...')).toBeTruthy();
+  });
+
+  it('renders a custom placeholder when provided', () => {
+    render(
+      <ResponseCodeSelector
+        documentTypeId={1}
+        value={undefined}
+        onChange={vi.fn()}
+        placeholder="Choose a response code"
+      />,
+    );
+
+    expect(screen.getByText('Choose a response code')).toBeTruthy();
+  });
+});

frontend/components/review-team/ReviewTeamSelector.tsx

@@ -14,6 +14,8 @@ import { Users } from 'lucide-react';
 import { useReviewTeams } from '@/hooks/use-review-teams';
 import { ReviewTeam } from '@/types/review-team';
 
+const NO_REVIEW_TEAM_VALUE = '__skip_parallel_review__';
+
 interface ReviewTeamSelectorProps {
   projectPublicId: string;
   rfaTypeCode?: string;
@@ -50,15 +52,17 @@ export function ReviewTeamSelector({
       </div>
 
       <Select
-        value={value ?? ''}
-        onValueChange={(v: string) => onChange(v || undefined)}
+        value={value ?? NO_REVIEW_TEAM_VALUE}
+        onValueChange={(v: string) =>
+          onChange(v === NO_REVIEW_TEAM_VALUE ? undefined : v)
+        }
         disabled={disabled || isLoading}
       >
         <SelectTrigger>
           <SelectValue placeholder={isLoading ? 'Loading teams...' : 'Skip — no parallel review'} />
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value="">Skip — no parallel review</SelectItem>
+          <SelectItem value={NO_REVIEW_TEAM_VALUE}>Skip — no parallel review</SelectItem>
           {filteredTeams.map((team) => (
             <SelectItem key={team.publicId} value={team.publicId}>
               <div className="flex items-center gap-2">

frontend/components/review-team/TeamMemberManager.tsx

@@ -30,7 +30,7 @@ interface User {
 }
 
 interface Discipline {
-  publicId: string;
+  id?: number;
   disciplineCode: string;
   codeNameEn?: string;
 }
@@ -68,14 +68,16 @@ export function TeamMemberManager({
   const removeMember = useRemoveTeamMember();
 
   const handleAdd = () => {
-    if (!selectedUser || !selectedDiscipline) return;
+    const disciplineId = Number(selectedDiscipline);
+
+    if (!selectedUser || Number.isNaN(disciplineId)) return;
 
     addMember.mutate(
       {
         teamPublicId,
         data: {
           userPublicId: selectedUser,
-          disciplinePublicId: selectedDiscipline,
+          disciplineId,
           role: selectedRole,
         },
       },
@@ -151,7 +153,7 @@ export function TeamMemberManager({
           </SelectTrigger>
           <SelectContent>
             {availableDisciplines.map((d) => (
-              <SelectItem key={d.publicId} value={d.publicId}>
+              <SelectItem key={String(d.id)} value={String(d.id)}>
                 {d.disciplineCode}
               </SelectItem>
             ))}

frontend/components/rfas/detail.tsx

@@ -11,6 +11,7 @@ import { useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { useProcessRFA, useSubmitRFA } from '@/hooks/use-rfa';
+import { ReviewTeamSelector } from '@/components/review-team/ReviewTeamSelector';
 
 interface RFADetailProps {
   data: RFA;
@@ -20,6 +21,7 @@ export function RFADetail({ data }: RFADetailProps) {
   const [actionState, setActionState] = useState<'approve' | 'reject' | 'submit' | null>(null);
   const [comments, setComments] = useState('');
   const [templateId, setTemplateId] = useState<number>(1);
+  const [reviewTeamPublicId, setReviewTeamPublicId] = useState<string | undefined>(undefined);
   const processMutation = useProcessRFA();
   const submitMutation = useSubmitRFA();
   const currentRevision = data.revisions.find((revision) => revision.isCurrent) ?? data.revisions[0];
@@ -79,10 +81,17 @@ export function RFADetail({ data }: RFADetailProps) {
 
   const handleSubmit = () => {
     submitMutation.mutate(
-      { uuid: data.publicId, templateId },
+      {
+        uuid: data.publicId,
+        data: {
+          templateId,
+          reviewTeamPublicId,
+        },
+      },
       {
         onSuccess: () => {
           setActionState(null);
+          setReviewTeamPublicId(undefined);
         },
       }
     );
@@ -159,6 +168,14 @@ export function RFADetail({ data }: RFADetailProps) {
               />
               <p className="text-xs text-muted-foreground">Enter the routing template ID for this submission.</p>
             </div>
+            {data.correspondence?.project?.publicId && (
+              <ReviewTeamSelector
+                projectPublicId={data.correspondence.project.publicId}
+                value={reviewTeamPublicId}
+                onChange={setReviewTeamPublicId}
+                disabled={submitMutation.isPending}
+              />
+            )}
             <div className="flex justify-end gap-2">
               <Button variant="ghost" onClick={() => setActionState(null)}>Cancel</Button>
               <Button onClick={handleSubmit} disabled={submitMutation.isPending}>