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

frontend/app/(dashboard)/delegation/page.tsx

@@ -0,0 +1,4 @@
+// File: app/(dashboard)/delegation/page.tsx
+// Change Log
+// - 2026-05-13: เพิ่ม route alias สำหรับหน้า Delegation Settings ตาม Phase 5
+export { default } from '../settings/delegation/page';

frontend/app/(dashboard)/distribution-matrices/page.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+// File: app/(dashboard)/distribution-matrices/page.tsx
+// Change Log
+// - 2026-05-14: Add admin UI for Distribution Matrix management.
+import { useState } from 'react';
+import { Network, Plus, Trash2 } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  useCreateDistributionMatrix,
+  useDeleteDistributionMatrix,
+  useDistributionMatrices,
+} from '@/hooks/use-distribution-matrices';
+import { useProjectStore } from '@/lib/stores/project-store';
+
+const formSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(100),
+  documentTypeId: z.coerce.number().int().positive(),
+  codes: z.string().optional(),
+  excludeCodes: z.string().optional(),
+});
+
+type DistributionMatrixForm = z.infer<typeof formSchema>;
+
+const splitCodes = (value?: string): string[] | undefined => {
+  const codes = value
+    ?.split(',')
+    .map((item) => item.trim())
+    .filter(Boolean);
+  return codes && codes.length > 0 ? codes : undefined;
+};
+
+export default function DistributionMatricesPage() {
+  const [createOpen, setCreateOpen] = useState(false);
+  const selectedProjectId = useProjectStore((state) => state.selectedProjectId);
+  const { data: matrices = [], isLoading } = useDistributionMatrices(selectedProjectId ?? undefined);
+  const createMatrix = useCreateDistributionMatrix();
+  const deleteMatrix = useDeleteDistributionMatrix();
+
+  const form = useForm<DistributionMatrixForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      documentTypeId: 1,
+      codes: '',
+      excludeCodes: '3,4',
+    },
+  });
+
+  const onSubmit = (values: DistributionMatrixForm) => {
+    createMatrix.mutate(
+      {
+        name: values.name,
+        projectPublicId: selectedProjectId ?? undefined,
+        documentTypeId: values.documentTypeId,
+        conditions: {
+          codes: splitCodes(values.codes),
+          excludeCodes: splitCodes(values.excludeCodes),
+        },
+      },
+      {
+        onSuccess: () => {
+          form.reset();
+          setCreateOpen(false);
+        },
+      }
+    );
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Distribution Matrix</h1>
+          <p className="text-muted-foreground text-sm mt-1">
+            ตั้งค่าการกระจาย RFA หลังอนุมัติผ่าน BullMQ และ Transmittal
+          </p>
+        </div>
+        <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+          <DialogTrigger asChild>
+            <Button>
+              <Plus className="h-4 w-4 mr-2" />
+              New Matrix
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Create Distribution Matrix</DialogTitle>
+            </DialogHeader>
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Shop Drawing Distribution" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="documentTypeId"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Document Type ID</FormLabel>
+                      <FormControl>
+                        <Input type="number" min={1} {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <div className="grid grid-cols-2 gap-3">
+                  <FormField
+                    control={form.control}
+                    name="codes"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Included Codes</FormLabel>
+                        <FormControl>
+                          <Input placeholder="1A,1B,2" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="excludeCodes"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Excluded Codes</FormLabel>
+                        <FormControl>
+                          <Input placeholder="3,4" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <Button type="submit" className="w-full" disabled={createMatrix.isPending}>
+                  {createMatrix.isPending ? 'Saving...' : 'Save Matrix'}
+                </Button>
+              </form>
+            </Form>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {isLoading && <div className="text-center text-muted-foreground py-8">Loading distribution matrices...</div>}
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {matrices.map((matrix) => (
+          <Card key={matrix.publicId}>
+            <CardHeader className="pb-2">
+              <div className="flex items-start justify-between gap-3">
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <Network className="h-4 w-4 text-muted-foreground" />
+                    <CardTitle className="text-base">{matrix.name}</CardTitle>
+                  </div>
+                  <div className="flex flex-wrap gap-1">
+                    <Badge variant="secondary">Type {matrix.documentTypeId}</Badge>
+                    {(matrix.conditions?.codes ?? []).map((code) => (
+                      <Badge key={code} variant="outline">
+                        {code}
+                      </Badge>
+                    ))}
+                    {(matrix.conditions?.excludeCodes ?? []).map((code) => (
+                      <Badge key={code} variant="destructive">
+                        Exclude {code}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 text-destructive"
+                  onClick={() => deleteMatrix.mutate(matrix.publicId)}
+                  title="Deactivate matrix"
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="text-sm text-muted-foreground">Recipients: {(matrix.recipients ?? []).length}</div>
+            </CardContent>
+          </Card>
+        ))}
+        {!isLoading && matrices.length === 0 && (
+          <div className="lg:col-span-2 text-center py-12 border-2 border-dashed rounded-lg text-muted-foreground">
+            <Network className="h-12 w-12 mx-auto mb-3 opacity-20" />
+            <p>No Distribution Matrix configured.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/app/(dashboard)/response-codes/page.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+// File: app/(dashboard)/response-codes/page.tsx
+// Master Approval Matrix management UI (T031, FR-022)
+import { useState } from 'react';
+import { Settings, ShieldCheck, ChevronRight } from 'lucide-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useResponseCodes } from '@/hooks/use-response-codes';
+import { MatrixEditor } from '@/components/response-code/MatrixEditor';
+import { ProjectOverrideManager } from '@/components/response-code/ProjectOverrideManager';
+import { useProjectStore } from '@/lib/stores/project-store';
+
+export default function ResponseCodesPage() {
+  const [activeTab, setActiveTab] = useState('global');
+  const selectedProjectId = useProjectStore((state) => state.selectedProjectId);
+  
+  // Dummy data for example - in real app, these would come from specialized hooks
+  const { data: globalRules = [] } = useResponseCodes();
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
+            <span>Admin</span>
+            <ChevronRight className="h-3 w-3" />
+            <span>Master Data</span>
+          </div>
+          <h1 className="text-2xl font-bold flex items-center gap-2">
+            <ShieldCheck className="h-6 w-6 text-primary" />
+            Approval Matrix & Response Codes
+          </h1>
+          <p className="text-muted-foreground text-sm mt-1">
+            Manage global response codes and document-specific approval rules.
+          </p>
+        </div>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="global" className="gap-2">
+            Global Matrix
+          </TabsTrigger>
+          <TabsTrigger value="project" className="gap-2">
+            Project Overrides
+          </TabsTrigger>
+          <TabsTrigger value="codes" className="gap-2">
+            Code Definitions
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="global" className="space-y-4">
+          <div className="grid grid-cols-1 gap-4">
+            <MatrixEditor 
+              documentTypeCode="SDW" 
+              rules={globalRules.map(r => ({
+                publicId: r.publicId,
+                responseCode: {
+                  publicId: r.publicId,
+                  code: r.code,
+                  descriptionEn: r.descriptionEn || '',
+                  category: r.category || 'ENGINEERING'
+                },
+                isEnabled: true,
+                requiresComments: false,
+                triggersNotification: false,
+                isOverridden: false
+              }))}
+              onToggleEnabled={() => {}}
+              onToggleRequiresComments={() => {}}
+              onToggleNotification={() => {}}
+            />
+          </div>
+        </TabsContent>
+
+        <TabsContent value="project">
+          <ProjectOverrideManager 
+            projectPublicId={selectedProjectId ?? ''} 
+            projectName="Selected Project"
+            overrides={[]}
+            onDeleteOverride={() => {}}
+            onAddOverride={() => {}}
+          />
+        </TabsContent>
+
+        <TabsContent value="codes">
+          <div className="bg-muted/30 border rounded-lg p-12 text-center text-muted-foreground">
+            <Settings className="h-12 w-12 mx-auto mb-4 opacity-20" />
+            <p>Response Code definition management is coming soon.</p>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

frontend/app/(dashboard)/settings/delegation/page.tsx

@@ -14,13 +14,21 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
-import { useMyDelegations, useCreateDelegation, useRevokeDelegation, Delegation } from '@/hooks/use-delegation';
+import {
+  useMyDelegations,
+  useCreateDelegation,
+  useRevokeDelegation,
+  Delegation,
+} from '@/hooks/use-delegation';
+import { useUsers } from '@/hooks/use-users';
 import { DelegationForm } from '@/components/delegation/DelegationForm';
+import { User } from '@/types/user';
 
 export default function DelegationPage() {
   const [createOpen, setCreateOpen] = useState(false);
 
   const { data: delegations = [], isLoading } = useMyDelegations();
+  const { data: users = [] } = useUsers({ limit: 100 });
   const createDelegation = useCreateDelegation();
   const revokeDelegation = useRevokeDelegation();
 
@@ -48,7 +56,11 @@ export default function DelegationPage() {
               <DialogTitle>Create Delegation</DialogTitle>
             </DialogHeader>
             <DelegationForm
-              availableUsers={[]}
+              availableUsers={users.map((user: User) => ({
+                publicId: user.publicId,
+                fullName: `${user.firstName} ${user.lastName}`.trim(),
+                email: user.email,
+              }))}
               onSubmit={(dto) =>
                 createDelegation.mutate(dto, {
                   onSuccess: () => setCreateOpen(false),

frontend/app/(dashboard)/settings/reminder-rules/page.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+// File: app/(dashboard)/settings/reminder-rules/page.tsx
+import { useState } from 'react';
+import { Plus, Bell, Trash2, Edit2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  useReminderRules,
+  useCreateReminderRule,
+  useUpdateReminderRule,
+  useDeleteReminderRule,
+  ReminderRule,
+} from '@/hooks/use-reminder';
+import { ReminderRuleForm } from '@/components/reminder/ReminderRuleForm';
+import { ReminderType } from '@/types/workflow';
+
+export default function ReminderRulesPage() {
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editingRule, setEditingRule] = useState<ReminderRule | null>(null);
+
+  const { data: rules = [], isLoading } = useReminderRules();
+  const createRule = useCreateReminderRule();
+  const updateRule = useUpdateReminderRule();
+  const deleteRule = useDeleteReminderRule();
+
+  const getReminderTypeColor = (type: ReminderType) => {
+    switch (type) {
+      case ReminderType.DUE_SOON:
+        return 'bg-blue-100 text-blue-800 border-blue-200';
+      case ReminderType.ON_DUE:
+        return 'bg-yellow-100 text-yellow-800 border-yellow-200';
+      case ReminderType.OVERDUE:
+        return 'bg-orange-100 text-orange-800 border-orange-200';
+      case ReminderType.ESCALATION_L1:
+        return 'bg-red-100 text-red-800 border-red-200';
+      case ReminderType.ESCALATION_L2:
+        return 'bg-purple-100 text-purple-800 border-purple-200';
+      default:
+        return 'bg-gray-100 text-gray-800 border-gray-200';
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Reminder & Escalation Rules</h1>
+          <p className="text-muted-foreground text-sm mt-1">
+            ตั้งค่าการแจ้งเตือนและการยกระดับ (Escalation) เมื่อเกินกำหนด
+          </p>
+        </div>
+
+        <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+          <DialogTrigger asChild>
+            <Button>
+              <Plus className="h-4 w-4 mr-2" />
+              New Rule
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle>Create Reminder Rule</DialogTitle>
+            </DialogHeader>
+            <ReminderRuleForm
+              onSubmit={(dto) =>
+                createRule.mutate(dto, {
+                  onSuccess: () => setCreateOpen(false),
+                })
+              }
+              isLoading={createRule.isPending}
+            />
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {isLoading && (
+        <div className="text-center text-muted-foreground py-8">
+          Loading rules...
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {rules.map((rule) => (
+          <Card key={rule.publicId} className={!rule.isActive ? 'opacity-60' : ''}>
+            <CardHeader className="pb-2">
+              <div className="flex items-start justify-between">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <Bell className="h-4 w-4 text-muted-foreground" />
+                    <CardTitle className="text-base">{rule.name}</CardTitle>
+                  </div>
+                  <div className="flex flex-wrap gap-1 mt-1">
+                    <Badge
+                      variant="outline"
+                      className={`text-[10px] uppercase font-bold ${getReminderTypeColor(
+                        rule.reminderType
+                      )}`}
+                    >
+                      {rule.reminderType}
+                    </Badge>
+                    {rule.escalationLevel > 0 && (
+                      <Badge variant="destructive" className="text-[10px]">
+                        L{rule.escalationLevel}
+                      </Badge>
+                    )}
+                    {rule.documentTypeCode && (
+                      <Badge variant="secondary" className="text-[10px]">
+                        {rule.documentTypeCode}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+                <div className="flex gap-1">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => setEditingRule(rule)}
+                  >
+                    <Edit2 className="h-3.5 w-3.5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-destructive"
+                    onClick={() => {
+                      if (confirm('Delete this rule?')) {
+                        deleteRule.mutate(rule.publicId);
+                      }
+                    }}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="text-sm text-muted-foreground">
+                <p>
+                  Trigger:{' '}
+                  <span className="font-medium text-foreground">
+                    {rule.daysBeforeDue === 0
+                      ? 'On Due Date'
+                      : rule.daysBeforeDue > 0
+                      ? `${rule.daysBeforeDue} days before`
+                      : `${Math.abs(rule.daysBeforeDue)} days after`}
+                  </span>
+                </p>
+                {rule.messageTemplate && (
+                  <p className="mt-2 text-xs italic line-clamp-2">
+                    "{rule.messageTemplate}"
+                  </p>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+
+        {!isLoading && rules.length === 0 && (
+          <div className="col-span-full text-center py-12 border-2 border-dashed rounded-lg text-muted-foreground">
+            <Bell className="h-12 w-12 mx-auto mb-3 opacity-20" />
+            <p>No reminder rules defined.</p>
+            <Button
+              variant="link"
+              className="mt-2"
+              onClick={() => setCreateOpen(true)}
+            >
+              Create your first rule
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <Dialog
+        open={!!editingRule}
+        onOpenChange={(open) => !open && setEditingRule(null)}
+      >
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Edit Reminder Rule</DialogTitle>
+          </DialogHeader>
+          {editingRule && (
+            <ReminderRuleForm
+              defaultValues={editingRule}
+              onSubmit={(dto) =>
+                updateRule.mutate(
+                  { publicId: editingRule.publicId, data: dto },
+                  { onSuccess: () => setEditingRule(null) }
+                )
+              }
+              isLoading={updateRule.isPending}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

frontend/app/(dashboard)/settings/review-teams/page.tsx

@@ -18,17 +18,22 @@ import { useReviewTeams, useCreateReviewTeam, useUpdateReviewTeam } from '@/hook
 import { ReviewTeamForm } from '@/components/review-team/ReviewTeamForm';
 import { TeamMemberManager } from '@/components/review-team/TeamMemberManager';
 import { ReviewTeam } from '@/types/review-team';
-
-// TODO: ดึง projectPublicId จาก context หรือ URL param จริง
-const MOCK_PROJECT_ID = 'current-project-public-id';
+import { useProjectStore } from '@/lib/stores/project-store';
+import { useUsers } from '@/hooks/use-users';
+import { useContracts, useDisciplines } from '@/hooks/use-master-data';
 
 export default function ReviewTeamsPage() {
   const [expandedTeam, setExpandedTeam] = useState<string | null>(null);
   const [createOpen, setCreateOpen] = useState(false);
   const [editTeam, setEditTeam] = useState<ReviewTeam | null>(null);
+  const selectedProjectId = useProjectStore((state) => state.selectedProjectId);
+  const { data: availableUsers = [] } = useUsers();
+  const { data: contracts = [] } = useContracts(selectedProjectId ?? undefined);
+  const primaryContractId = contracts[0]?.publicId;
+  const { data: availableDisciplines = [] } = useDisciplines(primaryContractId);
 
   const { data: teams = [], isLoading } = useReviewTeams({
-    projectPublicId: MOCK_PROJECT_ID,
+    projectPublicId: selectedProjectId ?? undefined,
   });
 
   const createTeam = useCreateReviewTeam();
@@ -56,7 +61,7 @@ export default function ReviewTeamsPage() {
               <DialogTitle>Create Review Team</DialogTitle>
             </DialogHeader>
             <ReviewTeamForm
-              projectPublicId={MOCK_PROJECT_ID}
+              projectPublicId={selectedProjectId ?? ''}
               onSubmit={(values) =>
                 createTeam.mutate(values, {
                   onSuccess: () => setCreateOpen(false),
@@ -125,8 +130,8 @@ export default function ReviewTeamsPage() {
                 <TeamMemberManager
                   teamPublicId={team.publicId}
                   members={team.members ?? []}
-                  availableUsers={[]}
-                  availableDisciplines={[]}
+                  availableUsers={availableUsers}
+                  availableDisciplines={availableDisciplines}
                 />
               </CardContent>
             )}
@@ -149,7 +154,7 @@ export default function ReviewTeamsPage() {
           </DialogHeader>
           {editTeam && (
             <ReviewTeamForm
-              projectPublicId={MOCK_PROJECT_ID}
+              projectPublicId={selectedProjectId ?? ''}
               defaultValues={editTeam}
               onSubmit={(values) =>
                 updateTeam.mutate(