page.tsx

Go to the documentation of this file.

"use client";
 
import { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
interface Product {
  id: number;
  name: string;
  price: number;
  cost: number;
  salesInfo: string;
}
 
interface DuplicatePLU {
  plu: string;
  count: number;
  products: Product[];
}
 
export default function DuplicatePLUReport() {
  const [duplicates, setDuplicates] = useState<DuplicatePLU[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [stats, setStats] = useState({
    totalProducts: 0,
    duplicatePLUs: 0,
    totalDuplicateProducts: 0
  });
 
  useEffect(() => {
    const fetchDuplicates = async () => {
      try {
        const response = await fetch('/api/v1/elink/advisor/duplicate-plu');
        const result = await response.json();
        
        if (result.success) {
          setDuplicates(result.data.duplicates || []);
          setStats({
            totalProducts: result.data.totalProducts || 0,
            duplicatePLUs: result.data.duplicatePLUCount || 0,
            totalDuplicateProducts: result.data.totalDuplicateProducts || 0
          });
        } else {
          throw new Error(result.error || 'Failed to fetch duplicate PLU data');
        }
      } catch (err: any) {
        setError(err.message || 'An error occurred');
      } finally {
        setLoading(false);
      }
    };
    
    fetchDuplicates();
  }, []);
 
  if (loading) {
    return (
      <div className="p-6 min-h-screen bg-bg flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand mx-auto mb-4"></div>
          <p className="text-muted">Analyzing product PLU codes...</p>
        </div>
      </div>
    );
  }
 
  if (error) {
    return (
      <div className="p-6 min-h-screen bg-bg">
        <div className="bg-error/10 border border-error/20 rounded-lg p-4 mb-6">
          <div className="flex items-center gap-2">
            <Icon name="error" className="text-error" />
            <span className="text-error font-medium">Error loading duplicate PLU data: {error}</span>
          </div>
        </div>
        <button 
          onClick={() => window.location.reload()} 
          className="px-4 py-2 bg-brand text-white rounded-lg hover:bg-brand2"
        >
          Retry
        </button>
      </div>
    );
  }
 
  return (
    <div className="p-6 min-h-screen bg-bg">
      <div className="mb-6">
        <div className="flex items-center gap-3 mb-2">
          <a href="/pages/reports?source=advisor" className="text-muted hover:text-brand">
            <Icon name="arrow_back" size={24} />
          </a>
          <h1 className="text-3xl font-bold text-text">Duplicate PLU Codes</h1>
        </div>
        <p className="text-muted ml-9">
          Multiple products sharing the same PLU/barcode number
        </p>
      </div>
 
      {/* Summary Statistics */}
      <div className="bg-info/10 border border-info/20 rounded-lg p-4 mb-6">
        <div className="flex items-center gap-6 flex-wrap">
          <div className="flex items-center gap-2">
            <Icon name="inventory" className="text-info" />
            <span className="text-sm text-muted">
              Analyzed <span className="font-semibold text-text">{stats.totalProducts}</span> products
            </span>
          </div>
          {stats.duplicatePLUs > 0 && (
            <>
              <div className="flex items-center gap-2">
                <Icon name="warning" className="text-warning" />
                <span className="text-sm text-muted">
                  Found <span className="font-semibold text-warning">{stats.duplicatePLUs}</span> duplicate PLUs
                </span>
              </div>
              <div className="flex items-center gap-2">
                <Icon name="error" className="text-error" />
                <span className="text-sm text-muted">
                  Affecting <span className="font-semibold text-error">{stats.totalDuplicateProducts}</span> products
                </span>
              </div>
            </>
          )}
        </div>
      </div>
 
      <div className="bg-surface rounded-lg shadow-sm border border-border overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-[var(--brand)] text-surface">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  PLU Code
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Products Using This PLU
                </th>
                <th className="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider">
                  Count
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Price Range
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {duplicates.length === 0 ? (
                <tr>
                  <td colSpan={5} className="px-6 py-12 text-center">
                    <Icon name="check_circle" size={48} className="text-success mx-auto mb-3" />
                    <p className="text-muted">No duplicate PLU codes found</p>
                  </td>
                </tr>
              ) : (
                duplicates.map((dup, idx) => {
                  const prices = dup.products.map(p => p.price);
                  const minPrice = Math.min(...prices);
                  const maxPrice = Math.max(...prices);
                  const priceRange = minPrice === maxPrice 
                    ? `$${minPrice.toFixed(2)}` 
                    : `$${minPrice.toFixed(2)} - $${maxPrice.toFixed(2)}`;
                  
                  return (
                    <tr key={idx} className="hover:bg-surface-2">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-mono font-medium text-text">
                        {dup.plu}
                      </td>
                      <td className="px-6 py-4 text-sm text-text">
                        <div className="space-y-1">
                          {dup.products.map((product, pIdx) => (
                            <div key={pIdx} className="flex items-center gap-2">
                              <a 
                                href={`/pages/products/${product.id}`}
                                className="text-brand hover:text-brand2 hover:underline"
                              >
                                {product.name}
                              </a>
                              <span className="text-xs text-muted">(ID: {product.id})</span>
                            </div>
                          ))}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-center">
                        <span className={`px-2 py-1 text-xs rounded ${
                          dup.count >= 3 ? 'bg-error/20 text-error' : 'bg-warning/20 text-warning'
                        }`}>
                          {dup.count}
                        </span>
                      </td>
                      <td className="px-6 py-4 text-sm text-muted">
                        {priceRange}
                      </td>
                      <td className="px-6 py-4 text-sm">
                        <div className="flex flex-wrap gap-2">
                          {dup.products.map((product, pIdx) => (
                            <a
                              key={pIdx}
                              href={`/pages/products/${product.id}`}
                              className="text-brand hover:text-brand2 hover:underline"
                            >
                              #{product.id}
                            </a>
                          ))}
                        </div>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}