import React, { useState, useEffect } from 'react';
import { 
  Bell, Menu, X, Home, Building, FileText, Wrench, Users, LogOut, 
  ChevronDown, ChevronUp, Search, Plus, Edit, Trash, Check, AlertTriangle,
  Eye, Download, Mail, Phone, Calendar, DollarSign, BarChart2, PieChart,
  Clock, ArrowRight, Save, XCircle, CheckCircle, Filter, Printer, ExternalLink
} from 'lucide-react';
import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title } from 'chart.js';
import { Pie, Line, Bar } from 'react-chartjs-2';

// Register ChartJS components
ChartJS.register(
  ArcElement, 
  Tooltip, 
  Legend, 
  CategoryScale, 
  LinearScale, 
  PointElement, 
  LineElement, 
  BarElement, 
  Title
);

// Mock data for demonstration
const mockCompanies = [
  { 
    id: 1, 
    name: "Madonoro Express", 
    status: "Active", 
    registrationNumber: "2020/123456/07", 
    taxNumber: "9876543210",
    address: "123 Main Street, Johannesburg, 2000",
    contactPerson: "John Smith",
    email: "info@madonoro.com",
    phone: "+27 11 123 4567",
    documents: [
      { id: 1, name: "Company Registration", type: "PDF", date: "2022-01-15" },
      { id: 2, name: "Tax Clearance", type: "PDF", date: "2023-03-20" },
      { id: 3, name: "Banking Confirmation", type: "PDF", date: "2023-02-10" }
    ],
    credentials: {
      cipc: { username: "madonoro_cipc", password: "********" },
      sars: { username: "madonoro_sars", password: "********", efiling: "1234567890" },
      csd: { username: "madonoro_csd", password: "********", supplierNumber: "MADONORO001" }
    }
  },
  { 
    id: 2, 
    name: "Tech Solutions Ltd", 
    status: "Active", 
    registrationNumber: "2019/654321/07", 
    taxNumber: "1234567890",
    address: "456 Tech Avenue, Cape Town, 8001",
    contactPerson: "Sarah Johnson",
    email: "info@techsolutions.co.za",
    phone: "+27 21 987 6543",
    documents: [
      { id: 4, name: "Company Registration", type: "PDF", date: "2019-05-22" },
      { id: 5, name: "Tax Clearance", type: "PDF", date: "2023-01-05" }
    ],
    credentials: {
      cipc: { username: "tech_cipc", password: "********" },
      sars: { username: "tech_sars", password: "********", efiling: "0987654321" },
      csd: { username: "tech_csd", password: "********", supplierNumber: "TECHSOL002" }
    }
  },
  { 
    id: 3, 
    name: "Digital Innovations", 
    status: "Inactive", 
    registrationNumber: "2018/112233/07", 
    taxNumber: "2233445566",
    address: "789 Innovation Park, Durban, 4001",
    contactPerson: "Michael Brown",
    email: "contact@digitalinnovations.co.za",
    phone: "+27 31 456 7890",
    documents: [
      { id: 6, name: "Company Registration", type: "PDF", date: "2018-11-10" }
    ],
    credentials: {
      cipc: { username: "digital_cipc", password: "********" },
      sars: { username: "digital_sars", password: "********", efiling: "5566778899" },
      csd: { username: "digital_csd", password: "********", supplierNumber: "DIGINV003" }
    }
  }
];

const mockCustomers = [
  { 
    id: 1, 
    name: "John Doe", 
    email: "john.doe@example.com", 
    phone: "+27 71 234 5678",
    address: "10 Customer Street, Johannesburg, 2000",
    company: "ABC Corporation",
    notes: "Regular customer, prefers email communication"
  },
  { 
    id: 2, 
    name: "Jane Smith", 
    email: "jane.smith@example.com", 
    phone: "+27 82 345 6789",
    address: "20 Client Avenue, Pretoria, 0001",
    company: "XYZ Ltd",
    notes: "VIP customer, requires priority service"
  },
  { 
    id: 3, 
    name: "Bob Johnson", 
    email: "bob.johnson@example.com", 
    phone: "+27 63 456 7890",
    address: "30 User Road, Cape Town, 8001",
    company: "123 Industries",
    notes: "New customer, referred by Jane Smith"
  },
  { 
    id: 4, 
    name: "Alice Williams", 
    email: "alice.williams@example.com", 
    phone: "+27 74 567 8901",
    address: "40 Person Lane, Durban, 4001",
    company: "Williams Enterprises",
    notes: "Prefers phone calls over emails"
  },
  { 
    id: 5, 
    name: "Charlie Brown", 
    email: "charlie.brown@example.com", 
    phone: "+27 85 678 9012",
    address: "50 Individual Boulevard, Bloemfontein, 9301",
    company: "Brown & Associates",
    notes: "Has multiple devices for repair"
  }
];

const mockInventory = [
  { id: 1, name: "Laptop Screen 15.6\"", category: "Parts", quantity: 15, price: 1200.00, threshold: 5 },
  { id: 2, name: "Laptop Battery", category: "Parts", quantity: 20, price: 850.00, threshold: 8 },
  { id: 3, name: "Smartphone Screen Protector", category: "Accessories", quantity: 50, price: 150.00, threshold: 15 },
  { id: 4, name: "Thermal Paste", category: "Consumables", quantity: 30, price: 75.00, threshold: 10 },
  { id: 5, name: "Hard Drive 1TB", category: "Parts", quantity: 12, price: 950.00, threshold: 5 },
  { id: 6, name: "SSD 500GB", category: "Parts", quantity: 8, price: 1500.00, threshold: 3 },
  { id: 7, name: "RAM 8GB DDR4", category: "Parts", quantity: 25, price: 650.00, threshold: 10 },
  { id: 8, name: "Screwdriver Set", category: "Tools", quantity: 5, price: 350.00, threshold: 2 },
  { id: 9, name: "Anti-Static Wrist Strap", category: "Tools", quantity: 7, price: 120.00, threshold: 3 },
  { id: 10, name: "Smartphone Battery", category: "Parts", quantity: 4, price: 450.00, threshold: 5 }
];

const mockRepairTickets = [
  { 
    id: 1, 
    customer: "John Doe", 
    customerId: 1,
    device: "Laptop", 
    brand: "Dell",
    model: "Inspiron 15",
    serialNumber: "DL12345678",
    problem: "Won't boot", 
    description: "Device won't power on at all. No lights, no fan noise.",
    diagnosis: "Faulty power supply or motherboard issue",
    solution: "Replaced power supply board",
    status: "Completed", 
    priority: "Medium",
    assignedTo: "Tech User",
    estimatedCost: 850.00,
    actualCost: 950.00,
    partsUsed: [
      { id: 2, name: "Laptop Battery", quantity: 1, price: 850.00 }
    ],
    laborHours: 1.5,
    laborRate: 350.00,
    createdDate: "2023-05-14",
    completedDate: "2023-05-16",
    notes: [
      { id: 1, date: "2023-05-14", user: "Staff User", text: "Customer dropped off laptop" },
      { id: 2, date: "2023-05-15", user: "Tech User", text: "Diagnosed as power supply issue" },
      { id: 3, date: "2023-05-16", user: "Tech User", text: "Replaced power supply, tested and working" }
    ]
  },
  { 
    id: 2, 
    customer: "Jane Smith", 
    customerId: 2,
    device: "iPhone", 
    brand: "Apple",
    model: "iPhone 13",
    serialNumber: "AP98765432",
    problem: "Cracked screen", 
    description: "Screen is cracked in the bottom right corner. Touch still works.",
    diagnosis: "Physical damage to screen, needs replacement",
    solution: "",
    status: "In Progress", 
    priority: "High",
    assignedTo: "Tech User",
    estimatedCost: 1500.00,
    actualCost: 0,
    partsUsed: [],
    laborHours: 0,
    laborRate: 350.00,
    createdDate: "2023-05-16",
    completedDate: "",
    notes: [
      { id: 4, date: "2023-05-16", user: "Staff User", text: "Customer brought in iPhone with cracked screen" },
      { id: 5, date: "2023-05-16", user: "Tech User", text: "Ordered replacement screen, ETA 2 days" }
    ]
  },
  { 
    id: 3, 
    customer: "Bob Johnson", 
    customerId: 3,
    device: "Desktop PC", 
    brand: "Custom Build",
    model: "N/A",
    serialNumber: "N/A",
    problem: "Blue screen error", 
    description: "Computer randomly shows blue screen with error code MEMORY_MANAGEMENT",
    diagnosis: "Possible RAM issue or driver conflict",
    solution: "",
    status: "Pending", 
    priority: "Low",
    assignedTo: "",
    estimatedCost: 650.00,
    actualCost: 0,
    partsUsed: [],
    laborHours: 0,
    laborRate: 350.00,
    createdDate: "2023-05-15",
    completedDate: "",
    notes: [
      { id: 6, date: "2023-05-15", user: "Staff User", text: "Customer reported blue screen errors" }
    ]
  },
  { 
    id: 4, 
    customer: "Alice Williams", 
    customerId: 4,
    device: "Printer", 
    brand: "HP",
    model: "LaserJet Pro",
    serialNumber: "HP45678901",
    problem: "Paper jam", 
    description: "Frequent paper jams, error message on display",
    diagnosis: "Worn roller assembly",
    solution: "",
    status: "Pending", 
    priority: "Medium",
    assignedTo: "",
    estimatedCost: 450.00,
    actualCost: 0,
    partsUsed: [],
    laborHours: 0,
    laborRate: 350.00,
    createdDate: "2023-05-17",
    completedDate: "",
    notes: [
      { id: 7, date: "2023-05-17", user: "Staff User", text: "Customer dropped off printer" }
    ]
  },
  { 
    id: 5, 
    customer: "Charlie Brown", 
    customerId: 5,
    device: "Tablet", 
    brand: "Samsung",
    model: "Galaxy Tab S7",
    serialNumber: "SG12345678",
    problem: "Not charging", 
    description: "Device won't charge with any cable or charger",
    diagnosis: "Damaged charging port",
    solution: "Replaced charging port assembly",
    status: "Completed", 
    priority: "High",
    assignedTo: "Tech User",
    estimatedCost: 750.00,
    actualCost: 750.00,
    partsUsed: [],
    laborHours: 2,
    laborRate: 350.00,
    createdDate: "2023-05-13",
    completedDate: "2023-05-15",
    notes: [
      { id: 8, date: "2023-05-13", user: "Staff User", text: "Customer reported charging issues" },
      { id: 9, date: "2023-05-14", user: "Tech User", text: "Confirmed charging port damage" },
      { id: 10, date: "2023-05-15", user: "Tech User", text: "Replaced charging port, tested and working" }
    ]
  }
];

