page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import { apiClient } from '@/lib/client/apiClient';
import { Icon } from '@/contexts/IconContext';
 
interface Product {
  Pid: number;
  Description: string;
  Plu?: string;
  Price?: number;
  department?: number;
  Barcodes?: string[];
}
 
interface PrinterCartridge {
  printerId: number;
  printerName: string;
  cartridges: number[];
}
 
export default function PrintersCartridgesPage() {
  const [products, setProducts] = useState<Product[]>([]);
  const [printers, setPrinters] = useState<Product[]>([]);
  const [cartridges, setCartridges] = useState<Product[]>([]);
  const [relationships, setRelationships] = useState<PrinterCartridge[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedPrinter, setSelectedPrinter] = useState<Product | null>(null);
  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
  const [expandedPrinters, setExpandedPrinters] = useState<Set<number>>(new Set());
 
  useEffect(() => {
    loadData();
  }, []);
 
  const loadData = async () => {
    try {
      setLoading(true);
      
      console.log('[Printers-Cartridges] Loading products...');
      
      // Load all products using eLink/BUCK API for comprehensive field data
      const result = await apiClient.getProducts({ 
        limit: 10000,
        source: 'elink'  // Use eLink/BUCK API to get field codes (f100, f101, etc.)
      });
      
      console.log('[Printers-Cartridges] API result:', result);
      
      if (result.success && result.data) {
        // eLink returns data in result.data.data.Product format
        const allProducts = (result.data as any)?.data?.Product || (result.data as any)?.Product || (result.data as any)?.DATS || [];
        console.log(`[Printers-Cartridges] Loaded ${allProducts.length} products`);
        
        // Debug: Check first few products
        if (allProducts.length > 0) {
          console.log('[Printers-Cartridges] Sample product:', allProducts[0]);
        }
        
        // Filter printers (department 6 or contains "printer" in description)
        const printerList = allProducts.filter((p: any) => {
          const dept = p.f106 || p.Depid || p.department;
          const desc = (p.f101 || p.Description || '').toLowerCase();
          const isPrinterDept = dept === 6;
          const isPrinterName = /\b(printer|printers|multifunction|mfc|all.in.one)\b/i.test(desc);
          const match = isPrinterDept || isPrinterName;
          
          if (match) {
            console.log('[Printers-Cartridges] Found printer:', desc, '(dept:', dept, ')');
          }
          
          return match;
        }).map((p: any) => ({
          Pid: p.f100 || p.Pid,
          Description: p.f101 || p.Description,
          Plu: p.f102 || p.Plu,
          Price: p.f103 || p.Price,
          department: p.f106 || p.Depid || p.department,
          Barcodes: p.f513 || p.Barcodes
        }));
 
        console.log(`[Printers-Cartridges] Found ${printerList.length} printers`);
 
        // Filter cartridges (contains cartridge/toner/ink/drum keywords)
        const cartridgeList = allProducts.filter((p: any) => {
          const desc = (p.f101 || p.Description || '').toLowerCase();
          return /\b(cartridge|toner|ink|drum)\b/i.test(desc);
        }).map((p: any) => ({
          Pid: p.f100 || p.Pid,
          Description: p.f101 || p.Description,
          Plu: p.f102 || p.Plu,
          Price: p.f103 || p.Price,
          department: p.f106 || p.Depid || p.department,
          Barcodes: p.f513 || p.Barcodes
        }));
 
        console.log(`[Printers-Cartridges] Found ${cartridgeList.length} cartridges`);
 
        setProducts(allProducts);
        setPrinters(printerList.sort((a: any, b: any) => a.Description.localeCompare(b.Description)));
        setCartridges(cartridgeList.sort((a: any, b: any) => a.Description.localeCompare(b.Description)));
        
        // Load saved relationships
        await loadRelationships();
      } else {
        console.error('[Printers-Cartridges] API call failed:', result);
        showMessage('error', 'Failed to load products from Fieldpine');
      }
    } catch (error) {
      console.error('Error loading data:', error);
      showMessage('error', 'Failed to load printer and cartridge data');
    } finally {
      setLoading(false);
    }
  };
 
  const loadRelationships = async () => {
    try {
      // Load existing relationships directly from eLink with pagination
      console.log('[Printers-Cartridges] Loading relationships from eLink...');
      
      const result = await apiClient.getBuckData({
        table: 'retailmax.elink.printercartridge',
        want: 'all',
        limit: 5000  // Load in batches to avoid timeout
      });
      
      if (!result.success || !result.data?.APPD) {
        console.log('[Printers-Cartridges] No relationships found');
        setRelationships([]);
        return;
      }
      
      const rows = result.data.APPD;
      console.log(`[Printers-Cartridges] Loaded ${rows.length} relationship rows`);
      
      // Group by printer ID
      const relationshipMap = new Map<number, PrinterCartridge>();
      
      for (const row of rows) {
        const printerId = Number(row.f100) || 0;  // printer pid
        const cartridgeId = Number(row.f101) || 0;  // cartridge pid
        
        if (!printerId || !cartridgeId) continue;
        
        if (!relationshipMap.has(printerId)) {
          const printer = printers.find(p => p.Pid === printerId);
          relationshipMap.set(printerId, {
            printerId,
            printerName: printer?.Description || `Printer ${printerId}`,
            cartridges: []
          });
        }
        
        relationshipMap.get(printerId)!.cartridges.push(cartridgeId);
      }
      
      setRelationships(Array.from(relationshipMap.values()));
    } catch (error) {
      console.error('[Printers-Cartridges] Error loading relationships:', error);
      setRelationships([]);
    }
  };
 
  const showMessage = (type: 'success' | 'error', text: string) => {
    setMessage({ type, text });
    setTimeout(() => setMessage(null), 3000);
  };
 
  const handleSave = async () => {
    try {
      setSaving(true);
      
      const response = await fetch('/api/v1/printers-cartridges', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ relationships })
      });
      
      const result = await response.json();
      
      if (result.success) {
        showMessage('success', 'Printer-cartridge relationships saved successfully!');
      } else {
        showMessage('error', result.error || 'Failed to save relationships');
      }
    } catch (error) {
      console.error('Error saving relationships:', error);
      showMessage('error', 'Failed to save printer-cartridge relationships');
    } finally {
      setSaving(false);
    }
  };
 
  const addCartridgeToPrinter = (printerId: number, cartridgeId: number) => {
    setRelationships(prev => {
      const existing = prev.find(r => r.printerId === printerId);
      
      if (existing) {
        // Add cartridge if not already present
        if (!existing.cartridges.includes(cartridgeId)) {
          return prev.map(r => 
            r.printerId === printerId 
              ? { ...r, cartridges: [...r.cartridges, cartridgeId] }
              : r
          );
        }
        return prev;
      } else {
        // Create new relationship
        const printer = printers.find(p => p.Pid === printerId);
        return [...prev, {
          printerId,
          printerName: printer?.Description || '',
          cartridges: [cartridgeId]
        }];
      }
    });
  };
 
  const removeCartridgeFromPrinter = (printerId: number, cartridgeId: number) => {
    setRelationships(prev => 
      prev.map(r => 
        r.printerId === printerId 
          ? { ...r, cartridges: r.cartridges.filter(id => id !== cartridgeId) }
          : r
      ).filter(r => r.cartridges.length > 0) // Remove empty relationships
    );
  };
 
  const toggleExpanded = (printerId: number) => {
    setExpandedPrinters(prev => {
      const newSet = new Set(prev);
      if (newSet.has(printerId)) {
        newSet.delete(printerId);
      } else {
        newSet.add(printerId);
      }
      return newSet;
    });
  };
 
  const getCompatibleCartridges = (printerId: number): Product[] => {
    const relationship = relationships.find(r => r.printerId === printerId);
    if (!relationship) return [];
    
    return relationship.cartridges
      .map(cartId => cartridges.find(c => c.Pid === cartId))
      .filter((c): c is Product => c !== undefined);
  };
 
  const filteredPrinters = printers.filter(p => 
    searchTerm === '' || 
    p.Description.toLowerCase().includes(searchTerm.toLowerCase()) ||
    p.Plu?.toLowerCase().includes(searchTerm.toLowerCase())
  );
 
  const filteredCartridges = cartridges.filter(c => 
    searchTerm === '' || 
    c.Description.toLowerCase().includes(searchTerm.toLowerCase()) ||
    c.Plu?.toLowerCase().includes(searchTerm.toLowerCase())
  );
 
  if (loading) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="text-center py-12">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand mx-auto"></div>
          <p className="mt-4 text-muted">Loading printer and cartridge data...</p>
        </div>
      </div>
    );
  }
 
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-2">
          <Icon name="print" size={32} className="text-brand" />
          <h1 className="text-3xl font-bold text-text">Printers &amp; Cartridges</h1>
        </div>
        <p className="mt-2 text-muted">
          Maintain links between printer models and their compatible cartridges. This data powers the printer search on the sales screen.
        </p>
      </div>
 
      {/* Message Banner */}
      {message && (
        <div className={`mb-6 p-4 rounded-lg flex items-center gap-2 ${
          message.type === 'success' ? 'bg-success/10 text-success' : 'bg-danger/10 text-danger'
        }`}>
          <Icon name={message.type === 'success' ? 'check_circle' : 'error'} size={20} />
          {message.text}
        </div>
      )}
 
      {/* Getting Started Info */}
      {!loading && relationships.length === 0 && (
        <div className="mb-6 p-4 rounded-lg bg-info/10 border border-info/30">
          <div className="flex items-start gap-2">
            <Icon name="info" size={20} className="text-info mt-0.5" />
            <div>
              <h3 className="font-semibold text-info mb-2">Manage Printer-Cartridge Relationships</h3>
              <p className="text-info/90 text-sm">
                Click on a printer in the left panel, then click compatible cartridges in the right panel to create or modify links.
              </p>
            </div>
          </div>
        </div>
      )}
 
      {/* Stats */}
      <div className="grid grid-cols-3 gap-4 mb-6">
        <div className="bg-brand/10 border border-brand/30 rounded-lg p-4 text-center">
          <Icon name="print" size={28} className="text-brand mx-auto mb-2" />
          <div className="text-2xl font-bold text-text">{printers.length}</div>
          <div className="text-sm text-muted">Printers</div>
        </div>
        <div className="bg-brand2/10 border border-brand2/30 rounded-lg p-4 text-center">
          <Icon name="inventory_2" size={28} className="text-brand2 mx-auto mb-2" />
          <div className="text-2xl font-bold text-text">{cartridges.length}</div>
          <div className="text-sm text-muted">Cartridges</div>
        </div>
        <div className="bg-success/10 border border-success/30 rounded-lg p-4 text-center">
          <Icon name="link" size={28} className="text-success mx-auto mb-2" />
          <div className="text-2xl font-bold text-text">{relationships.length}</div>
          <div className="text-sm text-muted">Relationships</div>
        </div>
      </div>
 
      {/* Action Buttons */}
      <div className="mb-6 flex justify-between items-center">
        <div className="relative w-96">
          <Icon name="search" size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
          <input
            type="text"
            placeholder="Search printers or cartridges..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-10 pr-4 py-2 border border-border rounded-lg w-full bg-surface text-text focus:ring-2 focus:ring-brand focus:border-brand"
          />
        </div>
        <button
          onClick={handleSave}
          disabled={saving}
          className="px-6 py-3 bg-brand text-white rounded-lg hover:bg-brand/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-semibold flex items-center gap-2"
        >
          <Icon name={saving ? 'sync' : 'save'} size={20} className={saving ? 'animate-spin' : ''} />
          {saving ? 'Saving...' : 'Save Relationships'}
        </button>
      </div>
 
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Printers with Cartridges */}
        <div className="bg-surface rounded-lg shadow-md p-6 border border-border">
          <h2 className="text-xl font-bold text-text mb-4 flex items-center gap-2">
            <Icon name="print" size={24} className="text-brand" />
            Printers &amp; Compatible Cartridges
          </h2>
          <p className="text-sm text-muted mb-4">
            Click on a printer to manage its compatible cartridges.
          </p>
          
          <div className="space-y-2 max-h-[600px] overflow-y-auto">
            {filteredPrinters.map(printer => {
              const compatible = getCompatibleCartridges(printer.Pid);
              const isExpanded = expandedPrinters.has(printer.Pid);
              
              return (
                <div key={printer.Pid} className="border-2 border-border rounded-lg bg-surface-2">
                  <div 
                    className="p-3 flex items-center justify-between cursor-pointer hover:bg-surface"
                    onClick={() => toggleExpanded(printer.Pid)}
                  >
                    <div className="flex items-center flex-1">
                      <Icon 
                        name={isExpanded ? 'expand_more' : 'chevron_right'} 
                        size={20} 
                        className="mr-2 text-muted" 
                      />
                      <div>
                        <div className="font-semibold text-text">{printer.Description}</div>
                        <div className="text-xs text-muted">
                          ID: {printer.Pid} {printer.Plu && `| PLU: ${printer.Plu}`}
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {compatible.length > 0 && (
                        <span className="text-xs bg-brand text-white px-2 py-1 rounded">
                          {compatible.length} cartridge{compatible.length !== 1 ? 's' : ''}
                        </span>
                      )}
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          setSelectedPrinter(printer);
                        }}
                        className="text-brand hover:text-brand/80 text-sm px-3 py-1 bg-brand/10 rounded hover:bg-brand/20 flex items-center gap-1"
                      >
                        <Icon name="add" size={16} />
                        Add Cartridge
                      </button>
                    </div>
                  </div>
                  
                  {isExpanded && compatible.length > 0 && (
                    <div className="px-3 pb-3 space-y-2">
                      <div className="ml-8 pl-4 border-l-2 border-brand/30 space-y-2">
                        {compatible.map(cartridge => (
                          <div 
                            key={cartridge.Pid}
                            className="flex items-center justify-between p-2 bg-surface rounded border border-border"
                          >
                            <div className="flex-1">
                              <div className="text-sm text-text">{cartridge.Description}</div>
                              <div className="text-xs text-muted">
                                ID: {cartridge.Pid} {cartridge.Plu && `| PLU: ${cartridge.Plu}`}
                                {cartridge.Price && ` | $${cartridge.Price.toFixed(2)}`}
                              </div>
                            </div>
                            <button
                              onClick={() => removeCartridgeFromPrinter(printer.Pid, cartridge.Pid)}
                              className="text-danger hover:text-danger/80 text-xs px-2 py-1 flex items-center gap-1"
                            >
                              <Icon name="delete" size={16} />
                              Remove
                            </button>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                  
                  {isExpanded && compatible.length === 0 && (
                    <div className="px-3 pb-3">
                      <div className="ml-8 text-sm text-muted italic">
                        No compatible cartridges defined yet
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
 
        {/* Cartridge Selection */}
        <div className="bg-surface rounded-lg shadow-md p-6 border border-border">
          <h2 className="text-xl font-bold text-text mb-4 flex items-center gap-2">
            <Icon name="inventory_2" size={24} className="text-brand2" />
            {selectedPrinter ? `Add Cartridge to: ${selectedPrinter.Description}` : 'Available Cartridges'}
          </h2>
          
          {selectedPrinter && (
            <button
              onClick={() => setSelectedPrinter(null)}
              className="mb-4 text-sm text-brand hover:text-brand/80 flex items-center gap-1"
            >
              <Icon name="arrow_back" size={16} />
              Back to all cartridges
            </button>
          )}
          
          <p className="text-sm text-muted mb-4">
            {selectedPrinter 
              ? 'Click on a cartridge to add it as compatible with the selected printer.'
              : 'Select a printer from the left to add compatible cartridges.'}
          </p>
          
          <div className="space-y-2 max-h-[600px] overflow-y-auto">
            {filteredCartridges.map(cartridge => {
              const isAlreadyAdded = selectedPrinter && 
                getCompatibleCartridges(selectedPrinter.Pid).some(c => c.Pid === cartridge.Pid);
              
              return (
                <div
                  key={cartridge.Pid}
                  onClick={() => {
                    if (selectedPrinter && !isAlreadyAdded) {
                      addCartridgeToPrinter(selectedPrinter.Pid, cartridge.Pid);
                      showMessage('success', `Added ${cartridge.Description} to ${selectedPrinter.Description}`);
                    }
                  }}
                  className={`p-3 border-2 rounded-lg transition-all ${
                    isAlreadyAdded
                      ? 'border-border bg-surface-2 opacity-50 cursor-not-allowed'
                      : selectedPrinter
                      ? 'border-border hover:border-brand hover:bg-brand/5 cursor-pointer'
                      : 'border-border bg-surface-2 cursor-default'
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <div className="flex-1">
                      <div className="font-medium text-text">{cartridge.Description}</div>
                      <div className="text-xs text-muted">
                        ID: {cartridge.Pid} {cartridge.Plu && `| PLU: ${cartridge.Plu}`}
                        {cartridge.Price && ` | $${cartridge.Price.toFixed(2)}`}
                      </div>
                    </div>
                    {isAlreadyAdded && (
                      <span className="text-xs bg-muted/20 text-muted px-2 py-1 rounded">
                        Already Added
                      </span>
                    )}
                    {selectedPrinter && !isAlreadyAdded && (
                      <span className="text-xs text-brand flex items-center gap-1">
                        Click to add
                        <Icon name="arrow_forward" size={14} />
                      </span>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
 
      {/* Help Section */}
      <div className="mt-8 bg-info/10 border border-info/30 rounded-lg p-6">
        <div className="flex items-start gap-3">
          <Icon name="help_outline" size={24} className="text-info mt-0.5" />
          <div>
            <h3 className="font-semibold text-info mb-2">How to use this page:</h3>
            <ul className="space-y-2 text-info/90 text-sm">
              <li className="flex items-start gap-2">
                <Icon name="visibility" size={16} className="mt-0.5 flex-shrink-0" />
                <span><strong>View relationships:</strong> Click the arrow next to a printer to see its compatible cartridges</span>
              </li>
              <li className="flex items-start gap-2">
                <Icon name="add_circle" size={16} className="mt-0.5 flex-shrink-0" />
                <span><strong>Add cartridges:</strong> Click "Add Cartridge" on a printer, then click cartridges from the right panel</span>
              </li>
              <li className="flex items-start gap-2">
                <Icon name="delete" size={16} className="mt-0.5 flex-shrink-0" />
                <span><strong>Remove cartridges:</strong> Expand a printer and click "Remove" next to any cartridge</span>
              </li>
              <li className="flex items-start gap-2">
                <Icon name="search" size={16} className="mt-0.5 flex-shrink-0" />
                <span><strong>Search:</strong> Use the search box to filter printers and cartridges by name or PLU</span>
              </li>
              <li className="flex items-start gap-2">
                <Icon name="save" size={16} className="mt-0.5 flex-shrink-0" />
                <span><strong>Save changes:</strong> Click "Save Relationships" to update Fieldpine with your changes</span>
              </li>
              <li className="flex items-start gap-2">
                <Icon name="point_of_sale" size={16} className="mt-0.5 flex-shrink-0" />
                <span><strong>Sales screen integration:</strong> These relationships are used on the sales screen when searching for printer cartridges</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}