import { useState, useEffect } from "react";
import { Bell, Menu, X, User, LogOut, Home, Briefcase, FileText, Wrench, BarChart3, Settings, ChevronDown, Search, Plus, AlertTriangle, Check, Trash, Edit, Eye, Download, Send, Clock, DollarSign, CreditCard, Package, Users, ShoppingCart, Filter, Calendar, ArrowUpRight, ArrowDownRight, Printer, Save, Lock, Unlock, Upload, RefreshCw, CheckCircle, XCircle, HelpCircle } from "lucide-react";

// Mock data for demonstration
const mockCompanies = [
  { id: 1, name: "TechSolutions Inc", regNumber: "2020/123456/07", taxNumber: "9876543210", status: "active", contactPerson: "John Smith", email: "john@techsolutions.com", phone: "011 123 4567", address: "123 Tech Street, Johannesburg", createdAt: "2022-01-15" },
  { id: 2, name: "ABC Enterprises", regNumber: "2018/654321/07", taxNumber: "1234567890", status: "active", contactPerson: "Sarah Johnson", email: "sarah@abcent.com", phone: "012 345 6789", address: "456 Main Road, Pretoria", createdAt: "2021-03-22" },
  { id: 3, name: "XYZ Corporation", regNumber: "2019/987654/07", taxNumber: "5678901234", status: "inactive", contactPerson: "Michael Brown", email: "michael@xyzcorp.com", phone: "021 876 5432", address: "789 Corporate Avenue, Cape Town", createdAt: "2020-11-05" },
  { id: 4, name: "Global Services Ltd", regNumber: "2017/456789/07", taxNumber: "3456789012", status: "active", contactPerson: "Lisa Williams", email: "lisa@globalservices.com", phone: "031 234 5678", address: "321 Service Road, Durban", createdAt: "2019-07-18" },
  { id: 5, name: "Innovative Solutions", regNumber: "2021/234567/07", taxNumber: "7890123456", status: "pending", contactPerson: "David Miller", email: "david@innovative.com", phone: "041 567 8901", address: "567 Innovation Street, Port Elizabeth", createdAt: "2022-05-30" },
];

const mockDocuments = [
  { id: 1, companyId: 1, name: "Company Registration", type: "pdf", size: "1.2 MB", uploadDate: "2022-01-20", status: "verified" },
  { id: 2, companyId: 1, name: "Tax Clearance Certificate", type: "pdf", size: "0.8 MB", uploadDate: "2022-02-15", status: "verified" },
  { id: 3, companyId: 1, name: "Banking Confirmation", type: "pdf", size: "0.5 MB", uploadDate: "2022-01-25", status: "pending" },
  { id: 4, companyId: 2, name: "Company Registration", type: "pdf", size: "1.5 MB", uploadDate: "2021-04-10", status: "verified" },
  { id: 5, companyId: 2, name: "Tax Clearance Certificate", type: "pdf", size: "0.9 MB", uploadDate: "2021-05-05", status: "expired" },
];

const mockCredentials = [
  { id: 1, companyId: 1, type: "CIPC", username: "tech_admin", password: "encrypted_password", lastUpdated: "2022-06-10" },
  { id: 2, companyId: 1, type: "SARS", username: "tech_tax", password: "encrypted_password", lastUpdated: "2022-05-20" },
  { id: 3, companyId: 1, type: "CSD", username: "tech_procurement", password: "encrypted_password", lastUpdated: "2022-04-15" },
  { id: 4, companyId: 2, type: "CIPC", username: "abc_admin", password: "encrypted_password", lastUpdated: "2021-10-12" },
  { id: 5, companyId: 2, type: "SARS", username: "abc_tax", password: "encrypted_password", lastUpdated: "2021-11-05" },
];

const mockClients = [
  { id: 1, name: "Department of Education", contactPerson: "James Wilson", email: "james@education.gov.za", phone: "012 345 6789", address: "Government Complex, Pretoria" },
  { id: 2, name: "City of Johannesburg", contactPerson: "Patricia Brown", email: "patricia@joburg.gov.za", phone: "011 789 0123", address: "Metro Centre, Braamfontein" },
  { id: 3, name: "National Health Services", contactPerson: "Robert Green", email: "robert@health.gov.za", phone: "012 567 8901", address: "Health Park, Pretoria" },
  { id: 4, name: "Private Client Corp", contactPerson: "Susan Taylor", email: "susan@privatecorp.co.za", phone: "021 234 5678", address: "100 Corporate Drive, Cape Town" },
  { id: 5, name: "SME Solutions", contactPerson: "Thomas Johnson", email: "thomas@smesolutions.co.za", phone: "031 901 2345", address: "25 Small Business Hub, Durban" },
];

const mockQuotations = [
  { id: "QT-2023-001", companyId: 1, clientId: 1, date: "2023-06-15", expiryDate: "2023-07-15", status: "pending", total: 15750.00, items: [
    { id: 1, description: "Website Development", quantity: 1, unitPrice: 12000.00 },
    { id: 2, description: "SEO Setup", quantity: 1, unitPrice: 3000.00 },
    { id: 3, description: "Content Creation", quantity: 5, unitPrice: 150.00 }
  ]},
  { id: "QT-2023-002", companyId: 1, clientId: 2, date: "2023-06-20", expiryDate: "2023-07-20", status: "accepted", total: 28500.00, items: [
    { id: 1, description: "Network Infrastructure Upgrade", quantity: 1, unitPrice: 25000.00 },
    { id: 2, description: "Technical Support (hours)", quantity: 10, unitPrice: 350.00 }
  ]},
  { id: "QT-2023-003", companyId: 2, clientId: 3, date: "2023-06-25", expiryDate: "2023-07-25", status: "rejected", total: 8750.00, items: [
    { id: 1, description: "IT Consultation", quantity: 5, unitPrice: 1200.00 },
    { id: 2, description: "Security Assessment", quantity: 1, unitPrice: 2750.00 }
  ]},
  { id: "QT-2023-004", companyId: 2, clientId: 4, date: "2023-07-01", expiryDate: "2023-08-01", status: "pending", total: 42000.00, items: [
    { id: 1, description: "Custom Software Development", quantity: 1, unitPrice: 35000.00 },
    { id: 2, description: "User Training", quantity: 10, unitPrice: 700.00 }
  ]},
  { id: "QT-2023-005", companyId: 1, clientId: 5, date: "2023-07-05", expiryDate: "2023-08-05", status: "accepted", total: 5600.00, items: [
    { id: 1, description: "Cloud Migration", quantity: 1, unitPrice: 4500.00 },
    { id: 2, description: "Data Backup Setup", quantity: 1, unitPrice: 1100.00 }
  ]},
];

const mockInvoices = [
  { id: "INV-2023-001", quotationId: "QT-2023-002", companyId: 1, clientId: 2, date: "2023-07-01", dueDate: "2023-07-31", status: "paid", paymentDate: "2023-07-25", total: 28500.00 },
  { id: "INV-2023-002", quotationId: "QT-2023-005", companyId: 1, clientId: 5, date: "2023-07-10", dueDate: "2023-08-09", status: "unpaid", paymentDate: null, total: 5600.00 },
  { id: "INV-2023-003", quotationId: null, companyId: 2, clientId: 1, date: "2023-07-15", dueDate: "2023-08-14", status: "partial", paymentDate: "2023-07-30", amountPaid: 5000.00, total: 12500.00 },
  { id: "INV-2023-004", quotationId: null, companyId: 2, clientId: 3, date: "2023-07-20", dueDate: "2023-08-19", status: "overdue", paymentDate: null, total: 9800.00 },
  { id: "INV-2023-005", quotationId: null, companyId: 1, clientId: 4, date: "2023-07-25", dueDate: "2023-08-24", status: "unpaid", paymentDate: null, total: 15300.00 },
];

const mockCustomers = [
  { id: 1, name: "John Doe", email: "john.doe@example.com", phone: "071 234 5678", address: "123 Main Street, Johannesburg" },
  { id: 2, name: "Jane Smith", email: "jane.smith@example.com", phone: "082 345 6789", address: "456 Oak Avenue, Pretoria" },
  { id: 3, name: "Michael Johnson", email: "michael.johnson@example.com", phone: "083 456 7890", address: "789 Pine Road, Cape Town" },
  { id: 4, name: "Sarah Williams", email: "sarah.williams@example.com", phone: "084 567 8901", address: "321 Cedar Lane, Durban" },
  { id: 5, name: "David Brown", email: "david.brown@example.com", phone: "085 678 9012", address: "654 Maple Drive, Bloemfontein" },
];

const mockRepairTickets = [
  { id: "RT-2023-001", customerId: 1, deviceType: "Laptop", brand: "Dell", model: "XPS 15", serialNumber: "DL12345", problem: "Won't boot up, black screen", estimatedCost: 1200.00, createdAt: "2023-07-01", status: "completed", technicianId: 1, completedAt: "2023-07-05", notes: "Replaced faulty RAM module and reset BIOS." },
  { id: "RT-2023-002", customerId: 2, deviceType: "Smartphone", brand: "Samsung", model: "Galaxy S21", serialNumber: "SG54321", problem: "Battery drains quickly, overheating", estimatedCost: 800.00, createdAt: "2023-07-03", status: "in-progress", technicianId: 2, completedAt: null, notes: "Diagnosed as faulty battery, replacement ordered." },
  { id: "RT-2023-003", customerId: 3, deviceType: "Desktop PC", brand: "HP", model: "Pavilion", serialNumber: "HP67890", problem: "Random crashes and blue screens", estimatedCost: 1500.00, createdAt: "2023-07-05", status: "pending", technicianId: null, completedAt: null, notes: "Initial assessment needed." },
  { id: "RT-2023-004", customerId: 4, deviceType: "Printer", brand: "Epson", model: "EcoTank L3150", serialNumber: "EP09876", problem: "Paper jam issues, poor print quality", estimatedCost: 600.00, createdAt: "2023-07-08", status: "in-progress", technicianId: 1, completedAt: null, notes: "Cleaning print heads, checking paper feed mechanism." },
  { id: "RT-2023-005", customerId: 5, deviceType: "Tablet", brand: "Apple", model: "iPad Pro", serialNumber: "AP13579", problem: "Cracked screen, touch not responding", estimatedCost: 2200.00, createdAt: "2023-07-10", status: "completed", technicianId: 2, completedAt: "2023-07-15", notes: "Replaced screen assembly, tested all functions." },
];

