page.tsx

Go to the documentation of this file.

"use client";
 
import { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
interface DuplicateMatch {
  id1: number;
  id2: number;
  physkey1: string;
  physkey2: string;
  name1: string;
  name2: string;
  phone1: string;
  phone2: string;
  email1: string;
  email2: string;
  similarity: number;
  matchReason: string;
}
 
export default function DuplicateCustomersReport() {
  const [duplicates, setDuplicates] = useState<DuplicateMatch[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [totalCustomers, setTotalCustomers] = useState(0);
 
  useEffect(() => {
    fetchDuplicates();
  }, []);
 
  const fetchDuplicates = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const response = await fetch('/api/v1/elink/advisor/duplicate-customers');
      const data = await response.json();
      
      if (!response.ok) {
        throw new Error(data.error || 'Failed to fetch duplicates');
      }
      
      setDuplicates(data.duplicates || []);
      setTotalCustomers(data.totalCustomers || 0);
    } catch (err: any) {
      console.error('Error fetching duplicates:', err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  if (loading) {
    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">Possible Duplicate Customers</h1>
          </div>
          <p className="text-muted ml-9">
            Review potential duplicate customer records that may need to be merged
          </p>
        </div>
        <div className="flex items-center justify-center py-12">
          <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 customer records...</p>
          </div>
        </div>
      </div>
    );
  }
 
  if (error) {
    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">Possible Duplicate Customers</h1>
          </div>
        </div>
        <div className="bg-surface rounded-lg shadow-sm border border-border p-6">
          <div className="flex items-center gap-3 text-error mb-4">
            <Icon name="error" size={24} />
            <span className="font-medium">Error loading duplicates</span>
          </div>
          <p className="text-muted mb-4">{error}</p>
          <button 
            onClick={fetchDuplicates}
            className="px-4 py-2 bg-brand text-white rounded hover:bg-brand2"
          >
            Retry
          </button>
        </div>
      </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">Possible Duplicate Customers</h1>
        </div>
        <p className="text-muted ml-9">
          Review potential duplicate customer records that may need to be merged
        </p>
        {totalCustomers > 0 && (
          <p className="text-muted text-sm ml-9 mt-1">
            Analyzed {totalCustomers} customers • Found {duplicates.length} potential duplicate{duplicates.length !== 1 ? 's' : ''}
          </p>
        )}
      </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">
                  Customer Name 1
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Customer Name 2
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Contact Info
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Match Reason
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Match %
                </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={6} 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 customers found</p>
                    <p className="text-muted text-sm mt-2">All customer records appear to be unique</p>
                  </td>
                </tr>
              ) : (
                duplicates.map((dup, index) => (
                  <tr key={`${dup.id1}-${dup.id2}`} className="hover:bg-surface-2">
                    <td className="px-6 py-4 text-sm">
                      <div className="text-text font-medium">{dup.name1}</div>
                      <div className="text-muted text-xs">ID: {dup.id1}</div>
                    </td>
                    <td className="px-6 py-4 text-sm">
                      <div className="text-text font-medium">{dup.name2}</div>
                      <div className="text-muted text-xs">ID: {dup.id2}</div>
                    </td>
                    <td className="px-6 py-4 text-sm text-muted">
                      {dup.phone1 && (
                        <div className="flex items-center gap-1">
                          <Icon name="phone" size={14} />
                          <span>{dup.phone1}</span>
                        </div>
                      )}
                      {dup.email1 && (
                        <div className="flex items-center gap-1 mt-1">
                          <Icon name="mail" size={14} />
                          <span className="truncate max-w-[200px]">{dup.email1}</span>
                        </div>
                      )}
                    </td>
                    <td className="px-6 py-4 text-sm text-muted">
                      {dup.matchReason}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 py-1 text-xs font-medium rounded ${
                        dup.similarity >= 95 ? 'bg-error/20 text-error' :
                        dup.similarity >= 85 ? 'bg-warning/20 text-warning' :
                        'bg-surface-2 text-muted'
                      }`}>
                        {dup.similarity}%
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm space-x-3">
                      <a 
                        href={`/pages/customers/${dup.id1}`}
                        className="text-brand hover:text-brand2"
                      >
                        View 1
                      </a>
                      <a 
                        href={`/pages/customers/${dup.id2}`}
                        className="text-brand hover:text-brand2"
                      >
                        View 2
                      </a>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}