page.tsx

Go to the documentation of this file.

"use client";
 
import { Icon } from '@/contexts/IconContext';
import { useEffect, useState } from 'react';
 
interface Product {
  id: number;
  sku: string;
  noSell?: boolean;
  hidden?: boolean;
}
 
interface Duplicate {
  description: string;
  products: Product[];
  count: number;
}
 
export default function DuplicateDescriptionsReport() {
  const [duplicates, setDuplicates] = useState<Duplicate[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  
  useEffect(() => {
    async function fetchDuplicates() {
      try {
        setLoading(true);
        setError(null);
        
        const response = await fetch('/api/v1/reports/advisor/duplicate-descriptions');
        const result = await response.json();
        
        if (!response.ok || !result.success) {
          throw new Error(result.error || 'Failed to fetch duplicate descriptions');
        }
        
        setDuplicates(result.data.duplicates || []);
      } catch (err: any) {
        console.error('Error fetching duplicates:', err);
        setError(err.message || 'Failed to load duplicate descriptions');
      } finally {
        setLoading(false);
      }
    }
    
    fetchDuplicates();
  }, []);
 
  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 Product Descriptions</h1>
        </div>
        <p className="text-muted ml-9">
          Products with identical or very similar descriptions
        </p>
      </div>
 
      {loading ? (
        <div className="bg-surface rounded-lg shadow-sm border border-border p-12 text-center">
          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand mb-4"></div>
          <p className="text-muted">Loading duplicate descriptions...</p>
        </div>
      ) : error ? (
        <div className="bg-surface rounded-lg shadow-sm border border-border p-8">
          <div className="flex items-start gap-3">
            <Icon name="error" size={24} className="text-error flex-shrink-0 mt-1" />
            <div>
              <h3 className="text-lg font-semibold text-text mb-1">Error Loading Data</h3>
              <p className="text-muted">{error}</p>
            </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">
                    Description
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                    Product SKUs
                  </th>
                  <th className="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider">
                    Duplicate Count
                  </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={4} 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 descriptions found</p>
                    </td>
                  </tr>
                ) : (
                  duplicates.map((dup, idx) => (
                    <tr key={idx} className="hover:bg-surface-2">
                      <td className="px-6 py-4 text-sm font-medium text-text">
                        {dup.description}
                      </td>
                      <td className="px-6 py-4 text-sm text-muted">
                        <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.sku}
                              </a>
                              <span className="text-xs text-muted">(ID: {product.id})</span>
                              {product.noSell && (
                                <span className="text-xs px-1.5 py-0.5 rounded bg-error/20 text-error" title="Cannot be sold">NoSell</span>
                              )}
                              {product.hidden && (
                                <span className="text-xs px-1.5 py-0.5 rounded bg-warning/20 text-warning" title="Hidden from display">Hidden</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">
                        <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>
  );
}