page.tsx

Go to the documentation of this file.

"use client";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
import { Line, Doughnut, Bar } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  ArcElement,
  Title,
  Tooltip,
  Legend,
  Filler,
} from "chart.js";
 
// Register ChartJS components
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  ArcElement,
  Title,
  Tooltip,
  Legend,
  Filler
);
 
interface SupplierData {
  id: number;
  name: string;
  phone: string;
  fax: string;
  email: string;
  address1: string;
  address2: string;
  city: string;
  state: string;
  postalCode: string;
  country: string;
  key: string;
  accountId?: number;
  accountBalance?: number;
  totalOrders?: number;
  totalSpend?: number;
  firstOrder?: string;
  lastOrder?: string;
}
 
interface PurchaseOrder {
  id: number;
  date: string;
  status: string;
  total: number;
  items: number;
  expectedDate?: string;
  receivedDate?: string;
  store: string;
}
 
interface TopProduct {
  name: string;
  quantity: number;
  value: number;
  lastOrdered?: string;
}
 
interface ContactLog {
  date: string;
  message: string;
}
 
interface DepartmentSpend {
  department: string;
  amount: number;
  color: string;
}
 
interface OrderTrend {
  date: string;
  amount: number;
  quantity: number;
}
 
interface Contact {
  id: string;
  name: string;
  firstName: string;
  lastName: string;
  title: string;
  phone: string;
  mobile: string;
  email: string;
  comments: string;
}
 
interface StoreCode {
  storeId: number;
  storeName: string;
  code: string;
}
 
interface FreightConfig {
  allFree: boolean;
  fixedCost: string;
  value1High: string;
  value1Charge: string;
  value2Low: string;
  value2High: string;
  value2Charge: string;
  aboveFree: string;
  comments: string;
}
 
interface OrderSettings {
  email: string;
  emailSubject: string;
  emailNormal: boolean;
  emailPDF: boolean;
  format: string;
  minOrderValue: string;
  maxOrderValue: string;
  minRetailValue: string;
  maxRetailValue: string;
  minUnits: string;
  maxUnits: string;
  minLines: string;
  maxLines: string;
  orderMessage: string;
  messageStartDate: string;
  messageEndDate: string;
}
 
