71 lines
3.4 KiB
JavaScript
71 lines
3.4 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import Toast from '../Components/Toast';
|
|
import MasterTable from './MasterTable';
|
|
import { Tag, Briefcase, Box, Plus, CreditCard, Users } from 'lucide-react';
|
|
|
|
export default function MasterManagement() {
|
|
const [activeTab, setActiveTab] = useState('collection');
|
|
const [toast, setToast] = useState(null);
|
|
|
|
const tabs = [
|
|
{ id: 'collection', label: 'Collection Types', icon: Tag, desc: 'Manage categories for payment collection.', btnLabel: 'Type' },
|
|
{ id: 'expense', label: 'Expense Categories', icon: Briefcase, desc: 'Organize various types of business expenses.', btnLabel: 'Category' },
|
|
{ id: 'product', label: 'Product Categories', icon: Box, desc: 'Group products into searchable categories.', btnLabel: 'Category' },
|
|
{ id: 'payment_method', label: 'Payment Methods', icon: CreditCard, desc: 'Manage available payment methods.', btnLabel: 'Method' },
|
|
{ id: 'staff_role', label: 'Staff Roles', icon: Users, desc: 'Define staff roles for the staff management module.', btnLabel: 'Role' }
|
|
];
|
|
|
|
const currentTab = tabs.find(t => t.id === activeTab);
|
|
|
|
return (
|
|
<>
|
|
{toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
|
|
|
|
<div className="max-w-7xl mx-auto px-8 py-8">
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-[#111827]">Master Management</h1>
|
|
<p className="text-gray-500 mt-1">Configure system-wide master data and dropdown values.</p>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex items-center gap-8 border-b border-gray-100 mb-8">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`pb-4 px-2 text-sm font-semibold transition-all border-b-2 ${
|
|
activeTab === tab.id
|
|
? 'border-red-500 text-red-500'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<div className="p-6 border-b border-gray-50 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2.5 bg-red-50 rounded-xl text-red-500">
|
|
<currentTab.icon size={20} />
|
|
</div>
|
|
<div>
|
|
<h2 className="font-bold text-[#111827]">{currentTab.label}</h2>
|
|
<p className="text-xs text-gray-500">{currentTab.desc}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<MasterTable
|
|
type={activeTab}
|
|
btnLabel={currentTab.btnLabel}
|
|
onNotify={(msg, type) => setToast({ message: msg, type })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|