feat: approval workflow with approver/backupApprover

src/app/(main)/issues/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect, useMemo } from 'react';
-import { Search, Plus, X } from 'lucide-react';
+import { Search, Plus, X, ListChecks } from 'lucide-react';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
 import TicketCard from '@/components/issues/KanbanBoard';
@@ -15,6 +15,9 @@ const columns = [
   { key: 'OPEN', label: 'Open', color: 'bg-status-open-text' },
   { key: 'ASSIGNED', label: 'Assigned', color: 'bg-status-pending-text' },
   { key: 'IN_PROGRESS', label: 'In Progress', color: 'bg-status-pending-text' },
+  { key: 'PENDING_APPROVAL', label: 'Pending Approval', color: 'bg-amber-500' },
+  { key: 'APPROVED', label: 'Approved', color: 'bg-emerald-500' },
+  { key: 'REJECTED', label: 'Rejected', color: 'bg-red-500' },
   { key: 'DONE', label: 'Done', color: 'bg-status-resolved-text' },
 ];
 
@@ -28,6 +31,7 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
   });
   const [extraFields, setExtraFields] = useState<Record<string, string>>({});
   const [projects, setProjects] = useState<Project[]>([]);
+  const [approvers, setApprovers] = useState<{empId: number; name: string; email: string}[]>([]);
   const [submitting, setSubmitting] = useState(false);
   const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
 
@@ -35,6 +39,9 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
     apiClient.get<{ success: boolean; data: Project[] }>('/projects')
       .then((res) => setProjects(res.data))
       .catch(console.error);
+    apiClient.get<{ success: boolean; data: {empId: number; name: string; email: string}[] }>('/employees/approvers')
+      .then((res) => setApprovers(res.data))
+      .catch(console.error);
   }, []);
 
   const updateField = (field: string, value: string) => {
@@ -59,6 +66,8 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
     }
   };
 
+  const needsApprover = ['VACATION', 'EXPENSE', 'EQUIPMENT_REQUEST', 'GENERAL'].includes(formData.category);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     const errors: Record<string, string> = {};
@@ -77,6 +86,9 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
       if (!extraFields.equipmentType?.trim()) errors.equipmentType = '장비 유형을 입력해주세요';
       if (!extraFields.urgency) errors.urgency = '긴급도를 선택해주세요';
     }
+    if (needsApprover && !extraFields.approverId) {
+      errors.approverId = '승인자를 선택해주세요';
+    }
 
     if (Object.keys(errors).length > 0) {
       setFieldErrors(errors);
@@ -111,6 +123,8 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
         projectId: formData.projectId ? parseInt(formData.projectId) : undefined,
         attachmentUrl: extraFields.receiptUrl || undefined,
         attachmentName: extraFields.receiptName || undefined,
+        approverId: extraFields.approverId ? parseInt(extraFields.approverId) : undefined,
+        backupApproverId: extraFields.backupApproverId ? parseInt(extraFields.backupApproverId) : undefined,
       });
       onSuccess();
       onClose();
@@ -175,6 +189,8 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
                     delete next.amount;
                     delete next.equipmentType;
                     delete next.urgency;
+                    delete next.approverId;
+                    delete next.backupApproverId;
                     return next;
                   });
                 }}
@@ -337,6 +353,41 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
             </div>
           )}
 
