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

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(