page.tsx

Go to the documentation of this file.

"use client";
 
import { useState, useEffect } from "react";
import { apiClient } from "@/lib/client/apiClient";
 
interface BasketRow {
  id: string;
  name: string;
  totalSales: number;
  cnt1: number;
  cnt2: number;
  cnt3: number;
  cnt4: number;
  cnt5: number;
  cnt6: number;
  cnt7: number;
  cnt8: number;
  cnt9: number;
  cnt10: number;
  cnt11: number;
  pct1: number;
  pct2: number;
  pct3: number;
  pct4: number;
  pct5: number;
  pct6: number;
  pct7: number;
  pct8: number;
  pct9: number;
  pct10: number;
  pct11: number;
}
 
interface Location {
  Locid: string;
  Name: string;
}
 
interface Staff {
  Tid: string;
  Name: string;
}
 
interface Department {
  Depid: string;
  Description: string;
}
 
export default function BasketSizesPage() {
  const [data, setData] = useState<BasketRow[]>([]);
  const [loading, setLoading] = useState(false);
  const [sortColumn, setSortColumn] = useState<keyof BasketRow>("name");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
 
  // Filter states
  const [fromDate, setFromDate] = useState(() => {
    const d = new Date();
    d.setMonth(0, 1); // Jan 1st
    return d.toISOString().split("T")[0];
  });
  const [toDate, setToDate] = useState(() => {
    const d = new Date();
    d.setDate(d.getDate() + 1);
    return d.toISOString().split("T")[0];
  });
  const [productFilter, setProductFilter] = useState("");
  const [splitBy, setSplitBy] = useState("1"); // 1=Store, 2=Teller, 3=Department
 
  // Cached data
  const [locations, setLocations] = useState<Location[]>([]);
  const [staff, setStaff] = useState<Staff[]>([]);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [loadingProgress, setLoadingProgress] = useState("");
 
  // Load locations and staff on mount
  useEffect(() => {
    Promise.all([
      apiClient.getLocations(),
      apiClient.getStaff(),
    ])
      .then(([locData, staffData]) => {
        if (locData.success && (locData.data as any)?.data?.Location) {
          setLocations((locData.data as any).data.Location);
        }
        if (staffData.success && (staffData.data as any)?.data?.Staff) {
          setStaff((staffData.data as any).data.Staff);
        }
      })
      .catch((err) => console.error("Error loading initial data:", err));
  }, []);
 
  const formatDateForAPI = (dateStr: string) => {
    const [year, month, day] = dateStr.split("-");
    return `${day}-${month}-${year}`;
  };
 
  const handleSort = (column: keyof BasketRow) => {
    if (sortColumn === column) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
    } else {
      setSortColumn(column);
      setSortDirection("asc");
    }
  };
 
  const sortedData = [...data].sort((a, b) => {
    const aVal = a[sortColumn];
    const bVal = b[sortColumn];
 
    if (typeof aVal === "number" && typeof bVal === "number") {
      return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
    }
 
    const aStr = String(aVal);
    const bStr = String(bVal);
    return sortDirection === "asc"
      ? aStr.localeCompare(bStr)
      : bStr.localeCompare(aStr);
  });
 
  const SortIndicator = ({ column }: { column: keyof BasketRow }) => {
    if (sortColumn !== column) return null;
    return <span className="ml-1">{sortDirection === "asc" ? "▲" : "▼"}</span>;
  };
 
  const processBasketData = (rr: any): Omit<BasketRow, "id" | "name"> | null => {
    const cnt1 = Number(rr.f10001 || 0);
    const cnt2 = Number(rr.f10002 || 0);
    const cnt3 = Number(rr.f10003 || 0);
    const cnt4 = Number(rr.f10004 || 0);
    const cnt5 = Number(rr.f10005 || 0);
    const cnt6 = Number(rr.f10006 || 0);
    const cnt7 = Number(rr.f10007 || 0);
    const cnt8 = Number(rr.f10008 || 0);
    const cnt9 = Number(rr.f10009 || 0);
    const cnt10 = Number(rr.f10010 || 0);
    const cnt11 = Number(rr.f10011 || 0);
 
    const totalSales =
      cnt1 + cnt2 + cnt3 + cnt4 + cnt5 + cnt6 + cnt7 + cnt8 + cnt9 + cnt10 + cnt11;
 
    if (totalSales === 0) return null;
 
    return {
      totalSales,
      cnt1,
      cnt2,
      cnt3,
      cnt4,
      cnt5,
      cnt6,
      cnt7,
      cnt8,
      cnt9,
      cnt10,
      cnt11,
      pct1: (cnt1 * 100) / totalSales,
      pct2: (cnt2 * 100) / totalSales,
      pct3: (cnt3 * 100) / totalSales,
      pct4: (cnt4 * 100) / totalSales,
      pct5: (cnt5 * 100) / totalSales,
      pct6: (cnt6 * 100) / totalSales,
      pct7: (cnt7 * 100) / totalSales,
      pct8: (cnt8 * 100) / totalSales,
      pct9: (cnt9 * 100) / totalSales,
      pct10: (cnt10 * 100) / totalSales,
      pct11: (cnt11 * 100) / totalSales,
    };
  };
 
  const loadReport = async () => {
    setLoading(true);
    setLoadingProgress("Initializing...");
    setData([]);
 
    const fromDateAPI = formatDateForAPI(fromDate);
    const toDateAPI = formatDateForAPI(toDate);
 
    // Build product filter if provided
    let exPreds = "";
    // Note: productFilter would need to be a product ID for the API
    // The autocomplete functionality is placeholder for now
 
    try {
      const splitType = Number(splitBy);
 
      if (splitType === 1) {
        // Split by Store
        const results: BasketRow[] = [];
        let completed = 0;
 
        for (const loc of locations) {
          setLoadingProgress(`Processing ${loc.Name} (${completed + 1}/${locations.length})`);
 
          const filters = [
            `f110,4,${fromDateAPI}`,
            `f110,1,${toDateAPI}`,
            `f100,0,${loc.Locid}`
          ];
 
          try {
            const params = new URLSearchParams({
              format: '2,1,location',
              limit: '10000',
              fields: '120',
              ...filters.reduce((acc, f, i) => ({ ...acc, [`filters[${i}]`]: f }), {})
            });
            const response = await apiClient.request(`/v1/reports/sales-totals?${params.toString()}`);
 
            if (response.success && (response.data as any)?.APPD && Array.isArray((response.data as any).APPD)) {
              for (const rr of (response.data as any).APPD) {
                const basketData = processBasketData(rr);
                if (basketData) {
                  results.push({
                    id: loc.Locid,
                    name: loc.Name,
                    ...basketData,
                  });
                }
              }
            }
          } catch (err) {
            console.error(`Error loading data for ${loc.Name}:`, err);
          }
 
          completed++;
        }
 
        setData(results);
      } else if (splitType === 2) {
        // Split by Teller
        const results: BasketRow[] = [];
        let completed = 0;
 
        for (const teller of staff) {
          setLoadingProgress(`Processing ${teller.Name} (${completed + 1}/${staff.length})`);
 
          const filters = [
            `f110,4,${fromDateAPI}`,
            `f110,1,${toDateAPI}`,
            `f130,0,${teller.Tid}`
          ];
 
          try {
            const params = new URLSearchParams({
              format: '2,1,location',
              limit: '10000',
              fields: '120',
              ...filters.reduce((acc, f, i) => ({ ...acc, [`filters[${i}]`]: f }), {})
            });
            const response = await apiClient.request(`/v1/reports/sales-totals?${params.toString()}`);
 
            if (response.success && (response.data as any)?.APPD && Array.isArray((response.data as any).APPD)) {
              for (const rr of (response.data as any).APPD) {
                const basketData = processBasketData(rr);
                if (basketData) {
                  results.push({
                    id: teller.Tid,
                    name: teller.Name,
                    ...basketData,
                  });
                }
              }
            }
          } catch (err) {
            console.error(`Error loading data for ${teller.Name}:`, err);
          }
 
          completed++;
        }
 
        setData(results);
      } else if (splitType === 3) {
        // Split by Department
        // Load departments if not already loaded
        if (departments.length === 0) {
          const deptResponse = await apiClient.getDepartments();
          if (deptResponse.success && (deptResponse.data as any)?.data?.Department) {
            setDepartments((deptResponse.data as any).data.Department);
            setLoading(false);
            setLoadingProgress("");
            // Call loadReport again after departments are loaded
            setTimeout(() => loadReport(), 0);
            return;
          }
        }
 
        const results: BasketRow[] = [];
        let completed = 0;
 
        for (const dept of departments) {
          setLoadingProgress(
            `Processing ${dept.Description} (${completed + 1}/${departments.length})`
          );
 
          const filters = [
            `f110,4,${fromDateAPI}`,
            `f110,1,${toDateAPI}`,
            `f1002,0,${dept.Depid}`
          ];
 
          try {
            const params = new URLSearchParams({
              format: '2,1,location',
              limit: '10000',
              fields: '120',
              ...filters.reduce((acc, f, i) => ({ ...acc, [`filters[${i}]`]: f }), {})
            });
            const response = await apiClient.request(`/v1/reports/sales-totals?${params.toString()}`);
 
            if (response.success && (response.data as any)?.APPD && Array.isArray((response.data as any).APPD)) {
              for (const rr of (response.data as any).APPD) {
                const basketData = processBasketData(rr);
                if (basketData) {
                  results.push({
                    id: dept.Depid,
                    name: dept.Description,
                    ...basketData,
                  });
                }
              }
            }
          } catch (err) {
            console.error(`Error loading data for ${dept.Description}:`, err);
          }
 
          completed++;
        }
 
        setData(results);
      }
    } catch (error) {
      console.error("Error loading report:", error);
    } finally {
      setLoading(false);
      setLoadingProgress("");
    }
  };
 
  // Simple bar chart visualization
  const BasketChart = ({ row }: { row: BasketRow }) => {
    const counts = [
      row.cnt1,
      row.cnt2,
      row.cnt3,
      row.cnt4,
      row.cnt5,
      row.cnt6,
      row.cnt7,
      row.cnt8,
      row.cnt9,
      row.cnt10,
      row.cnt11,
    ];
    const maxCount = Math.max(...counts);
 
    return (
      <div className="flex items-end gap-0.5 h-8 w-32">
        {counts.map((count, idx) => {
          const height = maxCount > 0 ? (count / maxCount) * 100 : 0;
          return (
            <div
              key={idx}
              className="flex-1 bg-brand rounded-t"
              style={{ height: `${height}%` }}
              title={`${idx + 1} ${idx === 10 ? "+" : ""} items: ${count} sales`}
            />
          );
        })}
      </div>
    );
  };
 
  return (
    <div className="min-h-screen bg-bg p-6">
      <div className="max-w-[1800px] mx-auto">
        {/* Header */}
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-text mb-2">Basket Analysis</h1>
          <p className="text-muted">
            This shows the spread of number of items in a customer basket. If you select a single
            product, it shows the spread for all sales that contain that item. This allows you to
            see the upsell effectiveness of a single product. The percentage shown refers to the
            number of sales that have that many items in a customer basket. Modifiers are not
            included in basket counts.
          </p>
        </div>
 
        {/* Filters */}
        <div className="bg-surface rounded-lg shadow p-6 mb-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                From (including)
              </label>
              <input
                type="date"
                value={fromDate}
                onChange={(e) => setFromDate(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              />
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                To (excluding)
              </label>
              <input
                type="date"
                value={toDate}
                onChange={(e) => setToDate(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              />
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">
                With Product (optional)
              </label>
              <input
                type="text"
                value={productFilter}
                onChange={(e) => setProductFilter(e.target.value)}
                placeholder="Product name (autocomplete disabled)"
                className="w-full px-3 py-2 border border-border rounded-md"
                disabled
              />
            </div>
 
            <div>
              <label className="block text-sm font-medium text-text mb-1">Split By</label>
              <select
                value={splitBy}
                onChange={(e) => setSplitBy(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md"
              >
                <option value="1">Store</option>
                <option value="2">Teller</option>
                <option value="3">Department</option>
              </select>
            </div>
          </div>
 
          <div className="mt-4">
            <button
              onClick={loadReport}
              disabled={loading}
              className="px-6 py-2 bg-brand text-white rounded-md hover:bg-brand/90 disabled:bg-muted/50"
            >
              {loading ? "Loading..." : "Submit"}
            </button>
          </div>
        </div>
 
        {/* Loading Progress */}
        {loadingProgress && (
          <div className="bg-surface rounded-lg shadow p-4 mb-6">
            <div className="flex items-center gap-2">
              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-info"></div>
              <span className="text-text">{loadingProgress}</span>
            </div>
          </div>
        )}
 
        {/* Results Table */}
        {!loading && data.length > 0 && (
          <div className="bg-surface rounded-lg shadow overflow-hidden">
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-border">
                <thead className="bg-surface-2">
                  <tr>
                    <th
                      onClick={() => handleSort("name")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      {splitBy === "1" ? "Store" : splitBy === "2" ? "Teller" : "Department"}
                      <SortIndicator column="name" />
                    </th>
                    <th
                      onClick={() => handleSort("totalSales")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      # Sales
                      <SortIndicator column="totalSales" />
                    </th>
                    <th
                      onClick={() => handleSort("pct1")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      1 Item
                      <SortIndicator column="pct1" />
                    </th>
                    <th
                      onClick={() => handleSort("pct2")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      2 Items
                      <SortIndicator column="pct2" />
                    </th>
                    <th
                      onClick={() => handleSort("pct3")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      3 Items
                      <SortIndicator column="pct3" />
                    </th>
                    <th
                      onClick={() => handleSort("pct4")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      4 Items
                      <SortIndicator column="pct4" />
                    </th>
                    <th
                      onClick={() => handleSort("pct5")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      5 Items
                      <SortIndicator column="pct5" />
                    </th>
                    <th
                      onClick={() => handleSort("pct6")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      6 Items
                      <SortIndicator column="pct6" />
                    </th>
                    <th
                      onClick={() => handleSort("pct7")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      7 Items
                      <SortIndicator column="pct7" />
                    </th>
                    <th
                      onClick={() => handleSort("pct8")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      8 Items
                      <SortIndicator column="pct8" />
                    </th>
                    <th
                      onClick={() => handleSort("pct9")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      9 Items
                      <SortIndicator column="pct9" />
                    </th>
                    <th
                      onClick={() => handleSort("pct10")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      10 Items
                      <SortIndicator column="pct10" />
                    </th>
                    <th
                      onClick={() => handleSort("pct11")}
                      className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider cursor-pointer hover:bg-surface-2"
                    >
                      11+ Items
                      <SortIndicator column="pct11" />
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-text uppercase tracking-wider">
                      Chart
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-surface divide-y divide-border">
                  {sortedData.map((row, idx) => (
                    <tr key={idx} className={idx % 2 === 0 ? "bg-surface" : "bg-surface-2"}>
                      <td className="px-4 py-3 text-sm text-text">{row.name}</td>
                      <td className="px-4 py-3 text-sm text-text">{row.totalSales}</td>
                      <td className="px-4 py-3 text-sm text-text">{row.pct1.toFixed(1)}%</td>
                      <td className="px-4 py-3 text-sm text-text">{row.pct2.toFixed(1)}%</td>
                      <td className="px-4 py-3 text-sm text-text">{row.pct3.toFixed(1)}%</td>
                      <td className="px-4 py-3 text-sm text-text">{row.pct4.toFixed(1)}%</td>
                      <td className="px-4 py-3 text-sm text-text">{row.pct5.toFixed(1)}%</td>
                      <td className="px-4 py-3 text-sm text-text">{row.pct6.toFixed(1)}%</td>
                      <td className="px-4 py-3 text-sm text-text">{row.pct7.toFixed(1)}%</td>
                      <td className="px-4 py-3 text-sm text-text">{row.pct8.toFixed(1)}%</td>
                      <td className="px-4 py-3 text-sm text-text">{row.pct9.toFixed(1)}%</td>
                      <td className="px-4 py-3 text-sm text-text">{row.pct10.toFixed(1)}%</td>
                      <td className="px-4 py-3 text-sm text-text">{row.pct11.toFixed(1)}%</td>
                      <td className="px-4 py-3">
                        <BasketChart row={row} />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
 
        {/* No Results */}
        {!loading && data.length === 0 && (
          <div className="bg-surface rounded-lg shadow p-8 text-center text-muted">
            No data found. Click Submit to load the report.
          </div>
        )}
      </div>
    </div>
  );
}