const mockInventory = [
  { id: 1, name: "Laptop RAM 8GB DDR4", category: "Components", quantity: 15, threshold: 5, unitPrice: 450.00, location: "Shelf A1" },
  { id: 2, name: "Laptop SSD 500GB", category: "Components", quantity: 8, threshold: 3, unitPrice: 850.00, location: "Shelf A2" },
  { id: 3, name: "Smartphone Battery - Samsung", category: "Components", quantity: 12, threshold: 4, unitPrice: 350.00, location: "Shelf B1" },
  { id: 4, name: "Printer Ink Cartridge - Black", category: "Supplies", quantity: 20, threshold: 5, unitPrice: 180.00, location: "Shelf C1" },
  { id: 5, name: "Laptop Power Adapter - Universal", category: "Accessories", quantity: 6, threshold: 2, unitPrice: 280.00, location: "Shelf D1" },
  { id: 6, name: "Thermal Paste", category: "Supplies", quantity: 25, threshold: 5, unitPrice: 45.00, location: "Shelf C2" },
  { id: 7, name: "Screen Protector - Universal", category: "Accessories", quantity: 30, threshold: 10, unitPrice: 50.00, location: "Shelf D2" },
  { id: 8, name: "HDMI Cable 2m", category: "Cables", quantity: 18, threshold: 5, unitPrice: 75.00, location: "Shelf E1" },
];

const mockTechnicians = [
  { id: 1, name: "John Doe", email: "john.tech@madonoro.com", phone: "071 234 5678", specialization: "Computers & Laptops", status: "active" },
  { id: 2, name: "Jane Smith", email: "jane.tech@madonoro.com", phone: "082 345 6789", specialization: "Mobile Devices", status: "active" },
  { id: 3, name: "Mike Johnson", email: "mike.tech@madonoro.com", phone: "083 456 7890", specialization: "Networking & Printers", status: "inactive" },
];

const mockRepairParts = [
  { id: 1, repairId: "RT-2023-001", inventoryId: 1, quantity: 1, unitPrice: 450.00, total: 450.00 },
  { id: 2, repairId: "RT-2023-001", inventoryId: 6, quantity: 1, unitPrice: 45.00, total: 45.00 },
  { id: 3, repairId: "RT-2023-002", inventoryId: 3, quantity: 1, unitPrice: 350.00, total: 350.00 },
  { id: 4, repairId: "RT-2023-005", inventoryId: 7, quantity: 1, unitPrice: 50.00, total: 50.00 },
];

const mockStats = {
  activeCompanies: mockCompanies.filter(c => c.status === "active").length,
  pendingRepairs: mockRepairTickets.filter(t => t.status === "pending" || t.status === "in-progress").length,
  unpaidInvoices: mockInvoices.filter(i => i.status === "unpaid" || i.status === "overdue").length,
  quotesThisMonth: mockQuotations.filter(q => {
    const date = new Date(q.date);
    const now = new Date();
    return date.getMonth() === now.getMonth() && date.getFullYear() === now.getFullYear();
  }).length,
  revenueData: [
    { month: "Jan", amount: 12500 },
    { month: "Feb", amount: 15000 },
    { month: "Mar", amount: 18000 },
    { month: "Apr", amount: 16500 },
    { month: "May", amount: 21000 },
    { month: "Jun", amount: 19500 },
    { month: "Jul", amount: 22500 },
  ],
  repairsByTechnician: [
    { name: "John Doe", completed: 24, inProgress: 5 },
    { name: "Jane Smith", completed: 18, inProgress: 3 },
    { name: "Mike Johnson", completed: 15, inProgress: 0 },
  ],
  recentTickets: mockRepairTickets.slice(0, 4).map(ticket => {
    const customer = mockCustomers.find(c => c.id === ticket.customerId);
    const technician = ticket.technicianId ? mockTechnicians.find(t => t.id === ticket.technicianId)?.name : "Unassigned";
    return {
      id: ticket.id,
      customer: customer?.name || "Unknown",
      device: `${ticket.brand} ${ticket.model}`,
      status: ticket.status === "in-progress" ? "In Progress" : ticket.status.charAt(0).toUpperCase() + ticket.status.slice(1),
      technician
    };
  }),
  alerts: [
    { type: "inventory", message: "Laptop Power Adapter - Universal stock below threshold (2 remaining)" },
    { type: "delete", message: "Company deletion request: XYZ Corporation" },
    { type: "invoice", message: "Invoice #INV-2023-004 is overdue by 10 days" },
  ]
};