const mockInvoices = [
  { 
    id: 1, 
    invoiceNumber: "INV-0001",
    client: "ABC Corp", 
    clientId: 1,
    amount: 1250.00, 
    tax: 187.50,
    total: 1437.50,
    status: "Paid", 
    date: "2023-05-10",
    dueDate: "2023-05-25",
    paidDate: "2023-05-15",
    items: [
      { id: 1, description: "Laptop Repair Service", quantity: 1, unitPrice: 850.00, total: 850.00 },
      { id: 2, description: "Replacement Battery", quantity: 1, unitPrice: 400.00, total: 400.00 }
    ],
    notes: "Payment received via bank transfer",
    terms: "Payment due within 15 days of invoice date"
  },
  { 
    id: 2, 
    invoiceNumber: "INV-0002",
    client: "XYZ Ltd", 
    clientId: 2,
    amount: 3450.75, 
    tax: 517.61,
    total: 3968.36,
    status: "Unpaid", 
    date: "2023-05-12",
    dueDate: "2023-05-27",
    paidDate: "",
    items: [
      { id: 3, description: "Network Setup", quantity: 1, unitPrice: 2500.00, total: 2500.00 },
      { id: 4, description: "Router Configuration", quantity: 3, unitPrice: 316.92, total: 950.75 }
    ],
    notes: "Client requested itemized receipt",
    terms: "Payment due within 15 days of invoice date"
  },
  { 
    id: 3, 
    invoiceNumber: "INV-0003",
    client: "123 Industries", 
    clientId: 3,
    amount: 875.50, 
    tax: 131.33,
    total: 1006.83,
    status: "Partial", 
    date: "2023-05-08",
    dueDate: "2023-05-23",
    paidDate: "",
    items: [
      { id: 5, description: "Computer Diagnostics", quantity: 1, unitPrice: 350.00, total: 350.00 },
      { id: 6, description: "Virus Removal", quantity: 1, unitPrice: 525.50, total: 525.50 }
    ],
    notes: "Partial payment of R500 received on 2023-05-15",
    terms: "Payment due within 15 days of invoice date"
  },
  { 
    id: 4, 
    invoiceNumber: "INV-0004",
    client: "Williams Enterprises", 
    clientId: 4,
    amount: 1750.00, 
    tax: 262.50,
    total: 2012.50,
    status: "Unpaid", 
    date: "2023-05-14",
    dueDate: "2023-05-29",
    paidDate: "",
    items: [
      { id: 7, description: "Printer Repair", quantity: 1, unitPrice: 450.00, total: 450.00 },
      { id: 8, description: "Annual Maintenance Contract", quantity: 1, unitPrice: 1300.00, total: 1300.00 }
    ],
    notes: "",
    terms: "Payment due within 15 days of invoice date"
  },
  { 
    id: 5, 
    invoiceNumber: "INV-0005",
    client: "Brown & Associates", 
    clientId: 5,
    amount: 2250.00, 
    tax: 337.50,
    total: 2587.50,
    status: "Paid", 
    date: "2023-05-05",
    dueDate: "2023-05-20",
    paidDate: "2023-05-18",
    items: [
      { id: 9, description: "Tablet Repair", quantity: 1, unitPrice: 750.00, total: 750.00 },
      { id: 10, description: "Data Recovery Service", quantity: 1, unitPrice: 1500.00, total: 1500.00 }
    ],
    notes: "Payment received via credit card",
    terms: "Payment due within 15 days of invoice date"
  }
];

const mockQuotations = [
  { 
    id: 1, 
    quoteNumber: "Q-0001",
    client: "DEF Solutions", 
    clientId: 1,
    amount: 2750.00, 
    tax: 412.50,
    total: 3162.50,
    status: "Pending", 
    date: "2023-05-11",
    validUntil: "2023-06-11",
    items: [
      { id: 1, description: "Server Maintenance", quantity: 1, unitPrice: 1500.00, total: 1500.00 },
      { id: 2, description: "Backup Solution Setup", quantity: 1, unitPrice: 1250.00, total: 1250.00 }
    ],
    notes: "Quote includes labor and parts",
    terms: "Quote valid for 30 days"
  },
  { 
    id: 2, 
    quoteNumber: "Q-0002",
    client: "GHI Services", 
    clientId: 2,
    amount: 1890.25, 
    tax: 283.54,
    total: 2173.79,
    status: "Accepted", 
    date: "2023-05-13",
    validUntil: "2023-06-13",
    items: [
      { id: 3, description: "Website Development", quantity: 1, unitPrice: 1500.00, total: 1500.00 },
      { id: 4, description: "Domain Registration", quantity: 1, unitPrice: 390.25, total: 390.25 }
    ],
    notes: "Client accepted quote on 2023-05-15",
    terms: "Quote valid for 30 days"
  },
  { 
    id: 3, 
    quoteNumber: "Q-0003",
    client: "JKL Corp", 
    clientId: 3,
    amount: 4320.00, 
    tax: 648.00,
    total: 4968.00,
    status: "Rejected", 
    date: "2023-05-09",
    validUntil: "2023-06-09",
    items: [
      { id: 5, description: "Office Network Setup", quantity: 1, unitPrice: 3500.00, total: 3500.00 },
      { id: 6, description: "Security Camera Installation", quantity: 1, unitPrice: 820.00, total: 820.00 }
    ],
    notes: "Client rejected quote on 2023-05-12 - too expensive",
    terms: "Quote valid for 30 days"
  },
  { 
    id: 4, 
    quoteNumber: "Q-0004",
    client: "MNO Enterprises", 
    clientId: 4,
    amount: 1250.00, 
    tax: 187.50,
    total: 1437.50,
    status: "Pending", 
    date: "2023-05-16",
    validUntil: "2023-06-16",
    items: [
      { id: 7, description: "Computer Repair", quantity: 1, unitPrice: 750.00, total: 750.00 },
      { id: 8, description: "Software Installation", quantity: 1, unitPrice: 500.00, total: 500.00 }
    ],
    notes: "Awaiting client response",
    terms: "Quote valid for 30 days"
  },
  { 
    id: 5, 
    quoteNumber: "Q-0005",
    client: "PQR Ltd", 
    clientId: 5,
    amount: 3750.00, 
    tax: 562.50,
    total: 4312.50,
    status: "Accepted", 
    date: "2023-05-08",
    validUntil: "2023-06-08",
    items: [
      { id: 9, description: "Annual IT Support Contract", quantity: 1, unitPrice: 3750.00, total: 3750.00 }
    ],
    notes: "Client accepted quote on 2023-05-10",
    terms: "Quote valid for 30 days"
  }
];

// Dashboard chart data
const revenueData = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  datasets: [
    {
      label: 'Monthly Revenue',
      data: [12500, 15000, 18750, 16200, 21000, 19500],
      borderColor: 'rgb(229, 62, 62)',
      backgroundColor: 'rgba(229, 62, 62, 0.5)',
    },
  ],
};

const repairStatusData = {
  labels: ['Pending', 'In Progress', 'Completed'],
  datasets: [
    {
      label: 'Repair Status',
      data: [8, 5, 15],
      backgroundColor: [
        'rgba(255, 206, 86, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(75, 192, 192, 0.6)',
      ],
      borderColor: [
        'rgba(255, 206, 86, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(75, 192, 192, 1)',
      ],
      borderWidth: 1,
    },
  ],
};

const quotationConversionData = {
  labels: ['Accepted', 'Rejected', 'Pending'],
  datasets: [
    {
      label: 'Quotation Status',
      data: [12, 5, 8],
      backgroundColor: [
        'rgba(75, 192, 192, 0.6)',
        'rgba(255, 99, 132, 0.6)',
        'rgba(255, 206, 86, 0.6)',
      ],
      borderColor: [
        'rgba(75, 192, 192, 1)',
        'rgba(255, 99, 132, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1,
    },
  ],
};

// Mock API service
const ApiService = {
  login: (username, password) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (username === 'admin' && password === 'password') {
          resolve({ name: 'Admin User', role: 'admin', email: 'admin@madonoro.com' });
        } else if (username === 'staff' && password === 'password') {
          resolve({ name: 'Staff User', role: 'staff', email: 'staff@madonoro.com' });
        } else if (username === 'tech' && password === 'password') {
          resolve({ name: 'Tech User', role: 'technician', email: 'tech@madonoro.com' });
        } else if (username === 'accounting' && password === 'password') {
          resolve({ name: 'Accounting User', role: 'accounting', email: 'accounting@madonoro.com' });
        } else {
          reject(new Error('Invalid username or password'));
        }
      }, 1000);
    });
  },
  
  getCompanies: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(mockCompanies);
      }, 500);
    });
  },
  
  getCompanyById: (id) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const company = mockCompanies.find(c => c.id === id);
        if (company) {
          resolve(company);
        } else {
          reject(new Error('Company not found'));
        }
      }, 500);
    });
  },
  
  createCompany: (company) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        const newCompany = {
          id: mockCompanies.length + 1,
          ...company,
          documents: [],
          credentials: {
            cipc: { username: "", password: "" },
            sars: { username: "", password: "", efiling: "" },
            csd: { username: "", password: "", supplierNumber: "" }
          }
        };
        mockCompanies.push(newCompany);
        resolve(newCompany);
      }, 500);
    });
  },
  
  updateCompany: (id, company) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const index = mockCompanies.findIndex(c => c.id === id);
        if (index !== -1) {
          mockCompanies[index] = { ...mockCompanies[index], ...company };
          resolve(mockCompanies[index]);
        } else {
          reject(new Error('Company not found'));
        }
      }, 500);
    });
  },
  
  deleteCompany: (id) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const index = mockCompanies.findIndex(c => c.id === id);
        if (index !== -1) {
          mockCompanies.splice(index, 1);
          resolve({ success: true });
        } else {
          reject(new Error('Company not found'));
        }
      }, 500);
    });
  },
  
  getCustomers: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(mockCustomers);
      }, 500);
    });
  },
  
  getRepairTickets: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(mockRepairTickets);
      }, 500);
    });
  },
  
  getRepairTicketById: (id) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const ticket = mockRepairTickets.find(t => t.id === id);
        if (ticket) {
          resolve(ticket);
        } else {
          reject(new Error('Repair ticket not found'));
        }
      }, 500);
    });
  },
  
  createRepairTicket: (ticket) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        const newTicket = {
          id: mockRepairTickets.length + 1,
          ...ticket,
          createdDate: new Date().toISOString().split('T')[0],
          completedDate: "",
          notes: [
            { 
              id: Math.max(...mockRepairTickets.flatMap(t => t.notes.map(n => n.id)), 0) + 1, 
              date: new Date().toISOString().split('T')[0], 
              user: "System", 
              text: "Ticket created" 
            }
          ]
        };
        mockRepairTickets.push(newTicket);
        resolve(newTicket);
      }, 500);
    });
  },
  
  updateRepairTicket: (id, ticket) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const index = mockRepairTickets.findIndex(t => t.id === id);
        if (index !== -1) {
          mockRepairTickets[index] = { ...mockRepairTickets[index], ...ticket };
          resolve(mockRepairTickets[index]);
        } else {
          reject(new Error('Repair ticket not found'));
        }
      }, 500);
    });
  },
  
  getInvoices: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(mockInvoices);
      }, 500);
    });
  },
  
  getInvoiceById: (id) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const invoice = mockInvoices.find(i => i.id === id);
        if (invoice) {
          resolve(invoice);
        } else {
          reject(new Error('Invoice not found'));
        }
      }, 500);
    });
  },
  
  createInvoice: (invoice) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        const newInvoice = {
          id: mockInvoices.length + 1,
          invoiceNumber: `INV-${(mockInvoices.length + 1).toString().padStart(4, '0')}`,
          ...invoice,
          date: new Date().toISOString().split('T')[0]
        };
        mockInvoices.push(newInvoice);
        resolve(newInvoice);
      }, 500);
    });
  },
  
  updateInvoice: (id, invoice) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const index = mockInvoices.findIndex(i => i.id === id);
        if (index !== -1) {
          mockInvoices[index] = { ...mockInvoices[index], ...invoice };
          resolve(mockInvoices[index]);
        } else {
          reject(new Error('Invoice not found'));
        }
      }, 500);
    });
  },
  
  getQuotations: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(mockQuotations);
      }, 500);
    });
  },
  
  getQuotationById: (id) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const quotation = mockQuotations.find(q => q.id === id);
        if (quotation) {
          resolve(quotation);
        } else {
          reject(new Error('Quotation not found'));
        }
      }, 500);
    });
  },
  
  createQuotation: (quotation) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        const newQuotation = {
          id: mockQuotations.length + 1,
          quoteNumber: `Q-${(mockQuotations.length + 1).toString().padStart(4, '0')}`,
          ...quotation,
          date: new Date().toISOString().split('T')[0],
          validUntil: new Date(new Date().setDate(new Date().getDate() + 30)).toISOString().split('T')[0]
        };
        mockQuotations.push(newQuotation);
        resolve(newQuotation);
      }, 500);
    });
  },
  
  updateQuotation: (id, quotation) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const index = mockQuotations.findIndex(q => q.id === id);
        if (index !== -1) {
          mockQuotations[index] = { ...mockQuotations[index], ...quotation };
          resolve(mockQuotations[index]);
        } else {
          reject(new Error('Quotation not found'));
        }
      }, 500);
    });
  },
  
  convertQuotationToInvoice: (id) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const quotation = mockQuotations.find(q => q.id === id);
        if (quotation) {
          const newInvoice = {
            id: mockInvoices.length + 1,
            invoiceNumber: `INV-${(mockInvoices.length + 1).toString().padStart(4, '0')}`,
            client: quotation.client,
            clientId: quotation.clientId,
            amount: quotation.amount,
            tax: quotation.tax,
            total: quotation.total,
            status: "Unpaid",
            date: new Date().toISOString().split('T')[0],
            dueDate: new Date(new Date().setDate(new Date().getDate() + 15)).toISOString().split('T')[0],
            paidDate: "",
            items: quotation.items,
            notes: `Generated from quotation ${quotation.quoteNumber}`,
            terms: "Payment due within 15 days of invoice date"
          };
          mockInvoices.push(newInvoice);
          
          // Update quotation status
          const index = mockQuotations.findIndex(q => q.id === id);
          mockQuotations[index] = { ...mockQuotations[index], status: "Accepted" };
          
          resolve(newInvoice);
        } else {
          reject(new Error('Quotation not found'));
        }
      }, 500);
    });
  },
  
  getInventory: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(mockInventory);
      }, 500);
    });
  },
  
  updateInventoryItem: (id, item) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const index = mockInventory.findIndex(i => i.id === id);
        if (index !== -1) {
          mockInventory[index] = { ...mockInventory[index], ...item };
          resolve(mockInventory[index]);
        } else {
          reject(new Error('Inventory item not found'));
        }
      }, 500);
    });
  },
  
  getDashboardStats: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          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 === "Partial").length,
          quotesThisMonth: mockQuotations.filter(q => {
            const quoteDate = new Date(q.date);
            const currentDate = new Date();
            return quoteDate.getMonth() === currentDate.getMonth() && 
                   quoteDate.getFullYear() === currentDate.getFullYear();
          }).length,
          revenueData,
          repairStatusData,
          quotationConversionData,
          lowStockItems: mockInventory.filter(i => i.quantity <= i.threshold).length
        });
      }, 500);
    });
  }
};

