323 lines
20 KiB
JavaScript
323 lines
20 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { X, Upload, Calendar, Plus, Trash2 } from 'lucide-react';
|
|
import Toast from '../../Components/Toast';
|
|
|
|
export default function AddBranchModal({ isOpen, onClose, onRefresh }) {
|
|
const [loading, setLoading] = useState(false);
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
location: '',
|
|
manager_name: '',
|
|
operational_start_date: '',
|
|
payroll_from_day: 1,
|
|
payroll_to_day: 28,
|
|
salary_generation_day: 2,
|
|
});
|
|
const [toast, setToast] = useState(null);
|
|
|
|
const [docs, setDocs] = useState([
|
|
{ name: '', file: null, document_number: '', expiry_date: '', reminder_days: 30 },
|
|
]);
|
|
|
|
const handleDocChange = (index, field, value) => {
|
|
const newDocs = [...docs];
|
|
newDocs[index][field] = value;
|
|
setDocs(newDocs);
|
|
};
|
|
|
|
const handleAddDoc = () => {
|
|
setDocs([...docs, { name: '', file: null, document_number: '', expiry_date: '', reminder_days: 30 }]);
|
|
};
|
|
|
|
const handleRemoveDoc = (index) => {
|
|
if (docs.length > 1) {
|
|
setDocs(docs.filter((_, i) => i !== index));
|
|
} else {
|
|
// Just clear the first one if it's the only one
|
|
const newDocs = [...docs];
|
|
newDocs[0] = { name: '', file: null, document_number: '', expiry_date: '', reminder_days: 30 };
|
|
setDocs(newDocs);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
// Ensure at least one document is uploaded
|
|
const hasFile = docs.some(doc => doc.file);
|
|
if (!hasFile) {
|
|
setToast({ message: 'Please upload at least one document for the branch.', type: 'error' });
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
|
|
const data = new FormData();
|
|
data.append('name', formData.name);
|
|
data.append('location', formData.location);
|
|
data.append('manager_name', formData.manager_name);
|
|
data.append('operational_start_date', formData.operational_start_date);
|
|
data.append('payroll_from_day', formData.payroll_from_day);
|
|
data.append('payroll_to_day', formData.payroll_to_day);
|
|
data.append('salary_generation_day', formData.salary_generation_day);
|
|
|
|
docs.forEach((doc, index) => {
|
|
if (doc.file) {
|
|
data.append(`docs[${index}][file]`, doc.file);
|
|
data.append(`docs[${index}][name]`, doc.name || `Document ${index + 1}`);
|
|
data.append(`docs[${index}][document_number]`, doc.document_number || '');
|
|
data.append(`docs[${index}][expiry_date]`, doc.expiry_date);
|
|
data.append(`docs[${index}][reminder_days]`, doc.reminder_days || 30);
|
|
}
|
|
});
|
|
|
|
try {
|
|
const res = await fetch('/api/branches', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
},
|
|
body: data,
|
|
});
|
|
|
|
if (res.ok) {
|
|
setToast({ message: 'Branch added successfully!', type: 'success' });
|
|
setTimeout(() => {
|
|
onRefresh();
|
|
onClose();
|
|
}, 1500);
|
|
} else {
|
|
const err = await res.json();
|
|
setToast({ message: err.message || 'Error creating branch', type: 'error' });
|
|
}
|
|
} catch (error) {
|
|
setToast({ message: 'An error occurred. Please try again.', type: 'error' });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-300">
|
|
{toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
|
|
<div className="bg-white w-full max-w-3xl rounded-xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300 flex flex-col max-h-[90vh]">
|
|
{/* Header */}
|
|
<div className="px-6 py-4 border-b border-gray-100 flex flex-shrink-0 items-center justify-between">
|
|
<h2 className="text-xl font-bold text-gray-900">Add New Branch</h2>
|
|
<button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-lg transition-all text-gray-400 hover:text-gray-900">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-6 overflow-y-auto no-scrollbar">
|
|
<div className="space-y-6">
|
|
{/* Basic Info */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
|
|
<Plus size={18} className="text-red-500" />
|
|
Branch Information
|
|
</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Branch Name</label>
|
|
<input
|
|
type="text" required
|
|
className="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-all text-sm"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({...formData, name: e.target.value})}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Location</label>
|
|
<input
|
|
type="text" required
|
|
className="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-all text-sm"
|
|
value={formData.location}
|
|
onChange={(e) => setFormData({...formData, location: e.target.value})}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Manager Name</label>
|
|
<input
|
|
type="text" required
|
|
className="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-all text-sm"
|
|
value={formData.manager_name}
|
|
onChange={(e) => setFormData({...formData, manager_name: e.target.value})}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
|
|
<select
|
|
className="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-all text-sm"
|
|
value="Active"
|
|
readOnly
|
|
>
|
|
<option value="Active">Active</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Branch Start Date</label>
|
|
<input
|
|
type="date" required
|
|
className="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-all text-sm"
|
|
value={formData.operational_start_date}
|
|
onChange={(e) => setFormData({...formData, operational_start_date: e.target.value})}
|
|
/>
|
|
</div>
|
|
|
|
<div className="p-6 bg-red-50/50 rounded-2xl border border-red-100 space-y-4">
|
|
<h4 className="text-sm font-bold text-red-900 flex items-center gap-2 underline decoration-red-200 underline-offset-4">
|
|
<Calendar size={16} />
|
|
PAYROLL CYCLE CONFIGURATION
|
|
</h4>
|
|
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-[10px] font-black text-red-900/60 uppercase tracking-widest mb-1.5">Cycle From (Day)</label>
|
|
<input
|
|
type="number" min="1" max="31" required
|
|
className="w-full px-4 py-2.5 bg-white border border-red-100 rounded-xl focus:outline-none focus:ring-4 focus:ring-red-500/10 focus:border-red-500 transition-all text-sm font-bold"
|
|
value={formData.payroll_from_day}
|
|
onChange={(e) => setFormData({...formData, payroll_from_day: e.target.value})}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-black text-red-900/60 uppercase tracking-widest mb-1.5">Cycle To (Day)</label>
|
|
<input
|
|
type="number" min="1" max="31" required
|
|
className="w-full px-4 py-2.5 bg-white border border-red-100 rounded-xl focus:outline-none focus:ring-4 focus:ring-red-500/10 focus:border-red-500 transition-all text-sm font-bold"
|
|
value={formData.payroll_to_day}
|
|
onChange={(e) => setFormData({...formData, payroll_to_day: e.target.value})}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-black text-red-900/60 uppercase tracking-widest mb-1.5">Generate On (Day)</label>
|
|
<input
|
|
type="number" min="1" max="31" required
|
|
className="w-full px-4 py-2.5 bg-white border border-red-100 rounded-xl focus:outline-none focus:ring-4 focus:ring-red-500/10 focus:border-red-500 transition-all text-sm font-bold"
|
|
value={formData.salary_generation_day}
|
|
onChange={(e) => setFormData({...formData, salary_generation_day: e.target.value})}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p className="text-[10px] text-red-600/80 font-medium italic">
|
|
Example: From 1 To 28, Generated on 2nd of next month.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
|
|
<Upload size={18} className="text-red-500" />
|
|
Branch Documents
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
onClick={handleAddDoc}
|
|
className="flex items-center gap-2 px-4 py-2 bg-red-50 text-red-600 rounded-xl text-xs font-bold hover:bg-red-100 transition-all border border-red-100"
|
|
>
|
|
<Plus size={14} />
|
|
<span>Add Another</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{docs.map((doc, index) => (
|
|
<div key={index} className="p-6 bg-gray-50 rounded-[2rem] border border-gray-100 space-y-4 relative group">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-bold text-gray-900 uppercase tracking-wider">Document {index + 1}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleRemoveDoc(index)}
|
|
className="text-rose-500 p-2 hover:bg-rose-100 rounded-xl transition-all opacity-0 group-hover:opacity-100"
|
|
title="Remove Document"
|
|
>
|
|
<Trash2 size={16} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<input
|
|
type="text"
|
|
placeholder="Document Name (e.g. Trade License)"
|
|
className="w-full px-4 py-2.5 bg-white border border-gray-100 rounded-xl text-xs font-bold transition-all outline-none focus:border-red-500"
|
|
value={doc.name}
|
|
onChange={(e) => handleDocChange(index, 'name', e.target.value)}
|
|
required
|
|
/>
|
|
|
|
<div className="grid grid-cols-4 gap-3">
|
|
<div className="relative">
|
|
<input
|
|
type="file"
|
|
className="hidden"
|
|
id={`file-${index}`}
|
|
onChange={(e) => handleDocChange(index, 'file', e.target.files[0])}
|
|
/>
|
|
<label htmlFor={`file-${index}`} className={`flex items-center justify-center gap-2 w-full py-2.5 rounded-xl border-2 border-dashed transition-all cursor-pointer text-xs font-bold ${doc.file ? 'bg-emerald-50 border-emerald-200 text-emerald-600' : 'bg-white border-gray-200 text-gray-400 hover:border-red-500 hover:text-red-500'}`}>
|
|
<Upload size={14} />
|
|
{doc.file ? (doc.file.name ? doc.file.name.substring(0, 5) + '...' : 'Uploaded') : 'Upload File'}
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
placeholder="Doc Number"
|
|
className="w-full px-4 py-2 bg-white border border-gray-100 rounded-xl text-[10px] font-bold transition-all outline-none focus:border-red-500"
|
|
value={doc.document_number}
|
|
onChange={(e) => handleDocChange(index, 'document_number', e.target.value)}
|
|
/>
|
|
<p className="text-[8px] text-gray-400 mt-0.5 ml-1 font-bold">Doc Number</p>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="date"
|
|
className="w-full px-4 py-2 bg-white border border-gray-100 rounded-xl text-[10px] font-bold transition-all outline-none focus:border-red-500"
|
|
value={doc.expiry_date}
|
|
onChange={(e) => handleDocChange(index, 'expiry_date', e.target.value)}
|
|
required
|
|
/>
|
|
<p className="text-[8px] text-gray-400 mt-0.5 ml-1 font-bold">Expiry Date</p>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="number"
|
|
placeholder="Remind (Days)"
|
|
className="w-full px-4 py-2 bg-white border border-gray-100 rounded-xl text-[10px] font-bold transition-all outline-none focus:border-red-500"
|
|
value={doc.reminder_days}
|
|
onChange={(e) => handleDocChange(index, 'reminder_days', e.target.value)}
|
|
required
|
|
/>
|
|
<p className="text-[8px] text-gray-400 mt-0.5 ml-1 font-bold">Days Before</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Submit */}
|
|
<div className="flex flex-shrink-0 items-center justify-end gap-3 pt-4 sticky bottom-0 bg-white">
|
|
<button type="button" onClick={onClose} className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all text-sm font-medium">Cancel</button>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all text-sm font-medium disabled:opacity-50"
|
|
>
|
|
{loading ? 'Saving...' : 'Save Branch'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|