pray4skylark
691 lines
30 KiB
TypeScript
691 lines
30 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useMemo } from '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';
|
|
import { KanbanColumn } from '@/components/issues/KanbanBoard';
|
|
import ticketService from '@/services/ticketService';
|
|
import apiClient from '@/services/apiClient';
|
|
import type { IssueTicket, TicketCategory, TicketPriority, Project } from '@/types';
|
|
import { useCommonCodes } from '@/hooks/useCommonCodes';
|
|
|
|
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' },
|
|
];
|
|
|
|
function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSuccess: () => void }) {
|
|
const [formData, setFormData] = useState({
|
|
title: '',
|
|
description: '',
|
|
category: 'BUG',
|
|
priority: 'NORMAL',
|
|
projectId: '',
|
|
});
|
|
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>>({});
|
|
|
|
useEffect(() => {
|
|
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) => {
|
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
|
if (fieldErrors[field]) {
|
|
setFieldErrors((prev) => {
|
|
const next = { ...prev };
|
|
delete next[field];
|
|
return next;
|
|
});
|
|
}
|
|
};
|
|
|
|
const updateExtraField = (field: string, value: string) => {
|
|
setExtraFields((prev) => ({ ...prev, [field]: value }));
|
|
if (fieldErrors[field]) {
|
|
setFieldErrors((prev) => {
|
|
const next = { ...prev };
|
|
delete next[field];
|
|
return next;
|
|
});
|
|
}
|
|
};
|
|
|
|
const needsApprover = ['VACATION', 'EXPENSE', 'EQUIPMENT_REQUEST', 'GENERAL'].includes(formData.category);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const errors: Record<string, string> = {};
|
|
|
|
if (!formData.title.trim()) errors.title = '제목을 입력해주세요';
|
|
if (!formData.description.trim()) errors.description = '내용을 입력해주세요';
|
|
|
|
if (formData.category === 'VACATION') {
|
|
if (!extraFields.startDate) errors.startDate = '시작일을 선택해주세요';
|
|
if (!extraFields.endDate) errors.endDate = '종료일을 선택해주세요';
|
|
}
|
|
if (formData.category === 'EXPENSE') {
|
|
if (!extraFields.amount) errors.amount = '금액을 입력해주세요';
|
|
}
|
|
if (formData.category === 'EQUIPMENT_REQUEST') {
|
|
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);
|
|
return;
|
|
}
|
|
|
|
setSubmitting(true);
|
|
|
|
try {
|
|
let finalDescription = formData.description;
|
|
const extras: string[] = [];
|
|
|
|
if (formData.category === 'VACATION') {
|
|
extras.push(`\n\n[휴가 신청]\n시작일: ${extraFields.startDate}\n종료일: ${extraFields.endDate}`);
|
|
}
|
|
if (formData.category === 'EXPENSE') {
|
|
extras.push(`\n\n[비용 청구]\n금액: ${extraFields.amount}원${extraFields.receiptUrl ? `\n영수증: ${extraFields.receiptUrl}` : ''}`);
|
|
}
|
|
if (formData.category === 'EQUIPMENT_REQUEST') {
|
|
extras.push(`\n\n[장비 요청]\n장비 유형: ${extraFields.equipmentType}\n긴급도: ${extraFields.urgency}`);
|
|
}
|
|
|
|
if (extras.length > 0) {
|
|
finalDescription += extras.join('');
|
|
}
|
|
|
|
await ticketService.createTicket({
|
|
title: formData.title,
|
|
description: finalDescription,
|
|
category: formData.category as TicketCategory,
|
|
priority: formData.priority as TicketPriority,
|
|
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();
|
|
} catch (err: any) {
|
|
setFieldErrors({ submit: err.message || '티켓 생성에 실패했습니다' });
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const renderFieldError = (field: string) => {
|
|
if (!fieldErrors[field]) return null;
|
|
return <p className="mt-1 text-xs text-error">{fieldErrors[field]}</p>;
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
|
<div className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 overflow-hidden">
|
|
<div className="flex justify-between items-center p-6 border-b border-border">
|
|
<h3 className="font-outfit text-xl font-semibold text-text-main">New SR Ticket</h3>
|
|
<button onClick={onClose} className="p-2 hover:bg-surface-container rounded-lg transition-colors">
|
|
<X className="w-5 h-5 text-text-muted" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
{fieldErrors.submit && (
|
|
<div className="p-3 bg-error-container/20 border border-error text-error rounded-lg text-sm">
|
|
{fieldErrors.submit}
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">
|
|
Title <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
autoFocus
|
|
value={formData.title}
|
|
onChange={(e) => updateField('title', e.target.value)}
|
|
className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary ${
|
|
fieldErrors.title ? 'border-error' : 'border-border'
|
|
}`}
|
|
placeholder="Brief description of the issue"
|
|
/>
|
|
{renderFieldError('title')}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">Category</label>
|
|
<select
|
|
value={formData.category}
|
|
onChange={(e) => {
|
|
updateField('category', e.target.value);
|
|
setExtraFields({});
|
|
setFieldErrors((prev) => {
|
|
const next = { ...prev };
|
|
delete next.startDate;
|
|
delete next.endDate;
|
|
delete next.amount;
|
|
delete next.equipmentType;
|
|
delete next.urgency;
|
|
delete next.approverId;
|
|
delete next.backupApproverId;
|
|
return next;
|
|
});
|
|
}}
|
|
className="w-full px-3 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white"
|
|
>
|
|
<option value="BUG">Bug</option>
|
|
<option value="FEATURE">Feature</option>
|
|
<option value="SUPPORT">Support</option>
|
|
<option value="QA">QA</option>
|
|
<option value="GENERAL">일반 문의</option>
|
|
<option value="VACATION">휴가 신청</option>
|
|
<option value="EXPENSE">비용 청구</option>
|
|
<option value="EQUIPMENT_REQUEST">장비 요청</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">Priority</label>
|
|
<select
|
|
value={formData.priority}
|
|
onChange={(e) => updateField('priority', e.target.value)}
|
|
className="w-full px-3 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white"
|
|
>
|
|
<option value="LOW">Low</option>
|
|
<option value="NORMAL">Normal</option>
|
|
<option value="HIGH">High</option>
|
|
<option value="CRITICAL">Critical</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Project: only for project-related categories */}
|
|
{['BUG', 'FEATURE', 'SUPPORT', 'QA'].includes(formData.category) && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">Project</label>
|
|
<select
|
|
value={formData.projectId}
|
|
onChange={(e) => updateField('projectId', e.target.value)}
|
|
className="w-full px-3 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white"
|
|
>
|
|
<option value="">해당 없음</option>
|
|
{projects.map((p) => (
|
|
<option key={p.projectId} value={p.projectId}>
|
|
{p.projectName}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
{formData.category === 'VACATION' && (
|
|
<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>
|
|
<input
|
|
type="date"
|
|
value={extraFields.startDate || ''}
|
|
onChange={(e) => updateExtraField('startDate', e.target.value)}
|
|
className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary ${
|
|
fieldErrors.startDate ? 'border-error' : 'border-border'
|
|
}`}
|
|
/>
|
|
{renderFieldError('startDate')}
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">
|
|
종료일 <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={extraFields.endDate || ''}
|
|
onChange={(e) => updateExtraField('endDate', e.target.value)}
|
|
className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary ${
|
|
fieldErrors.endDate ? 'border-error' : 'border-border'
|
|
}`}
|
|
/>
|
|
{renderFieldError('endDate')}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{formData.category === 'EXPENSE' && (
|
|
<>
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">
|
|
금액 (원) <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={extraFields.amount || ''}
|
|
onChange={(e) => updateExtraField('amount', e.target.value)}
|
|
className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary ${
|
|
fieldErrors.amount ? 'border-error' : 'border-border'
|
|
}`}
|
|
placeholder="0"
|
|
/>
|
|
{renderFieldError('amount')}
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">영수증</label>
|
|
<input type="file" accept="image/*,.pdf" onChange={async (e) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
updateExtraField('receiptName', file.name);
|
|
try {
|
|
const form = new FormData();
|
|
form.append('file', file);
|
|
const token = localStorage.getItem('accessToken');
|
|
const res = await fetch('/api/v1/files/upload', {
|
|
method: 'POST', headers: token ? {Authorization: `Bearer ${token}`} : {}, body: form,
|
|
});
|
|
const json = await res.json();
|
|
if (json.success) updateExtraField('receiptUrl', json.data);
|
|
} catch { updateExtraField('receiptUrl', ''); }
|
|
}} className="w-full text-sm" />
|
|
{extraFields.receiptName && (
|
|
<p className="mt-1 text-xs text-text-muted">📎 {extraFields.receiptName}</p>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{formData.category === 'EQUIPMENT_REQUEST' && (
|
|
<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>
|
|
<input
|
|
type="text"
|
|
value={extraFields.equipmentType || ''}
|
|
onChange={(e) => updateExtraField('equipmentType', e.target.value)}
|
|
className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary ${
|
|
fieldErrors.equipmentType ? 'border-error' : 'border-border'
|
|
}`}
|
|
placeholder="예: 노트북, 모니터"
|
|
/>
|
|
{renderFieldError('equipmentType')}
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">
|
|
긴급도 <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
value={extraFields.urgency || ''}
|
|
onChange={(e) => updateExtraField('urgency', e.target.value)}
|
|
className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white ${
|
|
fieldErrors.urgency ? 'border-error' : 'border-border'
|
|
}`}
|
|
>
|
|
<option value="">선택</option>
|
|
<option value="LOW">낮음</option>
|
|
<option value="NORMAL">보통</option>
|
|
<option value="HIGH">높음</option>
|
|
</select>
|
|
{renderFieldError('urgency')}
|
|
</div>
|
|
</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>
|
|
</label>
|
|
<textarea
|
|
value={formData.description}
|
|
onChange={(e) => updateField('description', e.target.value)}
|
|
className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none ${
|
|
fieldErrors.description ? 'border-error' : 'border-border'
|
|
}`}
|
|
placeholder="Detailed explanation, error logs, steps to reproduce..."
|
|
rows={4}
|
|
/>
|
|
{renderFieldError('description')}
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-4 py-2.5 text-sm font-medium text-text-main bg-surface-container hover:bg-surface-container-high rounded-lg transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={submitting}
|
|
className="px-4 py-2.5 text-sm font-medium text-white bg-primary hover:opacity-90 rounded-lg transition-opacity disabled:opacity-50"
|
|
>
|
|
{submitting ? 'Creating...' : 'Create Ticket'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function IssuesPage() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [tickets, setTickets] = useState<IssueTicket[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchKeyword, setSearchKeyword] = useState('');
|
|
const [filterCategory, setFilterCategory] = useState('ALL');
|
|
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');
|
|
|
|
useEffect(() => {
|
|
const q = searchParams.get('search');
|
|
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);
|
|
}).catch(console.error).finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
const refreshTickets = () => {
|
|
setLoading(true);
|
|
ticketService.getTickets({ size: 100 }).then((res) => {
|
|
setTickets(res.data.content);
|
|
}).catch(console.error).finally(() => setLoading(false));
|
|
};
|
|
|
|
const filtered = useMemo(() => {
|
|
return tickets.filter((t) => {
|
|
if (searchKeyword && !t.title.toLowerCase().includes(searchKeyword.toLowerCase())) return false;
|
|
if (filterCategory !== 'ALL' && t.category !== filterCategory) return false;
|
|
if (filterPriority !== 'ALL' && t.priority !== filterPriority) return false;
|
|
return true;
|
|
});
|
|
}, [tickets, searchKeyword, filterCategory, filterPriority]);
|
|
|
|
const grouped = useMemo(() => {
|
|
const map: Record<string, IssueTicket[]> = {};
|
|
columns.forEach((c) => { map[c.key] = []; });
|
|
filtered.forEach((t) => {
|
|
const colKey = t.status === 'RESOLVED' || t.status === 'CLOSED' ? 'DONE' : t.status;
|
|
if (map[colKey]) map[colKey].push(t);
|
|
});
|
|
return map;
|
|
}, [filtered]);
|
|
|
|
useEffect(() => {
|
|
const firstWithTickets = columns.find((col) => grouped[col.key]?.length > 0);
|
|
if (firstWithTickets) {
|
|
setMobileColumn(firstWithTickets.key);
|
|
}
|
|
}, [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">
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6">
|
|
<div>
|
|
<h2 className="font-outfit text-2xl font-semibold text-text-main tracking-tight">SR Issues</h2>
|
|
<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"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
<span>New Ticket</span>
|
|
</button>
|
|
<select value={filterPriority} onChange={(e) => setFilterPriority(e.target.value)} className="text-xs bg-white border border-border rounded-lg px-3 py-2 text-text-main focus:outline-none focus:ring-2 focus:ring-primary">
|
|
<option value="ALL">All Priority</option>
|
|
{priorities.map((p) => (
|
|
<option key={p.codeValue} value={p.codeValue}>{p.codeName}</option>
|
|
))}
|
|
</select>
|
|
<select value={filterCategory} onChange={(e) => setFilterCategory(e.target.value)} className="text-xs bg-white border border-border rounded-lg px-3 py-2 text-text-main focus:outline-none focus:ring-2 focus:ring-primary">
|
|
<option value="ALL">All Category</option>
|
|
{categories.map((c) => (
|
|
<option key={c.codeValue} value={c.codeValue}>{c.codeName}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative w-full mb-6">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
|
|
<input
|
|
value={searchKeyword}
|
|
onChange={(e) => {
|
|
setSearchKeyword(e.target.value);
|
|
router.replace(`/issues?search=${encodeURIComponent(e.target.value)}`);
|
|
}}
|
|
placeholder="Search tickets by title..."
|
|
className="w-full sm:w-96 pl-10 pr-4 py-2.5 rounded-xl bg-white border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
|
|
/>
|
|
</div>
|
|
|
|
{/* 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>
|
|
))}
|
|
</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>
|
|
|
|
{/* 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>
|
|
|
|
{showCreateModal && (
|
|
<CreateTicketModal onClose={() => setShowCreateModal(false)} onSuccess={refreshTickets} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|