import React, { useState, useEffect } from 'react';
import {
LayoutDashboard,
Users,
Briefcase,
Building2,
DollarSign,
Settings,
Menu,
X,
Search,
Bell,
Plus,
Trash2,
TrendingUp,
UserCheck,
Sparkles,
Loader2,
FileText,
FileCheck,
MapPin
} from 'lucide-react';
import {
AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
BarChart,
Bar,
Legend
} from 'recharts';
// --- Mock Data for Recruitment Agency ---
const MOCK_REVENUE_DATA = [
{ name: 'Jan', revenue: 45000, expenses: 28000 },
{ name: 'Feb', revenue: 52000, expenses: 31000 },
{ name: 'Mar', revenue: 48000, expenses: 29000 },
{ name: 'Apr', revenue: 61000, expenses: 35000 },
{ name: 'May', revenue: 58000, expenses: 33000 },
{ name: 'Jun', revenue: 65000, expenses: 38000 },
{ name: 'Jul', revenue: 72000, expenses: 41000 },
];
// "Inventory" is now "Talent Pool" (Candidates waiting for deployment)
const INITIAL_CANDIDATES = [
{ id: 1, name: 'Kyaw Zin Win', skill: 'Welding', status: 'Visa Processing', passport: 'M123456', fee: 1500, notes: 'Experienced in MIG welding, waiting for work permit.' },
{ id: 2, name: 'Thida Aung', skill: 'Garment Sewing', status: 'Ready', passport: 'M789012', fee: 1200, notes: '5 years experience in textile factories.' },
{ id: 3, name: 'Min Min Soe', skill: 'General Labor', status: 'Interviewing', passport: 'M345678', fee: 1000, notes: 'Physically fit, basic Thai language skills.' },
{ id: 4, name: 'Nilar Win', skill: 'Quality Control', status: 'Ready', passport: 'M901234', fee: 1300, notes: 'High attention to detail, previous electronics experience.' },
];
// "Employees" are now "Deployed Workers" (Outsourced staff)
const INITIAL_DEPLOYED_WORKERS = [
{ id: 1, name: 'Aung Ko Ko', role: 'Line Leader', factory: 'Siam Garment Factory', status: 'Active' },
{ id: 2, name: 'Su Su Hlaing', role: 'Packer', factory: 'Chonburi Food Processing', status: 'Active' },
{ id: 3, name: 'Zaw Ye Htut', role: 'Machine Operator', factory: 'Eastern Electronics', status: 'On Leave' },
{ id: 4, name: 'Ei Ei Phyu', role: 'QA Inspector', factory: 'Siam Garment Factory', status: 'Active' },
];
// New CRM Data: Factory Clients
const INITIAL_CLIENTS = [
{ id: 1, name: 'Siam Garment Factory', contact: 'Mr. Somsak', phone: '081-234-5678', location: 'Samut Prakan', activeWorkers: 150, status: 'Active' },
{ id: 2, name: 'Chonburi Food Processing', contact: 'Ms. Ratana', phone: '089-987-6543', location: 'Chonburi', activeWorkers: 85, status: 'Active' },
{ id: 3, name: 'Eastern Electronics', contact: 'Mr. David', phone: '02-345-6789', location: 'Rayong', activeWorkers: 200, status: 'Active' },
{ id: 4, name: 'Thai Auto Parts', contact: 'K. Malee', phone: '086-111-2222', location: 'Ayutthaya', activeWorkers: 0, status: 'Prospect' },
];
const TRANSACTIONS = [
{ id: 1, desc: 'Visa Application Fees (Batch #44)', date: '2023-10-24', amount: -2500.00, type: 'Expense' },
{ id: 2, desc: 'Service Fee - Siam Garment', date: '2023-10-23', amount: 15000.00, type: 'Income' },
{ id: 3, desc: 'Worker Transport Bus Rental', date: '2023-10-22', amount: -1200.00, type: 'Expense' },
{ id: 4, desc: 'Placement Fee - Eastern Elec', date: '2023-10-21', amount: 8500.00, type: 'Income' },
];
// --- Components ---
const Card = ({ children, className = "" }) => (
{children}
);
const Badge = ({ status }) => {
const styles = {
'Ready': 'bg-emerald-100 text-emerald-700',
'Active': 'bg-blue-100 text-blue-700',
'Visa Processing': 'bg-amber-100 text-amber-700',
'Interviewing': 'bg-purple-100 text-purple-700',
'On Leave': 'bg-orange-100 text-orange-700',
'Prospect': 'bg-gray-100 text-gray-700',
'Income': 'bg-green-100 text-green-700',
'Expense': 'bg-red-100 text-red-700',
'Critical': 'bg-red-100 text-red-700',
};
return (
{status}
);
};
export default function NexusERP() {
const apiKey = "";
const [activeTab, setActiveTab] = useState('dashboard');
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
// Data State
const [candidates, setCandidates] = useState(INITIAL_CANDIDATES);
const [clients, setClients] = useState(INITIAL_CLIENTS);
// New Candidate State
const [newCandidate, setNewCandidate] = useState({ name: '', skill: '', fee: 0, passport: '', notes: '' });
const [showAddCandidateModal, setShowAddCandidateModal] = useState(false);
// New Client State
const [newClient, setNewClient] = useState({ name: '', contact: '', phone: '', location: '' });
const [showAddClientModal, setShowAddClientModal] = useState(false);
// AI State
const [isGeneratingInsight, setIsGeneratingInsight] = useState(false);
const [dashboardInsight, setDashboardInsight] = useState("");
const [isGeneratingProfile, setIsGeneratingProfile] = useState(false);
// --- Helpers ---
const callGemini = async (prompt, systemInstruction = "") => {
try {
const payload = {
contents: [{ parts: [{ text: prompt }] }],
systemInstruction: { parts: [{ text: systemInstruction }] }
};
let attempt = 0;
const delays = [1000, 2000, 4000, 8000, 16000];
while (attempt < 5) {
try {
const response = await fetch(
`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`,
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
}
);
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json();
return data.candidates?.[0]?.content?.parts?.[0]?.text || "No response generated.";
} catch (e) {
attempt++;
if (attempt === 5) throw e;
await new Promise(resolve => setTimeout(resolve, delays[attempt - 1]));
}
}
} catch (error) {
console.error("Gemini API Error:", error);
return "Unable to generate AI content at this time. Please try again.";
}
};
const generateRecruitmentInsight = async () => {
setIsGeneratingInsight(true);
const prompt = `Analyze the following monthly revenue data for a Recruitment & HR Outsourcing agency serving factories.
Data: ${JSON.stringify(MOCK_REVENUE_DATA)}
Please provide:
1. A summary of the agency's growth trend.
2. Three strategic insights regarding factory demand, worker deployment seasonality, or expense management for recruitment (visas, transport).
Keep the tone professional and executive.`;
const result = await callGemini(prompt, "You are a Recruitment Agency Operations Director.");
setDashboardInsight(result);
setIsGeneratingInsight(false);
};
const generateCandidateProfile = async () => {
if (!newCandidate.name || !newCandidate.skill) return;
setIsGeneratingProfile(true);
const prompt = `Write a professional, concise worker profile summary (max 2 sentences) for a Burmese candidate named "${newCandidate.name}" with the skill "${newCandidate.skill}". Highlight their readiness for factory work, reliability, and work ethic.`;
const result = await callGemini(prompt, "You are a professional HR recruiter.");
setNewCandidate(prev => ({ ...prev, notes: result }));
setIsGeneratingProfile(false);
};
// --- Handlers ---
const handleDeleteCandidate = (id) => {
setCandidates(candidates.filter(c => c.id !== id));
};
const handleAddCandidate = (e) => {
e.preventDefault();
const candidate = {
id: Date.now(),
...newCandidate,
status: 'Ready'
};
setCandidates([...candidates, candidate]);
setShowAddCandidateModal(false);
setNewCandidate({ name: '', skill: '', fee: 0, passport: '', notes: '' });
};
const handleAddClient = (e) => {
e.preventDefault();
const client = {
id: Date.now(),
...newClient,
activeWorkers: 0,
status: 'Prospect'
};
setClients([...clients, client]);
setShowAddClientModal(false);
setNewClient({ name: '', contact: '', phone: '', location: '' });
};
// --- Views ---
const DashboardView = () => (
{/* KPI Cards */}
Workers Deployed
435
+12 this month
Active Factories
{clients.filter(c => c.status === 'Active').length}
Across 3 provinces
Visa Processing
{candidates.filter(c => c.status === 'Visa Processing').length}
Awaiting Approval
Monthly Revenue
$72,000
+10% vs last month
{/* AI Insights Section */}
AI Recruitment Insights
Powered by Gemini 2.5 Flash
{dashboardInsight ? (
{dashboardInsight}
) : (
Click the button to analyze revenue trends, factory demand, and recruitment efficiency.
)}
{/* Charts */}
Agency Revenue vs Expenses
Service fees vs Operational costs (Visas, Transport)
Worker Deployment
Active workers by Factory Client
({name: c.name.split(' ')[0], workers: c.activeWorkers}))}>
);
const TalentPoolView = () => (
Talent Pool (Candidates)
Manage Burmese workers awaiting deployment
| Name |
Passport / ID |
Skill Set |
Placement Fee |
Status |
Actions |
{candidates.map((item) => (
|
{item.name}
{item.notes}
|
{item.passport} |
{item.skill} |
${item.fee} |
|
|
))}
{/* Add Candidate Modal */}
{showAddCandidateModal && (
Add New Candidate
)}
);
const CRMView = () => (
CRM (Factory Clients)
Manage client relationships and contracts
{clients.map((client) => (
{client.name}
{client.location}
Contact:
{client.contact}
Phone:
{client.phone}
Active Workers:
{client.activeWorkers}
))}
{/* Add Client Modal */}
{showAddClientModal && (
)}
);
const HRView = () => (
Deployed Workers (HR)
Monitor outsourced staff at client factories
{INITIAL_DEPLOYED_WORKERS.map((emp) => (
{emp.name}
{emp.role}
{emp.factory}
))}
);
const FinanceView = () => (
Financial Records
Service fees, visa costs, and transport expenses
| Date |
Description |
Type |
Amount |
{TRANSACTIONS.map((t) => (
| {t.date} |
{t.desc} |
|
0 ? 'text-emerald-600' : 'text-slate-800'}`}>
{t.amount > 0 ? '+' : ''}{t.amount.toFixed(2)}
|
))}
);
// --- Main Layout ---
return (
{/* Sidebar Navigation */}
{/* Main Content Area */}
{/* Top Header */}
{/* Scrollable Content */}
{activeTab === 'dashboard' &&
}
{activeTab === 'crm' &&
}
{activeTab === 'talent' &&
}
{activeTab === 'hr' &&
}
{activeTab === 'finance' &&
}
{activeTab === 'settings' && (
Settings module under development
)}
);
}