// Utility functions
const formatCurrency = (amount) => {
  return new Intl.NumberFormat('en-ZA', { style: 'currency', currency: 'ZAR' }).format(amount);
};

const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString('en-ZA');
};

// Toast notification component
const Toast = ({ message, type, onClose }) => {
  const [visible, setVisible] = useState(true);
  
  useEffect(() => {
    const timer = setTimeout(() => {
      setVisible(false);
      setTimeout(onClose, 300);
    }, 5000);
    
    return () => clearTimeout(timer);
  }, [onClose]);
  
  return (
    <div className={`fixed top-4 right-4 z-50 transition-opacity duration-300 ${visible ? 'opacity-100' : 'opacity-0'}`}>
      <div className={`rounded-md p-4 shadow-md ${
        type === 'success' ? 'bg-green-50 border-l-4 border-green-500' :
        type === 'error' ? 'bg-red-50 border-l-4 border-red-500' :
        'bg-blue-50 border-l-4 border-blue-500'
      }`}>
        <div className="flex items-center">
          <div className="flex-shrink-0">
            {type === 'success' ? (
              <CheckCircle className="h-5 w-5 text-green-500" />
            ) : type === 'error' ? (
              <XCircle className="h-5 w-5 text-red-500" />
            ) : (
              <Bell className="h-5 w-5 text-blue-500" />
            )}
          </div>
          <div className="ml-3">
            <p className={`text-sm font-medium ${
              type === 'success' ? 'text-green-800' :
              type === 'error' ? 'text-red-800' :
              'text-blue-800'
            }`}>
              {message}
            </p>
          </div>
          <div className="ml-auto pl-3">
            <div className="-mx-1.5 -my-1.5">
              <button
                onClick={() => {
                  setVisible(false);
                  setTimeout(onClose, 300);
                }}
                className={`inline-flex rounded-md p-1.5 ${
                  type === 'success' ? 'text-green-500 hover:bg-green-100' :
                  type === 'error' ? 'text-red-500 hover:bg-red-100' :
                  'text-blue-500 hover:bg-blue-100'
                } focus:outline-none`}
              >
                <X className="h-4 w-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// Modal component
const Modal = ({ title, children, isOpen, onClose, size = 'md' }) => {
  if (!isOpen) return null;
  
  const sizeClasses = {
    sm: 'max-w-md',
    md: 'max-w-2xl',
    lg: 'max-w-4xl',
    xl: 'max-w-6xl'
  };
  
  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div className="fixed inset-0 transition-opacity" onClick={onClose}>
          <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span className="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        <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 ${sizeClasses[size]} w-full`}>
          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div className="flex justify-between items-center pb-3 border-b border-gray-200 mb-4">
              <h3 className="text-lg leading-6 font-medium text-gray-900">{title}</h3>
              <button
                onClick={onClose}
                className="text-gray-400 hover:text-gray-500 focus:outline-none"
              >
                <X className="h-6 w-6" />
              </button>
            </div>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
};

// Loading spinner component
const LoadingSpinner = ({ size = 'md', color = 'red' }) => {
  const sizeClasses = {
    sm: 'h-4 w-4',
    md: 'h-8 w-8',
    lg: 'h-12 w-12'
  };
  
  const colorClasses = {
    red: 'text-red-600',
    blue: 'text-blue-600',
    green: 'text-green-600',
    gray: 'text-gray-600'
  };
  
  return (
    <div className="flex justify-center items-center">
      <svg className={`animate-spin ${sizeClasses[size]} ${colorClasses[color]}`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
    </div>
  );
};

// Empty state component
const EmptyState = ({ title, description, icon: Icon, action }) => {
  return (
    <div className="text-center py-12 px-4 sm:px-6 lg:px-8">
      <div className="rounded-full bg-gray-100 p-3 mx-auto w-12 h-12 flex items-center justify-center">
        <Icon className="h-6 w-6 text-gray-400" />
      </div>
      <h3 className="mt-2 text-sm font-medium text-gray-900">{title}</h3>
      <p className="mt-1 text-sm text-gray-500">{description}</p>
      {action && (
        <div className="mt-6">
          <button
            type="button"
            onClick={action.onClick}
            className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
          >
            <Plus className="-ml-1 mr-2 h-5 w-5" />
            {action.text}
          </button>
        </div>
      )}
    </div>
  );
};

// Main App Component
export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [activeModule, setActiveModule] = useState('dashboard');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [toasts, setToasts] = useState([]);

  // Add toast notification
  const addToast = (message, type = 'info') => {
    const id = Date.now();
    setToasts(prevToasts => [...prevToasts, { id, message, type }]);
  };

  // Remove toast notification
  const removeToast = (id) => {
    setToasts(prevToasts => prevToasts.filter(toast => toast.id !== id));
  };

  // Login handler
  const handleLogin = async (username, password) => {
    setLoading(true);
    try {
      const userData = await ApiService.login(username, password);
      setCurrentUser(userData);
      setIsLoggedIn(true);
      addToast(`Welcome, ${userData.name}!`, 'success');
    } catch (error) {
      addToast(error.message, 'error');
    } finally {
      setLoading(false);
    }
  };

  // Logout handler
  const handleLogout = () => {
    setCurrentUser(null);
    setIsLoggedIn(false);
    addToast('You have been logged out.', 'info');
  };

  return (
    <div className="min-h-screen bg-gray-100 font-sans">
      {/* Toast notifications */}
      <div className="fixed top-4 right-4 z-50 space-y-4">
        {toasts.map(toast => (
          <Toast
            key={toast.id}
            message={toast.message}
            type={toast.type}
            onClose={() => removeToast(toast.id)}
          />
        ))}
      </div>
      
      {!isLoggedIn ? (
        <LoginPage onLogin={handleLogin} loading={loading} />
      ) : (
        <div className="flex h-screen overflow-hidden">
          {/* Sidebar */}
          <Sidebar 
            isOpen={sidebarOpen} 
            setIsOpen={setSidebarOpen}
            activeModule={activeModule}
            setActiveModule={setActiveModule}
            onLogout={handleLogout}
            mobileMenuOpen={mobileMenuOpen}
            setMobileMenuOpen={setMobileMenuOpen}
            userRole={currentUser?.role}
          />
          
          {/* Main Content */}
          <div className="flex-1 overflow-auto">
            <Header 
              setSidebarOpen={setSidebarOpen} 
              sidebarOpen={sidebarOpen} 
              user={currentUser}
              setMobileMenuOpen={setMobileMenuOpen}
              addToast={addToast}
            />
            
            <main className="p-6">
              {activeModule === 'dashboard' && <Dashboard addToast={addToast} />}
              {activeModule === 'companies' && <CompanyManagement addToast={addToast} />}
              {activeModule === 'quotations' && <QuotationManagement addToast={addToast} />}
              {activeModule === 'invoices' && <InvoiceManagement addToast={addToast} />}
              {activeModule === 'repairs' && <RepairManagement addToast={addToast} />}
              {activeModule === 'customers' && <CustomerManagement addToast={addToast} />}
            </main>
          </div>
        </div>
      )}
    </div>
  );
}

// Login Page Component
function LoginPage({ onLogin, loading }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!username || !password) {
      setError('Please enter both username and password');
      return;
    }
    
    setError('');
    onLogin(username, password);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div>
          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
            Madonoro Express Services
          </h2>
          <h3 className="mt-2 text-center text-xl font-medium text-red-600">
            Business Management System
          </h3>
        </div>
        <div className="mt-8 bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
          <form className="space-y-6" onSubmit={handleSubmit}>
            {error && (
              <div className="bg-red-50 border-l-4 border-red-600 p-4 mb-4">
                <div className="flex">
                  <div className="flex-shrink-0">
                    <AlertTriangle className="h-5 w-5 text-red-600" />
                  </div>
                  <div className="ml-3">
                    <p className="text-sm text-red-600">{error}</p>
                  </div>
                </div>
              </div>
            )}
            <div>
              <label htmlFor="username" className="block text-sm font-medium text-gray-700">
                Username
              </label>
              <div className="mt-1">
                <input
                  id="username"
                  name="username"
                  type="text"
                  autoComplete="username"
                  required
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm"
                  disabled={loading}
                />
              </div>
            </div>

            <div>
              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                Password
              </label>
              <div className="mt-1">
                <input
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="current-password"
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm"
                  disabled={loading}
                />
              </div>
            </div>

            <div>
              <button
                type="submit"
                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50"
                disabled={loading}
              >
                {loading ? (
                  <>
                    <LoadingSpinner size="sm" color="white" />
                    <span className="ml-2">Signing in...</span>
                  </>
                ) : (
                  'Sign in'
                )}
              </button>
            </div>
          </form>
          
          <div className="mt-6">
            <div className="relative">
              <div className="absolute inset-0 flex items-center">
                <div className="w-full border-t border-gray-300"></div>
              </div>
              <div className="relative flex justify-center text-sm">
                <span className="px-2 bg-white text-gray-500">
                  Demo Credentials
                </span>
              </div>
            </div>
            <div className="mt-4 grid grid-cols-2 gap-3 text-xs text-gray-500">
              <div>
                <p>Admin: admin / password</p>
                <p>Staff: staff / password</p>
              </div>
              <div>
                <p>Tech: tech / password</p>
                <p>Accounting: accounting / password</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Sidebar Component
function Sidebar({ isOpen, setIsOpen, activeModule, setActiveModule, onLogout, mobileMenuOpen, setMobileMenuOpen, userRole }) {
  const navItems = [
    { id: 'dashboard', name: 'Dashboard', icon: Home, roles: ['admin', 'staff', 'technician', 'accounting'] },
    { id: 'companies', name: 'Companies', icon: Building, roles: ['admin', 'staff'] },
    { id: 'quotations', name: 'Quotations', icon: FileText, roles: ['admin', 'staff', 'accounting'] },
    { id: 'invoices', name: 'Invoices', icon: FileText, roles: ['admin', 'staff', 'accounting'] },
    { id: 'repairs', name: 'Repair Tickets', icon: Wrench, roles: ['admin', 'staff', 'technician'] },
    { id: 'customers', name: 'Customers', icon: Users, roles: ['admin', 'staff', 'technician'] },
  ];

  // Filter nav items based on user role
  const filteredNavItems = navItems.filter(item => item.roles.includes(userRole));

  return (
    <>
      {/* Desktop sidebar */}
      <div className={`hidden md:flex md:flex-shrink-0 transition-all duration-300 ${isOpen ? 'md:w-64' : 'md:w-20'}`}>
        <div className="flex flex-col w-full">
          {/* Sidebar header */}
          <div className="flex items-center h-16 flex-shrink-0 px-4 bg-red-700">
            <div className={`flex items-center ${isOpen ? 'justify-between w-full' : 'justify-center'}`}>
              {isOpen && (
                <div className="text-white font-bold">
                  <div className="text-lg">Madonoro</div>
                  <div className="text-xs">Express Services</div>
                </div>
              )}
              <button
                onClick={() => setIsOpen(!isOpen)}
                className="p-1 rounded-full text-white hover:bg-red-600 focus:outline-none"
              >
                {isOpen ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
              </button>
            </div>
          </div>
          
          {/* Sidebar content */}
          <div className="h-0 flex-1 flex flex-col overflow-y-auto bg-black">
            <nav className="flex-1 px-2 py-4 space-y-1">
              {filteredNavItems.map((item) => (
                <button
                  key={item.id}
                  onClick={() => setActiveModule(item.id)}
                  className={`${
                    activeModule === item.id
                      ? 'bg-red-700 text-white'
                      : 'text-gray-300 hover:bg-red-600 hover:text-white'
                  } group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full ${
                    isOpen ? 'justify-start' : 'justify-center'
                  }`}
                >
                  <item.icon className={`${isOpen ? 'mr-3' : 'mx-auto'} h-6 w-6`} />
                  {isOpen && <span>{item.name}</span>}
                </button>
              ))}
            </nav>
            
            {/* Logout button */}
            <div className="p-4">
              <button
                onClick={onLogout}
                className="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-300 hover:bg-red-600 hover:text-white w-full"
              >
                <LogOut className={`${isOpen ? 'mr-3' : 'mx-auto'} h-6 w-6`} />
                {isOpen && <span>Logout</span>}
              </button>
            </div>
          </div>
        </div>
      </div>
      
      {/* Mobile menu */}
      <div className={`md:hidden fixed inset-0 z-40 ${mobileMenuOpen ? 'block' : 'hidden'}`}>
        <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setMobileMenuOpen(false)}></div>
        <div className="fixed inset-y-0 left-0 flex flex-col z-40 w-full max-w-xs bg-black">
          <div className="h-16 flex items-center justify-between px-4 bg-red-700">
            <div className="text-white font-bold">
              <div className="text-lg">Madonoro</div>
              <div className="text-xs">Express Services</div>
            </div>
            <button
              onClick={() => setMobileMenuOpen(false)}
              className="p-1 rounded-full text-white hover:bg-red-600 focus:outline-none"
            >
              <X size={24} />
            </button>
          </div>
          <div className="flex-1 overflow-y-auto">
            <nav className="px-2 py-4 space-y-1">
              {filteredNavItems.map((item) => (
                <button
                  key={item.id}
                  onClick={() => {
                    setActiveModule(item.id);
                    setMobileMenuOpen(false);
                  }}
                  className={`${
                    activeModule === item.id
                      ? 'bg-red-700 text-white'
                      : 'text-gray-300 hover:bg-red-600 hover:text-white'
                  } group flex items-center px-2 py-2 text-base font-medium rounded-md w-full`}
                >
                  <item.icon className="mr-3 h-6 w-6" />
                  <span>{item.name}</span>
                </button>
              ))}
            </nav>
            <div className="p-4">
              <button
                onClick={onLogout}
                className="flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-300 hover:bg-red-600 hover:text-white w-full"
              >
                <LogOut className="mr-3 h-6 w-6" />
                <span>Logout</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// Header Component
function Header({ setSidebarOpen, sidebarOpen, user, setMobileMenuOpen, addToast }) {
  const [notifications, setNotifications] = useState([
    { id: 1, message: "New repair ticket assigned to you", time: "5 minutes ago", read: false },
    { id: 2, message: "Invoice #INV-0002 is overdue", time: "1 hour ago", read: false },
    { id: 3, message: "Low inventory alert: Laptop Battery", time: "3 hours ago", read: true }
  ]);
  const [showNotifications, setShowNotifications] = useState(false);
  
  const unreadCount = notifications.filter(n => !n.read).length;
  
  const markAsRead = (id) => {
    setNotifications(prevNotifications => 
      prevNotifications.map(n => 
        n.id === id ? { ...n, read: true } : n
      )
    );
  };
  
  const markAllAsRead = () => {
    setNotifications(prevNotifications => 
      prevNotifications.map(n => ({ ...n, read: true }))
    );
    addToast('All notifications marked as read', 'success');
  };
  
  return (
    <header className="bg-white shadow-sm z-10">
      <div className="px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex">
            <button
              type="button"
              className="md:hidden px-4 text-gray-500 focus:outline-none"
              onClick={() => setMobileMenuOpen(true)}
            >
              <Menu className="h-6 w-6" />
            </button>
          </div>
          <div className="flex items-center">
            <div className="relative">
              <button
                type="button"
                className="p-1 text-gray-400 hover:text-gray-500 focus:outline-none"
                onClick={() => setShowNotifications(!showNotifications)}
              >
                <Bell className="h-6 w-6" />
                {unreadCount > 0 && (
                  <span className="absolute top-0 right-0 block h-4 w-4 rounded-full bg-red-600 text-xs text-white text-center">
                    {unreadCount}
                  </span>
                )}
              </button>
              
              {/* Notifications dropdown */}
              {showNotifications && (
                <div className="origin-top-right absolute right-0 mt-2 w-80 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
                  <div className="py-1">
                    <div className="px-4 py-2 border-b border-gray-200">
                      <div className="flex justify-between items-center">
                        <h3 className="text-sm font-medium text-gray-900">Notifications</h3>
                        {unreadCount > 0 && (
                          <button
                            onClick={markAllAsRead}
                            className="text-xs text-red-600 hover:text-red-800"
                          >
                            Mark all as read
                          </button>
                        )}
                      </div>
                    </div>
                    <div className="max-h-60 overflow-y-auto">
                      {notifications.length === 0 ? (
                        <div className="px-4 py-3 text-sm text-gray-500">
                          No notifications
                        </div>
                      ) : (
                        notifications.map((notification) => (
                          <div
                            key={notification.id}
                            className={`px-4 py-3 hover:bg-gray-50 ${notification.read ? '' : 'bg-red-50'}`}
                            onClick={() => markAsRead(notification.id)}
                          >
                            <div className="flex">
                              <div className="flex-1 min-w-0">
                                <p className="text-sm font-medium text-gray-900">
                                  {notification.message}
                                </p>
                                <p className="text-xs text-gray-500">
                                  {notification.time}
                                </p>
                              </div>
                              {!notification.read && (
                                <div className="ml-2 flex-shrink-0">
                                  <span className="inline-block h-2 w-2 rounded-full bg-red-600"></span>
                                </div>
                              )}
                            </div>
                          </div>
                        ))
                      )}
                    </div>
                    <div className="border-t border-gray-200 px-4 py-2">
                      <button className="text-xs text-red-600 hover:text-red-800">
                        View all notifications
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </div>
            <div className="ml-4 flex items-center md:ml-6">
              <div className="ml-3 relative">
                <div className="flex items-center">
                  <div className="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 font-medium">
                    {user?.name?.charAt(0)}
                  </div>
                  <div className="ml-2 hidden md:block">
                    <div className="text-sm font-medium text-gray-700">{user?.name}</div>
                    <div className="text-xs text-gray-500 capitalize">{user?.role}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

// Dashboard Component
function Dashboard({ addToast }) {
  const [stats, setStats] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const fetchDashboardData = async () => {
      setLoading(true);
      try {
        const data = await ApiService.getDashboardStats();
        setStats(data);
      } catch (error) {
        addToast('Failed to load dashboard data', 'error');
      } finally {
        setLoading(false);
      }
    };
    
    fetchDashboardData();
  }, [addToast]);
  
  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <LoadingSpinner size="lg" />
      </div>
    );
  }
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-gray-900">Dashboard</h1>
        <div className="flex space-x-3">
          <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
            <Plus className="h-4 w-4 mr-2" />
            New Ticket
          </button>
          <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
            <Plus className="h-4 w-4 mr-2" />
            New Quote
          </button>
        </div>
      </div>
      
      {/* Stats Cards */}
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0 bg-red-100 rounded-md p-3">
                <Building className="h-6 w-6 text-red-600" />
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Active Companies</dt>
                  <dd>
                    <div className="text-lg font-medium text-gray-900">{stats.activeCompanies}</div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
        
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0 bg-red-100 rounded-md p-3">
                <Wrench className="h-6 w-6 text-red-600" />
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Pending Repairs</dt>
                  <dd>
                    <div className="text-lg font-medium text-gray-900">{stats.pendingRepairs}</div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
        
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0 bg-red-100 rounded-md p-3">
                <FileText className="h-6 w-6 text-red-600" />
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Unpaid Invoices</dt>
                  <dd>
                    <div className="text-lg font-medium text-gray-900">{stats.unpaidInvoices}</div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
        
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0 bg-red-100 rounded-md p-3">
                <AlertTriangle className="h-6 w-6 text-red-600" />
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Low Stock Items</dt>
                  <dd>
                    <div className="text-lg font-medium text-gray-900">{stats.lowStockItems}</div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      {/* Charts */}
      <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
        <div className="bg-white shadow rounded-lg p-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Monthly Revenue</h3>
          <div className="h-64">
            <Line 
              data={stats.revenueData} 
              options={{
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                  legend: {
                    position: 'top',
                  },
                  title: {
                    display: false,
                  },
                },
                scales: {
                  y: {
                    beginAtZero: true,
                    ticks: {
                      callback: function(value) {
                        return 'R' + value.toLocaleString();
                      }
                    }
                  }
                }
              }}
            />
          </div>
        </div>
        
        <div className="bg-white shadow rounded-lg p-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Repair Status</h3>
          <div className="h-64 flex items-center justify-center">
            <div className="w-48">
              <Pie 
                data={stats.repairStatusData} 
                options={{
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                    legend: {
                      position: 'bottom',
                    },
                  },
                }}
              />
            </div>
          </div>
        </div>
      </div>
      
      {/* Recent Activity */}
      <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
        {/* Recent Repair Tickets */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-5 sm:px-6 flex justify-between items-center">
            <h3 className="text-lg leading-6 font-medium text-gray-900">Recent Repair Tickets</h3>
            <button className="text-sm text-red-600 hover:text-red-800">View all</button>
          </div>
          <div className="border-t border-gray-200">
            <div className="overflow-hidden">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Customer
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Device
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Status
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {mockRepairTickets.slice(0, 3).map((ticket) => (
                    <tr key={ticket.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {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 === 'Pending' ? 'bg-yellow-100 text-yellow-800' :
                          ticket.status === 'In Progress' ? 'bg-blue-100 text-blue-800' :
                          'bg-green-100 text-green-800'
                        }`}>
                          {ticket.status}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
        
        {/* Recent Invoices */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-5 sm:px-6 flex justify-between items-center">
            <h3 className="text-lg leading-6 font-medium text-gray-900">Recent Invoices</h3>
            <button className="text-sm text-red-600 hover:text-red-800">View all</button>
          </div>
          <div className="border-t border-gray-200">
            <div className="overflow-hidden">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Client
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Amount
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Status
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {mockInvoices.slice(0, 3).map((invoice) => (
                    <tr key={invoice.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {invoice.client}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {formatCurrency(invoice.amount)}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                          invoice.status === 'Paid' ? 'bg-green-100 text-green-800' :
                          invoice.status === 'Unpaid' ? 'bg-red-100 text-red-800' :
                          'bg-yellow-100 text-yellow-800'
                        }`}>
                          {invoice.status}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Company Management Component
function CompanyManagement({ addToast }) {
  const [companies, setCompanies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showAddForm, setShowAddForm] = useState(false);
  const [showViewModal, setShowViewModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [currentCompany, setCurrentCompany] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [formData, setFormData] = useState({
    name: '',
    registrationNumber: '',
    taxNumber: '',
    status: 'Active',
    address: '',
    contactPerson: '',
    email: '',
    phone: ''
  });
  
  useEffect(() => {
    const fetchCompanies = async () => {
      setLoading(true);
      try {
        const data = await ApiService.getCompanies();
        setCompanies(data);
      } catch (error) {
        addToast('Failed to load companies', 'error');
      } finally {
        setLoading(false);
      }
    };
    
    fetchCompanies();
  }, [addToast]);
  
  const filteredCompanies = companies.filter(company => 
    company.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    company.registrationNumber.includes(searchTerm) ||
    company.taxNumber.includes(searchTerm)
  );
  
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    
    try {
      const newCompany = await ApiService.createCompany(formData);
      setCompanies(prev => [...prev, newCompany]);
      setShowAddForm(false);
      setFormData({
        name: '',
        registrationNumber: '',
        taxNumber: '',
        status: 'Active',
        address: '',
        contactPerson: '',
        email: '',
        phone: ''
      });
      addToast('Company added successfully', 'success');
    } catch (error) {
      addToast('Failed to add company', 'error');
    } finally {
      setLoading(false);
    }
  };
  
  const handleDelete = async () => {
    if (!currentCompany) return;
    
    setLoading(true);
    try {
      await ApiService.deleteCompany(currentCompany.id);
      setCompanies(prev => prev.filter(company => company.id !== currentCompany.id));
      setShowDeleteModal(false);
      setCurrentCompany(null);
      addToast('Company deleted successfully', 'success');
    } catch (error) {
      addToast('Failed to delete company', 'error');
    } finally {
      setLoading(false);
    }
  };
  
  const viewCompany = (company) => {
    setCurrentCompany(company);
    setShowViewModal(true);
  };
  
  const confirmDelete = (company) => {
    setCurrentCompany(company);
    setShowDeleteModal(true);
  };
  
  if (loading && companies.length === 0) {
    return (
      <div className="flex justify-center items-center h-64">
        <LoadingSpinner size="lg" />
      </div>
    );
  }
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-gray-900">Company Management</h1>
        <button 
          onClick={() => setShowAddForm(!showAddForm)}
          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
        >
          <Plus className="h-4 w-4 mr-2" />
          Add Company
        </button>
      </div>
      
      {/* Search */}
      <div className="max-w-lg w-full lg:max-w-xs">
        <label htmlFor="search" className="sr-only">Search</label>
        <div className="relative">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <Search className="h-5 w-5 text-gray-400" />
          </div>
          <input
            id="search"
            name="search"
            className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-red-500 focus:border-red-500 sm:text-sm"
            placeholder="Search companies"
            type="search"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
      </div>
      
      {/* Add Company Form */}
      {showAddForm && (
        <div className="bg-white shadow rounded-lg p-6 mb-6">
          <h2 className="text-lg font-medium text-gray-900 mb-4">Add New Company</h2>
          <form className="space-y-4" onSubmit={handleSubmit}>
            <div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
              <div className="sm:col-span-3">
                <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                  Company Name
                </label>
                <div className="mt-1">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    required
                    value={formData.name}
                    onChange={handleInputChange}
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>
              
              <div className="sm:col-span-3">
                <label htmlFor="registrationNumber" className="block text-sm font-medium text-gray-700">
                  Registration Number
                </label>
                <div className="mt-1">
                  <input
                    type="text"
                    name="registrationNumber"
                    id="registrationNumber"
                    required
                    value={formData.registrationNumber}
                    onChange={handleInputChange}
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>
              
              <div className="sm:col-span-3">
                <label htmlFor="taxNumber" className="block text-sm font-medium text-gray-700">
                  Tax Number
                </label>
                <div className="mt-1">
                  <input
                    type="text"
                    name="taxNumber"
                    id="taxNumber"
                    required
                    value={formData.taxNumber}
                    onChange={handleInputChange}
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>
              
              <div className="sm:col-span-3">
                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
                  Status
                </label>
                <div className="mt-1">
                  <select
                    id="status"
                    name="status"
                    value={formData.status}
                    onChange={handleInputChange}
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  >
                    <option>Active</option>
                    <option>Inactive</option>
                    <option>Pending</option>
                  </select>
                </div>
              </div>
              
              <div className="sm:col-span-6">
                <label htmlFor="address" className="block text-sm font-medium text-gray-700">
                  Address
                </label>
                <div className="mt-1">
                  <input
                    type="text"
                    name="address"
                    id="address"
                    value={formData.address}
                    onChange={handleInputChange}
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>
              
              <div className="sm:col-span-3">
                <label htmlFor="contactPerson" className="block text-sm font-medium text-gray-700">
                  Contact Person
                </label>
                <div className="mt-1">
                  <input
                    type="text"
                    name="contactPerson"
                    id="contactPerson"
                    value={formData.contactPerson}
                    onChange={handleInputChange}
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>
              
              <div className="sm:col-span-3">
                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                  Email
                </label>
                <div className="mt-1">
                  <input
                    type="email"
                    name="email"
                    id="email"
                    value={formData.email}
                    onChange={handleInputChange}
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>
              
              <div className="sm:col-span-3">
                <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
                  Phone
                </label>
                <div className="mt-1">
                  <input
                    type="text"
                    name="phone"
                    id="phone"
                    value={formData.phone}
                    onChange={handleInputChange}
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>
            </div>
            
            <div className="pt-5">
              <div className="flex justify-end">
                <button
                  type="button"
                  onClick={() => setShowAddForm(false)}
                  className="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={loading}
                  className="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50"
                >
                  {loading ? (
                    <>
                      <LoadingSpinner size="sm" color="white" />
                      <span className="ml-2">Saving...</span>
                    </>
                  ) : (
                    'Save'
                  )}
                </button>
              </div>
            </div>
          </form>
        </div>
      )}
      
      {/* Companies List */}
      {filteredCompanies.length === 0 ? (
        <EmptyState
          title="No companies found"
          description="Get started by adding a new company."
          icon={Building}
          action={{
            text: "Add Company",
            onClick: () => setShowAddForm(true)
          }}
        />
      ) : (
        <div className="bg-white shadow overflow-hidden sm:rounded-md">
          <ul className="divide-y divide-gray-200">
            {filteredCompanies.map((company) => (
              <li key={company.id}>
                <div className="px-4 py-4 sm:px-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center">
                      <div className="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center">
                        <Building className="h-6 w-6 text-red-600" />
                      </div>
                      <div className="ml-4">
                        <div className="text-sm font-medium text-gray-900">{company.name}</div>
                        <div className="text-sm text-gray-500">Reg: {company.registrationNumber}</div>
                      </div>
                    </div>
                    <div className="flex space-x-2">
                      <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-red-100 text-red-800' :
                        'bg-yellow-100 text-yellow-800'
                      }`}>
                        {company.status}
                      </span>
                      <button 
                        className="text-gray-400 hover:text-gray-500"
                        onClick={() => viewCompany(company)}
                      >
                        <Eye className="h-5 w-5" />
                      </button>
                      <button className="text-gray-400 hover:text-gray-500">
                        <Edit className="h-5 w-5" />
                      </button>
                      <button 
                        className="text-gray-400 hover:text-red-500"
                        onClick={() => confirmDelete(company)}
                      >
                        <Trash className="h-5 w-5" />
                      </button>
                    </div>
                  </div>
                  <div className="mt-2 sm:flex sm:justify-between">
                    <div className="sm:flex">
                      <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                        <div>Tax Number: {company.taxNumber}</div>
                      </div>
                    </div>
                    <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                      <button 
                        className="text-red-600 hover:text-red-800 font-medium"
                        onClick={() => viewCompany(company)}
                      >
                        View Details
                      </button>
                    </div>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      )}
      
      {/* View Company Modal */}
      <Modal
        title="Company Details"
        isOpen={showViewModal}
        onClose={() => setShowViewModal(false)}
        size="lg"
      >
        {currentCompany && (
          <div className="space-y-6">
            <div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
              <div className="sm:col-span-3">
                <h3 className="text-sm font-medium text-gray-500">Company Name</h3>
                <p className="mt-1 text-sm text-gray-900">{currentCompany.name}</p>
              </div>
              
              <div className="sm:col-span-3">
                <h3 className="text-sm font-medium text-gray-500">Registration Number</h3>
                <p className="mt-1 text-sm text-gray-900">{currentCompany.registrationNumber}</p>
              </div>
              
              <div className="sm:col-span-3">
                <h3 className="text-sm font-medium text-gray-500">Tax Number</h3>
                <p className="mt-1 text-sm text-gray-900">{currentCompany.taxNumber}</p>
              </div>
              
              <div className="sm:col-span-3">
                <h3 className="text-sm font-medium text-gray-500">Status</h3>
                <p className="mt-1">
                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                    currentCompany.status === 'Active' ? 'bg-green-100 text-green-800' : 
                    currentCompany.status === 'Inactive' ? 'bg-red-100 text-red-800' :
                    'bg-yellow-100 text-yellow-800'
                  }`}>
                    {currentCompany.status}
                  </span>
                </p>
              </div>
              
              <div className="sm:col-span-6">
                <h3 className="text-sm font-medium text-gray-500">Address</h3>
                <p className="mt-1 text-sm text-gray-900">{currentCompany.address || 'N/A'}</p>
              </div>
              
              <div className="sm:col-span-3">
                <h3 className="text-sm font-medium text-gray-500">Contact Person</h3>
                <p className="mt-1 text-sm text-gray-900">{currentCompany.contactPerson || 'N/A'}</p>
              </div>
              
              <div className="sm:col-span-3">
                <h3 className="text-sm font-medium text-gray-500">Email</h3>
                <p className="mt-1 text-sm text-gray-900">{currentCompany.email || 'N/A'}</p>
              </div>
              
              <div className="sm:col-span-3">
                <h3 className="text-sm font-medium text-gray-500">Phone</h3>
                <p className="mt-1 text-sm text-gray-900">{currentCompany.phone || 'N/A'}</p>
              </div>
            </div>
            
            <div className="border-t border-gray-200 pt-6">
              <h3 className="text-lg font-medium text-gray-900">Secure Credentials</h3>
              <div className="mt-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                <div className="sm:col-span-6">
                  <h4 className="text-sm font-medium text-gray-500">CIPC Login</h4>
                  <div className="mt-1 flex items-center">
                    <p className="text-sm text-gray-900 mr-2">Username: {currentCompany.credentials?.cipc?.username || 'Not set'}</p>
                    <p className="text-sm text-gray-900">Password: ********</p>
                  </div>
                </div>
                
                <div className="sm:col-span-6">
                  <h4 className="text-sm font-medium text-gray-500">SARS Information</h4>
                  <div className="mt-1 flex items-center">
                    <p className="text-sm text-gray-900 mr-2">Username: {currentCompany.credentials?.sars?.username || 'Not set'}</p>
                    <p className="text-sm text-gray-900 mr-2">Password: ********</p>
                    <p className="text-sm text-gray-900">eFiling: {currentCompany.credentials?.sars?.efiling || 'Not set'}</p>
                  </div>
                </div>
                
                <div className="sm:col-span-6">
                  <h4 className="text-sm font-medium text-gray-500">CSD Credentials</h4>
                  <div className="mt-1 flex items-center">
                    <p className="text-sm text-gray-900 mr-2">Username: {currentCompany.credentials?.csd?.username || 'Not set'}</p>
                    <p className="text-sm text-gray-900 mr-2">Password: ********</p>
                    <p className="text-sm text-gray-900">Supplier Number: {currentCompany.credentials?.csd?.supplierNumber || 'Not set'}</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="border-t border-gray-200 pt-6">
              <h3 className="text-lg font-medium text-gray-900">Documents</h3>
              {currentCompany.documents && currentCompany.documents.length > 0 ? (
                <ul className="mt-4 divide-y divide-gray-200">
                  {currentCompany.documents.map(doc => (
                    <li key={doc.id} className="py-3 flex justify-between items-center">
                      <div className="flex items-center">
                        <FileText className="h-5 w-5 text-gray-400 mr-2" />
                        <div>
                          <p className="text-sm font-medium text-gray-900">{doc.name}</p>
                          <p className="text-xs text-gray-500">Uploaded on {formatDate(doc.date)}</p>
                        </div>
                      </div>
                      <button className="text-red-600 hover:text-red-800 text-sm font-medium">
                        Download
                      </button>
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="mt-4 text-sm text-gray-500">No documents uploaded yet.</p>
              )}
            </div>
            
            <div className="flex justify-end pt-5">
              <button
                type="button"
                onClick={() => setShowViewModal(false)}
                className="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
              >
                Close
              </button>
              <button
                type="button"
                className="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
              >
                Edit
              </button>
            </div>
          </div>
        )}
      </Modal>
      
      {/* Delete Confirmation Modal */}
      <Modal
        title="Delete Company"
        isOpen={showDeleteModal}
        onClose={() => setShowDeleteModal(false)}
        size="sm"
      >
        <div className="space-y-4">
          <p className="text-sm text-gray-500">
            Are you sure you want to delete <span className="font-medium text-gray-900">{currentCompany?.name}</span>? This action cannot be undone.
          </p>
          
          <div className="flex justify-end pt-4">
            <button
              type="button"
              onClick={() => setShowDeleteModal(false)}
              className="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
            >
              Cancel
            </button>
            <button
              type="button"
              onClick={handleDelete}
              disabled={loading}
              className="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50"
            >
              {loading ? (
                <>
                  <LoadingSpinner size="sm" color="white" />
                  <span className="ml-2">Deleting...</span>
                </>
              ) : (
                'Delete'
              )}
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

// Quotation Management Component
function QuotationManagement({ addToast }) {
  const [quotations, setQuotations] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('All');
  const [showViewModal, setShowViewModal] = useState(false);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [currentQuotation, setCurrentQuotation] = useState(null);
  const [customers, setCustomers] = useState([]);
  
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const [quotationsData, customersData] = await Promise.all([
          ApiService.getQuotations(),
          ApiService.getCustomers()
        ]);
        setQuotations(quotationsData);
        setCustomers(customersData);
      } catch (error) {
        addToast('Failed to load quotations', 'error');
      } finally {
        setLoading(false);
      }
    };
    
    fetchData();
  }, [addToast]);
  
  const filteredQuotations = quotations.filter(quote => 
    (quote.client.toLowerCase().includes(searchTerm.toLowerCase())) &&
    (statusFilter === 'All' || quote.status === statusFilter)
  );
  
  const viewQuotation = (quotation) => {
    setCurrentQuotation(quotation);
    setShowViewModal(true);
  };
  
  const convertToInvoice = async (quotationId) => {
    setLoading(true);
    try {
      const invoice = await ApiService.convertQuotationToInvoice(quotationId);
      
      // Update the quotation status in the local state
      setQuotations(prev => 
        prev.map(q => 
          q.id === quotationId ? { ...q, status: 'Accepted' } : q
        )
      );
      
      addToast('Quotation converted to invoice successfully', 'success');
      setShowViewModal(false);
    } catch (error) {
      addToast('Failed to convert quotation to invoice', 'error');
    } finally {
      setLoading(false);
    }
  };
  
  if (loading && quotations.length === 0) {
    return (
      <div className="flex justify-center items-center h-64">
        <LoadingSpinner size="lg" />
      </div>
    );
  }
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-gray-900">Quotation Management</h1>
        <button 
          onClick={() => setShowCreateModal(true)}
          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
        >
          <Plus className="h-4 w-4 mr-2" />
          New Quotation
        </button>
      </div>
      
      {/* Filters */}
      <div className="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
        <div className="max-w-lg w-full lg:max-w-xs">
          <label htmlFor="search" className="sr-only">Search</label>
          <div className="relative">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <Search className="h-5 w-5 text-gray-400" />
            </div>
            <input
              id="search"
              name="search"
              className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-red-500 focus:border-red-500 sm:text-sm"
              placeholder="Search quotations"
              type="search"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>
        
        <div>
          <select
            id="status-filter"
            name="status-filter"
            className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md"
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
          >
            <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 */}
      {filteredQuotations.length === 0 ? (
        <EmptyState
          title="No quotations found"
          description="Get started by creating a new quotation."
          icon={FileText}
          action={{
            text: "New Quotation",
            onClick: () => setShowCreateModal(true)
          }}
        />
      ) : (
        <div className="flex flex-col">
          <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
              <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Quote #
                      </th>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Client
                      </th>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Amount
                      </th>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Date
                      </th>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Valid Until
                      </th>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                      </th>
                      <th scope="col" className="relative px-6 py-3">
                        <span className="sr-only">Actions</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {filteredQuotations.map((quote) => (
                      <tr key={quote.id}>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                          {quote.quoteNumber}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {quote.client}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {formatCurrency(quote.total)}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {formatDate(quote.date)}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {formatDate(quote.validUntil)}
                        </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}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <div className="flex space-x-3 justify-end">
                            <button 
                              className="text-red-600 hover:text-red-900"
                              onClick={() => viewQuotation(quote)}
                            >
                              View
                            </button>
                            <button className="text-red-600 hover:text-red-900">
                              Edit
                            </button>
                            {quote.status === 'Pending' && (
                              <button 
                                className="text-red-600 hover:text-red-900"
                                onClick={() => convertToInvoice(quote.id)}
                              >
                                To Invoice
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* View Quotation Modal */}
      <Modal
        title={`Quotation ${currentQuotation?.quoteNumber}`}
        isOpen={showViewModal}
        onClose={() => setShowViewModal(false)}
        size="lg"
      >
        {currentQuotation && (
          <div className="space-y-6">
            <div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
              <div className="sm:col-span-3">
                <h3 className="text-sm font-medium text-gray-500">Client</h3>
                <p className="mt-1 text-sm text-gray-900">{currentQuotation.client}</p>
              </div>
              
              <div className="sm:col-span-3">
                <h3 className="text-sm font-medium text-gray-500">Status</h3>
                <p className="mt-1">
                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                    currentQuotation.status === 'Accepted' ? 'bg-green-100 text-green-800' :
                    currentQuotation.status === 'Rejected' ? 'bg-red-100 text-red-800' :
                    'bg-yellow-100 text-yellow-800'
                  }`}>
                    {currentQuotation.status}
                  </span>
                </p>
              </div>
              
              <div className="sm:col-span-3">
                <h3 className="text-sm font-medium text-gray-500">Date</h3>
                <p className="mt-1 text-sm text-gray-900">{formatDate(currentQuotation.date)}</p>
              </div>
              
              <div className="sm:col-span-3">
                <h3 className="text-sm font-medium text-gray-500">Valid Until</h3>
                <p className="mt-1 text-sm text-gray-900">{formatDate(currentQuotation.validUntil)}</p>
              </div>
            </div>
            
            <div className="border-t border-gray-200 pt-6">
              <h3 className="text-lg font-medium text-gray-900">Items</h3>
              <div className="mt-4 flex flex-col">
                <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                  <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                    <div className="overflow-hidden border border-gray-200 sm:rounded-lg">
                      <table className="min-w-full divide-y divide-gray-200">
                        <thead className="bg-gray-50">
                          <tr>
                            <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Description
                            </th>
                            <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Quantity
                            </th>
                            <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Unit Price
                            </th>
                            <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Total
                            </th>
                          </tr>
                        </thead>
                        <tbody className="bg-white divide-y divide-gray-200">
                          {currentQuotation.items.map((item) => (
                            <tr key={item.id}>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {item.description}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {item.quantity}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {formatCurrency(item.unitPrice)}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {formatCurrency(item.total)}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                        <tfoot className="bg-gray-50">
                          <tr>
                            <td colSpan="3" className="px-6 py-3 text-right text-sm font-medium text-gray-500">
                              Subtotal
                            </td>
                            <td className="px-6 py-3 text-left text-sm text-gray-900">
                              {formatCurrency(currentQuotation.amount)}
                            </td>
                          </tr>
                          <tr>
                            <td colSpan="3" className="px-6 py-3 text-right text-sm font-medium text-gray-500">
                              VAT (15%)
                            </td>
                            <td className="px-6 py-3 text-left text-sm text-gray-900">
                              {formatCurrency(currentQuotation.tax)}
                            </td>
                          </tr>
                          <tr>
                            <td colSpan="3" className="px-6 py-3 text-right text-sm font-medium text-gray-900">
                              Total
                            </td>
                            <td className="px-6 py-3 text-left text-sm font-bold text-gray-900">
                              {formatCurrency(currentQuotation.total)}
                            </td>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            {currentQuotation.notes && (
              <div className="border-t border-gray-200 pt-6">
                <h3 className="text-sm font-medium text-gray-500">Notes</h3>
                <p className="mt-1 text-sm text-gray-900">{currentQuotation.notes}</p>
              </div>
            )}
            
            <div className="border-t border-gray-200 pt-6">
              <h3 className="text-sm font-medium text-gray-500">Terms</h3>
              <p className="mt-1 text-sm text-gray-900">{currentQuotation.terms}</p>
            </div>
            
            <div className="flex justify-end pt-5">
              <button
                type="button"
                onClick={() => setShowViewModal(false)}
                className="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
              >
                Close
              </button>
              <button
                type="button"
                className="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
              >
                <Printer className="h-4 w-4 mr-2" />
                Print
              </button>
              <button
                type="button"
                className="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
              >
                <Mail className="h-4 w-4 mr-2" />
                Email
              </button>
              {currentQuotation.status === 'Pending' && (
                <button
                  type="button"
                  onClick={() => convertToInvoice(currentQuotation.id)}
                  disabled={loading}
                  className="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50"
                >
                  {loading ? (
                    <>
                      <LoadingSpinner size="sm" color="white" />
                      <span className="ml-2">Converting...</span>
                    </>
                  ) : (
                    <>
                      <ArrowRight className="h-4 w-4 mr-2" />
                      Convert to Invoice
                    </>
                  )}
                </button>
              )}
            </div>
          </div>
        )}
      </Modal>
      
      {/* Create Quotation Modal */}
      <Modal
        title="Create New Quotation"
        isOpen={showCreateModal}
        onClose={() => setShowCreateModal(false)}
        size="xl"
      >
        <QuotationForm 
          customers={customers} 
          onClose={() => setShowCreateModal(false)} 
          onSuccess={(newQuotation) => {
            setQuotations(prev => [...prev, newQuotation]);
            setShowCreateModal(false);
            addToast('Quotation created successfully', 'success');
          }}
          addToast={addToast}
        />
      </Modal>
    </div>
  );
}

// Quotation Form Component
function QuotationForm({ customers, onClose, onSuccess, addToast }) {
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    clientId: '',
    items: [{ id: 1, description: '', quantity: 1, unitPrice: 0, total: 0 }],
    notes: '',
    terms: 'Quote valid for 30 days'
  });
  
  const calculateTotals = () => {
    const amount = formData.items.reduce((sum, item) => sum + item.total, 0);
    const tax = amount * 0.15;
    const total = amount + tax;
    
    return { amount, tax, total };
  };
  
  const { amount, tax, total } = calculateTotals();
  
  const handleClientChange = (e) => {
    setFormData(prev => ({ ...prev, clientId: e.target.value }));
  };
  
  const handleItemChange = (index, field, value) => {
    const updatedItems = [...formData.items];
    updatedItems[index][field] = value;
    
    // Recalculate total for this item
    if (field === 'quantity' || field === 'unitPrice') {
      updatedItems[index].total = updatedItems[index].quantity * updatedItems[index].unitPrice;
    }
    
    setFormData(prev => ({ ...prev, items: updatedItems }));
  };
  
  const addItem = () => {
    const newId = Math.max(...formData.items.map(item => item.id), 0) + 1;
    setFormData(prev => ({
      ...prev,
      items: [...prev.items, { id: newId, description: '', quantity: 1, unitPrice: 0, total: 0 }]
    }));
  };
  
  const removeItem = (index) => {
    if (formData.items.length === 1) return;
    
    const updatedItems = [...formData.items];
    updatedItems.splice(index, 1);
    setFormData(prev => ({ ...prev, items: updatedItems }));
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!formData.clientId) {
      addToast('Please select a client', 'error');
      return;
    }
    
    if (formData.items.some(item => !item.description || item.quantity <= 0)) {
      addToast('Please fill in all item details', 'error');
      return;
    }
    
    setLoading(true);
    
    try {
      const selectedCustomer = customers.find(c => c.id === parseInt(formData.clientId));
      
      const quotationData = {
        client: selectedCustomer.name,
        clientId: parseInt(formData.clientId),
        amount,
        tax,
        total,
        status: '<ant_artifact identifier="react_app_001" title="React Business Management System">
import React, { useState, useEffect } from 'react';
import { Bell, Menu, X, Home, Building, FileText, Wrench, Users, LogOut, ChevronDown, ChevronUp, Search, Plus, Edit, Trash, Check, AlertTriangle } from 'lucide-react';

// Mock data for demonstration
const mockCompanies = [
  { id: 1, name: "Madonoro Express", status: "Active", registrationNumber: "2020/123456/07", taxNumber: "9876543210" },
  { id: 2, name: "Tech Solutions Ltd", status: "Active", registrationNumber: "2019/654321/07", taxNumber: "1234567890" },
];

const mockRepairTickets = [
  { id: 1, customer: "John Doe", device: "Laptop", problem: "Won't boot", status: "Pending", date: "2023-05-15" },
  { id: 2, customer: "Jane Smith", device: "iPhone", problem: "Cracked screen", status: "In Progress", date: "2023-05-16" },
  { id: 3, customer: "Bob Johnson", device: "Desktop PC", problem: "Blue screen error", status: "Completed", date: "2023-05-14" },
];

const mockInvoices = [
  { id: 1, client: "ABC Corp", amount: 1250.00, status: "Paid", date: "2023-05-10" },
  { id: 2, client: "XYZ Ltd", amount: 3450.75, status: "Unpaid", date: "2023-05-12" },
  { id: 3, client: "123 Industries", amount: 875.50, status: "Partial", date: "2023-05-08" },
];

const mockQuotations = [
  { id: 1, client: "DEF Solutions", amount: 2750.00, status: "Pending", date: "2023-05-11" },
  { id: 2, client: "GHI Services", amount: 1890.25, status: "Accepted", date: "2023-05-13" },
  { id: 3, client: "JKL Corp", amount: 4320.00, status: "Rejected", date: "2023-05-09" },
];

// Main App Component
export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [activeModule, setActiveModule] = useState('dashboard');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // Login handler
  const handleLogin = (userData) => {
    setCurrentUser(userData);
    setIsLoggedIn(true);
  };

  // Logout handler
  const handleLogout = () => {
    setCurrentUser(null);
    setIsLoggedIn(false);
  };

  return (
    <div className="min-h-screen bg-gray-100 font-sans">
      {!isLoggedIn ? (
        <LoginPage onLogin={handleLogin} />
      ) : (
        <div className="flex h-screen overflow-hidden">
          {/* Sidebar */}
          <Sidebar 
            isOpen={sidebarOpen} 
            setIsOpen={setSidebarOpen}
            activeModule={activeModule}
            setActiveModule={setActiveModule}
            onLogout={handleLogout}
            mobileMenuOpen={mobileMenuOpen}
            setMobileMenuOpen={setMobileMenuOpen}
            userRole={currentUser?.role}
          />
          
          {/* Main Content */}
          <div className="flex-1 overflow-auto">
            <Header 
              setSidebarOpen={setSidebarOpen} 
              sidebarOpen={sidebarOpen} 
              user={currentUser}
              setMobileMenuOpen={setMobileMenuOpen}
            />
            
            <main className="p-6">
              {activeModule === 'dashboard' && <Dashboard />}
              {activeModule === 'companies' && <CompanyManagement />}
              {activeModule === 'quotations' && <QuotationManagement />}
              {activeModule === 'invoices' && <InvoiceManagement />}
              {activeModule === 'repairs' && <RepairManagement />}
              {activeModule === 'customers' && <CustomerManagement />}
            </main>
          </div>
        </div>
      )}
    </div>
  );
}

// Login Page Component
function LoginPage({ onLogin }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!username || !password) {
      setError('Please enter both username and password');
      return;
    }
    
    // Mock login - in a real app, this would call an API
    if (username === 'admin' && password === 'password') {
      onLogin({ name: 'Admin User', role: 'admin', email: 'admin@madonoro.com' });
    } else if (username === 'staff' && password === 'password') {
      onLogin({ name: 'Staff User', role: 'staff', email: 'staff@madonoro.com' });
    } else if (username === 'tech' && password === 'password') {
      onLogin({ name: 'Tech User', role: 'technician', email: 'tech@madonoro.com' });
    } else if (username === 'accounting' && password === 'password') {
      onLogin({ name: 'Accounting User', role: 'accounting', email: 'accounting@madonoro.com' });
    } else {
      setError('Invalid username or password');
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div>
          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
            Madonoro Express Services
          </h2>
          <h3 className="mt-2 text-center text-xl font-medium text-red-600">
            Business Management System
          </h3>
        </div>
        <div className="mt-8 bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
          <form className="space-y-6" onSubmit={handleSubmit}>
            {error && (
              <div className="bg-red-50 border-l-4 border-red-600 p-4 mb-4">
                <div className="flex">
                  <div className="flex-shrink-0">
                    <AlertTriangle className="h-5 w-5 text-red-600" />
                  </div>
                  <div className="ml-3">
                    <p className="text-sm text-red-600">{error}</p>
                  </div>
                </div>
              </div>
            )}
            <div>
              <label htmlFor="username" className="block text-sm font-medium text-gray-700">
                Username
              </label>
              <div className="mt-1">
                <input
                  id="username"
                  name="username"
                  type="text"
                  autoComplete="username"
                  required
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm"
                />
              </div>
            </div>

            <div>
              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                Password
              </label>
              <div className="mt-1">
                <input
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="current-password"
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm"
                />
              </div>
            </div>

            <div>
              <button
                type="submit"
                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
              >
                Sign in
              </button>
            </div>
          </form>
          
          <div className="mt-6">
            <div className="relative">
              <div className="absolute inset-0 flex items-center">
                <div className="w-full border-t border-gray-300"></div>
              </div>
              <div className="relative flex justify-center text-sm">
                <span className="px-2 bg-white text-gray-500">
                  Demo Credentials
                </span>
              </div>
            </div>
            <div className="mt-4 grid grid-cols-2 gap-3 text-xs text-gray-500">
              <div>
                <p>Admin: admin / password</p>
                <p>Staff: staff / password</p>
              </div>
              <div>
                <p>Tech: tech / password</p>
                <p>Accounting: accounting / password</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Sidebar Component
function Sidebar({ isOpen, setIsOpen, activeModule, setActiveModule, onLogout, mobileMenuOpen, setMobileMenuOpen, userRole }) {
  const navItems = [
    { id: 'dashboard', name: 'Dashboard', icon: Home, roles: ['admin', 'staff', 'technician', 'accounting'] },
    { id: 'companies', name: 'Companies', icon: Building, roles: ['admin', 'staff'] },
    { id: 'quotations', name: 'Quotations', icon: FileText, roles: ['admin', 'staff', 'accounting'] },
    { id: 'invoices', name: 'Invoices', icon: FileText, roles: ['admin', 'staff', 'accounting'] },
    { id: 'repairs', name: 'Repair Tickets', icon: Wrench, roles: ['admin', 'staff', 'technician'] },
    { id: 'customers', name: 'Customers', icon: Users, roles: ['admin', 'staff', 'technician'] },
  ];

  // Filter nav items based on user role
  const filteredNavItems = navItems.filter(item => item.roles.includes(userRole));

  return (
    <>
      {/* Desktop sidebar */}
      <div className={`hidden md:flex md:flex-shrink-0 transition-all duration-300 ${isOpen ? 'md:w-64' : 'md:w-20'}`}>
        <div className="flex flex-col w-full">
          {/* Sidebar header */}
          <div className="flex items-center h-16 flex-shrink-0 px-4 bg-red-700">
            <div className={`flex items-center ${isOpen ? 'justify-between w-full' : 'justify-center'}`}>
              {isOpen && (
                <div className="text-white font-bold">
                  <div className="text-lg">Madonoro</div>
                  <div className="text-xs">Express Services</div>
                </div>
              )}
              <button
                onClick={() => setIsOpen(!isOpen)}
                className="p-1 rounded-full text-white hover:bg-red-600 focus:outline-none"
              >
                {isOpen ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
              </button>
            </div>
          </div>
          
          {/* Sidebar content */}
          <div className="h-0 flex-1 flex flex-col overflow-y-auto bg-black">
            <nav className="flex-1 px-2 py-4 space-y-1">
              {filteredNavItems.map((item) => (
                <button
                  key={item.id}
                  onClick={() => setActiveModule(item.id)}
                  className={`${
                    activeModule === item.id
                      ? 'bg-red-700 text-white'
                      : 'text-gray-300 hover:bg-red-600 hover:text-white'
                  } group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full ${
                    isOpen ? 'justify-start' : 'justify-center'
                  }`}
                >
                  <item.icon className={`${isOpen ? 'mr-3' : 'mx-auto'} h-6 w-6`} />
                  {isOpen && <span>{item.name}</span>}
                </button>
              ))}
            </nav>
            
            {/* Logout button */}
            <div className="p-4">
              <button
                onClick={onLogout}
                className="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-300 hover:bg-red-600 hover:text-white w-full"
              >
                <LogOut className={`${isOpen ? 'mr-3' : 'mx-auto'} h-6 w-6`} />
                {isOpen && <span>Logout</span>}
              </button>
            </div>
          </div>
        </div>
      </div>
      
      {/* Mobile menu */}
      <div className={`md:hidden fixed inset-0 z-40 ${mobileMenuOpen ? 'block' : 'hidden'}`}>
        <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setMobileMenuOpen(false)}></div>
        <div className="fixed inset-y-0 left-0 flex flex-col z-40 w-full max-w-xs bg-black">
          <div className="h-16 flex items-center justify-between px-4 bg-red-700">
            <div className="text-white font-bold">
              <div className="text-lg">Madonoro</div>
              <div className="text-xs">Express Services</div>
            </div>
            <button
              onClick={() => setMobileMenuOpen(false)}
              className="p-1 rounded-full text-white hover:bg-red-600 focus:outline-none"
            >
              <X size={24} />
            </button>
          </div>
          <div className="flex-1 overflow-y-auto">
            <nav className="px-2 py-4 space-y-1">
              {filteredNavItems.map((item) => (
                <button
                  key={item.id}
                  onClick={() => {
                    setActiveModule(item.id);
                    setMobileMenuOpen(false);
                  }}
                  className={`${
                    activeModule === item.id
                      ? 'bg-red-700 text-white'
                      : 'text-gray-300 hover:bg-red-600 hover:text-white'
                  } group flex items-center px-2 py-2 text-base font-medium rounded-md w-full`}
                >
                  <item.icon className="mr-3 h-6 w-6" />
                  <span>{item.name}</span>
                </button>
              ))}
            </nav>
            <div className="p-4">
              <button
                onClick={onLogout}
                className="flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-300 hover:bg-red-600 hover:text-white w-full"
              >
                <LogOut className="mr-3 h-6 w-6" />
                <span>Logout</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// Header Component
function Header({ setSidebarOpen, sidebarOpen, user, setMobileMenuOpen }) {
  const [notifications, setNotifications] = useState(3);
  
  return (
    <header className="bg-white shadow-sm z-10">
      <div className="px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex">
            <button
              type="button"
              className="md:hidden px-4 text-gray-500 focus:outline-none"
              onClick={() => setMobileMenuOpen(true)}
            >
              <Menu className="h-6 w-6" />
            </button>
          </div>
          <div className="flex items-center">
            <div className="relative">
              <button
                type="button"
                className="p-1 text-gray-400 hover:text-gray-500 focus:outline-none"
              >
                <Bell className="h-6 w-6" />
                {notifications > 0 && (
                  <span className="absolute top-0 right-0 block h-4 w-4 rounded-full bg-red-600 text-xs text-white text-center">
                    {notifications}
                  </span>
                )}
              </button>
            </div>
            <div className="ml-4 flex items-center md:ml-6">
              <div className="ml-3 relative">
                <div className="flex items-center">
                  <div className="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 font-medium">
                    {user?.name?.charAt(0)}
                  </div>
                  <div className="ml-2 hidden md:block">
                    <div className="text-sm font-medium text-gray-700">{user?.name}</div>
                    <div className="text-xs text-gray-500 capitalize">{user?.role}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

// Dashboard Component
function Dashboard() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-gray-900">Dashboard</h1>
        <div className="flex space-x-3">
          <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
            <Plus className="h-4 w-4 mr-2" />
            New Ticket
          </button>
          <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
            <Plus className="h-4 w-4 mr-2" />
            New Quote
          </button>
        </div>
      </div>
      
      {/* Stats Cards */}
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0 bg-red-100 rounded-md p-3">
                <Building className="h-6 w-6 text-red-600" />
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Active Companies</dt>
                  <dd>
                    <div className="text-lg font-medium text-gray-900">2</div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
        
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0 bg-red-100 rounded-md p-3">
                <Wrench className="h-6 w-6 text-red-600" />
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Pending Repairs</dt>
                  <dd>
                    <div className="text-lg font-medium text-gray-900">3</div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
        
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0 bg-red-100 rounded-md p-3">
                <FileText className="h-6 w-6 text-red-600" />
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Unpaid Invoices</dt>
                  <dd>
                    <div className="text-lg font-medium text-gray-900">5</div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
        
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0 bg-red-100 rounded-md p-3">
                <FileText className="h-6 w-6 text-red-600" />
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Quotes This Month</dt>
                  <dd>
                    <div className="text-lg font-medium text-gray-900">8</div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      {/* Recent Activity */}
      <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
        {/* Recent Repair Tickets */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-5 sm:px-6 flex justify-between items-center">
            <h3 className="text-lg leading-6 font-medium text-gray-900">Recent Repair Tickets</h3>
            <button className="text-sm text-red-600 hover:text-red-800">View all</button>
          </div>
          <div className="border-t border-gray-200">
            <div className="overflow-hidden">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Customer
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Device
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Status
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {mockRepairTickets.slice(0, 3).map((ticket) => (
                    <tr key={ticket.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {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 === 'Pending' ? 'bg-yellow-100 text-yellow-800' :
                          ticket.status === 'In Progress' ? 'bg-blue-100 text-blue-800' :
                          'bg-green-100 text-green-800'
                        }`}>
                          {ticket.status}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
        
        {/* Recent Invoices */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-5 sm:px-6 flex justify-between items-center">
            <h3 className="text-lg leading-6 font-medium text-gray-900">Recent Invoices</h3>
            <button className="text-sm text-red-600 hover:text-red-800">View all</button>
          </div>
          <div className="border-t border-gray-200">
            <div className="overflow-hidden">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Client
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Amount
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Status
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {mockInvoices.slice(0, 3).map((invoice) => (
                    <tr key={invoice.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {invoice.client}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        R{invoice.amount.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 ${
                          invoice.status === 'Paid' ? 'bg-green-100 text-green-800' :
                          invoice.status === 'Unpaid' ? 'bg-red-100 text-red-800' :
                          'bg-yellow-100 text-yellow-800'
                        }`}>
                          {invoice.status}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Company Management Component
function CompanyManagement() {
  const [companies, setCompanies] = useState(mockCompanies);
  const [showAddForm, setShowAddForm] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  
  const filteredCompanies = companies.filter(company => 
    company.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    company.registrationNumber.includes(searchTerm)
  );
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-gray-900">Company Management</h1>
        <button 
          onClick={() => setShowAddForm(!showAddForm)}
          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
        >
          <Plus className="h-4 w-4 mr-2" />
          Add Company
        </button>
      </div>
      
      {/* Search */}
      <div className="max-w-lg w-full lg:max-w-xs">
        <label htmlFor="search" className="sr-only">Search</label>
        <div className="relative">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <Search className="h-5 w-5 text-gray-400" />
          </div>
          <input
            id="search"
            name="search"
            className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-red-500 focus:border-red-500 sm:text-sm"
            placeholder="Search companies"
            type="search"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
      </div>
      
      {/* Add Company Form */}
      {showAddForm && (
        <div className="bg-white shadow rounded-lg p-6 mb-6">
          <h2 className="text-lg font-medium text-gray-900 mb-4">Add New Company</h2>
          <form className="space-y-4">
            <div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
              <div className="sm:col-span-3">
                <label htmlFor="company-name" className="block text-sm font-medium text-gray-700">
                  Company Name
                </label>
                <div className="mt-1">
                  <input
                    type="text"
                    name="company-name"
                    id="company-name"
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>
              
              <div className="sm:col-span-3">
                <label htmlFor="registration-number" className="block text-sm font-medium text-gray-700">
                  Registration Number
                </label>
                <div className="mt-1">
                  <input
                    type="text"
                    name="registration-number"
                    id="registration-number"
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>
              
              <div className="sm:col-span-3">
                <label htmlFor="tax-number" className="block text-sm font-medium text-gray-700">
                  Tax Number
                </label>
                <div className="mt-1">
                  <input
                    type="text"
                    name="tax-number"
                    id="tax-number"
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>
              
              <div className="sm:col-span-3">
                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
                  Status
                </label>
                <div className="mt-1">
                  <select
                    id="status"
                    name="status"
                    className="shadow-sm focus:ring-red-500 focus:border-red-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  >
                    <option>Active</option>
                    <option>Inactive</option>
                    <option>Pending</option>
                  </select>
                </div>
              </div>
            </div>
            
            <div className="pt-5">
              <div className="flex justify-end">
                <button
                  type="button"
                  onClick={() => setShowAddForm(false)}
                  className="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                >
                  Save
                </button>
              </div>
            </div>
          </form>
        </div>
      )}
      
      {/* Companies List */}
      <div className="bg-white shadow overflow-hidden sm:rounded-md">
        <ul className="divide-y divide-gray-200">
          {filteredCompanies.map((company) => (
            <li key={company.id}>
              <div className="px-4 py-4 sm:px-6">
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <div className="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center">
                      <Building className="h-6 w-6 text-red-600" />
                    </div>
                    <div className="ml-4">
                      <div className="text-sm font-medium text-gray-900">{company.name}</div>
                      <div className="text-sm text-gray-500">Reg: {company.registrationNumber}</div>
                    </div>
                  </div>
                  <div className="flex space-x-2">
                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                      company.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
                    }`}>
                      {company.status}
                    </span>
                    <button className="text-gray-400 hover:text-gray-500">
                      <Edit className="h-5 w-5" />
                    </button>
                    <button className="text-gray-400 hover:text-red-500">
                      <Trash className="h-5 w-5" />
                    </button>
                  </div>
                </div>
                <div className="mt-2 sm:flex sm:justify-between">
                  <div className="sm:flex">
                    <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                      <div>Tax Number: {company.taxNumber}</div>
                    </div>
                  </div>
                  <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                    <button className="text-red-600 hover:text-red-800 font-medium">
                      View Details
                    </button>
                  </div>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

// Quotation Management Component
function QuotationManagement() {
  const [quotations, setQuotations] = useState(mockQuotations);
  const [searchTerm, setSearchTerm] = useState('');
  
  const filteredQuotations = quotations.filter(quote => 
    quote.client.toLowerCase().includes(searchTerm.toLowerCase())
  );
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-gray-900">Quotation Management</h1>
        <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
          <Plus className="h-4 w-4 mr-2" />
          New Quotation
        </button>
      </div>
      
      {/* Search */}
      <div className="max-w-lg w-full lg:max-w-xs">
        <label htmlFor="search" className="sr-only">Search</label>
        <div className="relative">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <Search className="h-5 w-5 text-gray-400" />
          </div>
          <input
            id="search"
            name="search"
            className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-red-500 focus:border-red-500 sm:text-sm"
            placeholder="Search quotations"
            type="search"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
      </div>
      
      {/* Quotations Table */}
      <div className="flex flex-col">
        <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
            <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Quote #
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Client
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Amount
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Date
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Status
                    </th>
                    <th scope="col" className="relative px-6 py-3">
                      <span className="sr-only">Actions</span>
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {filteredQuotations.map((quote) => (
                    <tr key={quote.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        Q-{quote.id.toString().padStart(4, '0')}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {quote.client}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        R{quote.amount.toFixed(2)}
                      </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">
                        <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}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <div className="flex space-x-3 justify-end">
                          <button className="text-red-600 hover:text-red-900">View</button>
                          <button className="text-red-600 hover:text-red-900">Edit</button>
                          <button className="text-red-600 hover:text-red-900">To Invoice</button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Invoice Management Component
function InvoiceManagement() {
  const [invoices, setInvoices] = useState(mockInvoices);
  const [searchTerm, setSearchTerm] = useState('');
  
  const filteredInvoices = invoices.filter(invoice => 
    invoice.client.toLowerCase().includes(searchTerm.toLowerCase())
  );
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-gray-900">Invoice Management</h1>
        <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
          <Plus className="h-4 w-4 mr-2" />
          New Invoice
        </button>
      </div>
      
      {/* Search */}
      <div className="max-w-lg w-full lg:max-w-xs">
        <label htmlFor="search" className="sr-only">Search</label>
        <div className="relative">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <Search className="h-5 w-5 text-gray-400" />
          </div>
          <input
            id="search"
            name="search"
            className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-red-500 focus:border-red-500 sm:text-sm"
            placeholder="Search invoices"
            type="search"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
      </div>
      
      {/* Invoices Table */}
      <div className="flex flex-col">
        <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
            <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Invoice #
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Client
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Amount
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Date
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Status
                    </th>
                    <th scope="col" className="relative px-6 py-3">
                      <span className="sr-only">Actions</span>
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {filteredInvoices.map((invoice) => (
                    <tr key={invoice.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        INV-{invoice.id.toString().padStart(4, '0')}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {invoice.client}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        R{invoice.amount.toFixed(2)}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {invoice.date}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                          invoice.status === 'Paid' ? 'bg-green-100 text-green-800' :
                          invoice.status === 'Unpaid' ? 'bg-red-100 text-red-800' :
                          'bg-yellow-100 text-yellow-800'
                        }`}>
                          {invoice.status}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <div className="flex space-x-3 justify-end">
                          <button className="text-red-600 hover:text-red-900">View</button>
                          <button className="text-red-600 hover:text-red-900">Edit</button>
                          <button className="text-red-600 hover:text-red-900">Mark Paid</button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Repair Management Component
function RepairManagement() {
  const [tickets, setTickets] = useState(mockRepairTickets);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('All');
  
  const filteredTickets = tickets.filter(ticket => 
    (ticket.customer.toLowerCase().includes(searchTerm.toLowerCase()) ||
     ticket.device.toLowerCase().includes(searchTerm.toLowerCase())) &&
    (statusFilter === 'All' || ticket.status === statusFilter)
  );
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-gray-900">Repair Ticket Management</h1>
        <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
          <Plus className="h-4 w-4 mr-2" />
          New Repair Ticket
        </button>
      </div>
      
      {/* Filters */}
      <div className="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
        <div className="max-w-lg w-full lg:max-w-xs">
          <label htmlFor="search" className="sr-only">Search</label>
          <div className="relative">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <Search className="h-5 w-5 text-gray-400" />
            </div>
            <input
              id="search"
              name="search"
              className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-red-500 focus:border-red-500 sm:text-sm"
              placeholder="Search tickets"
              type="search"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>
        
        <div>
          <select
            id="status-filter"
            name="status-filter"
            className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md"
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
          >
            <option value="All">All Statuses</option>
            <option value="Pending">Pending</option>
            <option value="In Progress">In Progress</option>
            <option value="Completed">Completed</option>
          </select>
        </div>
      </div>
      
      {/* Tickets Table */}
      <div className="flex flex-col">
        <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
            <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Ticket #
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Customer
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Device
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Problem
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Status
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Date
                    </th>
                    <th scope="col" className="relative px-6 py-3">
                      <span className="sr-only">Actions</span>
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {filteredTickets.map((ticket) => (
                    <tr key={ticket.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        RT-{ticket.id.toString().padStart(4, '0')}
                      </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 text-sm text-gray-500">
                        {ticket.problem}
                      </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 === 'Pending' ? 'bg-yellow-100 text-yellow-800' :
                          ticket.status === 'In Progress' ? 'bg-blue-100 text-blue-800' :
                          'bg-green-100 text-green-800'
                        }`}>
                          {ticket.status}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {ticket.date}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <div className="flex space-x-3 justify-end">
                          <button className="text-red-600 hover:text-red-900">View</button>
                          <button className="text-red-600 hover:text-red-900">Update</button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Customer Management Component
function CustomerManagement() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-gray-900">Customer Management</h1>
        <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
          <Plus className="h-4 w-4 mr-2" />
          Add Customer
        </button>
      </div>
      
      {/* Search */}
      <div className="max-w-lg w-full lg:max-w-xs">
        <label htmlFor="search" className="sr-only">Search</label>
        <div className="relative">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <Search className="h-5 w-5 text-gray-400" />
          </div>
          <input
            id="search"
            name="search"
            className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-red-500 focus:border-red-500 sm:text-sm"
            placeholder="Search customers"
            type="search"
          />
        </div>
      </div>
      
      {/* Customer List Placeholder */}
      <div className="bg-white shadow overflow-hidden sm:rounded-md">
        <div className="p-10 text-center text-gray-500">
          <p>Customer management module is under development.</p>
          <p>This will include customer profiles, contact information, and repair history.</p>
        </div>
      </div>
    </div>
  );
}