init: SR System — Helpdesk & ITAM Portal
This commit is contained in:
pray4skylark
@@ -0,0 +1,157 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Plus, Pencil, Trash2, Search, AlertCircle } from 'lucide-react';
|
||||
import { useAuthStore } from '@/stores';
|
||||
import dispatchHistoryService from '@/services/dispatchHistoryService';
|
||||
import DispatchFormModal from '@/components/dispatch/DispatchFormModal';
|
||||
import type { DispatchHistory } from '@/types';
|
||||
|
||||
export default function DispatchManagePage() {
|
||||
const user = useAuthStore((s) => s.user);
|
||||
const [items, setItems] = useState<DispatchHistory[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState('');
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [editData, setEditData] = useState<Record<string, unknown> | null>(null);
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
|
||||
|
||||
const fetchData = () => {
|
||||
dispatchHistoryService.getAll({ size: 100 }).then((res) => {
|
||||
setItems(res.data.content || []);
|
||||
}).catch(() => {
|
||||
console.error('Failed to fetch dispatches');
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => { fetchData(); }, []);
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
await dispatchHistoryService.deleteDispatch(id);
|
||||
setDeleteConfirm(null);
|
||||
fetchData();
|
||||
} catch {
|
||||
alert('Failed to delete dispatch.');
|
||||
}
|
||||
};
|
||||
|
||||
if (!user || user.roleCode === 'EMPLOYEE') {
|
||||
return (
|
||||
<div className="p-4 sm:p-6 lg:p-8">
|
||||
<div className="max-w-7xl mx-auto text-center py-20">
|
||||
<AlertCircle className="w-12 h-12 text-text-muted mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold text-text-main mb-2">Access Denied</h2>
|
||||
<p className="text-text-muted text-sm">Only managers and admins can access this page.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const filtered = items.filter((item) =>
|
||||
item.projectName?.toLowerCase().includes(search.toLowerCase()) ||
|
||||
item.roleTitle?.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
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-center gap-4 mb-6">
|
||||
<div>
|
||||
<h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main">Dispatch Management</h2>
|
||||
<p className="text-text-muted text-sm mt-1">Manage employee project assignments</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { setEditData(null); setModalOpen(true); }}
|
||||
className="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-xl text-sm font-semibold flex items-center gap-2 transition-all"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
New Dispatch
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface rounded-2xl shadow-card border border-border overflow-hidden">
|
||||
<div className="p-4 sm:p-6 border-b border-border">
|
||||
<div className="relative w-full sm:w-72">
|
||||
<Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" />
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Search by project or role..."
|
||||
className="w-full pl-9 pr-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50/50">
|
||||
<th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Project</th>
|
||||
<th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Role</th>
|
||||
<th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Employee</th>
|
||||
<th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Period</th>
|
||||
<th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-sm divide-y divide-gray-100">
|
||||
{loading && <tr><td colSpan={5} className="py-8 text-center text-text-muted">Loading...</td></tr>}
|
||||
{!loading && filtered.length === 0 && (
|
||||
<tr><td colSpan={5} className="py-8 text-center text-text-muted">No dispatch records found.</td></tr>
|
||||
)}
|
||||
{filtered.map((item) => (
|
||||
<tr key={item.dispatchId} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="py-4 px-4 sm:px-6 font-medium text-text-main">{item.projectName || `Project #${item.projectId}`}</td>
|
||||
<td className="py-4 px-4 sm:px-6">
|
||||
<span className="text-xs font-medium bg-indigo-50 text-primary px-2 py-1 rounded-lg">{item.roleTitle}</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 sm:px-6 text-text-muted">Emp #{item.empId}</td>
|
||||
<td className="py-4 px-4 sm:px-6 text-text-muted">
|
||||
{item.startDate} ~ {item.endDate || 'Present'}
|
||||
</td>
|
||||
<td className="py-4 px-4 sm:px-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => { setEditData(item as unknown as Record<string, unknown>); setModalOpen(true); }}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
title="Edit"
|
||||
>
|
||||
<Pencil className="w-3.5 h-3.5 text-text-muted hover:text-primary" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteConfirm(item.dispatchId)}
|
||||
className="p-1.5 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5 text-text-muted hover:text-status-critical-text" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DispatchFormModal isOpen={modalOpen} onClose={() => setModalOpen(false)} onSaved={fetchData} editData={editData} />
|
||||
|
||||
{deleteConfirm && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setDeleteConfirm(null)}>
|
||||
<div className="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-sm mx-4" onClick={(e) => e.stopPropagation()}>
|
||||
<h3 className="font-outfit font-semibold text-lg text-text-main mb-2">Delete Dispatch</h3>
|
||||
<p className="text-sm text-text-muted mb-4">Are you sure you want to delete this dispatch record?</p>
|
||||
<div className="flex justify-end gap-3">
|
||||
<button onClick={() => setDeleteConfirm(null)} className="px-4 py-2 rounded-xl text-sm font-medium text-text-muted hover:bg-gray-100 transition-colors">Cancel</button>
|
||||
<button onClick={() => handleDelete(deleteConfirm)} className="px-4 py-2 rounded-xl text-sm font-semibold bg-status-critical-text text-white hover:bg-red-700 transition-colors">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user