+          {/* Approver dropdowns for VACATION/EXPENSE/EQUIPMENT_REQUEST/GENERAL */}
+          {needsApprover && (
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-text-main mb-1.5">승인자 (사수) <span className="text-red-500">*</span></label>
+                <select
+                  value={extraFields.approverId || ''}
+                  onChange={(e) => updateExtraField('approverId', e.target.value)}
+                  className={`w-full px-3 py-2.5 border rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-primary ${
+                    fieldErrors.approverId ? 'border-error' : 'border-border'
+                  }`}
+                >
+                  <option value="">선택하세요</option>
+                  {approvers.map((a) => (
+                    <option key={a.empId} value={a.empId}>{a.name}</option>
+                  ))}
+                </select>
+                {renderFieldError('approverId')}
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-text-main mb-1.5">부승인자 (부사수, 선택)</label>
+                <select
+                  value={extraFields.backupApproverId || ''}
+                  onChange={(e) => updateExtraField('backupApproverId', e.target.value)}
+                  className="w-full px-3 py-2.5 border border-border rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-primary"
+                >
+                  <option value="">선택 안 함</option>
+                  {approvers.map((a) => (
+                    <option key={a.empId} value={a.empId}>{a.name}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          )}
+
           <div>
             <label className="block text-sm font-medium text-text-main mb-1.5">
               Description <span className="text-red-500">*</span>
@@ -385,6 +436,10 @@ export default function IssuesPage() {
   const [filterPriority, setFilterPriority] = useState('ALL');
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [mobileColumn, setMobileColumn] = useState<string>(columns[0].key);
+  const [approvalMode, setApprovalMode] = useState(false);
+  const [pendingTickets, setPendingTickets] = useState<IssueTicket[]>([]);
+  const [pendingLoading, setPendingLoading] = useState(false);
+  const [userRole, setUserRole] = useState<string>('');
 
   const { codes: priorities } = useCommonCodes('TICKET_PRIORITY');
   const { codes: categories } = useCommonCodes('TICKET_CATEGORY');
@@ -394,6 +449,23 @@ export default function IssuesPage() {
     if (q) setSearchKeyword(q);
   }, [searchParams]);
 
+  // Fetch user role on mount
+  useEffect(() => {
+    const storedRole = localStorage.getItem('userRole');
+    if (storedRole) setUserRole(storedRole);
+  }, []);
+
+  // Fetch pending approvals when approvalMode toggles on
+  useEffect(() => {
+    if (approvalMode) {
+      setPendingLoading(true);
+      apiClient.get<{ success: boolean; data: IssueTicket[] }>('/tickets/pending')
+        .then((res) => setPendingTickets(res.data))
+        .catch(console.error)
+        .finally(() => setPendingLoading(false));
+    }
+  }, [approvalMode]);
+
   useEffect(() => {
     ticketService.getTickets({ size: 100 }).then((res) => {
       setTickets(res.data.content);
@@ -433,6 +505,8 @@ export default function IssuesPage() {
     }
   }, [grouped]);
 
+  const isManager = userRole === 'MANAGER' || userRole === 'ADMIN';
+
   return (
     <div className="p-4 sm:p-6 lg:p-8">
       <div className="max-w-7xl mx-auto">
@@ -442,6 +516,20 @@ export default function IssuesPage() {
             <p className="text-text-muted text-sm mt-0.5">Track and manage field support requests</p>
           </div>
           <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto">
+            {/* Approval mode toggle — only for MANAGER/ADMIN */}
+            {isManager && (
+              <button
+                onClick={() => setApprovalMode(!approvalMode)}
+                className={`flex items-center space-x-2 px-4 py-2.5 text-sm font-medium rounded-lg transition-colors flex-1 sm:flex-none justify-center ${
+                  approvalMode
+                    ? 'bg-amber-500 text-white hover:bg-amber-600'
+                    : 'bg-white border border-border text-text-main hover:bg-surface-container'
+                }`}
+              >
+                <ListChecks className="w-4 h-4" />
+                <span>{approvalMode ? 'All Tickets' : 'Pending Approvals'}</span>
+              </button>
+            )}
             <button
               onClick={() => setShowCreateModal(true)}
               className="flex items-center space-x-2 px-4 py-2.5 bg-primary text-white text-sm font-medium rounded-lg hover:opacity-90 transition-opacity flex-1 sm:flex-none justify-center"
@@ -477,80 +565,120 @@ export default function IssuesPage() {
           />
         </div>
 
-        {loading ? (
-          <div className="flex items-center justify-center h-64 text-text-muted text-sm">Loading tickets...</div>
-        ) : (
-          <>
-            {/* Mobile: column selector */}
-            <div className="md:hidden mb-4">
-              <select
-                value={mobileColumn}
-                onChange={(e) => setMobileColumn(e.target.value)}
-                className="w-full px-4 py-2.5 rounded-xl bg-white border border-border text-sm"
-              >
-                {columns.map((col) => (
-                  <option key={col.key} value={col.key}>
-                    {col.label} ({grouped[col.key]?.length || 0})
-                  </option>
+        {/* Approval Mode View */}
+        {approvalMode ? (
+          <div>
+            <h3 className="font-outfit text-lg font-semibold text-text-main mb-4">Pending Approvals ({pendingTickets.length})</h3>
+            {pendingLoading ? (
+              <div className="flex items-center justify-center h-48 text-text-muted text-sm">Loading pending approvals...</div>
+            ) : pendingTickets.length === 0 ? (
+              <div className="flex items-center justify-center h-48 text-text-muted text-sm bg-gray-50/30 rounded-2xl">
+                No pending approvals
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {pendingTickets.map((ticket) => (
+                  <Link key={ticket.ticketId} href={`/issues/${ticket.ticketId}`}>
+                    <div className="bg-white border border-border rounded-xl p-4 hover:bg-surface-container-low transition-colors cursor-pointer">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                          <span className="text-xs font-mono text-text-muted">#{ticket.ticketId}</span>
+                          <span className="font-medium text-text-main">{ticket.title}</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <span className="text-xs text-text-muted">{ticket.requesterName}</span>
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+                            ticket.priority === 'CRITICAL' ? 'bg-status-critical-bg text-status-critical' :
+                            ticket.priority === 'HIGH' ? 'bg-amber-50 text-amber-700' :
+                            'bg-gray-100 text-gray-600'
+                          }`}>
+                            {ticket.priority}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
                 ))}
-              </select>
-            </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          /* Kanban View */
+          loading ? (
+            <div className="flex items-center justify-center h-64 text-text-muted text-sm">Loading tickets...</div>
+          ) : (
+            <>
+              {/* Mobile: column selector */}
+              <div className="md:hidden mb-4">
+                <select
+                  value={mobileColumn}
+                  onChange={(e) => setMobileColumn(e.target.value)}
+                  className="w-full px-4 py-2.5 rounded-xl bg-white border border-border text-sm"
+                >
+                  {columns.map((col) => (
+                    <option key={col.key} value={col.key}>
+                      {col.label} ({grouped[col.key]?.length || 0})
+                    </option>
+                  ))}
+                </select>
+              </div>
 
-            {/* Desktop: all columns */}
-            <div className="hidden md:flex gap-4 overflow-x-auto pb-2">
-              {columns.map((col) => (
-                <div key={col.key} className="flex-1 min-w-[220px]">
-                  <KanbanColumn title={col.label} count={grouped[col.key].length} color={col.color}>
-                    {grouped[col.key].map((ticket) => (
-                      <Link key={ticket.ticketId} href={`/issues/${ticket.ticketId}`}>
-                        <TicketCard
-                          ticket={{
-                            ticketId: ticket.ticketId,
-                            title: ticket.title,
-                            projectName: ticket.projectName,
-                            requesterName: ticket.requesterName,
-                            assigneeName: ticket.assigneeName,
-                            priority: ticket.priority,
-                            category: ticket.category,
-                            status: ticket.status,
-                            dueDate: ticket.dueDate,
-                            isImminent: ticket.isImminent,
-                          }}
-                        />
-                      </Link>
-                    ))}
-                  </KanbanColumn>
-                </div>
-              ))}
-            </div>
+              {/* Desktop: all columns */}
+              <div className="hidden md:flex gap-4 overflow-x-auto pb-2">
+                {columns.map((col) => (
+                  <div key={col.key} className="flex-1 min-w-[220px]">
+                    <KanbanColumn title={col.label} count={grouped[col.key].length} color={col.color}>
+                      {grouped[col.key].map((ticket) => (
+                        <Link key={ticket.ticketId} href={`/issues/${ticket.ticketId}`}>
+                          <TicketCard
+                            ticket={{
+                              ticketId: ticket.ticketId,
+                              title: ticket.title,
+                              projectName: ticket.projectName,
+                              requesterName: ticket.requesterName,
+                              assigneeName: ticket.assigneeName,
+                              priority: ticket.priority,
+                              category: ticket.category,
+                              status: ticket.status,
+                              dueDate: ticket.dueDate,
+                              isImminent: ticket.isImminent,
+                            }}
+                          />
+                        </Link>
+                      ))}
+                    </KanbanColumn>
+                  </div>
+                ))}
+              </div>
 
-            {/* Mobile: single column */}
-            <div className="md:hidden space-y-3">
-              {(grouped[mobileColumn] || []).map((ticket) => (
-                <Link key={ticket.ticketId} href={`/issues/${ticket.ticketId}`}>
-                  <TicketCard
-                    ticket={{
-                      ticketId: ticket.ticketId,
-                      title: ticket.title,
-                      projectName: ticket.projectName,
-                      requesterName: ticket.requesterName,
-                      assigneeName: ticket.assigneeName,
-                      priority: ticket.priority,
-                      category: ticket.category,
-                      status: ticket.status,
-                      dueDate: ticket.dueDate,
-                      isImminent: ticket.isImminent,
-                    }}
-                  />
-                </Link>
-              ))}
-              {(grouped[mobileColumn] || []).length === 0 && (
-                <div className="flex items-center justify-center h-32 text-text-muted text-sm bg-gray-50/30 rounded-2xl">
-                  No tickets in this column
-                </div>
-              )}
-            </div>
-          </>
+              {/* Mobile: single column */}
+              <div className="md:hidden space-y-3">
+                {(grouped[mobileColumn] || []).map((ticket) => (
+                  <Link key={ticket.ticketId} href={`/issues/${ticket.ticketId}`}>
+                    <TicketCard
+                      ticket={{
+                        ticketId: ticket.ticketId,
+                        title: ticket.title,
+                        projectName: ticket.projectName,
+                        requesterName: ticket.requesterName,
+                        assigneeName: ticket.assigneeName,
+                        priority: ticket.priority,
+                        category: ticket.category,
+                        status: ticket.status,
+                        dueDate: ticket.dueDate,
+                        isImminent: ticket.isImminent,
+                      }}
+                    />
+                  </Link>
+                ))}
+                {(grouped[mobileColumn] || []).length === 0 && (
+                  <div className="flex items-center justify-center h-32 text-text-muted text-sm bg-gray-50/30 rounded-2xl">
+                    No tickets in this column
+                  </div>
+                )}
+              </div>
+            </>
+          )
         )}
       </div>