// Main App Component
export default function App() {
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [currentUser, setCurrentUser] = useState(null);
  const [currentModule, setCurrentModule] = useState("dashboard");
  const [currentSubModule, setCurrentSubModule] = useState(null);
  const [notifications, setNotifications] = useState([]);
  const [showNotifications, setShowNotifications] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  
  // State for company management
  const [companies, setCompanies] = useState(mockCompanies);
  const [documents, setDocuments] = useState(mockDocuments);
  const [credentials, setCredentials] = useState(mockCredentials);
  const [selectedCompany, setSelectedCompany] = useState(null);
  
  // State for quotation & invoice
  const [clients, setClients] = useState(mockClients);
  const [quotations, setQuotations] = useState(mockQuotations);
  const [invoices, setInvoices] = useState(mockInvoices);
  const [selectedQuotation, setSelectedQuotation] = useState(null);
  const [selectedInvoice, setSelectedInvoice] = useState(null);
  
  // State for repair management
  const [customers, setCustomers] = useState(mockCustomers);
  const [repairTickets, setRepairTickets] = useState(mockRepairTickets);
  const [inventory, setInventory] = useState(mockInventory);
  const [technicians, setTechnicians] = useState(mockTechnicians);
  const [repairParts, setRepairParts] = useState(mockRepairParts);
  const [selectedTicket, setSelectedTicket] = useState(null);

  // Check if user is logged in
  useEffect(() => {
    // In a real app, this would check JWT token validity
    const user = {
      id: 1,
      name: "Admin User",
      email: "admin@madonoro.com",
      role: "admin",
      avatar: "https://ui-avatars.com/api/?name=Admin+User&background=2563eb&color=fff"
    };
    setCurrentUser(user);
    
    // Mock notifications
    setNotifications([
      { id: 1, message: "New repair ticket created", time: "10 minutes ago", read: false },
      { id: 2, message: "Invoice #INV-2023-004 is overdue", time: "2 hours ago", read: false },
      { id: 3, message: "Company update request approved", time: "Yesterday", read: true },
    ]);
    
    // Check if mobile
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
      if (window.innerWidth < 768) {
        setSidebarOpen(false);
      } else {
        setSidebarOpen(true);
      }
    };
    
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // Handle logout
  const handleLogout = () => {
    // In a real app, this would clear JWT token
    setCurrentUser(null);
  };

  // Handle module change
  const handleModuleChange = (module, subModule = null) => {
    setCurrentModule(module);
    setCurrentSubModule(subModule);
    
    // Reset selections when changing modules
    setSelectedCompany(null);
    setSelectedQuotation(null);
    setSelectedInvoice(null);
    setSelectedTicket(null);
    
    if (isMobile) {
      setSidebarOpen(false);
    }
  };

  // If not logged in, show login screen
  if (!currentUser) {
    return <LoginScreen onLogin={(user) => setCurrentUser(user)} />;
  }

  return (
    <div className="flex h-screen bg-gray-50">
      {/* Sidebar */}
      <aside 
        className={`${
          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
        } fixed inset-y-0 left-0 z-50 w-64 bg-[#0f172a] text-white transition-transform duration-300 ease-in-out md:relative md:translate-x-0`}
      >
        <div className="flex items-center justify-between p-4 border-b border-gray-700">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-[#2563eb] rounded-md flex items-center justify-center">
              <span className="font-bold text-white">M</span>
            </div>
            <h1 className="text-xl font-bold">Madonoro</h1>
          </div>
          {isMobile && (
            <button onClick={() => setSidebarOpen(false)} className="md:hidden">
              <X size={20} />
            </button>
          )}
        </div>
        
        <nav className="p-4">
          <ul className="space-y-2">
            <NavItem 
              icon={<Home size={20} />} 
              label="Dashboard" 
              active={currentModule === "dashboard"}
              onClick={() => handleModuleChange("dashboard")} 
            />
            <NavItem 
              icon={<Briefcase size={20} />} 
              label="Company Management" 
              active={currentModule === "company"}
              onClick={() => handleModuleChange("company", "list")} 
              hasSubmenu={true}
              expanded={currentModule === "company"}
              subItems={[
                { label: "Companies", onClick: () => handleModuleChange("company", "list"), active: currentSubModule === "list" },
                { label: "Documents", onClick: () => handleModuleChange("company", "documents"), active: currentSubModule === "documents" },
                { label: "Credentials", onClick: () => handleModuleChange("company", "credentials"), active: currentSubModule === "credentials" }
              ]}
            />
            <NavItem 
              icon={<FileText size={20} />} 
              label="Quotation & Invoice" 
              active={currentModule === "invoice"}
              onClick={() => handleModuleChange("invoice", "quotations")} 
              hasSubmenu={true}
              expanded={currentModule === "invoice"}
              subItems={[
                { label: "Quotations", onClick: () => handleModuleChange("invoice", "quotations"), active: currentSubModule === "quotations" },
                { label: "Invoices", onClick: () => handleModuleChange("invoice", "invoices"), active: currentSubModule === "invoices" },
                { label: "Clients", onClick: () => handleModuleChange("invoice", "clients"), active: currentSubModule === "clients" }
              ]}
            />
            <NavItem 
              icon={<Wrench size={20} />} 
              label="Tech Repair" 
              active={currentModule === "repair"}
              onClick={() => handleModuleChange("repair", "tickets")} 
              hasSubmenu={true}
              expanded={currentModule === "repair"}
              subItems={[
                { label: "Repair Tickets", onClick: () => handleModuleChange("repair", "tickets"), active: currentSubModule === "tickets" },
                { label: "Customers", onClick: () => handleModuleChange("repair", "customers"), active: currentSubModule === "customers" },
                { label: "Inventory", onClick: () => handleModuleChange("repair", "inventory"), active: currentSubModule === "inventory" },
                { label: "Technicians", onClick: () => handleModuleChange("repair", "technicians"), active: currentSubModule === "technicians" }
              ]}
            />
            <NavItem 
              icon={<BarChart3 size={20} />} 
              label="Reports" 
              active={currentModule === "reports"}
              onClick={() => handleModuleChange("reports", "financial")} 
              hasSubmenu={true}
              expanded={currentModule === "reports"}
              subItems={[
                { label: "Financial", onClick: () => handleModuleChange("reports", "financial"), active: currentSubModule === "financial" },
                { label: "Repair Analytics", onClick: () => handleModuleChange("reports", "repair"), active: currentSubModule === "repair" },
                { label: "Inventory", onClick: () => handleModuleChange("reports", "inventory"), active: currentSubModule === "inventory" }
              ]}
            />
            <NavItem 
              icon={<Settings size={20} />} 
              label="Settings" 
              active={currentModule === "settings"}
              onClick={() => handleModuleChange("settings")} 
            />
          </ul>
        </nav>
        
        <div className="absolute bottom-0 w-full p-4 border-t border-gray-700">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <img 
                src={currentUser.avatar} 
                alt={currentUser.name} 
                className="w-8 h-8 rounded-full" 
              />
              <div>
                <p className="text-sm font-medium">{currentUser.name}</p>
                <p className="text-xs text-gray-400 capitalize">{currentUser.role}</p>
              </div>
            </div>
            <button 
              onClick={handleLogout}
              className="p-2 text-gray-400 rounded-full hover:bg-gray-700 hover:text-white"
            >
              <LogOut size={18} />
            </button>
          </div>
        </div>
      </aside>

      {/* Main Content */}
      <div className="flex flex-col flex-1 overflow-hidden">
        {/* Top Navigation */}
        <header className="bg-white shadow-sm">
          <div className="flex items-center justify-between p-4">
            <div className="flex items-center space-x-4">
              {isMobile && (
                <button 
                  onClick={() => setSidebarOpen(true)} 
                  className="p-1 rounded-md md:hidden"
                >
                  <Menu size={24} />
                </button>
              )}
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
                <input 
                  type="text" 
                  placeholder="Search..." 
                  className="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                />
              </div>
            </div>
            
            <div className="flex items-center space-x-4">
              <div className="relative">
                <button 
                  onClick={() => setShowNotifications(!showNotifications)}
                  className="p-2 text-gray-600 rounded-full hover:bg-gray-100 relative"
                >
                  <Bell size={20} />
                  {notifications.filter(n => !n.read).length > 0 && (
                    <span className="absolute top-1 right-1 w-4 h-4 bg-red-500 rounded-full text-xs text-white flex items-center justify-center">
                      {notifications.filter(n => !n.read).length}
                    </span>
                  )}
                </button>
                
                {showNotifications && (
                  <div className="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg z-50 overflow-hidden">
                    <div className="p-3 border-b border-gray-200">
                      <h3 className="text-sm font-semibold">Notifications</h3>
                    </div>
                    <div className="max-h-96 overflow-y-auto">
                      {notifications.length > 0 ? (
                        notifications.map(notification => (
                          <div 
                            key={notification.id} 
                            className={`p-3 border-b border-gray-100 hover:bg-gray-50 ${!notification.read ? 'bg-blue-50' : ''}`}
                          >
                            <p className="text-sm">{notification.message}</p>
                            <p className="text-xs text-gray-500 mt-1">{notification.time}</p>
                          </div>
                        ))
                      ) : (
                        <div className="p-4 text-center text-gray-500">
                          No notifications
                        </div>
                      )}
                    </div>
                    <div className="p-2 text-center border-t border-gray-200">
                      <button 
                        className="text-sm text-[#2563eb] hover:underline"
                        onClick={() => {
                          setNotifications(notifications.map(n => ({ ...n, read: true })));
                        }}
                      >
                        Mark all as read
                      </button>
                    </div>
                  </div>
                )}
              </div>
              
              <div className="h-6 w-px bg-gray-300"></div>
              
              <div className="flex items-center space-x-2">
                <img 
                  src={currentUser.avatar} 
                  alt={currentUser.name} 
                  className="w-8 h-8 rounded-full" 
                />
                <span className="text-sm font-medium hidden md:inline-block">
                  {currentUser.name}
                </span>
              </div>
            </div>
          </div>
        </header>

        {/* Page Content */}
        <main className="flex-1 overflow-y-auto p-6">
          {currentModule === "dashboard" && (
            <DashboardModule stats={mockStats} />
          )}
          
          {currentModule === "company" && (
            <>
              {currentSubModule === "list" && (
                <CompanyListModule 
                  companies={companies} 
                  setCompanies={setCompanies}
                  selectedCompany={selectedCompany}
                  setSelectedCompany={setSelectedCompany}
                />
              )}
              {currentSubModule === "documents" && (
                <DocumentsModule 
                  documents={documents}
                  setDocuments={setDocuments}
                  companies={companies}
                />
              )}
              {currentSubModule === "credentials" && (
                <CredentialsModule 
                  credentials={credentials}
                  setCredentials={setCredentials}
                  companies={companies}
                />
              )}
            </>
          )}
          
          {currentModule === "invoice" && (
            <>
              {currentSubModule === "quotations" && (
                <QuotationsModule 
                  quotations={quotations}
                  setQuotations={setQuotations}
                  companies={companies}
                  clients={clients}
                  selectedQuotation={selectedQuotation}
                  setSelectedQuotation={setSelectedQuotation}
                  invoices={invoices}
                  setInvoices={setInvoices}
                />
              )}
              {currentSubModule === "invoices" && (
                <InvoicesModule 
                  invoices={invoices}
                  setInvoices={setInvoices}
                  companies={companies}
                  clients={clients}
                  selectedInvoice={selectedInvoice}
                  setSelectedInvoice={setSelectedInvoice}
                />
              )}
              {currentSubModule === "clients" && (
                <ClientsModule 
                  clients={clients}
                  setClients={setClients}
                />
              )}
            </>
          )}
          
          {currentModule === "repair" && (
            <>
              {currentSubModule === "tickets" && (
                <RepairTicketsModule 
                  repairTickets={repairTickets}
                  setRepairTickets={setRepairTickets}
                  customers={customers}
                  technicians={technicians}
                  inventory={inventory}
                  setInventory={setInventory}
                  repairParts={repairParts}
                  setRepairParts={setRepairParts}
                  selectedTicket={selectedTicket}
                  setSelectedTicket={setSelectedTicket}
                />
              )}
              {currentSubModule === "customers" && (
                <CustomersModule 
                  customers={customers}
                  setCustomers={setCustomers}
                  repairTickets={repairTickets}
                />
              )}
              {currentSubModule === "inventory" && (
                <InventoryModule 
                  inventory={inventory}
                  setInventory={setInventory}
                />
              )}
              {currentSubModule === "technicians" && (
                <TechniciansModule 
                  technicians={technicians}
                  setTechnicians={setTechnicians}
                  repairTickets={repairTickets}
                />
              )}
            </>
          )}
          
          {currentModule === "reports" && (
            <>
              {currentSubModule === "financial" && (
                <FinancialReportsModule 
                  invoices={invoices}
                  quotations={quotations}
                  companies={companies}
                />
              )}
              {currentSubModule === "repair" && (
                <RepairReportsModule 
                  repairTickets={repairTickets}
                  technicians={technicians}
                  customers={customers}
                />
              )}
              {currentSubModule === "inventory" && (
                <InventoryReportsModule 
                  inventory={inventory}
                  repairParts={repairParts}
                />
              )}
            </>
          )}
          
          {currentModule === "settings" && (
            <SettingsModule currentUser={currentUser} />
          )}
        </main>
      </div>
    </div>
  );
}

// Login Screen Component
function LoginScreen({ onLogin }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Basic validation
    if (!email || !password) {
      setError("Please enter both email and password");
      return;
    }
    
    // In a real app, this would make an API call to verify credentials
    if (email === "admin@madonoro.com" && password === "password") {
      onLogin({
        id: 1,
        name: "Admin User",
        email: "admin@madonoro.com",
        role: "admin",
        avatar: "https://ui-avatars.com/api/?name=Admin+User&background=2563eb&color=fff"
      });
    } else if (email === "staff@madonoro.com" && password === "password") {
      onLogin({
        id: 2,
        name: "Staff User",
        email: "staff@madonoro.com",
        role: "staff",
        avatar: "https://ui-avatars.com/api/?name=Staff+User&background=10b981&color=fff"
      });
    } else if (email === "tech@madonoro.com" && password === "password") {
      onLogin({
        id: 3,
        name: "Tech User",
        email: "tech@madonoro.com",
        role: "technician",
        avatar: "https://ui-avatars.com/api/?name=Tech+User&background=f59e0b&color=fff"
      });
    } else if (email === "accounting@madonoro.com" && password === "password") {
      onLogin({
        id: 4,
        name: "Accounting User",
        email: "accounting@madonoro.com",
        role: "accounting",
        avatar: "https://ui-avatars.com/api/?name=Accounting+User&background=ef4444&color=fff"
      });
    } else {
      setError("Invalid email or password");
    }
  };
  
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100 px-4">
      <div className="max-w-md w-full space-y-8 bg-white p-8 rounded-lg shadow-md">
        <div className="text-center">
          <div className="mx-auto h-12 w-12 bg-[#2563eb] rounded-md flex items-center justify-center">
            <span className="font-bold text-xl text-white">M</span>
          </div>
          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
            Madonoro Express
          </h2>
          <p className="mt-2 text-sm text-gray-600">
            Unified Business Management System
          </p>
        </div>
        
        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
          {error && (
            <div className="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
              <div className="flex">
                <div className="flex-shrink-0">
                  <AlertTriangle className="h-5 w-5 text-red-500" />
                </div>
                <div className="ml-3">
                  <p className="text-sm text-red-700">{error}</p>
                </div>
              </div>
            </div>
          )}
          
          <div className="rounded-md shadow-sm -space-y-px">
            <div>
              <label htmlFor="email-address" className="sr-only">Email address</label>
              <input
                id="email-address"
                name="email"
                type="email"
                autoComplete="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-[#2563eb] focus:z-10 sm:text-sm"
                placeholder="Email address"
              />
            </div>
            <div>
              <label htmlFor="password" className="sr-only">Password</label>
              <input
                id="password"
                name="password"
                type="password"
                autoComplete="current-password"
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-[#2563eb] focus:z-10 sm:text-sm"
                placeholder="Password"
              />
            </div>
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <input
                id="remember-me"
                name="remember-me"
                type="checkbox"
                className="h-4 w-4 text-[#2563eb] focus:ring-[#2563eb] border-gray-300 rounded"
              />
              <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
                Remember me
              </label>
            </div>

            <div className="text-sm">
              <a href="#" className="font-medium text-[#2563eb] hover:text-[#1d4ed8]">
                Forgot your password?
              </a>
            </div>
          </div>

          <div>
            <button
              type="submit"
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#2563eb] hover:bg-[#1d4ed8] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2563eb]"
            >
              Sign in
            </button>
          </div>
          
          <div className="text-center text-xs text-gray-500">
            <p className="mb-1">Demo credentials:</p>
            <p>Admin: admin@madonoro.com / password</p>
            <p>Staff: staff@madonoro.com / password</p>
            <p>Technician: tech@madonoro.com / password</p>
            <p>Accounting: accounting@madonoro.com / password</p>
          </div>
        </form>
      </div>
    </div>
  );
}

// Navigation Item Component
function NavItem({ icon, label, active, onClick, hasSubmenu = false, expanded = false, subItems = [] }) {
  return (
    <li>
      <button
        onClick={onClick}
        className={`flex items-center justify-between w-full px-4 py-2 text-sm rounded-md ${
          active ? 'bg-[#2563eb] text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'
        }`}
      >
        <div className="flex items-center space-x-3">
          {icon}
          <span>{label}</span>
        </div>
        {hasSubmenu && <ChevronDown size={16} className={expanded ? "transform rotate-180" : ""} />}
      </button>
      
      {hasSubmenu && expanded && (
        <ul className="mt-1 ml-6 space-y-1">
          {subItems.map((item, index) => (
            <li key={index}>
              <button
                onClick={item.onClick}
                className={`w-full text-left px-4 py-2 text-xs rounded-md ${
                  item.active ? 'bg-gray-700 text-white' : 'text-gray-400 hover:bg-gray-700 hover:text-white'
                }`}
              >
                {item.label}
              </button>
            </li>
          ))}
        </ul>
      )}
    </li>
  );
}

// Dashboard Module Component
function DashboardModule({ stats }) {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
        <div className="flex space-x-2">
          <button className="px-4 py-2 text-sm bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50">
            Export Reports
          </button>
          <button className="px-4 py-2 text-sm text-white bg-[#2563eb] rounded-md shadow-sm hover:bg-[#1d4ed8] flex items-center">
            <Plus size={16} className="mr-1" /> New Action
          </button>
        </div>
      </div>
      
      {/* Stats Cards */}
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard 
          title="Active Companies" 
          value={stats.activeCompanies} 
          icon={<Briefcase className="text-[#2563eb]" />} 
          change="+2 this month"
          positive={true}
        />
        <StatCard 
          title="Pending Repairs" 
          value={stats.pendingRepairs} 
          icon={<Wrench className="text-[#f59e0b]" />} 
          change="3 urgent"
          positive={false}
        />
        <StatCard 
          title="Unpaid Invoices" 
          value={stats.unpaidInvoices} 
          icon={<FileText className="text-[#ef4444]" />} 
          change="5 overdue"
          positive={false}
        />
        <StatCard 
          title="Quotes This Month" 
          value={stats.quotesThisMonth} 
          icon={<FileText className="text-[#10b981]" />} 
          change="+15% vs last month"
          positive={true}
        />
      </div>
      
      {/* Charts and Tables */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {/* Revenue Chart */}
        <div className="p-6 bg-white rounded-lg shadow">
          <h2 className="mb-4 text-lg font-semibold text-gray-700">Monthly Revenue</h2>
          <div className="h-64">
            <RevenueChart data={stats.revenueData} />
          </div>
        </div>
        
        {/* Technician Performance */}
        <div className="p-6 bg-white rounded-lg shadow">
          <h2 className="mb-4 text-lg font-semibold text-gray-700">Technician Performance</h2>
          <div className="space-y-4">
            {stats.repairsByTechnician.map((tech, index) => (
              <div key={index} className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">{tech.name}</span>
                  <span className="text-sm text-gray-500">{tech.completed + tech.inProgress} total tickets</span>
                </div>
                <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div 
                    className="h-full bg-[#10b981]" 
                    style={{ width: `${(tech.completed / (tech.completed + tech.inProgress)) * 100}%` }}
                  ></div>
                </div>
                <div className="flex text-xs text-gray-500 justify-between">
                  <span>{tech.completed} completed</span>
                  <span>{tech.inProgress} in progress</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      
      {/* Recent Tickets and Alerts */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {/* Recent Repair Tickets */}
        <div className="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
          <div className="px-6 py-4 border-b border-gray-200">
            <h2 className="text-lg font-semibold text-gray-700">Recent Repair Tickets</h2>
          </div>
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ticket ID</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Device</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Technician</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {stats.recentTickets.map((ticket, index) => (
                  <tr key={index} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-[#2563eb]">{ticket.id}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{ticket.customer}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{ticket.device}</td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                        ticket.status === 'Completed' ? 'bg-green-100 text-green-800' :
                        ticket.status === 'In Progress' ? 'bg-blue-100 text-blue-800' :
                        'bg-yellow-100 text-yellow-800'
                      }`}>
                        {ticket.status}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{ticket.technician}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="px-6 py-3 border-t border-gray-200 bg-gray-50">
            <a href="#" className="text-sm font-medium text-[#2563eb] hover:text-[#1d4ed8]">View all tickets →</a>
          </div>
        </div>
        
        {/* System Alerts */}
        <div className="bg-white rounded-lg shadow overflow-hidden">
          <div className="px-6 py-4 border-b border-gray-200">
            <h2 className="text-lg font-semibold text-gray-700">System Alerts</h2>
          </div>
          <div className="p-6 space-y-4">
            {stats.alerts.map((alert, index) => (
              <div key={index} className={`p-4 rounded-md ${
                alert.type === 'inventory' ? 'bg-yellow-50 border-l-4 border-yellow-400' :
                alert.type === 'delete' ? 'bg-red-50 border-l-4 border-red-400' :
                'bg-blue-50 border-l-4 border-blue-400'
              }`}>
                <div className="flex">
                  <div className="flex-shrink-0">
                    <AlertTriangle className={`h-5 w-5 ${
                      alert.type === 'inventory' ? 'text-yellow-400' :
                      alert.type === 'delete' ? 'text-red-400' :
                      'text-blue-400'
                    }`} />
                  </div>
                  <div className="ml-3">
                    <p className="text-sm font-medium text-gray-800">{alert.message}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="px-6 py-3 border-t border-gray-200 bg-gray-50">
            <a href="#" className="text-sm font-medium text-[#2563eb] hover:text-[#1d4ed8]">View all alerts →</a>
          </div>
        </div>
      </div>
    </div>
  );
}

// Stat Card Component
function StatCard({ title, value, icon, change, positive }) {
  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-medium text-gray-500">{title}</h3>
        <div className="p-3 bg-gray-100 rounded-full">
          {icon}
        </div>
      </div>
      <div className="mt-6">
        <p className="text-3xl font-semibold">{value}</p>
        <p className={`mt-2 text-sm ${positive ? 'text-green-600' : 'text-red-600'}`}>
          {change}
        </p>
      </div>
    </div>
  );
}

// Revenue Chart Component
function RevenueChart({ data }) {
  return (
    <div className="w-full h-full flex items-end space-x-2">
      {data.map((item, index) => (
        <div key={index} className="flex flex-col items-center flex-1">
          <div 
            className="w-full bg-[#2563eb] hover:bg-[#1d4ed8] rounded-t-md transition-all duration-200"
            style={{ height: `${(item.amount / Math.max(...data.map(d => d.amount))) * 100}%` }}
          ></div>
          <div className="mt-2 text-xs text-gray-500">{item.month}</div>
        </div>
      ))}
    </div>
  );
}

// Company Management Module Components
function CompanyListModule({ companies, setCompanies, selectedCompany, setSelectedCompany }) {
  const [showAddModal, setShowAddModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [companyToDelete, setCompanyToDelete] = useState(null);
  const [formData, setFormData] = useState({
    name: "",
    regNumber: "",
    taxNumber: "",
    contactPerson: "",
    email: "",
    phone: "",
    address: ""
  });
  const [searchTerm, setSearchTerm] = useState("");
  const [filterStatus, setFilterStatus] = useState("all");
  
  // Filter companies based on search and status
  const filteredCompanies = companies.filter(company => {
    const matchesSearch = company.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         company.regNumber.includes(searchTerm) ||
                         company.contactPerson.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesStatus = filterStatus === "all" || company.status === filterStatus;
    return matchesSearch && matchesStatus;
  });
  
  const handleAddCompany = () => {
    const newCompany = {
      id: companies.length + 1,
      ...formData,
      status: "active",
      createdAt: new Date().toISOString().split('T')[0]
    };
    
    setCompanies([...companies, newCompany]);
    setFormData({
      name: "",
      regNumber: "",
      taxNumber: "",
      contactPerson: "",
      email: "",
      phone: "",
      address: ""
    });
    setShowAddModal(false);
  };
  
  const handleUpdateCompany = () => {
    const updatedCompanies = companies.map(company => 
      company.id === selectedCompany.id ? { ...company, ...formData } : company
    );
    
    setCompanies(updatedCompanies);
    setSelectedCompany(null);
    setFormData({
      name: "",
      regNumber: "",
      taxNumber: "",
      contactPerson: "",
      email: "",
      phone: "",
      address: ""
    });
  };
  
  const handleDeleteRequest = (company) => {
    setCompanyToDelete(company);
    setShowDeleteModal(true);
  };
  
  const confirmDelete = () => {
    const updatedCompanies = companies.map(company => 
      company.id === companyToDelete.id ? { ...company, status: "pending deletion" } : company
    );
    
    setCompanies(updatedCompanies);
    setShowDeleteModal(false);
    setCompanyToDelete(null);
  };
  
  const handleEditClick = (company) => {
    setSelectedCompany(company);
    setFormData({
      name: company.name,
      regNumber: company.regNumber,
      taxNumber: company.taxNumber,
      contactPerson: company.contactPerson,
      email: company.email,
      phone: company.phone,
      address: company.address
    });
  };
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Company Management</h1>
        <button 
          onClick={() => setShowAddModal(true)}
          className="px-4 py-2 text-sm text-white bg-[#2563eb] rounded-md shadow-sm hover:bg-[#1d4ed8] flex items-center"
        >
          <Plus size={16} className="mr-1" /> Add Company
        </button>
      </div>
      
      {/* Search and Filter */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between space-y-3 md:space-y-0 md:space-x-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
          <input 
            type="text" 
            placeholder="Search companies..." 
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
          />
        </div>
        <div className="flex items-center space-x-2">
          <label className="text-sm text-gray-500">Status:</label>
          <select 
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value)}
            className="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
          >
            <option value="all">All</option>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
            <option value="pending">Pending</option>
            <option value="pending deletion">Pending Deletion</option>
          </select>
        </div>
      </div>
      
      {/* Companies Table */}
      <div className="bg-white rounded-lg shadow overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company Name</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Registration No.</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact Person</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {filteredCompanies.map((company) => (
                <tr key={company.id} className="hover:bg-gray-50">
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm font-medium text-gray-900">{company.name}</div>
                    <div className="text-sm text-gray-500">{company.email}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{company.regNumber}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{company.contactPerson}</td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                      company.status === 'active' ? 'bg-green-100 text-green-800' :
                      company.status === 'inactive' ? 'bg-gray-100 text-gray-800' :
                      company.status === 'pending deletion' ? 'bg-red-100 text-red-800' :
                      'bg-yellow-100 text-yellow-800'
                    }`}>
                      {company.status.charAt(0).toUpperCase() + company.status.slice(1)}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{company.createdAt}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <div className="flex justify-end space-x-2">
                      <button 
                        onClick={() => handleEditClick(company)}
                        className="text-indigo-600 hover:text-indigo-900"
                      >
                        <Edit size={16} />
                      </button>
                      <button 
                        onClick={() => handleDeleteRequest(company)}
                        className="text-red-600 hover:text-red-900"
                        disabled={company.status === 'pending deletion'}
                      >
                        <Trash size={16} className={company.status === 'pending deletion' ? 'opacity-50' : ''} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
              {filteredCompanies.length === 0 && (
                <tr>
                  <td colSpan="6" className="px-6 py-4 text-center text-sm text-gray-500">
                    No companies found
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
      
      {/* Company Details/Edit Form */}
      {selectedCompany && (
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-semibold text-gray-900">Edit Company</h2>
            <button 
              onClick={() => {
                setSelectedCompany(null);
                setFormData({
                  name: "",
                  regNumber: "",
                  taxNumber: "",
                  contactPerson: "",
                  email: "",
                  phone: "",
                  address: ""
                });
              }}
              className="text-gray-500 hover:text-gray-700"
            >
              <X size={20} />
            </button>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Company Name</label>
              <input 
                type="text" 
                value={formData.name}
                onChange={(e) => setFormData({...formData, name: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Registration Number</label>
              <input 
                type="text" 
                value={formData.regNumber}
                onChange={(e) => setFormData({...formData, regNumber: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Tax Number</label>
              <input 
                type="text" 
                value={formData.taxNumber}
                onChange={(e) => setFormData({...formData, taxNumber: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Contact Person</label>
              <input 
                type="text" 
                value={formData.contactPerson}
                onChange={(e) => setFormData({...formData, contactPerson: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
              <input 
                type="email" 
                value={formData.email}
                onChange={(e) => setFormData({...formData, email: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Phone</label>
              <input 
                type="text" 
                value={formData.phone}
                onChange={(e) => setFormData({...formData, phone: e.target.value})}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
              />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Address</label>
              <textarea 
                value={formData.address}
                onChange={(e) => setFormData({...formData, address: e.target.value})}
                rows="3"
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
              ></textarea>
            </div>
          </div>
          
          <div className="mt-6 flex justify-end">
            <button 
              onClick={() => {
                setSelectedCompany(null);
                setFormData({
                  name: "",
                  regNumber: "",
                  taxNumber: "",
                  contactPerson: "",
                  email: "",
                  phone: "",
                  address: ""
                });
              }}
              className="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded-md shadow-sm hover:bg-gray-200 mr-2"
            >
              Cancel
            </button>
            <button 
              onClick={handleUpdateCompany}
              className="px-4 py-2 text-sm text-white bg-[#2563eb] rounded-md shadow-sm hover:bg-[#1d4ed8]"
            >
              Save Changes
            </button>
          </div>
        </div>
      )}
      
      {/* Add Company Modal */}
      {showAddModal && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>
            
            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                    <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">Add New Company</h3>
                    
                    <div className="grid grid-cols-1 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Company Name</label>
                        <input 
                          type="text" 
                          value={formData.name}
                          onChange={(e) => setFormData({...formData, name: e.target.value})}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Registration Number</label>
                        <input 
                          type="text" 
                          value={formData.regNumber}
                          onChange={(e) => setFormData({...formData, regNumber: e.target.value})}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Tax Number</label>
                        <input 
                          type="text" 
                          value={formData.taxNumber}
                          onChange={(e) => setFormData({...formData, taxNumber: e.target.value})}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Contact Person</label>
                        <input 
                          type="text" 
                          value={formData.contactPerson}
                          onChange={(e) => setFormData({...formData, contactPerson: e.target.value})}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
                        <input 
                          type="email" 
                          value={formData.email}
                          onChange={(e) => setFormData({...formData, email: e.target.value})}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                        <input 
                          type="text" 
                          value={formData.phone}
                          onChange={(e) => setFormData({...formData, phone: e.target.value})}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Address</label>
                        <textarea 
                          value={formData.address}
                          onChange={(e) => setFormData({...formData, address: e.target.value})}
                          rows="3"
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        ></textarea>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button 
                  type="button" 
                  onClick={handleAddCompany}
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-[#2563eb] text-base font-medium text-white hover:bg-[#1d4ed8] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2563eb] sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Add Company
                </button>
                <button 
                  type="button" 
                  onClick={() => setShowAddModal(false)}
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* Delete Confirmation Modal */}
      {showDeleteModal && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>
            
            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                    <AlertTriangle className="h-6 w-6 text-red-600" />
                  </div>
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                    <h3 className="text-lg leading-6 font-medium text-gray-900">Request Company Deletion</h3>
                    <div className="mt-2">
                      <p className="text-sm text-gray-500">
                        Are you sure you want to request deletion of {companyToDelete?.name}? This action requires admin approval.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button 
                  type="button" 
                  onClick={confirmDelete}
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Request Deletion
                </button>
                <button 
                  type="button" 
                  onClick={() => {
                    setShowDeleteModal(false);
                    setCompanyToDelete(null);
                  }}
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function DocumentsModule({ documents, setDocuments, companies }) {
  const [showUploadModal, setShowUploadModal] = useState(false);
  const [selectedCompanyId, setSelectedCompanyId] = useState("");
  const [documentName, setDocumentName] = useState("");
  const [documentType, setDocumentType] = useState("pdf");
  const [searchTerm, setSearchTerm] = useState("");
  const [filterCompany, setFilterCompany] = useState("all");
  const [filterStatus, setFilterStatus] = useState("all");
  
  // Filter documents based on search, company, and status
  const filteredDocuments = documents.filter(doc => {
    const matchesSearch = doc.name.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCompany = filterCompany === "all" || doc.companyId === parseInt(filterCompany);
    const matchesStatus = filterStatus === "all" || doc.status === filterStatus;
    return matchesSearch && matchesCompany && matchesStatus;
  });
  
  const handleUploadDocument = () => {
    if (!selectedCompanyId || !documentName) return;
    
    const newDocument = {
      id: documents.length + 1,
      companyId: parseInt(selectedCompanyId),
      name: documentName,
      type: documentType,
      size: `${(Math.random() * 2 + 0.1).toFixed(1)} MB`,
      uploadDate: new Date().toISOString().split('T')[0],
      status: "pending"
    };
    
    setDocuments([...documents, newDocument]);
    setShowUploadModal(false);
    setSelectedCompanyId("");
    setDocumentName("");
    setDocumentType("pdf");
  };
  
  const handleVerifyDocument = (docId) => {
    const updatedDocuments = documents.map(doc => 
      doc.id === docId ? { ...doc, status: "verified" } : doc
    );
    setDocuments(updatedDocuments);
  };
  
  const handleDeleteDocument = (docId) => {
    const updatedDocuments = documents.filter(doc => doc.id !== docId);
    setDocuments(updatedDocuments);
  };
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Company Documents</h1>
        <button 
          onClick={() => setShowUploadModal(true)}
          className="px-4 py-2 text-sm text-white bg-[#2563eb] rounded-md shadow-sm hover:bg-[#1d4ed8] flex items-center"
        >
          <Upload size={16} className="mr-1" /> Upload Document
        </button>
      </div>
      
      {/* Search and Filter */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between space-y-3 md:space-y-0 md:space-x-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
          <input 
            type="text" 
            placeholder="Search documents..." 
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
          />
        </div>
        <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
          <select 
            value={filterCompany}
            onChange={(e) => setFilterCompany(e.target.value)}
            className="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
          >
            <option value="all">All Companies</option>
            {companies.map(company => (
              <option key={company.id} value={company.id}>{company.name}</option>
            ))}
          </select>
          <select 
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value)}
            className="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
          >
            <option value="all">All Statuses</option>
            <option value="pending">Pending</option>
            <option value="verified">Verified</option>
            <option value="expired">Expired</option>
          </select>
        </div>
      </div>
      
      {/* Documents Table */}
      <div className="bg-white rounded-lg shadow overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Document Name</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Upload Date</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {filteredDocuments.map((doc) => {
                const company = companies.find(c => c.id === doc.companyId);
                return (
                  <tr key={doc.id} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{doc.name}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{company?.name || "Unknown"}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 uppercase">{doc.type}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{doc.size}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{doc.uploadDate}</td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                        doc.status === 'verified' ? 'bg-green-100 text-green-800' :
                        doc.status === 'expired' ? 'bg-red-100 text-red-800' :
                        'bg-yellow-100 text-yellow-800'
                      }`}>
                        {doc.status.charAt(0).toUpperCase() + doc.status.slice(1)}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <div className="flex justify-end space-x-2">
                        <button 
                          className="text-indigo-600 hover:text-indigo-900"
                          title="Download"
                        >
                          <Download size={16} />
                        </button>
                        {doc.status === 'pending' && (
                          <button 
                            onClick={() => handleVerifyDocument(doc.id)}
                            className="text-green-600 hover:text-green-900"
                            title="Verify"
                          >
                            <Check size={16} />
                          </button>
                        )}
                        <button 
                          onClick={() => handleDeleteDocument(doc.id)}
                          className="text-red-600 hover:text-red-900"
                          title="Delete"
                        >
                          <Trash size={16} />
                        </button>
                      </div>
                    </td>
                  </tr>
                );
              })}
              {filteredDocuments.length === 0 && (
                <tr>
                  <td colSpan="7" className="px-6 py-4 text-center text-sm text-gray-500">
                    No documents found
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
      
      {/* Upload Document Modal */}
      {showUploadModal && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>
            
            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                    <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">Upload Document</h3>
                    
                    <div className="grid grid-cols-1 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Company</label>
                        <select 
                          value={selectedCompanyId}
                          onChange={(e) => setSelectedCompanyId(e.target.value)}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        >
                          <option value="">Select Company</option>
                          {companies.map(company => (
                            <option key={company.id} value={company.id}>{company.name}</option>
                          ))}
                        </select>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Document Name</label>
                        <input 
                          type="text" 
                          value={documentName}
                          onChange={(e) => setDocumentName(e.target.value)}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                          placeholder="e.g. Company Registration Certificate"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Document Type</label>
                        <select 
                          value={documentType}
                          onChange={(e) => setDocumentType(e.target.value)}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        >
                          <option value="pdf">PDF</option>
                          <option value="doc">DOC</option>
                          <option value="jpg">JPG</option>
                          <option value="png">PNG</option>
                        </select>
                      </div>
                      <div className="mt-2">
                        <label className="block text-sm font-medium text-gray-700 mb-1">Upload File</label>
                        <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                          <div className="space-y-1 text-center">
                            <Upload className="mx-auto h-12 w-12 text-gray-400" />
                            <div className="flex text-sm text-gray-600">
                              <label
                                htmlFor="file-upload"
                                className="relative cursor-pointer bg-white rounded-md font-medium text-[#2563eb] hover:text-[#1d4ed8] focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-[#2563eb]"
                              >
                                <span>Upload a file</span>
                                <input id="file-upload" name="file-upload" type="file" className="sr-only" />
                              </label>
                              <p className="pl-1">or drag and drop</p>
                            </div>
                            <p className="text-xs text-gray-500">
                              PDF, DOC, JPG, PNG up to 10MB
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button 
                  type="button" 
                  onClick={handleUploadDocument}
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-[#2563eb] text-base font-medium text-white hover:bg-[#1d4ed8] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2563eb] sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Upload
                </button>
                <button 
                  type="button" 
                  onClick={() => setShowUploadModal(false)}
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function CredentialsModule({ credentials, setCredentials, companies }) {
  const [showAddModal, setShowAddModal] = useState(false);
  const [showViewModal, setShowViewModal] = useState(false);
  const [selectedCredential, setSelectedCredential] = useState(null);
  const [formData, setFormData] = useState({
    companyId: "",
    type: "CIPC",
    username: "",
    password: ""
  });
  const [filterCompany, setFilterCompany] = useState("all");
  const [filterType, setFilterType] = useState("all");
  
  // Filter credentials based on company and type
  const filteredCredentials = credentials.filter(cred => {
    const matchesCompany = filterCompany === "all" || cred.companyId === parseInt(filterCompany);
    const matchesType = filterType === "all" || cred.type === filterType;
    return matchesCompany && matchesType;
  });
  
  const handleAddCredential = () => {
    if (!formData.companyId || !formData.username || !formData.password) return;
    
    const newCredential = {
      id: credentials.length + 1,
      companyId: parseInt(formData.companyId),
      type: formData.type,
      username: formData.username,
      password: formData.password,
      lastUpdated: new Date().toISOString().split('T')[0]
    };
    
    setCredentials([...credentials, newCredential]);
    setShowAddModal(false);
    setFormData({
      companyId: "",
      type: "CIPC",
      username: "",
      password: ""
    });
  };
  
  const handleViewCredential = (credential) => {
    setSelectedCredential(credential);
    setShowViewModal(true);
  };
  
  const handleDeleteCredential = (credId) => {
    const updatedCredentials = credentials.filter(cred => cred.id !== credId);
    setCredentials(updatedCredentials);
  };
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Secure Credentials</h1>
        <button 
          onClick={() => setShowAddModal(true)}
          className="px-4 py-2 text-sm text-white bg-[#2563eb] rounded-md shadow-sm hover:bg-[#1d4ed8] flex items-center"
        >
          <Plus size={16} className="mr-1" /> Add Credential
        </button>
      </div>
      
      {/* Filter */}
      <div className="flex flex-col md:flex-row md:items-center space-y-2 md:space-y-0 md:space-x-4">
        <div className="flex items-center space-x-2">
          <label className="text-sm text-gray-500">Company:</label>
          <select 
            value={filterCompany}
            onChange={(e) => setFilterCompany(e.target.value)}
            className="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
          >
            <option value="all">All Companies</option>
            {companies.map(company => (
              <option key={company.id} value={company.id}>{company.name}</option>
            ))}
          </select>
        </div>
        <div className="flex items-center space-x-2">
          <label className="text-sm text-gray-500">Type:</label>
          <select 
            value={filterType}
            onChange={(e) => setFilterType(e.target.value)}
            className="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
          >
            <option value="all">All Types</option>
            <option value="CIPC">CIPC</option>
            <option value="SARS">SARS</option>
            <option value="CSD">CSD</option>
          </select>
        </div>
      </div>
      
      {/* Credentials Table */}
      <div className="bg-white rounded-lg shadow overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Password</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Updated</th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {filteredCredentials.map((cred) => {
                const company = companies.find(c => c.id === cred.companyId);
                return (
                  <tr key={cred.id} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{company?.name || "Unknown"}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{cred.type}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{cred.username}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      <div className="flex items-center">
                        <span className="mr-2">••••••••</span>
                        <Lock size={16} className="text-gray-400" />
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{cred.lastUpdated}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <div className="flex justify-end space-x-2">
                        <button 
                          onClick={() => handleViewCredential(cred)}
                          className="text-indigo-600 hover:text-indigo-900"
                          title="View"
                        >
                          <Eye size={16} />
                        </button>
                        <button 
                          onClick={() => handleDeleteCredential(cred.id)}
                          className="text-red-600 hover:text-red-900"
                          title="Delete"
                        >
                          <Trash size={16} />
                        </button>
                      </div>
                    </td>
                  </tr>
                );
              })}
              {filteredCredentials.length === 0 && (
                <tr>
                  <td colSpan="6" className="px-6 py-4 text-center text-sm text-gray-500">
                    No credentials found
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
      
      {/* Add Credential Modal */}
      {showAddModal && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>
            
            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                    <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">Add New Credential</h3>
                    
                    <div className="grid grid-cols-1 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Company</label>
                        <select 
                          value={formData.companyId}
                          onChange={(e) => setFormData({...formData, companyId: e.target.value})}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        >
                          <option value="">Select Company</option>
                          {companies.map(company => (
                            <option key={company.id} value={company.id}>{company.name}</option>
                          ))}
                        </select>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Credential Type</label>
                        <select 
                          value={formData.type}
                          onChange={(e) => setFormData({...formData, type: e.target.value})}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        >
                          <option value="CIPC">CIPC</option>
                          <option value="SARS">SARS</option>
                          <option value="CSD">CSD</option>
                        </select>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
                        <input 
                          type="text" 
                          value={formData.username}
                          onChange={(e) => setFormData({...formData, username: e.target.value})}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
                        <input 
                          type="password" 
                          value={formData.password}
                          onChange={(e) => setFormData({...formData, password: e.target.value})}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button 
                  type="button" 
                  onClick={handleAddCredential}
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-[#2563eb] text-base font-medium text-white hover:bg-[#1d4ed8] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2563eb] sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Add Credential
                </button>
                <button 
                  type="button" 
                  onClick={() => setShowAddModal(false)}
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* View Credential Modal */}
      {showViewModal && selectedCredential && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>
            
            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
                    <Lock className="h-6 w-6 text-blue-600" />
                  </div>
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                    <h3 className="text-lg leading-6 font-medium text-gray-900">Credential Details</h3>
                    <div className="mt-4 space-y-3">
                      <div>
                        <p className="text-sm text-gray-500">Company</p>
                        <p className="text-sm font-medium text-gray-900">
                          {companies.find(c => c.id === selectedCredential.companyId)?.name || "Unknown"}
                        </p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500">Type</p>
                        <p className="text-sm font-medium text-gray-900">{selectedCredential.type}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500">Username</p>
                        <p className="text-sm font-medium text-gray-900">{selectedCredential.username}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500">Password</p>
                        <div className="flex items-center">
                          <p className="text-sm font-medium text-gray-900">{selectedCredential.password}</p>
                          <button 
                            className="ml-2 text-indigo-600 hover:text-indigo-900"
                            title="Copy to clipboard"
                            onClick={() => {
                              navigator.clipboard.writeText(selectedCredential.password);
                              // In a real app, you would show a toast notification here
                            }}
                          >
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                            </svg>
                          </button>
                        </div>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500">Last Updated</p>
                        <p className="text-sm font-medium text-gray-900">{selectedCredential.lastUpdated}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button 
                  type="button" 
                  onClick={() => setShowViewModal(false)}
                  className="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:w-auto sm:text-sm"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// Quotation & Invoice Module Components
function QuotationsModule({ quotations, setQuotations, companies, clients, selectedQuotation, setSelectedQuotation, invoices, setInvoices }) {
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showViewModal, setShowViewModal] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const [filterCompany, setFilterCompany] = useState("all");
  const [filterStatus, setFilterStatus] = useState("all");
  const [formData, setFormData] = useState({
    companyId: "",
    clientId: "",
    items: [{ id: 1, description: "", quantity: 1, unitPrice: 0 }]
  });
  
  // Calculate total for a quotation
  const calculateTotal = (items) => {
    return items.reduce((total, item) => total + (item.quantity * item.unitPrice), 0);
  };
  
  // Filter quotations based on search, company, and status
  const filteredQuotations = quotations.filter(quote => {
    const matchesSearch = quote.id.toLowerCase().includes(searchTerm.toLowerCase()) || 
                         clients.find(c => c.id === quote.clientId)?.name.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCompany = filterCompany === "all" || quote.companyId === parseInt(filterCompany);
    const matchesStatus = filterStatus === "all" || quote.status === filterStatus;
    return matchesSearch && matchesCompany && matchesStatus;
  });
  
  const handleCreateQuotation = () => {
    if (!formData.companyId || !formData.clientId || formData.items.some(item => !item.description || item.quantity <= 0)) {
      return; // Validation failed
    }
    
    const newQuotation = {
      id: `QT-${new Date().getFullYear()}-${String(quotations.length + 1).padStart(3, '0')}`,
      companyId: parseInt(formData.companyId),
      clientId: parseInt(formData.clientId),
      date: new Date().toISOString().split('T')[0],
      expiryDate: new Date(new Date().setDate(new Date().getDate() + 30)).toISOString().split('T')[0],
      status: "pending",
      total: calculateTotal(formData.items),
      items: formData.items
    };
    
    setQuotations([...quotations, newQuotation]);
    setShowCreateModal(false);
    setFormData({
      companyId: "",
      clientId: "",
      items: [{ id: 1, description: "", quantity: 1, unitPrice: 0 }]
    });
  };
  
  const handleAddItem = () => {
    setFormData({
      ...formData,
      items: [...formData.items, { id: formData.items.length + 1, description: "", quantity: 1, unitPrice: 0 }]
    });
  };
  
  const handleRemoveItem = (index) => {
    const updatedItems = [...formData.items];
    updatedItems.splice(index, 1);
    setFormData({
      ...formData,
      items: updatedItems
    });
  };
  
  const handleItemChange = (index, field, value) => {
    const updatedItems = [...formData.items];
    updatedItems[index][field] = field === 'quantity' || field === 'unitPrice' ? parseFloat(value) : value;
    setFormData({
      ...formData,
      items: updatedItems
    });
  };
  
  const handleViewQuotation = (quotation) => {
    setSelectedQuotation(quotation);
    setShowViewModal(true);
  };
  
  const handleUpdateStatus = (quotationId, newStatus) => {
    const updatedQuotations = quotations.map(quote => 
      quote.id === quotationId ? { ...quote, status: newStatus } : quote
    );
    setQuotations(updatedQuotations);
    setShowViewModal(false);
    setSelectedQuotation(null);
  };
  
  const handleConvertToInvoice = (quotation) => {
    // Check if invoice already exists for this quotation
    const existingInvoice = invoices.find(inv => inv.quotationId === quotation.id);
    if (existingInvoice) {
      // In a real app, you would show a notification here
      return;
    }
    
    const newInvoice = {
      id: `INV-${new Date().getFullYear()}-${String(invoices.length + 1).padStart(3, '0')}`,
      quotationId: quotation.id,
      companyId: quotation.companyId,
      clientId: quotation.clientId,
      date: new Date().toISOString().split('T')[0],
      dueDate: new Date(new Date().setDate(new Date().getDate() + 30)).toISOString().split('T')[0],
      status: "unpaid",
      paymentDate: null,
      total: quotation.total
    };
    
    setInvoices([...invoices, newInvoice]);
    
    // Update quotation status to "accepted"
    const updatedQuotations = quotations.map(quote => 
      quote.id === quotation.id ? { ...quote, status: "accepted" } : quote
    );
    setQuotations(updatedQuotations);
    
    setShowViewModal(false);
    setSelectedQuotation(null);
  };
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Quotations</h1>
        <button 
          onClick={() => setShowCreateModal(true)}
          className="px-4 py-2 text-sm text-white bg-[#2563eb] rounded-md shadow-sm hover:bg-[#1d4ed8] flex items-center"
        >
          <Plus size={16} className="mr-1" /> Create Quotation
        </button>
      </div>
      
      {/* Search and Filter */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between space-y-3 md:space-y-0 md:space-x-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
          <input 
            type="text" 
            placeholder="Search quotations..." 
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
          />
        </div>
        <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
          <select 
            value={filterCompany}
            onChange={(e) => setFilterCompany(e.target.value)}
            className="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
          >
            <option value="all">All Companies</option>
            {companies.map(company => (
              <option key={company.id} value={company.id}>{company.name}</option>
            ))}
          </select>
          <select 
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value)}
            className="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
          >
            <option value="all">All Statuses</option>
            <option value="pending">Pending</option>
            <option value="accepted">Accepted</option>
            <option value="rejected">Rejected</option>
          </select>
        </div>
      </div>
      
      {/* Quotations Table */}
      <div className="bg-white rounded-lg shadow overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quotation ID</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expiry</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {filteredQuotations.map((quote) => {
                const company = companies.find(c => c.id === quote.companyId);
                const client = clients.find(c => c.id === quote.clientId);
                return (
                  <tr key={quote.id} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-[#2563eb]">{quote.id}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{company?.name || "Unknown"}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{client?.name || "Unknown"}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{quote.date}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{quote.expiryDate}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R {quote.total.toFixed(2)}</td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                        quote.status === 'accepted' ? 'bg-green-100 text-green-800' :
                        quote.status === 'rejected' ? 'bg-red-100 text-red-800' :
                        'bg-yellow-100 text-yellow-800'
                      }`}>
                        {quote.status.charAt(0).toUpperCase() + quote.status.slice(1)}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <div className="flex justify-end space-x-2">
                        <button 
                          onClick={() => handleViewQuotation(quote)}
                          className="text-indigo-600 hover:text-indigo-900"
                          title="View"
                        >
                          <Eye size={16} />
                        </button>
                        {quote.status === 'pending' && (
                          <button 
                            onClick={() => handleConvertToInvoice(quote)}
                            className="text-green-600 hover:text-green-900"
                            title="Convert to Invoice"
                          >
                            <FileText size={16} />
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
              {filteredQuotations.length === 0 && (
                <tr>
                  <td colSpan="8" className="px-6 py-4 text-center text-sm text-gray-500">
                    No quotations found
                  </td>
                </tr>
              )}
            </tbody><ant_artifact identifier="code-merge-01" title="Updated Code with Merge">
import { useState, useEffect } from "react";
import { Bell, Menu, X, User, LogOut, Home, Briefcase, FileText, Wrench, BarChart3, Settings, ChevronDown, Search, Plus, AlertTriangle } from "lucide-react";

// Mock data for demonstration
const mockStats = {
  activeCompanies: 12,
  pendingRepairs: 8,
  unpaidInvoices: 15,
  quotesThisMonth: 23,
  revenueData: [
    { month: "Jan", amount: 12500 },
    { month: "Feb", amount: 15000 },
    { month: "Mar", amount: 18000 },
    { month: "Apr", amount: 16500 },
    { month: "May", amount: 21000 },
    { month: "Jun", amount: 19500 },
  ],
  repairsByTechnician: [
    { name: "John Doe", completed: 24, inProgress: 5 },
    { name: "Jane Smith", completed: 18, inProgress: 3 },
    { name: "Mike Johnson", completed: 15, inProgress: 0 },
  ],
  recentTickets: [
    { id: "RT-2023-001", customer: "ABC Corp", device: "Dell Laptop", status: "In Progress", technician: "John Doe" },
    { id: "RT-2023-002", customer: "XYZ Ltd", device: "iPhone 13", status: "Pending", technician: "Unassigned" },
    { id: "RT-2023-003", customer: "123 Industries", device: "HP Printer", status: "Completed", technician: "Jane Smith" },
    { id: "RT-2023-004", customer: "Smith & Co", device: "Custom PC", status: "In Progress", technician: "Mike Johnson" },
  ],
  alerts: [
    { type: "inventory", message: "Laptop RAM stock below threshold (2 remaining)" },
    { type: "delete", message: "Company deletion request: TechSolutions Inc" },
    { type: "invoice", message: "5 invoices overdue by more than 30 days" },
  ]
};

// Main App Component
export default function App() {
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [currentUser, setCurrentUser] = useState(null);
  const [currentModule, setCurrentModule] = useState("dashboard");
  const [notifications, setNotifications] = useState([]);
  const [showNotifications, setShowNotifications] = useState(false);
  const [isMobile, setIsMobile] = useState(false);

  // Check if user is logged in
  useEffect(() => {
    // In a real app, this would check JWT token validity
    const user = {
      id: 1,
      name: "Admin User",
      email: "admin@madonoro.com",
      role: "admin",
      avatar: "https://ui-avatars.com/api/?name=Admin+User&background=2563eb&color=fff"
    };
    setCurrentUser(user);
    
    // Mock notifications
    setNotifications([
      { id: 1, message: "New repair ticket created", time: "10 minutes ago", read: false },
      { id: 2, message: "Invoice #INV-2023-042 is overdue", time: "2 hours ago", read: false },
      { id: 3, message: "Company update request approved", time: "Yesterday", read: true },
    ]);
    
    // Check if mobile
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
      if (window.innerWidth < 768) {
        setSidebarOpen(false);
      } else {
        setSidebarOpen(true);
      }
    };
    
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // Handle logout
  const handleLogout = () => {
    // In a real app, this would clear JWT token
    setCurrentUser(null);
  };

  // If not logged in, show login screen
  if (!currentUser) {
    return <LoginScreen onLogin={(user) => setCurrentUser(user)} />;
  }

  return (
    <div className="flex h-screen bg-gray-50">
      {/* Sidebar */}
      <aside 
        className={`${
          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
        } fixed inset-y-0 left-0 z-50 w-64 bg-[#0f172a] text-white transition-transform duration-300 ease-in-out md:relative md:translate-x-0`}
      >
        <div className="flex items-center justify-between p-4 border-b border-gray-700">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-[#2563eb] rounded-md flex items-center justify-center">
              <span className="font-bold text-white">M</span>
            </div>
            <h1 className="text-xl font-bold">Madonoro</h1>
          </div>
          {isMobile && (
            <button onClick={() => setSidebarOpen(false)} className="md:hidden">
              <X size={20} />
            </button>
          )}
        </div>
        
        <nav className="p-4">
          <ul className="space-y-2">
            <NavItem 
              icon={<Home size={20} />} 
              label="Dashboard" 
              active={currentModule === "dashboard"} 
              onClick={() => setCurrentModule("dashboard")} 
            />
            <NavItem 
              icon={<Briefcase size={20} />} 
              label="Company Management" 
              active={currentModule === "company"} 
              onClick={() => setCurrentModule("company")} 
            />
            <NavItem 
              icon={<FileText size={20} />} 
              label="Quotation & Invoice" 
              active={currentModule === "invoice"} 
              onClick={() => setCurrentModule("invoice")} 
              hasSubmenu={true}
            />
            <NavItem 
              icon={<Wrench size={20} />} 
              label="Tech Repair" 
              active={currentModule === "repair"} 
              onClick={() => setCurrentModule("repair")} 
              hasSubmenu={true}
            />
            <NavItem 
              icon={<BarChart3 size={20} />} 
              label="Reports" 
              active={currentModule === "reports"} 
              onClick={() => setCurrentModule("reports")} 
            />
            <NavItem 
              icon={<Settings size={20} />} 
              label="Settings" 
              active={currentModule === "settings"} 
              onClick={() => setCurrentModule("settings")} 
            />
          </ul>
        </nav>
        
        <div className="absolute bottom-0 w-full p-4 border-t border-gray-700">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <img 
                src={currentUser.avatar} 
                alt={currentUser.name} 
                className="w-8 h-8 rounded-full" 
              />
              <div>
                <p className="text-sm font-medium">{currentUser.name}</p>
                <p className="text-xs text-gray-400 capitalize">{currentUser.role}</p>
              </div>
            </div>
            <button 
              onClick={handleLogout}
              className="p-2 text-gray-400 rounded-full hover:bg-gray-700 hover:text-white"
            >
              <LogOut size={18} />
            </button>
          </div>
        </div>
      </aside>

      {/* Main Content */}
      <div className="flex flex-col flex-1 overflow-hidden">
        {/* Top Navigation */}
        <header className="bg-white shadow-sm">
          <div className="flex items-center justify-between p-4">
            <div className="flex items-center space-x-4">
              {isMobile && (
                <button 
                  onClick={() => setSidebarOpen(true)} 
                  className="p-1 rounded-md md:hidden"
                >
                  <Menu size={24} />
                </button>
              )}
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
                <input 
                  type="text" 
                  placeholder="Search..." 
                  className="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent"
                />
              </div>
            </div>
            
            <div className="flex items-center space-x-4">
              <div className="relative">
                <button 
                  onClick={() => setShowNotifications(!showNotifications)}
                  className="p-2 text-gray-600 rounded-full hover:bg-gray-100 relative"
                >
                  <Bell size={20} />
                  {notifications.filter(n => !n.read).length > 0 && (
                    <span className="absolute top-1 right-1 w-4 h-4 bg-red-500 rounded-full text-xs text-white flex items-center justify-center">
                      {notifications.filter(n => !n.read).length}
                    </span>
                  )}
                </button>
                
                {showNotifications && (
                  <div className="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg z-50 overflow-hidden">
                    <div className="p-3 border-b border-gray-200">
                      <h3 className="text-sm font-semibold">Notifications</h3>
                    </div>
                    <div className="max-h-96 overflow-y-auto">
                      {notifications.length > 0 ? (
                        notifications.map(notification => (
                          <div 
                            key={notification.id} 
                            className={`p-3 border-b border-gray-100 hover:bg-gray-50 ${!notification.read ? 'bg-blue-50' : ''}`}
                          >
                            <p className="text-sm">{notification.message}</p>
                            <p className="text-xs text-gray-500 mt-1">{notification.time}</p>
                          </div>
                        ))
                      ) : (
                        <div className="p-4 text-center text-gray-500">
                          No notifications
                        </div>
                      )}
                    </div>
                    <div className="p-2 text-center border-t border-gray-200">
                      <button className="text-sm text-[#2563eb] hover:underline">
                        Mark all as read
                      </button>
                    </div>
                  </div>
                )}
              </div>
              
              <div className="h-6 w-px bg-gray-300"></div>
              
              <div className="flex items-center space-x-2">
                <img 
                  src={currentUser.avatar} 
                  alt={currentUser.name} 
                  className="w-8 h-8 rounded-full" 
                />
                <span className="text-sm font-medium hidden md:inline-block">
                  {currentUser.name}
                </span>
              </div>
            </div>
          </div>
        </header>

        {/* Page Content */}
        <main className="flex-1 overflow-y-auto p-6">
          {currentModule === "dashboard" && <DashboardModule stats={mockStats} />}
          {currentModule === "company" && <CompanyModule />}
          {currentModule === "invoice" && <InvoiceModule />}
          {currentModule === "repair" && <RepairModule />}
          {currentModule === "reports" && <ReportsModule />}
          {currentModule === "settings" && <SettingsModule />}
        </main>
      </div>
    </div>
  );
}

// Login Screen Component
function LoginScreen({ onLogin }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Basic validation
    if (!email || !password) {
      setError("Please enter both email and password");
      return;
    }
    
    // In a real app, this would make an API call to verify credentials
    if (email === "admin@madonoro.com" && password === "password") {
      onLogin({
        id: 1,
        name: "Admin User",
        email: "admin@madonoro.com",
        role: "admin",
        avatar: "https://ui-avatars.com/api/?name=Admin+User&background=2563eb&color=fff"
      });
    } else {
      setError("Invalid email or password");
    }
  };
  
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100 px-4">
      <div className="max-w-md w-full space-y-8 bg-white p-8 rounded-lg shadow-md">
        <div className="text-center">
          <div className="mx-auto h-12 w-12 bg-[#2563eb] rounded-md flex items-center justify-center">
            <span className="font-bold text-xl text-white">M</span>
          </div>
          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
            Madonoro Express
          </h2>
          <p className="mt-2 text-sm text-gray-600">
            Unified Business Management System
          </p>
        </div>
        
        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
          {error && (
            <div className="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
              <div className="flex">
                <div className="flex-shrink-0">
                  <AlertTriangle className="h-5 w-5 text-red-500" />
                </div>
                <div className="ml-3">
                  <p className="text-sm text-red-700">{error}</p>
                </div>
              </div>
            </div>
          )}
          
          <div className="rounded-md shadow-sm -space-y-px">
            <div>
              <label htmlFor="email-address" className="sr-only">Email address</label>
              <input
                id="email-address"
                name="email"
                type="email"
                autoComplete="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-[#2563eb] focus:border-[#2563eb] focus:z-10 sm:text-sm"
                placeholder="Email address"
              />
            </div>
            <div>
              <label htmlFor="password" className="sr-only">Password</label>
              <input
                id="password"
                name="password"
                type="password"
                autoComplete="current-password"
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-[#2563eb] focus:border-[#2563eb] focus:z-10 sm:text-sm"
                placeholder="Password"
              />
            </div>
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <input
                id="remember-me"
                name="remember-me"
                type="checkbox"
                className="h-4 w-4 text-[#2563eb] focus:ring-[#2563eb] border-gray-300 rounded"
              />
              <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
                Remember me
              </label>
            </div>

            <div className="text-sm">
              <a href="#" className="font-medium text-[#2563eb] hover:text-[#1d4ed8]">
                Forgot your password?
              </a>
            </div>
          </div>

          <div>
            <button
              type="submit"
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#2563eb] hover:bg-[#1d4ed8] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2563eb]"
            >
              Sign in
            </button>
          </div>
          
          <div className="text-center text-xs text-gray-500">
            <p>Demo credentials: admin@madonoro.com / password</p>
          </div>
        </form>
      </div>
    </div>
  );
}

// Navigation Item Component
function NavItem({ icon, label, active, onClick, hasSubmenu = false }) {
  return (
    <li>
      <button
        onClick={onClick}
        className={`flex items-center justify-between w-full px-4 py-2 text-sm rounded-md ${
          active ? 'bg-[#2563eb] text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'
        }`}
      >
        <div className="flex items-center space-x-3">
          {icon}
          <span>{label}</span>
        </div>
        {hasSubmenu && <ChevronDown size={16} />}
      </button>
    </li>
  );
}

// Dashboard Module Component
function DashboardModule({ stats }) {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
        <div className="flex space-x-2">
          <button className="px-4 py-2 text-sm bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50">
            Export Reports
          </button>
          <button className="px-4 py-2 text-sm text-white bg-[#2563eb] rounded-md shadow-sm hover:bg-[#1d4ed8] flex items-center">
            <Plus size={16} className="mr-1" /> New Action
          </button>
        </div>
      </div>
      
      {/* Stats Cards */}
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard 
          title="Active Companies" 
          value={stats.activeCompanies} 
          icon={<Briefcase className="text-[#2563eb]" />} 
          change="+2 this month"
          positive={true}
        />
        <StatCard 
          title="Pending Repairs" 
          value={stats.pendingRepairs} 
          icon={<Wrench className="text-[#f59e0b]" />} 
          change="3 urgent"
          positive={false}
        />
        <StatCard 
          title="Unpaid Invoices" 
          value={stats.unpaidInvoices} 
          icon={<FileText className="text-[#ef4444]" />} 
          change="5 overdue"
          positive={false}
        />
        <StatCard 
          title="Quotes This Month" 
          value={stats.quotesThisMonth} 
          icon={<FileText className="text-[#10b981]" />} 
          change="+15% vs last month"
          positive={true}
        />
      </div>
      
      {/* Charts and Tables */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {/* Revenue Chart */}
        <div className="p-6 bg-white rounded-lg shadow">
          <h2 className="mb-4 text-lg font-semibold text-gray-700">Monthly Revenue</h2>
          <div className="h-64">
            <RevenueChart data={stats.revenueData} />
          </div>
        </div>
        
        {/* Technician Performance */}
        <div className="p-6 bg-white rounded-lg shadow">
          <h2 className="mb-4 text-lg font-semibold text-gray-700">Technician Performance</h2>
          <div className="space-y-4">
            {stats.repairsByTechnician.map((tech, index) => (
              <div key={index} className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">{tech.name}</span>
                  <span className="text-sm text-gray-500">{tech.completed + tech.inProgress} total tickets</span>
                </div>
                <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div 
                    className="h-full bg-[#10b981]" 
                    style={{ width: `${(tech.completed / (tech.completed + tech.inProgress)) * 100}%` }}
                  ></div>
                </div>
                <div className="flex text-xs text-gray-500 justify-between">
                  <span>{tech.completed} completed</span>
                  <span>{tech.inProgress} in progress</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      
      {/* Recent Tickets and Alerts */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {/* Recent Repair Tickets */}
        <div className="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
          <div className="px-6 py-4 border-b border-gray-200">
            <h2 className="text-lg font-semibold text-gray-700">Recent Repair Tickets</h2>
          </div>
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ticket ID</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Device</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Technician</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {stats.recentTickets.map((ticket, index) => (
                  <tr key={index} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-[#2563eb]">{ticket.id}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{ticket.customer}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{ticket.device}</td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                        ticket.status === 'Completed' ? 'bg-green-100 text-green-800' :
                        ticket.status === 'In Progress' ? 'bg-blue-100 text-blue-800' :
                        'bg-yellow-100 text-yellow-800'
                      }`}>
                        {ticket.status}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{ticket.technician}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="px-6 py-3 border-t border-gray-200 bg-gray-50">
            <a href="#" className="text-sm font-medium text-[#2563eb] hover:text-[#1d4ed8]">View all tickets →</a>
          </div>
        </div>
        
        {/* System Alerts */}
        <div className="bg-white rounded-lg shadow overflow-hidden">
          <div className="px-6 py-4 border-b border-gray-200">
            <h2 className="text-lg font-semibold text-gray-700">System Alerts</h2>
          </div>
          <div className="p-6 space-y-4">
            {stats.alerts.map((alert, index) => (
              <div key={index} className={`p-4 rounded-md ${
                alert.type === 'inventory' ? 'bg-yellow-50 border-l-4 border-yellow-400' :
                alert.type === 'delete' ? 'bg-red-50 border-l-4 border-red-400' :
                'bg-blue-50 border-l-4 border-blue-400'
              }`}>
                <div className="flex">
                  <div className="flex-shrink-0">
                    <AlertTriangle className={`h-5 w-5 ${
                      alert.type === 'inventory' ? 'text-yellow-400' :
                      alert.type === 'delete' ? 'text-red-400' :
                      'text-blue-400'
                    }`} />
                  </div>
                  <div className="ml-3">
                    <p className="text-sm font-medium text-gray-800">{alert.message}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="px-6 py-3 border-t border-gray-200 bg-gray-50">
            <a href="#" className="text-sm font-medium text-[#2563eb] hover:text-[#1d4ed8]">View all alerts →</a>
          </div>
        </div>
      </div>
    </div>
  );
}

// Stat Card Component
function StatCard({ title, value, icon, change, positive }) {
  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-medium text-gray-500">{title}</h3>
        <div className="p-3 bg-gray-100 rounded-full">
          {icon}
        </div>
      </div>
      <div className="mt-6">
        <p className="text-3xl font-semibold">{value}</p>
        <p className={`mt-2 text-sm ${positive ? 'text-green-600' : 'text-red-600'}`}>
          {change}
        </p>
      </div>
    </div>
  );
}

// Revenue Chart Component
function RevenueChart({ data }) {
  return (
    <div className="w-full h-full flex items-end space-x-2">
      {data.map((item, index) => (
        <div key={index} className="flex flex-col items-center flex-1">
          <div 
            className="w-full bg-[#2563eb] hover:bg-[#1d4ed8] rounded-t-md transition-all duration-200"
            style={{ height: `${(item.amount / Math.max(...data.map(d => d.amount))) * 100}%` }}
          ></div>
          <div className="mt-2 text-xs text-gray-500">{item.month}</div>
        </div>
      ))}
    </div>
  );
}

// Placeholder Module Components
function CompanyModule() {
  return (
    <div className="p-8 bg-white rounded-lg shadow">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Company Management</h1>
      <p className="text-gray-600">This module allows you to manage company information, store sensitive credentials, and handle document uploads.</p>
      <div className="mt-8 p-6 bg-gray-50 rounded-md border border-gray-200">
        <p className="text-center text-gray-500">Company management features will be implemented here.</p>
      </div>
    </div>
  );
}

function InvoiceModule() {
  return (
    <div className="p-8 bg-white rounded-lg shadow">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Quotation & Invoice Management</h1>
      <p className="text-gray-600">Create and manage quotations and invoices, with options to convert quotes to invoices and track payment status.</p>
      <div className="mt-8 p-6 bg-gray-50 rounded-md border border-gray-200">
        <p className="text-center text-gray-500">Quotation and invoice features will be implemented here.</p>
      </div>
    </div>
  );
}

function RepairModule() {
  return (
    <div className="p-8 bg-white rounded-lg shadow">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Tech Repair Management</h1>
      <p className="text-gray-600">Manage repair tickets, track customer devices, assign technicians, and handle inventory for repairs.</p>
      <div className="mt-8 p-6 bg-gray-50 rounded-md border border-gray-200">
        <p className="text-center text-gray-500">Repair management features will be implemented here.</p>
      </div>
    </div>
  );
}

function ReportsModule() {
  return (
    <div className="p-8 bg-white rounded-lg shadow">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Reports & Analytics</h1>
      <p className="text-gray-600">Generate and view reports on business performance, revenue, repair statistics, and more.</p>
      <div className="mt-8 p-6 bg-gray-50 rounded-md border border-gray-200">
        <p className="text-center text-gray-500">Reporting features will be implemented here.</p>
      </div>
    </div>
  );
}

function SettingsModule() {
  return (
    <div className="p-8 bg-white rounded-lg shadow">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">System Settings</h1>
      <p className="text-gray-600">Configure system settings, manage user accounts, and customize notification preferences.</p>
      <div className="mt-8 p-6 bg-gray-50 rounded-md border border-gray-200">
        <p className="text-center text-gray-500">Settings features will be implemented here.</p>
      </div>
    </div>
  );
}