page.tsx

Go to the documentation of this file.

"use client";
import { useParams } 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 CustomerData {
  id: number;
  name: string;
  company: string;
  phone: string;
  phone2: string;
  mobile: string;
  email: string;
  division: string;
  accountId: number;
  accountName: string;
  accountBalance: number;
  lifetimeSpend: number;
  rank: number;
  firstSale: string;
  lastSale: string;
  totalSales: number;
}
 
interface Sale {
  id: number;
  date: string;
  store: string;
  total: number;
  teller: string;
  description: string;
  qty: number;
  linePrice: number;
  paidBy: string;
}
 
interface TopProduct {
  name: string;
  quantity: number;
  value: number;
}
 
interface ContactLog {
  date: string;
  message: string;
}
 
interface DepartmentSpend {
  department: string;
  amount: number;
  color: string;
}
 
interface SalesTrend {
  date: string;
  amount: number;
  quantity: number;
}
 
export default function CustomerProfilePage() {
  const params = useParams();
  const customerId = params.id as string;
 
  const [customer, setCustomer] = useState<CustomerData | null>(null);
  const [recentSales, setRecentSales] = useState<Sale[]>([]);
  const [allSales, setAllSales] = useState<Sale[]>([]);
  const [topProducts, setTopProducts] = useState<TopProduct[]>([]);
  const [contactLogs, setContactLogs] = useState<ContactLog[]>([]);
  const [departmentSpend, setDepartmentSpend] = useState<DepartmentSpend[]>([]);
  const [salesTrend, setSalesTrend] = useState<SalesTrend[]>([]);
  const [loading, setLoading] = useState(true);
  const [newLogEntry, setNewLogEntry] = useState("");
  const [logReminder, setLogReminder] = useState("");
  const [isEditing, setIsEditing] = useState(false);
  const [editForm, setEditForm] = useState({
    name: "",
    company: "",
    phone: "",
    phone2: "",
    mobile: "",
    email: "",
    division: "",
  });
  const [saveMessage, setSaveMessage] = useState<{
    type: "success" | "error";
    text: string;
  } | null>(null);
 
  useEffect(() => {
    if (customerId) {
      console.log('Loading customer with ID:', customerId);
      loadCustomerData();
      loadRecentSales();
      loadContactLogs();
      loadAnalytics();
    }
  }, [customerId]);
 
  const loadCustomerData = async () => {
    try {
      setLoading(true);
      console.log('Fetching customer data for ID:', customerId);
      
      const result = await apiClient.getCustomers({
        type: "single",
        id: Number(customerId),
        source: 'elink',
      });
 
      console.log('Customer API result:', result);
 
      if (result.success && result.data && result.data[0]) {
        const data = result.data[0];
        console.log('Customer data:', data);
        
        setCustomer({
          id: data.f100 || 0,
          name: data.f101 || "",
          company: data.f154 || "",
          phone: data.f112 || "",
          phone2: data.f153 || "",
          mobile: data.f113 || "",
          email: data.f115 || "",
          division: data.f164 || "",
          accountId: data.f132 || 0,
          accountName: data.accountName || data.ACCO?.[0]?.f101 || "",
          accountBalance: data.accountBalance || data.ACCO?.[0]?.f114 || 0,
          lifetimeSpend: data.f1130 || 0,
          rank: data.ANA1?.[0]?.f134 || 0,
          firstSale: data.ANA1?.[0]?.f1100 || "",
          lastSale: data.ANA1?.[0]?.f1101 || "",
          totalSales: data.ANA1?.[0]?.f132 || 0,
        });
        
        // Initialize edit form
        setEditForm({
          name: data.f101 || "",
          company: data.f154 || "",
          phone: data.f112 || "",
          phone2: data.f153 || "",
          mobile: data.f113 || "",
          email: data.f115 || "",
          division: data.f164 || "",
        });
      } else {
        console.error('No customer data found in response');
      }
      setLoading(false);
    } catch (error) {
      console.error("Error loading customer data:", error);
      setLoading(false);
    }
  };
 
  const loadRecentSales = async () => {
    try {
      const result = await apiClient.getSales({
        customerId: Number(customerId),
        limit: 20,
      });
 
      if (result.success && result.data) {
        const sales: Sale[] = result.data.map((item: any) => ({
          id: item.f100 || item.f101 || 0,
          date: item.f102 || item.f101 || "",
          store: item.f106 || "",
          total: item.f107 || 0,
          teller: item.f104 || "",
          description: item.f201 || "",
          qty: item.f202 || 0,
          linePrice: item.f203 || 0,
          paidBy: item.f301 || "",
        }));
        setRecentSales(sales);
      }
    } catch (error) {
      console.error("Error loading sales:", error);
    }
  };
 
  const loadAnalytics = async () => {
    try {
      // Load product performance stats
      const statsResult = await apiClient.getCustomerStats({
        customerId: Number(customerId),
        type: 'product-performance',
        limit: 30
      });
 
      console.log('Analytics data:', statsResult);
 
      if (statsResult.success && statsResult.data?.APPD) {
        // Process product data
        const products = statsResult.data.APPD;
        
        // Get top products
        const topProds: TopProduct[] = products
          .slice(0, 15)
          .map((item: any) => ({
            name: item.f1203 || `Product ${item.f203}`,
            quantity: item.f201 || 0,
            value: item.f200 || 0,
          }));
        setTopProducts(topProds);
 
        // Load departments for mapping
        const deptsResult = await apiClient.getDepartments();
        const deptMap = new Map<number, string>();
        
        if (deptsResult.success && (deptsResult.data as any)?.DATS) {
          (deptsResult.data as any).DATS.forEach((dept: any) => {
            deptMap.set(dept.f100, dept.f101);
          });
        }
 
        // Process department spending
        const deptSpendMap = new Map<string, number>();
        products.forEach((item: any) => {
          const deptId = item.f1204 || 0;
          const deptName = deptMap.get(deptId) || `Department ${deptId}`;
          const value = item.f200 || 0;
          deptSpendMap.set(deptName, (deptSpendMap.get(deptName) || 0) + value);
        });
 
        const colors = [
          "#00543b", "#007d57", "#00a874", "#4ade80", "#86efac",
          "#fbbf24", "#f59e0b", "#f97316", "#ef4444", "#dc2626"
        ];
 
        const deptArray: DepartmentSpend[] = Array.from(deptSpendMap.entries())
          .sort((a, b) => b[1] - a[1])
          .slice(0, 10)
          .map(([dept, amount], index) => ({
            department: dept,
            amount,
            color: colors[index % colors.length],
          }));
        setDepartmentSpend(deptArray);
 
        // Create sales trend from recent products
        const trendMap = new Map<string, { amount: number; quantity: number }>();
        products.slice(0, 20).forEach((item: any, index: number) => {
          // Use index as pseudo-date for now
          const label = `Item ${index + 1}`;
          trendMap.set(label, {
            amount: item.f200 || 0,
            quantity: item.f201 || 0
          });
        });
 
        const trends: SalesTrend[] = Array.from(trendMap.entries())
          .map(([date, data]) => ({
            date,
            amount: data.amount,
            quantity: data.quantity,
          }));
        setSalesTrend(trends);
      }
 
      // Load brand data
      const brandsResult = await apiClient.getCustomerStats({
        customerId: Number(customerId),
        type: 'brands',
      });
 
      console.log('Brands data:', brandsResult);
      
    } catch (error) {
      console.error("Error loading analytics:", error);
    }
  };
 
  const loadContactLogs = async () => {
    try {
      const result = await apiClient.getContactLogs({
        customerId: Number(customerId),
      });
 
      if (result.success && result.data) {
        const logs: ContactLog[] = result.data.map((item: any) => ({
          date: item.f110 || "",
          message: item.f120 || "",
        }));
        setContactLogs(logs);
      }
    } catch (error) {
      console.error("Error loading contact logs:", error);
    }
  };
 
  const saveContactLog = async () => {
    if (!newLogEntry.trim()) return;
 
    try {
      await apiClient.saveContactLog({
        customerId: Number(customerId),
        message: newLogEntry,
        reminder: logReminder,
      });
 
      setNewLogEntry("");
      setLogReminder("");
      loadContactLogs();
    } catch (error) {
      console.error("Error saving contact log:", error);
      alert("Failed to save contact log");
    }
  };
 
  const handleEdit = () => {
    setIsEditing(true);
  };
 
  const handleCancelEdit = () => {
    if (customer) {
      setEditForm({
        name: customer.name,
        company: customer.company,
        phone: customer.phone,
        phone2: customer.phone2,
        mobile: customer.mobile,
        email: customer.email,
        division: customer.division,
      });
    }
    setIsEditing(false);
  };
 
  const handleSaveEdit = async () => {
    try {
      setSaveMessage(null);
      const result = await apiClient.updateCustomer(Number(customerId), editForm);
      
      if (result.success) {
        // Update local customer state
        setCustomer({
          ...customer!,
          name: editForm.name,
          company: editForm.company,
          phone: editForm.phone,
          phone2: editForm.phone2,
          mobile: editForm.mobile,
          email: editForm.email,
          division: editForm.division,
        });
        setIsEditing(false);
        setSaveMessage({ type: "success", text: "Customer updated successfully" });
        
        // Clear success message after 3 seconds
        setTimeout(() => setSaveMessage(null), 3000);
      } else {
        setSaveMessage({
          type: "error",
          text: "Failed to update customer: " + (result.error || "Unknown error"),
        });
      }
    } catch (error) {
      console.error("Error saving customer:", error);
      setSaveMessage({
        type: "error",
        text: "Failed to save customer changes",
      });
    }
  };
 
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
    }).format(value);
  };
 
  const formatDate = (dateStr: string) => {
    if (!dateStr) return "";
    const date = new Date(dateStr);
    return date.toLocaleDateString("en-GB", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    });
  };
 
  if (loading) {
    return (
      <div className="p-6 bg-surface-2 min-h-screen">
        <div className="animate-pulse space-y-4">
          <div className="h-8 bg-surface-2 rounded w-1/4"></div>
          <div className="h-64 bg-surface-2 rounded"></div>
        </div>
      </div>
    );
  }
 
  if (!customer) {
    return (
      <div className="p-6 bg-surface-2 min-h-screen">
        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
          <h2 className="text-red-800 font-semibold">Customer Not Found</h2>
          <p className="text-red-600">
            The customer with ID {customerId} could not be found.
          </p>
        </div>
      </div>
    );
  }
 
  return (
    <div className="p-6 bg-surface-2 min-h-screen">
      {/* Header */}
      <div className="mb-6 flex items-center justify-between">
        <div>
          <div className="flex items-center gap-4">
            <a
              href="/pages/customers"
              className="text-[#00543b] hover:underline"
            >
              ← Back to Customers
            </a>
          </div>
          <h1 className="text-3xl font-bold text-text mt-2">
            {customer.name}
          </h1>
          {customer.company && (
            <p className="text-muted text-lg">{customer.company}</p>
          )}
        </div>
        <div className="flex gap-3 items-center">
          {saveMessage && (
            <div
              className={`px-4 py-2 rounded-lg ${
                saveMessage.type === "success"
                  ? "bg-green-100 text-green-800 border border-green-200"
                  : "bg-red-100 text-red-800 border border-red-200"
              }`}
            >
              {saveMessage.text}
            </div>
          )}
          {isEditing ? (
            <>
              <button
                onClick={handleCancelEdit}
                className="bg-muted text-white px-6 py-3 rounded-lg hover:bg-muted transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleSaveEdit}
                className="bg-[#00543b] text-white px-6 py-3 rounded-lg hover:bg-[#003d2b] transition-colors"
              >
                Save Changes
              </button>
            </>
          ) : (
            <button
              onClick={handleEdit}
              className="bg-[#00543b] text-white px-6 py-3 rounded-lg hover:bg-[#003d2b] transition-colors"
            >
              Edit Customer
            </button>
          )}
        </div>
      </div>
 
      {/* Account Linkage Section */}
      {customer.accountId > 0 ? (
        <div className="mb-6 bg-gradient-to-r from-[#00543b] to-[#007a52] rounded-lg shadow-lg p-6 text-white">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-sm font-medium text-white/80 mb-1">
                Linked Customer Account
              </h2>
              <div className="flex items-center gap-3">
                <a
                  href={`/pages/customers/customer-accounts?account=${customer.accountId}`}
                  className="text-2xl font-bold text-white hover:underline"
                >
                  {customer.accountName || `Account #${customer.accountId}`}
                </a>
                <span className="bg-surface/20 px-3 py-1 rounded-full text-sm">
                  Account ID: {customer.accountId}
                </span>
              </div>
            </div>
            <div className="text-right">
              <div className="text-sm text-white/80 mb-1">Account Balance</div>
              <div className={`text-2xl font-bold ${
                customer.accountBalance > 0 
                  ? 'text-yellow-300' 
                  : customer.accountBalance < 0 
                  ? 'text-red-300' 
                  : 'text-white'
              }`}>
                {formatCurrency(customer.accountBalance)}
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="mb-6 bg-surface-2 border-2 border-dashed border-border rounded-lg p-6">
          <div className="flex items-center gap-3">
            <div className="flex-shrink-0 w-12 h-12 bg-surface-2 rounded-full flex items-center justify-center">
              <svg
                className="w-6 h-6 text-muted/70"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </div>
            <div>
              <h3 className="font-semibold text-text">No Account Linked</h3>
              <p className="text-muted text-sm">
                This customer is not linked to a customer account
              </p>
            </div>
          </div>
        </div>
      )}
 
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main Content */}
        <div className="lg:col-span-2 space-y-6">
          {/* Customer Details Card */}
          <div className="bg-surface rounded-lg shadow p-6">
            <h2 className="text-xl font-bold text-text mb-4">
              Customer Information
            </h2>
            <div className="grid grid-cols-2 gap-4">
              <div className="col-span-2">
                <div className="text-sm font-medium text-muted mb-1">
                  Customer ID
                </div>
                <div className="text-text">{customer.id}</div>
              </div>
              <div className="col-span-2">
                <label className="text-sm font-medium text-muted mb-1 block">
                  Name
                </label>
                {isEditing ? (
                  <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-[#00543b] focus:border-transparent"
                  />
                ) : (
                  <div className="text-text">{customer.name}</div>
                )}
              </div>
              <div className="col-span-2">
                <label className="text-sm font-medium text-muted mb-1 block">
                  Company Name
                </label>
                {isEditing ? (
                  <input
                    type="text"
                    value={editForm.company}
                    onChange={(e) =>
                      setEditForm({ ...editForm, company: e.target.value })
                    }
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                ) : (
                  <div className="text-text">{customer.company || "—"}</div>
                )}
              </div>
              <div>
                <label className="text-sm font-medium text-muted mb-1 block">
                  Phone
                </label>
                {isEditing ? (
                  <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-[#00543b] focus:border-transparent"
                  />
                ) : (
                  <div className="text-text">{customer.phone || "—"}</div>
                )}
              </div>
              <div>
                <label className="text-sm font-medium text-muted mb-1 block">
                  Phone 2
                </label>
                {isEditing ? (
                  <input
                    type="tel"
                    value={editForm.phone2}
                    onChange={(e) =>
                      setEditForm({ ...editForm, phone2: e.target.value })
                    }
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                ) : (
                  <div className="text-text">{customer.phone2 || "—"}</div>
                )}
              </div>
              <div>
                <label className="text-sm font-medium text-muted mb-1 block">
                  Mobile
                </label>
                {isEditing ? (
                  <input
                    type="tel"
                    value={editForm.mobile}
                    onChange={(e) =>
                      setEditForm({ ...editForm, mobile: e.target.value })
                    }
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                ) : (
                  <div className="text-text">{customer.mobile || "—"}</div>
                )}
              </div>
              <div className="col-span-2">
                <label className="text-sm font-medium text-muted mb-1 block">
                  Email
                </label>
                {isEditing ? (
                  <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-[#00543b] focus:border-transparent"
                  />
                ) : (
                  <div className="text-text">
                    {customer.email ? (
                      <a
                        href={`mailto:${customer.email}`}
                        className="text-[#00543b] hover:underline"
                      >
                        {customer.email}
                      </a>
                    ) : (
                      "—"
                    )}
                  </div>
                )}
              </div>
              <div className="col-span-2">
                <label className="text-sm font-medium text-muted mb-1 block">
                  Division
                </label>
                {isEditing ? (
                  <input
                    type="text"
                    value={editForm.division}
                    onChange={(e) =>
                      setEditForm({ ...editForm, division: e.target.value })
                    }
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                ) : (
                  <div className="text-text">{customer.division || "—"}</div>
                )}
              </div>
            </div>
          </div>
 
          {/* Statistics Card */}
          <div className="bg-surface rounded-lg shadow p-6">
            <h2 className="text-xl font-bold text-text mb-4">Statistics</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="bg-surface-2 p-4 rounded-lg">
                <div className="text-sm font-medium text-muted mb-1">
                  Lifetime Spend
                </div>
                <div className="text-2xl font-bold text-[#00543b]">
                  {formatCurrency(customer.lifetimeSpend)}
                </div>
              </div>
              <div className="bg-surface-2 p-4 rounded-lg">
                <div className="text-sm font-medium text-muted mb-1">
                  Total Sales
                </div>
                <div className="text-2xl font-bold text-text">
                  {customer.totalSales}
                </div>
              </div>
              {customer.rank > 0 && (
                <div className="bg-surface-2 p-4 rounded-lg">
                  <div className="text-sm font-medium text-muted mb-1">
                    Turnover Rank
                  </div>
                  <div className="text-2xl font-bold text-text">
                    {customer.rank}
                  </div>
                </div>
              )}
              <div className="bg-surface-2 p-4 rounded-lg">
                <div className="text-sm font-medium text-muted mb-1">
                  Last Sale
                </div>
                <div className="text-lg font-semibold text-text">
                  {formatDate(customer.lastSale)}
                </div>
              </div>
            </div>
          </div>
 
          {/* Analytics Charts */}
          {salesTrend.length > 0 && (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Sales Trend Chart */}
              <div className="bg-surface rounded-lg shadow p-6">
                <h2 className="text-xl font-bold text-text mb-4">
                  Sales Trend
                </h2>
                <div className="h-64">
                  <Line
                    data={{
                      labels: salesTrend.map((t) => t.date),
                      datasets: [
                        {
                          label: "Sales Amount",
                          data: salesTrend.map((t) => t.amount),
                          borderColor: "#00543b",
                          backgroundColor: "rgba(0, 84, 59, 0.1)",
                          fill: true,
                          tension: 0.4,
                        },
                      ],
                    }}
                    options={{
                      responsive: true,
                      maintainAspectRatio: false,
                      plugins: {
                        legend: {
                          display: false,
                        },
                        tooltip: {
                          callbacks: {
                            label: (context) =>
                              `$${context.parsed.y?.toFixed(2) || '0.00'}`,
                          },
                        },
                      },
                      scales: {
                        y: {
                          beginAtZero: true,
                          ticks: {
                            callback: (value) => `$${value}`,
                          },
                        },
                      },
                    }}
                  />
                </div>
              </div>
 
              {/* Department Spending */}
              {departmentSpend.length > 0 && (
                <div className="bg-surface rounded-lg shadow p-6">
                  <h2 className="text-xl font-bold text-text mb-4">
                    Spending by Department
                  </h2>
                  <div className="h-64">
                    <Doughnut
                      data={{
                        labels: departmentSpend.map((d) => d.department),
                        datasets: [
                          {
                            data: departmentSpend.map((d) => d.amount),
                            backgroundColor: departmentSpend.map(
                              (d) => d.color
                            ),
                            borderWidth: 2,
                            borderColor: "#fff",
                          },
                        ],
                      }}
                      options={{
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                          legend: {
                            position: "right",
                            labels: {
                              boxWidth: 12,
                              font: {
                                size: 11,
                              },
                            },
                          },
                          tooltip: {
                            callbacks: {
                              label: (context) => {
                                const label = context.label || "";
                                const value = context.parsed;
                                const total = departmentSpend.reduce(
                                  (sum, d) => sum + d.amount,
                                  0
                                );
                                const percentage = (
                                  (value / total) *
                                  100
                                ).toFixed(1);
                                return `${label}: $${value.toFixed(2)} (${percentage}%)`;
                              },
                            },
                          },
                        },
                      }}
                    />
                  </div>
                </div>
              )}
            </div>
          )}
 
          {/* Top Products */}
          {topProducts.length > 0 && (
            <div className="bg-surface rounded-lg shadow p-6">
              <h2 className="text-xl font-bold text-text mb-4">
                Top Products Purchased
              </h2>
              <div className="space-y-3">
                {topProducts.slice(0, 5).map((product, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between p-3 bg-surface-2 rounded-lg hover:bg-surface-2 transition-colors"
                  >
                    <div className="flex-1">
                      <div className="font-medium text-text">
                        {product.name}
                      </div>
                      <div className="text-sm text-muted">
                        Quantity: {product.quantity}
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-semibold text-[#00543b]">
                        {formatCurrency(product.value)}
                      </div>
                      <div className="text-xs text-muted">
                        {((product.value / customer.lifetimeSpend) * 100).toFixed(1)}% of total
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
 
          {/* Recent Sales */}
          <div className="bg-surface rounded-lg shadow p-6">
            <h2 className="text-xl font-bold text-text mb-4">
              Recent Purchases
            </h2>
            {recentSales.length > 0 ? (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-surface-2 border-b-2 border-border">
                    <tr>
                      <th className="text-left py-3 px-4 font-semibold text-sm text-text">
                        Date
                      </th>
                      <th className="text-left py-3 px-4 font-semibold text-sm text-text">
                        Sale #
                      </th>
                      <th className="text-left py-3 px-4 font-semibold text-sm text-text">
                        Description
                      </th>
                      <th className="text-right py-3 px-4 font-semibold text-sm text-text">
                        Qty
                      </th>
                      <th className="text-right py-3 px-4 font-semibold text-sm text-text">
                        Amount
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {recentSales.slice(0, 10).map((sale, index) => (
                      <tr key={index} className="hover:bg-surface-2">
                        <td className="py-3 px-4 text-sm text-text">
                          {formatDate(sale.date)}
                        </td>
                        <td className="py-3 px-4 text-sm">
                          <a
                            href={`/report/pos/sales/fieldpine/singlesale.htm?sid=${sale.id}`}
                            className="text-[#00543b] hover:underline"
                          >
                            {sale.id}
                          </a>
                        </td>
                        <td className="py-3 px-4 text-sm text-text">
                          {sale.description}
                        </td>
                        <td className="py-3 px-4 text-sm text-text text-right">
                          {sale.qty}
                        </td>
                        <td className="py-3 px-4 text-sm text-text text-right">
                          {formatCurrency(sale.linePrice)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ) : (
              <div className="text-center py-8 text-muted">
                No recent sales found
              </div>
            )}
          </div>
        </div>
 
        {/* Sidebar */}
        <div className="space-y-6">
          {/* Contact Log */}
          <div className="bg-surface rounded-lg shadow p-6">
            <h2 className="text-xl font-bold text-text mb-4">
              Contact Log
            </h2>
            <div className="space-y-4">
              <textarea
                value={newLogEntry}
                onChange={(e) => setNewLogEntry(e.target.value)}
                rows={4}
                className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent resize-none"
                placeholder="Add a note..."
              />
              <div className="flex items-center gap-2">
                <input
                  type="datetime-local"
                  value={logReminder}
                  onChange={(e) => setLogReminder(e.target.value)}
                  className="flex-1 px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  placeholder="Reminder"
                />
                <button
                  onClick={saveContactLog}
                  className="bg-[#00543b] text-white px-4 py-2 rounded-lg hover:bg-[#003d2b] transition-colors"
                >
                  Save
                </button>
              </div>
            </div>
 
            {/* Recent Contact Logs */}
            <div className="mt-6 space-y-3 max-h-96 overflow-y-auto">
              {contactLogs.slice(0, 10).map((log, index) => (
                <div
                  key={index}
                  className="border-l-4 border-[#00543b] pl-3 py-2 bg-surface-2"
                >
                  <div className="text-xs text-muted mb-1">
                    {formatDate(log.date)}
                  </div>
                  <div className="text-sm text-text">{log.message}</div>
                </div>
              ))}
              {contactLogs.length === 0 && (
                <div className="text-center text-muted text-sm py-4">
                  No contact logs yet
                </div>
              )}
            </div>
          </div>
 
          {/* Quick Actions */}
          <div className="bg-surface rounded-lg shadow p-6">
            <h2 className="text-xl font-bold text-text mb-4">
              Quick Actions
            </h2>
            <div className="space-y-2">
              <button
                onClick={() => {
                  window.location.href = `/pages/customers/${customerId}`;
                }}
                className="block w-full text-center bg-surface-2 hover:bg-surface-2 text-text px-4 py-2 rounded-lg transition-colors"
              >
                Edit Details
              </button>
              {customer.email && (
                <a
                  href={`mailto:${customer.email}`}
                  className="block w-full text-center bg-surface-2 hover:bg-surface-2 text-text px-4 py-2 rounded-lg transition-colors"
                >
                  Send Email
                </a>
              )}
              <a
                href={`/pages/reports/sales-reports?customer=${customerId}`}
                className="block w-full text-center bg-surface-2 hover:bg-surface-2 text-text px-4 py-2 rounded-lg transition-colors"
              >
                View Reports
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}