export default function SupplierProfilePage() {
  const params = useParams();
  const router = useRouter();
  const supplierId = params.id as string;
 
  const [activeTab, setActiveTab] = useState<string>("overview");
  const [supplier, setSupplier] = useState<SupplierData | null>(null);
  const [recentOrders, setRecentOrders] = useState<PurchaseOrder[]>([]);
  const [topProducts, setTopProducts] = useState<TopProduct[]>([]);
  const [contactLogs, setContactLogs] = useState<ContactLog[]>([]);
  const [departmentSpend, setDepartmentSpend] = useState<DepartmentSpend[]>([]);
  const [orderTrend, setOrderTrend] = useState<OrderTrend[]>([]);
  const [contacts, setContacts] = useState<Contact[]>([]);
  const [storeCodes, setStoreCodes] = useState<StoreCode[]>([]);
  const [freightConfig, setFreightConfig] = useState<FreightConfig>({
    allFree: false,
    fixedCost: "",
    value1High: "",
    value1Charge: "",
    value2Low: "",
    value2High: "",
    value2Charge: "",
    aboveFree: "",
    comments: "",
  });
  const [orderSettings, setOrderSettings] = useState<OrderSettings>({
    email: "",
    emailSubject: "",
    emailNormal: true,
    emailPDF: false,
    format: "401",
    minOrderValue: "",
    maxOrderValue: "",
    minRetailValue: "",
    maxRetailValue: "",
    minUnits: "",
    maxUnits: "",
    minLines: "",
    maxLines: "",
    orderMessage: "",
    messageStartDate: "",
    messageEndDate: "",
  });
  const [showContactForm, setShowContactForm] = useState(false);
  const [editingContact, setEditingContact] = useState<Contact | null>(null);
  const [contactForm, setContactForm] = useState({
    name: "",
    firstName: "",
    lastName: "",
    title: "",
    phone: "",
    mobile: "",
    email: "",
    comments: "",
  });
  const [loading, setLoading] = useState(true);
  const [newLogEntry, setNewLogEntry] = useState("");
  const [logReminder, setLogReminder] = useState("");
  const [isEditing, setIsEditing] = useState(false);
  const [editForm, setEditForm] = useState({
    name: "",
    phone: "",
    fax: "",
    email: "",
    address1: "",
    address2: "",
    city: "",
    state: "",
    postalCode: "",
    country: "",
  });
  const [saveMessage, setSaveMessage] = useState<{
    type: "success" | "error";
    text: string;
  } | null>(null);
 
  useEffect(() => {
    if (supplierId) {
      console.log('Loading supplier with ID:', supplierId);
      loadSupplierData();
      loadRecentOrders();
      loadContactLogs();
      loadAnalytics();
      loadContacts();
      loadStoreCodes();
      loadFreightConfig();
      loadOrderSettings();
    }
  }, [supplierId]);
 
  const loadSupplierData = async () => {
    try {
      setLoading(true);
      console.log('Fetching supplier data for ID:', supplierId);
      
      const result = await apiClient.getSuppliers({
        search: supplierId,
        source: 'openapi',
      });
 
      console.log('Supplier API result:', result);
 
      if (result.success && result.data) {
        const apiData = result.data as any;
        const supplierData = apiData?.data?.DATS || [];
        
        // Find supplier by ID
        const data = supplierData.find((s: any) => s.Spid === Number(supplierId));
        
        if (data) {
          console.log('Supplier data:', data);
          
          setSupplier({
            id: data.Spid || 0,
            name: data.Name || "",
            phone: data.Phone || "",
            fax: data.Fax || "",
            email: data.Email || "",
            address1: data.Address1 || "",
            address2: data.Address2 || "",
            city: data.City || "",
            state: data.State || "",
            postalCode: data.PostalCode || "",
            country: data.Country || "",
            key: data.Key || "",
            accountId: 0,
            accountBalance: 0,
            totalOrders: 0,
            totalSpend: 0,
            firstOrder: "",
            lastOrder: "",
          });
          
          // Initialize edit form
          setEditForm({
            name: data.Name || "",
            phone: data.Phone || "",
            fax: data.Fax || "",
            email: data.Email || "",
            address1: data.Address1 || "",
            address2: data.Address2 || "",
            city: data.City || "",
            state: data.State || "",
            postalCode: data.PostalCode || "",
            country: data.Country || "",
          });
        } else {
          console.error('Supplier not found');
        }
      } else {
        console.error('No supplier data found in response');
      }
      setLoading(false);
    } catch (error) {
      console.error("Error loading supplier data:", error);
      setLoading(false);
    }
  };
 
  const loadRecentOrders = async () => {
    try {
      const result = await apiClient.getPurchaseOrders({ spid: parseInt(supplierId) });
      
      if (result.success && result.data) {
        // Map OpenAPI PurchaseOrder data to our interface
        const orders = result.data.map((po: any) => {
          // Count items in the ITEM array
          const itemCount = po.ITEM ? (Array.isArray(po.ITEM) ? po.ITEM.length : 1) : 0;
          
          // Determine status based on PoState
          let status = "Unknown";
          if (po.PoState === "1" || po.PoState === 1) status = "Pending";
          else if (po.PoState === "2" || po.PoState === 2) status = "Received";
          else if (po.PoState === "3" || po.PoState === 3) status = "Partial";
          else if (po.PoState === "4" || po.PoState === 4) status = "Cancelled";
          
          return {
            id: parseInt(po.Poid) || 0,
            date: po.EntryDt ? new Date(po.EntryDt).toLocaleDateString() : "N/A",
            status: status,
            total: parseFloat(po.TotalExTax) || 0,
            items: itemCount,
            expectedDate: po.ExpectedDt ? new Date(po.ExpectedDt).toLocaleDateString() : undefined,
            store: po.ShipToLoc ? `Location ${po.ShipToLoc}` : "N/A"
          };
        });
        
        // Sort by date (most recent first) and take top 5
        const sortedOrders = orders.sort((a, b) => 
          new Date(b.date).getTime() - new Date(a.date).getTime()
        ).slice(0, 5);
        
        setRecentOrders(sortedOrders);
      } else {
        // If no data, set empty array
        setRecentOrders([]);
      }
    } catch (error) {
      console.error("Error loading orders:", error);
      setRecentOrders([]);
    }
  };
 
  const loadAnalytics = async () => {
    try {
      // Mock analytics data
      const mockProducts: TopProduct[] = [
        { name: "Product A", quantity: 500, value: 12500, lastOrdered: "2024-12-20" },
        { name: "Product B", quantity: 350, value: 8750, lastOrdered: "2024-12-18" },
        { name: "Product C", quantity: 280, value: 7000, lastOrdered: "2024-12-15" },
      ];
      setTopProducts(mockProducts);
 
      const mockDeptSpend: DepartmentSpend[] = [
        { department: "Electronics", amount: 25000, color: "#00543b" },
        { department: "Hardware", amount: 18000, color: "#007d57" },
        { department: "Garden", amount: 12000, color: "#00a874" },
      ];
      setDepartmentSpend(mockDeptSpend);
 
      const mockTrend: OrderTrend[] = [
        { date: "Nov", amount: 15000, quantity: 450 },
        { date: "Dec", amount: 22000, quantity: 680 },
      ];
      setOrderTrend(mockTrend);
      
    } catch (error) {
      console.error("Error loading analytics:", error);
    }
  };
 
  const loadContacts = async () => {
    try {
      // Mock contacts - would come from supplier contacts API
      const mockContacts: Contact[] = [
        {
          id: "1",
          name: "John Smith",
          firstName: "John",
          lastName: "Smith",
          title: "Sales Manager",
          phone: "(555) 123-4567",
          mobile: "(555) 987-6543",
          email: "john.smith@supplier.com",
          comments: "Primary contact for orders"
        },
        {
          id: "2",
          name: "Sarah Johnson",
          firstName: "Sarah",
          lastName: "Johnson",
          title: "Account Manager",
          phone: "(555) 234-5678",
          mobile: "",
          email: "sarah.j@supplier.com",
          comments: "Handles invoicing queries"
        }
      ];
      setContacts(mockContacts);
    } catch (error) {
      console.error("Error loading contacts:", error);
    }
  };
 
  const loadStoreCodes = async () => {
    try {
      // Mock store codes - would come from locations API with supplier codes
      const mockCodes: StoreCode[] = [
        { storeId: 1, storeName: "Main Store", code: "MS-001" },
        { storeId: 2, storeName: "North Branch", code: "NB-002" },
        { storeId: 3, storeName: "South Branch", code: "SB-003" },
      ];
      setStoreCodes(mockCodes);
    } catch (error) {
      console.error("Error loading store codes:", error);
    }
  };
 
  const loadFreightConfig = async () => {
    try {
      // Mock freight config - would come from supplier freight settings API
      setFreightConfig({
        allFree: false,
        fixedCost: "",
        value1High: "500.00",
        value1Charge: "25.00",
        value2Low: "500.00",
        value2High: "1000.00",
        value2Charge: "15.00",
        aboveFree: "1000.00",
        comments: "Free shipping on orders over $1000"
      });
    } catch (error) {
      console.error("Error loading freight config:", error);
    }
  };
 
  const loadOrderSettings = async () => {
    try {
      // Mock order settings - would come from supplier order settings API
      setOrderSettings({
        email: "orders@supplier.com",
        emailSubject: "Purchase Order from EverydayPOS",
        emailNormal: true,
        emailPDF: true,
        format: "401",
        minOrderValue: "100.00",
        maxOrderValue: "",
        minRetailValue: "",
        maxRetailValue: "",
        minUnits: "10",
        maxUnits: "",
        minLines: "",
        maxLines: "",
        orderMessage: "",
        messageStartDate: "",
        messageEndDate: "",
      });
    } catch (error) {
      console.error("Error loading order settings:", error);
    }
  };
 
  const loadContactLogs = async () => {
    try {
      // Mock contact logs
      const mockLogs: ContactLog[] = [
        { date: "2024-12-20", message: "Discussed new product line for Q1 2025" },
        { date: "2024-12-15", message: "Confirmed delivery schedule for next order" },
      ];
      setContactLogs(mockLogs);
    } catch (error) {
      console.error("Error loading contact logs:", error);
    }
  };
 
  const handleSaveContactLog = () => {
    if (newLogEntry.trim()) {
      const newLog: ContactLog = {
        date: new Date().toISOString().split("T")[0],
        message: newLogEntry.trim(),
      };
      setContactLogs([newLog, ...contactLogs]);
      setNewLogEntry("");
      
      // TODO: Save to API
      console.log("Saving contact log:", newLog);
    }
  };
 
  const handleSaveEdit = async () => {
    try {
      // TODO: Call API to update supplier
      console.log("Saving supplier data:", editForm);
      
      // Update local state
      if (supplier) {
        setSupplier({
          ...supplier,
          ...editForm,
        });
      }
      
      setSaveMessage({ type: "success", text: "Supplier updated successfully!" });
      setIsEditing(false);
      
      setTimeout(() => setSaveMessage(null), 3000);
    } catch (error) {
      console.error("Error saving supplier:", error);
      setSaveMessage({ type: "error", text: "Failed to update supplier" });
      setTimeout(() => setSaveMessage(null), 3000);
    }
  };
 
  // Contact Management Handlers
  const handleSaveContact = () => {
    if (editingContact) {
      // Update existing contact
      setContacts(contacts.map(c => 
        c.id === editingContact.id 
          ? { ...c, ...contactForm }
          : c
      ));
      setSaveMessage({ type: "success", text: "Contact updated successfully!" });
    } else {
      // Add new contact
      const newContact: Contact = {
        id: Date.now().toString(),
        ...contactForm,
      };
      setContacts([...contacts, newContact]);
      setSaveMessage({ type: "success", text: "Contact added successfully!" });
    }
    
    setShowContactForm(false);
    setEditingContact(null);
    setContactForm({
      name: "",
      firstName: "",
      lastName: "",
      title: "",
      phone: "",
      mobile: "",
      email: "",
      comments: "",
    });
    setTimeout(() => setSaveMessage(null), 3000);
  };
 
  const handleEditContact = (contact: Contact) => {
    setEditingContact(contact);
    setContactForm({
      name: contact.name,
      firstName: contact.firstName,
      lastName: contact.lastName,
      title: contact.title,
      phone: contact.phone,
      mobile: contact.mobile,
      email: contact.email,
      comments: contact.comments,
    });
    setShowContactForm(true);
  };
 
  const handleDeleteContact = (contactId: string) => {
    if (confirm("Are you sure you want to delete this contact?")) {
      setContacts(contacts.filter(c => c.id !== contactId));
      setSaveMessage({ type: "success", text: "Contact deleted successfully!" });
      setTimeout(() => setSaveMessage(null), 3000);
    }
  };
 
  // Store Code Handlers
  const handleUpdateStoreCode = (storeId: number, code: string) => {
    setStoreCodes(storeCodes.map(sc => 
      sc.storeId === storeId ? { ...sc, code } : sc
    ));
    // TODO: Save to API
    console.log("Updating store code:", storeId, code);
  };
 
  // Freight Config Handlers
  const handleUpdateFreightConfig = (field: keyof FreightConfig, value: string | boolean) => {
    setFreightConfig({ ...freightConfig, [field]: value });
    // TODO: Save to API
    console.log("Updating freight config:", field, value);
  };
 
  // Order Settings Handlers
  const handleUpdateOrderSettings = (field: keyof OrderSettings, value: string | boolean) => {
    setOrderSettings({ ...orderSettings, [field]: value });
    // TODO: Save to API
    console.log("Updating order settings:", field, value);
  };
 
  const handleCancelEdit = () => {
    if (supplier) {
      setEditForm({
        name: supplier.name,
        phone: supplier.phone,
        fax: supplier.fax,
        email: supplier.email,
        address1: supplier.address1,
        address2: supplier.address2,
        city: supplier.city,
        state: supplier.state,
        postalCode: supplier.postalCode,
        country: supplier.country,
      });
    }
    setIsEditing(false);
  };
 
  // Chart configurations
  const orderTrendData = {
    labels: orderTrend.map((item) => item.date),
    datasets: [
      {
        label: "Order Value ($)",
        data: orderTrend.map((item) => item.amount),
        borderColor: "#00946b",
        backgroundColor: "rgba(0, 148, 107, 0.1)",
        fill: true,
        tension: 0.4,
      },
    ],
  };
 
  const departmentData = {
    labels: departmentSpend.map((item) => item.department),
    datasets: [
      {
        data: departmentSpend.map((item) => item.amount),
        backgroundColor: departmentSpend.map((item) => item.color),
        borderWidth: 0,
      },
    ],
  };
 
  const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false,
      },
    },
  };
 
  if (loading) {
    return (
      <div className="p-6 min-h-screen bg-bg">
        <div className="flex items-center justify-center h-64">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#00946b] mx-auto"></div>
            <p className="mt-4 text-muted">Loading supplier data...</p>
          </div>
        </div>
      </div>
    );
  }
 
  if (!supplier) {
    return (
      <div className="p-6 min-h-screen bg-bg">
        <div className="max-w-7xl mx-auto">
          <div className="bg-surface rounded-lg shadow-md p-8 text-center">
            <h2 className="text-2xl font-bold text-text mb-4">Supplier Not Found</h2>
            <p className="text-muted mb-6">The supplier with ID {supplierId} could not be found.</p>
            <button
              onClick={() => router.push("/pages/suppliers")}
              className="px-6 py-2 bg-[#00946b] text-white rounded-lg hover:bg-[#00543b] transition-colors"
            >
              Back to Suppliers
            </button>
          </div>
        </div>
      </div>
    );
  }
 
  return (
    <div className="p-6 min-h-screen bg-bg">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-6 flex items-center justify-between">
          <div>
            <button
              onClick={() => router.push("/pages/suppliers")}
              className="text-[#00946b] hover:text-[#00543b] mb-2 flex items-center gap-2"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
              Back to Suppliers
            </button>
            <h1 className="text-3xl font-bold text-text">{supplier.name}</h1>
            <p className="text-muted">Supplier ID: {supplier.id}</p>
          </div>
          <button
            onClick={() => setIsEditing(!isEditing)}
            className="px-4 py-2 bg-[#00946b] text-white rounded-lg hover:bg-[#00543b] transition-colors"
          >
            {isEditing ? "Cancel" : "Edit Supplier"}
          </button>
        </div>
 
        {/* Save Message */}
        {saveMessage && (
          <div
            className={`mb-4 p-4 rounded-lg ${
              saveMessage.type === "success"
                ? "bg-green-50 text-green-800 border border-green-200"
                : "bg-red-50 text-red-800 border border-red-200"
            }`}
          >
            {saveMessage.text}
          </div>
        )}
 
        {/* Tabs */}
        <div className="mb-6 bg-surface rounded-lg shadow-sm border border-border p-1">
          <nav className="flex gap-2">
            <button
              onClick={() => setActiveTab("overview")}
              className={`flex-1 py-3 px-6 font-semibold text-base rounded-md transition-all ${
                activeTab === "overview"
                  ? "bg-[#00543b] text-white shadow-md"
                  : "bg-transparent text-muted hover:bg-surface-2 hover:text-text"
              }`}
            >
              <span className="text-xl mr-2">📊</span>
              Overview
            </button>
            <button
              onClick={() => setActiveTab("contacts")}
              className={`flex-1 py-3 px-6 font-semibold text-base rounded-md transition-all ${
                activeTab === "contacts"
                  ? "bg-[#00543b] text-white shadow-md"
                  : "bg-transparent text-muted hover:bg-surface-2 hover:text-text"
              }`}
            >
              <span className="text-xl mr-2">👥</span>
              Contacts
              <span className={`ml-2 px-2 py-0.5 text-xs rounded-full ${
                activeTab === "contacts" 
                  ? "bg-surface/20 text-white" 
                  : "bg-surface-2 text-text"
              }`}>
                {contacts.length}
              </span>
            </button>
            <button
              onClick={() => setActiveTab("ordering")}
              className={`flex-1 py-3 px-6 font-semibold text-base rounded-md transition-all ${
                activeTab === "ordering"
                  ? "bg-[#00543b] text-white shadow-md"
                  : "bg-transparent text-muted hover:bg-surface-2 hover:text-text"
              }`}
            >
              <span className="text-xl mr-2">📦</span>
              Ordering
            </button>
            <button
              onClick={() => setActiveTab("stores")}
              className={`flex-1 py-3 px-6 font-semibold text-base rounded-md transition-all ${
                activeTab === "stores"
                  ? "bg-[#00543b] text-white shadow-md"
                  : "bg-transparent text-muted hover:bg-surface-2 hover:text-text"
              }`}
            >
              <span className="text-xl mr-2">🏪</span>
              Store Codes
              <span className={`ml-2 px-2 py-0.5 text-xs rounded-full ${
                activeTab === "stores" 
                  ? "bg-surface/20 text-white" 
                  : "bg-surface-2 text-text"
              }`}>
                {storeCodes.length}
              </span>
            </button>
          </nav>
        </div>
 
        {/* Overview Tab */}
        {activeTab === "overview" && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left Column - Supplier Info */}
          <div className="lg:col-span-1 space-y-6">
            {/* Contact Information */}
            <div className="bg-surface rounded-lg shadow-md p-6">
              <h2 className="text-xl font-bold text-text mb-4">Contact Information</h2>
              
              {isEditing ? (
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-text mb-1">Name</label>
                    <input
                      type="text"
                      value={editForm.name}
                      onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
                      className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text mb-1">Email</label>
                    <input
                      type="email"
                      value={editForm.email}
                      onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                      className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text mb-1">Phone</label>
                    <input
                      type="tel"
                      value={editForm.phone}
                      onChange={(e) => setEditForm({ ...editForm, phone: e.target.value })}
                      className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text mb-1">Fax</label>
                    <input
                      type="tel"
                      value={editForm.fax}
                      onChange={(e) => setEditForm({ ...editForm, fax: e.target.value })}
                      className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text mb-1">Address Line 1</label>
                    <input
                      type="text"
                      value={editForm.address1}
                      onChange={(e) => setEditForm({ ...editForm, address1: e.target.value })}
                      className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text mb-1">Address Line 2</label>
                    <input
                      type="text"
                      value={editForm.address2}
                      onChange={(e) => setEditForm({ ...editForm, address2: e.target.value })}
                      className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-sm font-medium text-text mb-1">City</label>
                      <input
                        type="text"
                        value={editForm.city}
                        onChange={(e) => setEditForm({ ...editForm, city: e.target.value })}
                        className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-text mb-1">State</label>
                      <input
                        type="text"
                        value={editForm.state}
                        onChange={(e) => setEditForm({ ...editForm, state: e.target.value })}
                        className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-sm font-medium text-text mb-1">Postal Code</label>
                      <input
                        type="text"
                        value={editForm.postalCode}
                        onChange={(e) => setEditForm({ ...editForm, postalCode: e.target.value })}
                        className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-text mb-1">Country</label>
                      <input
                        type="text"
                        value={editForm.country}
                        onChange={(e) => setEditForm({ ...editForm, country: e.target.value })}
                        className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                      />
                    </div>
                  </div>
                  
                  <div className="flex gap-3 pt-4">
                    <button
                      onClick={handleSaveEdit}
                      className="flex-1 px-4 py-2 bg-[#00946b] text-white rounded-lg hover:bg-[#00543b] transition-colors"
                    >
                      Save Changes
                    </button>
                    <button
                      onClick={handleCancelEdit}
                      className="flex-1 px-4 py-2 bg-surface-2 text-text rounded-lg hover:bg-surface-2 transition-colors"
                    >
                      Cancel
                    </button>
                  </div>
                </div>
              ) : (
                <div className="space-y-3">
                  {supplier.email && (
                    <div className="flex items-start gap-3">
                      <svg className="w-5 h-5 text-muted/70 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                      </svg>
                      <div>
                        <p className="text-sm text-muted">Email</p>
                        <a href={`mailto:${supplier.email}`} className="text-[#00946b] hover:underline">
                          {supplier.email}
                        </a>
                      </div>
                    </div>
                  )}
                  
                  {supplier.phone && (
                    <div className="flex items-start gap-3">
                      <svg className="w-5 h-5 text-muted/70 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                      </svg>
                      <div>
                        <p className="text-sm text-muted">Phone</p>
                        <a href={`tel:${supplier.phone}`} className="text-[#00946b] hover:underline">
                          {supplier.phone}
                        </a>
                      </div>
                    </div>
                  )}
                  
                  {supplier.fax && (
                    <div className="flex items-start gap-3">
                      <svg className="w-5 h-5 text-muted/70 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
                      </svg>
                      <div>
                        <p className="text-sm text-muted">Fax</p>
                        <p className="text-text">{supplier.fax}</p>
                      </div>
                    </div>
                  )}
                  
                  {(supplier.address1 || supplier.city) && (
                    <div className="flex items-start gap-3">
                      <svg className="w-5 h-5 text-muted/70 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                      </svg>
                      <div>
                        <p className="text-sm text-muted">Address</p>
                        <div className="text-text">
                          {supplier.address1 && <p>{supplier.address1}</p>}
                          {supplier.address2 && <p>{supplier.address2}</p>}
                          {(supplier.city || supplier.state || supplier.postalCode) && (
                            <p>
                              {[supplier.city, supplier.state, supplier.postalCode]
                                .filter(Boolean)
                                .join(", ")}
                            </p>
                          )}
                          {supplier.country && <p>{supplier.country}</p>}
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>
 
            {/* Quick Stats */}
            <div className="bg-surface rounded-lg shadow-md p-6">
              <h2 className="text-xl font-bold text-text mb-4">Quick Stats</h2>
              <div className="space-y-4">
                <div className="flex justify-between items-center p-3 bg-green-50 rounded-lg">
                  <span className="text-sm font-medium text-text">Total Orders</span>
                  <span className="text-lg font-bold text-[#00946b]">{supplier.totalOrders || 0}</span>
                </div>
                <div className="flex justify-between items-center p-3 bg-info/10 rounded-lg">
                  <span className="text-sm font-medium text-text">Total Spend</span>
                  <span className="text-lg font-bold text-brand">
                    ${(supplier.totalSpend || 0).toLocaleString()}
                  </span>
                </div>
                <div className="flex justify-between items-center p-3 bg-yellow-50 rounded-lg">
                  <span className="text-sm font-medium text-text">Account Balance</span>
                  <span className="text-lg font-bold text-yellow-600">
                    ${(supplier.accountBalance || 0).toLocaleString()}
                  </span>
                </div>
              </div>
            </div>
 
            {/* Contact Log */}
            <div className="bg-surface rounded-lg shadow-md p-6">
              <h2 className="text-xl font-bold text-text mb-4">Contact Log</h2>
              
              <div className="mb-4">
                <textarea
                  value={newLogEntry}
                  onChange={(e) => setNewLogEntry(e.target.value)}
                  placeholder="Add a note about this supplier..."
                  className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent resize-none"
                  rows={3}
                />
                <button
                  onClick={handleSaveContactLog}
                  className="mt-2 w-full px-4 py-2 bg-[#00946b] text-white rounded-lg hover:bg-[#00543b] transition-colors"
                >
                  Add Log Entry
                </button>
              </div>
              
              <div className="space-y-3 max-h-64 overflow-y-auto">
                {contactLogs.length === 0 ? (
                  <p className="text-sm text-muted text-center py-4">No contact logs yet</p>
                ) : (
                  contactLogs.map((log, index) => (
                    <div key={index} className="p-3 bg-surface-2 rounded-lg">
                      <p className="text-xs text-muted mb-1">{log.date}</p>
                      <p className="text-sm text-text">{log.message}</p>
                    </div>
                  ))
                )}
              </div>
            </div>
          </div>
 
          {/* Right Column - Orders and Analytics */}
          <div className="lg:col-span-2 space-y-6">
            {/* Recent Orders */}
            <div className="bg-surface rounded-lg shadow-md p-6">
              <h2 className="text-xl font-bold text-text mb-4">Recent Purchase Orders</h2>
              
              {recentOrders.length === 0 ? (
                <p className="text-muted text-center py-8">No recent orders</p>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b border-border">
                        <th className="text-left py-3 px-4 text-sm font-semibold text-text">PO #</th>
                        <th className="text-left py-3 px-4 text-sm font-semibold text-text">Date</th>
                        <th className="text-left py-3 px-4 text-sm font-semibold text-text">Status</th>
                        <th className="text-right py-3 px-4 text-sm font-semibold text-text">Items</th>
                        <th className="text-right py-3 px-4 text-sm font-semibold text-text">Total</th>
                        <th className="text-left py-3 px-4 text-sm font-semibold text-text">Store</th>
                      </tr>
                    </thead>
                    <tbody>
                      {recentOrders.map((order) => (
                        <tr key={order.id} className="border-b border-border hover:bg-surface-2">
                          <td className="py-3 px-4 text-sm">
                            <span className="font-mono text-[#00946b]">{order.id}</span>
                          </td>
                          <td className="py-3 px-4 text-sm text-text">{order.date}</td>
                          <td className="py-3 px-4">
                            <span
                              className={`inline-block px-2 py-1 text-xs font-semibold rounded-full ${
                                order.status === "Received"
                                  ? "bg-green-100 text-green-800"
                                  : order.status === "Pending"
                                  ? "bg-yellow-100 text-yellow-800"
                                  : "bg-surface-2 text-text"
                              }`}
                            >
                              {order.status}
                            </span>
                          </td>
                          <td className="py-3 px-4 text-sm text-right text-text">{order.items}</td>
                          <td className="py-3 px-4 text-sm text-right font-semibold text-text">
                            ${order.total.toLocaleString()}
                          </td>
                          <td className="py-3 px-4 text-sm text-muted">{order.store}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
 
            {/* Charts Row */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Order Trend Chart */}
              <div className="bg-surface rounded-lg shadow-md p-6">
                <h3 className="text-lg font-bold text-text mb-4">Order Trend</h3>
                <div className="h-64">
                  <Line data={orderTrendData} options={chartOptions} />
                </div>
              </div>
 
              {/* Department Spend Chart */}
              <div className="bg-surface rounded-lg shadow-md p-6">
                <h3 className="text-lg font-bold text-text mb-4">Spend by Department</h3>
                <div className="h-64">
                  <Doughnut data={departmentData} options={chartOptions} />
                </div>
              </div>
            </div>
 
            {/* Top Products */}
            <div className="bg-surface rounded-lg shadow-md p-6">
              <h3 className="text-lg font-bold text-text mb-4">Top Products Ordered</h3>
              
              {topProducts.length === 0 ? (
                <p className="text-muted text-center py-8">No product data available</p>
              ) : (
                <div className="space-y-3">
                  {topProducts.map((product, index) => (
                    <div key={index} className="flex items-center justify-between p-3 bg-surface-2 rounded-lg">
                      <div className="flex items-center gap-3">
                        <div className="flex items-center justify-center w-8 h-8 bg-[#00946b] text-white rounded-full font-bold text-sm">
                          {index + 1}
                        </div>
                        <div>
                          <p className="font-medium text-text">{product.name}</p>
                          {product.lastOrdered && (
                            <p className="text-xs text-muted">Last ordered: {product.lastOrdered}</p>
                          )}
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="font-semibold text-text">${product.value.toLocaleString()}</p>
                        <p className="text-sm text-muted">{product.quantity} units</p>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
          </div>
        )}
 
        {/* Contacts Tab */}
        {activeTab === "contacts" && (
          <div className="bg-surface rounded-lg shadow-md p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-text">Supplier Contacts</h2>
              <button
                onClick={() => {
                  setEditingContact(null);
                  setContactForm({
                    name: "",
                    firstName: "",
                    lastName: "",
                    title: "",
                    phone: "",
                    mobile: "",
                    email: "",
                    comments: "",
                  });
                  setShowContactForm(true);
                }}
                className="px-4 py-2 bg-[#00946b] text-white rounded-lg hover:bg-[#00543b] transition-colors"
              >
                Add Contact
              </button>
            </div>
 
            {/* Contacts Grid */}
            {contacts.length === 0 ? (
              <div className="text-center py-12">
                <svg className="mx-auto h-12 w-12 text-muted/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
                <p className="mt-2 text-muted">No contacts yet. Add your first contact to get started.</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {contacts.map((contact) => (
                  <div key={contact.id} className="border border-border rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex items-center gap-3">
                        <div className="w-12 h-12 bg-[#00946b] text-white rounded-full flex items-center justify-center font-bold text-lg">
                          {contact.firstName ? contact.firstName.charAt(0) : contact.name.charAt(0)}
                          {contact.lastName ? contact.lastName.charAt(0) : ""}
                        </div>
                        <div>
                          <h3 className="font-semibold text-text">{contact.name}</h3>
                          {contact.title && <p className="text-sm text-muted">{contact.title}</p>}
                        </div>
                      </div>
                    </div>
 
                    <div className="space-y-2 mb-4">
                      {contact.phone && (
                        <div className="flex items-center gap-2 text-sm">
                          <svg className="w-4 h-4 text-muted/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                          </svg>
                          <span className="text-text">{contact.phone}</span>
                        </div>
                      )}
                      {contact.mobile && (
                        <div className="flex items-center gap-2 text-sm">
                          <svg className="w-4 h-4 text-muted/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                          </svg>
                          <span className="text-text">{contact.mobile}</span>
                        </div>
                      )}
                      {contact.email && (
                        <div className="flex items-center gap-2 text-sm">
                          <svg className="w-4 h-4 text-muted/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                          </svg>
                          <span className="text-text truncate">{contact.email}</span>
                        </div>
                      )}
                    </div>
 
                    {contact.comments && (
                      <p className="text-sm text-muted mb-4 italic">{contact.comments}</p>
                    )}
 
                    <div className="flex gap-2">
                      <button
                        onClick={() => handleEditContact(contact)}
                        className="flex-1 px-3 py-1.5 text-sm bg-surface-2 text-text rounded hover:bg-surface-2 transition-colors"
                      >
                        Edit
                      </button>
                      <button
                        onClick={() => handleDeleteContact(contact.id)}
                        className="flex-1 px-3 py-1.5 text-sm bg-red-50 text-red-600 rounded hover:bg-red-100 transition-colors"
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
 
            {/* Contact Form Modal */}
            {showContactForm && (
              <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
                <div className="bg-surface rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
                  <div className="p-6">
                    <h3 className="text-xl font-bold text-text mb-4">
                      {editingContact ? "Edit Contact" : "Add New Contact"}
                    </h3>
 
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-text mb-1">Full Name</label>
                        <input
                          type="text"
                          value={contactForm.name}
                          onChange={(e) => setContactForm({ ...contactForm, name: e.target.value })}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="John Smith"
                        />
                      </div>
 
                      <div>
                        <label className="block text-sm font-medium text-text mb-1">First Name</label>
                        <input
                          type="text"
                          value={contactForm.firstName}
                          onChange={(e) => setContactForm({ ...contactForm, firstName: e.target.value })}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="John"
                        />
                      </div>
 
                      <div>
                        <label className="block text-sm font-medium text-text mb-1">Last Name</label>
                        <input
                          type="text"
                          value={contactForm.lastName}
                          onChange={(e) => setContactForm({ ...contactForm, lastName: e.target.value })}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="Smith"
                        />
                      </div>
 
                      <div>
                        <label className="block text-sm font-medium text-text mb-1">Title</label>
                        <input
                          type="text"
                          value={contactForm.title}
                          onChange={(e) => setContactForm({ ...contactForm, title: e.target.value })}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="Sales Manager"
                        />
                      </div>
 
                      <div>
                        <label className="block text-sm font-medium text-text mb-1">Phone</label>
                        <input
                          type="tel"
                          value={contactForm.phone}
                          onChange={(e) => setContactForm({ ...contactForm, phone: e.target.value })}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="(555) 123-4567"
                        />
                      </div>
 
                      <div>
                        <label className="block text-sm font-medium text-text mb-1">Mobile</label>
                        <input
                          type="tel"
                          value={contactForm.mobile}
                          onChange={(e) => setContactForm({ ...contactForm, mobile: e.target.value })}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="(555) 987-6543"
                        />
                      </div>
 
                      <div className="md:col-span-2">
                        <label className="block text-sm font-medium text-text mb-1">Email</label>
                        <input
                          type="email"
                          value={contactForm.email}
                          onChange={(e) => setContactForm({ ...contactForm, email: e.target.value })}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="john.smith@supplier.com"
                        />
                      </div>
 
                      <div className="md:col-span-2">
                        <label className="block text-sm font-medium text-text mb-1">Comments</label>
                        <textarea
                          value={contactForm.comments}
                          onChange={(e) => setContactForm({ ...contactForm, comments: e.target.value })}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent resize-none"
                          rows={3}
                          placeholder="Additional notes about this contact..."
                        />
                      </div>
                    </div>
 
                    <div className="flex gap-3 mt-6">
                      <button
                        onClick={handleSaveContact}
                        className="flex-1 px-4 py-2 bg-[#00946b] text-white rounded-lg hover:bg-[#00543b] transition-colors"
                      >
                        {editingContact ? "Update Contact" : "Add Contact"}
                      </button>
                      <button
                        onClick={() => {
                          setShowContactForm(false);
                          setEditingContact(null);
                        }}
                        className="flex-1 px-4 py-2 bg-surface-2 text-text rounded-lg hover:bg-surface-2 transition-colors"
                      >
                        Cancel
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}
 
        {/* Store Codes Tab */}
        {activeTab === "stores" && (
          <div className="bg-surface rounded-lg shadow-md p-6">
            <h2 className="text-2xl font-bold text-text mb-6">Store-Specific Supplier Codes</h2>
            <p className="text-muted mb-6">
              Map this supplier to specific codes used at each of your stores. Changes are automatically saved.
            </p>
 
            {storeCodes.length === 0 ? (
              <div className="text-center py-12">
                <p className="text-muted">No stores configured</p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b-2 border-border">
                      <th className="text-left py-3 px-4 font-semibold text-text">Store ID</th>
                      <th className="text-left py-3 px-4 font-semibold text-text">Store Name</th>
                      <th className="text-left py-3 px-4 font-semibold text-text">Supplier Code</th>
                    </tr>
                  </thead>
                  <tbody>
                    {storeCodes.map((store) => (
                      <tr key={store.storeId} className="border-b border-border hover:bg-surface-2">
                        <td className="py-3 px-4 text-sm text-muted">{store.storeId}</td>
                        <td className="py-3 px-4 text-sm font-medium text-text">{store.storeName}</td>
                        <td className="py-3 px-4">
                          <input
                            type="text"
                            value={store.code}
                            onChange={(e) => handleUpdateStoreCode(store.storeId, e.target.value)}
                            className="w-full max-w-xs px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                            placeholder="Enter supplier code..."
                          />
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )}
 
        {/* Ordering Tab */}
        {activeTab === "ordering" && (
          <div className="space-y-6">
            {/* Freight Configuration */}
            <div className="bg-surface rounded-lg shadow-md p-6">
              <h2 className="text-2xl font-bold text-text mb-6">Freight Configuration</h2>
 
              <div className="space-y-6">
                <div className="flex items-center gap-3">
                  <input
                    type="checkbox"
                    id="allFree"
                    checked={freightConfig.allFree}
                    onChange={(e) => handleUpdateFreightConfig("allFree", e.target.checked)}
                    className="w-5 h-5 text-[#00946b] border-border rounded focus:ring-[#00946b]"
                  />
                  <label htmlFor="allFree" className="text-sm font-medium text-text">
                    All Freight Free (disables all other freight charges)
                  </label>
                </div>
 
                {!freightConfig.allFree && (
                  <>
                    <div>
                      <label className="block text-sm font-medium text-text mb-2">Fixed Freight Cost</label>
                      <div className="flex items-center gap-2">
                        <span className="text-muted">$</span>
                        <input
                          type="text"
                          value={freightConfig.fixedCost}
                          onChange={(e) => handleUpdateFreightConfig("fixedCost", e.target.value)}
                          className="w-32 px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="0.00"
                        />
                        <span className="text-sm text-muted">Flat rate per order</span>
                      </div>
                    </div>
 
                    <div className="border-t border-border pt-6">
                      <h3 className="text-lg font-semibold text-text mb-4">Value-Based Freight Tiers</h3>
 
                      {/* Tier 1 */}
                      <div className="bg-surface-2 p-4 rounded-lg mb-4">
                        <h4 className="text-sm font-semibold text-text mb-3">Tier 1: Order Value up to</h4>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <label className="block text-sm text-muted mb-1">Maximum Value</label>
                            <div className="flex items-center gap-2">
                              <span className="text-muted">$</span>
                              <input
                                type="text"
                                value={freightConfig.value1High}
                                onChange={(e) => handleUpdateFreightConfig("value1High", e.target.value)}
                                className="flex-1 px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                                placeholder="500.00"
                              />
                            </div>
                          </div>
                          <div>
                            <label className="block text-sm text-muted mb-1">Freight Charge</label>
                            <div className="flex items-center gap-2">
                              <span className="text-muted">$</span>
                              <input
                                type="text"
                                value={freightConfig.value1Charge}
                                onChange={(e) => handleUpdateFreightConfig("value1Charge", e.target.value)}
                                className="flex-1 px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                                placeholder="25.00"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
 
                      {/* Tier 2 */}
                      <div className="bg-surface-2 p-4 rounded-lg mb-4">
                        <h4 className="text-sm font-semibold text-text mb-3">Tier 2: Order Value between</h4>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                          <div>
                            <label className="block text-sm text-muted mb-1">Minimum Value</label>
                            <div className="flex items-center gap-2">
                              <span className="text-muted">$</span>
                              <input
                                type="text"
                                value={freightConfig.value2Low}
                                onChange={(e) => handleUpdateFreightConfig("value2Low", e.target.value)}
                                className="flex-1 px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                                placeholder="500.00"
                              />
                            </div>
                          </div>
                          <div>
                            <label className="block text-sm text-muted mb-1">Maximum Value</label>
                            <div className="flex items-center gap-2">
                              <span className="text-muted">$</span>
                              <input
                                type="text"
                                value={freightConfig.value2High}
                                onChange={(e) => handleUpdateFreightConfig("value2High", e.target.value)}
                                className="flex-1 px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                                placeholder="1000.00"
                              />
                            </div>
                          </div>
                          <div>
                            <label className="block text-sm text-muted mb-1">Freight Charge</label>
                            <div className="flex items-center gap-2">
                              <span className="text-muted">$</span>
                              <input
                                type="text"
                                value={freightConfig.value2Charge}
                                onChange={(e) => handleUpdateFreightConfig("value2Charge", e.target.value)}
                                className="flex-1 px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                                placeholder="15.00"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
 
                      {/* Freight Free Threshold */}
                      <div className="bg-green-50 p-4 rounded-lg">
                        <h4 className="text-sm font-semibold text-text mb-3">Freight-Free Threshold</h4>
                        <div>
                          <label className="block text-sm text-muted mb-1">Free shipping on orders above</label>
                          <div className="flex items-center gap-2">
                            <span className="text-muted">$</span>
                            <input
                              type="text"
                              value={freightConfig.aboveFree}
                              onChange={(e) => handleUpdateFreightConfig("aboveFree", e.target.value)}
                              className="w-40 px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                              placeholder="1000.00"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
 
                    <div>
                      <label className="block text-sm font-medium text-text mb-2">Freight Comments</label>
                      <textarea
                        value={freightConfig.comments}
                        onChange={(e) => handleUpdateFreightConfig("comments", e.target.value)}
                        className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent resize-none"
                        rows={3}
                        placeholder="Additional freight notes or special conditions..."
                      />
                    </div>
                  </>
                )}
              </div>
            </div>
 
            {/* Order Settings */}
            <div className="bg-surface rounded-lg shadow-md p-6">
              <h2 className="text-2xl font-bold text-text mb-6">Purchase Order Settings</h2>
 
              <div className="space-y-6">
                {/* Email Configuration */}
                <div className="border-b border-border pb-6">
                  <h3 className="text-lg font-semibold text-text mb-4">Email Configuration</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-text mb-1">Email Address</label>
                      <input
                        type="email"
                        value={orderSettings.email}
                        onChange={(e) => handleUpdateOrderSettings("email", e.target.value)}
                        className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                        placeholder="orders@supplier.com"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-text mb-1">Email Subject</label>
                      <input
                        type="text"
                        value={orderSettings.emailSubject}
                        onChange={(e) => handleUpdateOrderSettings("emailSubject", e.target.value)}
                        className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                        placeholder="Purchase Order from..."
                      />
                    </div>
                  </div>
 
                  <div className="mt-4 space-y-2">
                    <div className="flex items-center gap-3">
                      <input
                        type="checkbox"
                        id="emailNormal"
                        checked={orderSettings.emailNormal}
                        onChange={(e) => handleUpdateOrderSettings("emailNormal", e.target.checked)}
                        className="w-5 h-5 text-[#00946b] border-border rounded focus:ring-[#00946b]"
                      />
                      <label htmlFor="emailNormal" className="text-sm font-medium text-text">
                        Send email in normal format (text/HTML)
                      </label>
                    </div>
                    <div className="flex items-center gap-3">
                      <input
                        type="checkbox"
                        id="emailPDF"
                        checked={orderSettings.emailPDF}
                        onChange={(e) => handleUpdateOrderSettings("emailPDF", e.target.checked)}
                        className="w-5 h-5 text-[#00946b] border-border rounded focus:ring-[#00946b]"
                      />
                      <label htmlFor="emailPDF" className="text-sm font-medium text-text">
                        Attach PDF version of purchase order
                      </label>
                    </div>
                  </div>
                </div>
 
                {/* Order Format */}
                <div className="border-b border-border pb-6">
                  <h3 className="text-lg font-semibold text-text mb-4">Order Format Template</h3>
                  <select
                    value={orderSettings.format}
                    onChange={(e) => handleUpdateOrderSettings("format", e.target.value)}
                    className="w-full max-w-md px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                  >
                    <option value="401">Format 401 - Standard Purchase Order</option>
                    <option value="402">Format 402 - Detailed Line Items</option>
                    <option value="403">Format 403 - Summary Only</option>
                    <option value="404">Format 404 - Custom Template</option>
                  </select>
                </div>
 
                {/* Order Controls */}
                <div>
                  <h3 className="text-lg font-semibold text-text mb-4">Order Validation Controls</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {/* Minimums */}
                    <div className="space-y-4">
                      <h4 className="text-sm font-semibold text-text">Minimum Requirements</h4>
                      <div>
                        <label className="block text-sm text-muted mb-1">Min Order Value</label>
                        <div className="flex items-center gap-2">
                          <span className="text-muted">$</span>
                          <input
                            type="text"
                            value={orderSettings.minOrderValue}
                            onChange={(e) => handleUpdateOrderSettings("minOrderValue", e.target.value)}
                            className="flex-1 px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                            placeholder="100.00"
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm text-muted mb-1">Min Retail Value</label>
                        <div className="flex items-center gap-2">
                          <span className="text-muted">$</span>
                          <input
                            type="text"
                            value={orderSettings.minRetailValue}
                            onChange={(e) => handleUpdateOrderSettings("minRetailValue", e.target.value)}
                            className="flex-1 px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                            placeholder="0.00"
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm text-muted mb-1">Min Units</label>
                        <input
                          type="text"
                          value={orderSettings.minUnits}
                          onChange={(e) => handleUpdateOrderSettings("minUnits", e.target.value)}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="10"
                        />
                      </div>
                      <div>
                        <label className="block text-sm text-muted mb-1">Min Lines</label>
                        <input
                          type="text"
                          value={orderSettings.minLines}
                          onChange={(e) => handleUpdateOrderSettings("minLines", e.target.value)}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="1"
                        />
                      </div>
                    </div>
 
                    {/* Maximums */}
                    <div className="space-y-4">
                      <h4 className="text-sm font-semibold text-text">Maximum Limits</h4>
                      <div>
                        <label className="block text-sm text-muted mb-1">Max Order Value</label>
                        <div className="flex items-center gap-2">
                          <span className="text-muted">$</span>
                          <input
                            type="text"
                            value={orderSettings.maxOrderValue}
                            onChange={(e) => handleUpdateOrderSettings("maxOrderValue", e.target.value)}
                            className="flex-1 px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                            placeholder="Leave blank for no limit"
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm text-muted mb-1">Max Retail Value</label>
                        <div className="flex items-center gap-2">
                          <span className="text-muted">$</span>
                          <input
                            type="text"
                            value={orderSettings.maxRetailValue}
                            onChange={(e) => handleUpdateOrderSettings("maxRetailValue", e.target.value)}
                            className="flex-1 px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                            placeholder="Leave blank for no limit"
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm text-muted mb-1">Max Units</label>
                        <input
                          type="text"
                          value={orderSettings.maxUnits}
                          onChange={(e) => handleUpdateOrderSettings("maxUnits", e.target.value)}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="Leave blank for no limit"
                        />
                      </div>
                      <div>
                        <label className="block text-sm text-muted mb-1">Max Lines</label>
                        <input
                          type="text"
                          value={orderSettings.maxLines}
                          onChange={(e) => handleUpdateOrderSettings("maxLines", e.target.value)}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                          placeholder="Leave blank for no limit"
                        />
                      </div>
                    </div>
                  </div>
                </div>
 
                {/* Order Message */}
                <div>
                  <h3 className="text-lg font-semibold text-text mb-4">Time-Based Order Message</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                      <label className="block text-sm text-muted mb-1">Start Date</label>
                      <input
                        type="date"
                        value={orderSettings.messageStartDate}
                        onChange={(e) => handleUpdateOrderSettings("messageStartDate", e.target.value)}
                        className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                      />
                    </div>
                    <div>
                      <label className="block text-sm text-muted mb-1">End Date</label>
                      <input
                        type="date"
                        value={orderSettings.messageEndDate}
                        onChange={(e) => handleUpdateOrderSettings("messageEndDate", e.target.value)}
                        className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                      />
                    </div>
                  </div>
                  <textarea
                    value={orderSettings.orderMessage}
                    onChange={(e) => handleUpdateOrderSettings("orderMessage", e.target.value)}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent resize-none"
                    rows={4}
                    placeholder="Enter a message that will appear on orders during the specified date range..."
                  />
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}