page.tsx

Go to the documentation of this file.

'use client';
 
import React, { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
interface ProfileUsage {
  id: number;
  name: string;
  used: number;
}
 
export default function ReceiptPrintersPage() {
  const [profileUsage, setProfileUsage] = useState<ProfileUsage[]>([
    { id: 0, name: 'No Profile', used: 0 },
    { id: 1, name: 'Profile 1', used: 0 },
    { id: 2, name: 'Profile 2', used: 0 },
    { id: 3, name: 'Profile 3', used: 0 },
    { id: 4, name: 'Profile 4', used: 0 },
    { id: 5, name: 'Profile 5', used: 0 },
    { id: 6, name: 'Profile 6', used: 0 },
    { id: 7, name: 'Profile 7', used: 0 },
    { id: 8, name: 'Profile 8', used: 0 },
  ]);
 
  useEffect(() => {
    loadData();
  }, []);
 
  const loadData = async () => {
    try {
      // Load profile usage and settings
      console.log('Loading receipt printer settings...');
      // Mock data would go here
    } catch (error) {
      console.error('Error loading receipt printer settings:', error);
    }
  };
 
  const saveSetting = (settingName: string, value: boolean | string) => {
    console.log('Saving setting:', settingName, '=', value);
    
    // API call to save setting
    // DATI XML format with f100_s for setting name, f101_E or f101_s for value, f112_E for layer
  };
 
  const handleToggle = (settingName: string, checked: boolean) => {
    saveSetting(settingName, checked);
  };
 
  const handleTextChange = (settingName: string, value: string) => {
    saveSetting(settingName, value);
  };
 
  const ToggleSwitch = ({ settingName, onChange }: { settingName: string; onChange?: (checked: boolean) => void }) => {
    const [checked, setChecked] = useState(false);
 
    return (
      <label className="relative inline-flex items-center cursor-pointer">
        <input
          type="checkbox"
          className="sr-only peer"
          checked={checked}
          onChange={(e) => {
            setChecked(e.target.checked);
            if (onChange) onChange(e.target.checked);
            else handleToggle(settingName, e.target.checked);
          }}
        />
        <div className="w-11 h-6 bg-surface-2 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-border after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand"></div>
      </label>
    );
  };
 
  const TextInput = ({ settingName, size = 8 }: { settingName: string; size?: number }) => {
    const [value, setValue] = useState('');
 
    return (
      <input
        type="text"
        size={size}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={(e) => handleTextChange(settingName, e.target.value)}
        className="w-full border border-border rounded px-2 py-1 text-sm focus:ring-2 focus:ring-brand focus:border-transparent"
      />
    );
  };
 
  return (
    <div className="p-6 min-h-screen bg-bg">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-3">
          <Icon name="print" size={32} />
          Receipt Printers
        </h1>
        <p className="text-muted">
          Configure receipt printing operation across lane profiles
        </p>
        {profileUsage[0].used > 0 && (
          <p className="text-sm text-brand mt-2">
            There are {profileUsage[0].used} lanes not assigned to a profile. They use default settings.
          </p>
        )}
      </div>
 
      <div className="max-w-[1600px] mx-auto">        {/* Settings Table */}
        <div className="bg-surface rounded-lg shadow-md overflow-x-auto">
          <table className="min-w-full border-collapse">
            <thead>
              <tr className="bg-surface-2 border-b-2 border-border">
                <th className="px-3 py-3 text-left text-sm font-semibold text-text sticky left-0 bg-surface-2 z-10">Setting</th>
                {profileUsage.map((profile) => (
                  <th key={profile.id} className="px-3 py-3 text-center text-xs font-semibold text-text min-w-[80px]">
                    {profile.id === 0 ? 'No Profile' : profile.name}
                    <br />
                    <small className="font-normal text-muted">
                      {profile.used} {profile.used === 1 ? 'lane' : 'lanes'}
                    </small>
                  </th>
                ))}
                <th className="px-3 py-3 text-center text-xs font-semibold text-text min-w-[80px]" title="Controls web pages used for sale picking">
                  Picking
                </th>
                <th className="px-3 py-3 text-right text-xs font-semibold text-text">Version</th>
              </tr>
            </thead>
            <tbody>
              {/* Print Receipts for All Sales */}
              <tr className="border-b border-border">
                <td className="px-3 py-3 text-sm font-semibold text-text sticky left-0 bg-surface z-10">Print Receipts for All Sales</td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintAllSales" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintAllSales@p1" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintAllSales@p2" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintAllSales@p3" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintAllSales@p4" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintAllSales@p5" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintAllSales@p6" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintAllSales@p7" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintAllSales@p8" /></td>
                <td className="px-3 py-3 text-center"></td>
                <td className="px-3 py-3 text-right text-xs text-muted">P2072</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={12} className="px-3 py-2 text-xs text-muted">If enabled a receipt is printed for all sales.</td>
              </tr>
 
              {/* Print Sales above value */}
              <tr className="border-b border-border bg-surface-2">
                <td className="px-3 py-3 text-sm font-semibold text-text sticky left-0 bg-surface-2 z-10">Print Sales above value</td>
                <td className="px-3 py-3"><TextInput settingName="PrintThreshold" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThreshold@p1" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThreshold@p2" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThreshold@p3" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThreshold@p4" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThreshold@p5" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThreshold@p6" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThreshold@p7" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThreshold@p8" size={4} /></td>
                <td className="px-3 py-3"></td>
                <td className="px-3 py-3 text-right text-xs text-muted">P2072</td>
              </tr>
              
              {/* Print Sales below value */}
              <tr className="border-b border-border bg-surface-2">
                <td className="px-3 py-3 text-sm font-semibold text-text sticky left-0 bg-surface-2 z-10">Print Sales below value</td>
                <td className="px-3 py-3"><TextInput settingName="PrintThresholdNeg" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThresholdNeg@p1" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThresholdNeg@p2" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThresholdNeg@p3" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThresholdNeg@p4" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThresholdNeg@p5" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThresholdNeg@p6" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThresholdNeg@p7" size={4} /></td>
                <td className="px-3 py-3"><TextInput settingName="PrintThresholdNeg@p8" size={4} /></td>
                <td className="px-3 py-3"></td>
                <td className="px-3 py-3 text-right text-xs text-muted">P2072</td>
              </tr>
              <tr className="border-b border-border bg-surface-2">
                <td colSpan={12} className="px-3 py-2 text-xs text-muted">If a sale is equal or above/below the threshold value a receipt will be printed. A value of zero, or blank, disables this check</td>
              </tr>
 
              {/* Print Office Copies */}
              <tr className="border-b border-border">
                <td className="px-3 py-3 text-sm font-semibold text-text sticky left-0 bg-surface z-10">Print Office Copies for All Sales</td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintOfficeCopy" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintOfficeCopy@p1" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintOfficeCopy@p2" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintOfficeCopy@p3" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintOfficeCopy@p4" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintOfficeCopy@p5" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintOfficeCopy@p6" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintOfficeCopy@p7" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintOfficeCopy@p8" /></td>
                <td className="px-3 py-3 text-center"></td>
                <td className="px-3 py-3 text-right text-xs text-muted">P2072</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={12} className="px-3 py-2 text-xs text-muted">If enabled an office copy of the receipt for all sales. Office copies can be slightly different to customer receipts.</td>
              </tr>
 
              {/* Print Serial Number */}
              <tr className="border-b border-border">
                <td className="px-3 py-3 text-sm font-semibold text-text sticky left-0 bg-surface z-10">Print Serial Number if present</td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="SalePrintAutoSerialNo" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="SalePrintAutoSerialNo@p1" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="SalePrintAutoSerialNo@p2" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="SalePrintAutoSerialNo@p3" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="SalePrintAutoSerialNo@p4" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="SalePrintAutoSerialNo@p5" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="SalePrintAutoSerialNo@p6" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="SalePrintAutoSerialNo@p7" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="SalePrintAutoSerialNo@p8" /></td>
                <td className="px-3 py-3 text-center"></td>
                <td className="px-3 py-3 text-right text-xs text-muted">P2170</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={12} className="px-3 py-2 text-xs text-muted">If a serial number has been captured for a saleline automatically print it on the receipt.</td>
              </tr>
 
              {/* Prompt before Printing */}
              <tr className="border-b border-border">
                <td className="px-3 py-3 text-sm font-semibold text-text sticky left-0 bg-surface z-10">Prompt before Printing</td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintPrompt" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintPrompt@p1" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintPrompt@p2" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintPrompt@p3" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintPrompt@p4" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintPrompt@p5" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintPrompt@p6" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintPrompt@p7" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintPrompt@p8" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintPrompt@e0" /></td>
                <td className="px-3 py-3 text-right text-xs text-muted">P2072</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={12} className="px-3 py-2 text-xs text-muted">Prompt for approval to print if all the other checks allow printing.</td>
              </tr>
 
              {/* Never Print */}
              <tr className="border-b border-border bg-surface-2">
                <td className="px-3 py-3 text-sm font-semibold text-text sticky left-0 bg-surface-2 z-10">Never Print</td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintNever" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintNever@p1" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintNever@p2" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintNever@p3" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintNever@p4" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintNever@p5" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintNever@p6" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintNever@p7" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintNever@p8" /></td>
                <td className="px-3 py-3 text-center"></td>
                <td className="px-3 py-3 text-right text-xs text-muted">P2072</td>
              </tr>
              <tr className="border-b border-border bg-surface-2">
                <td colSpan={12} className="px-3 py-2 text-xs text-muted">The system will never print a receipt during sale operation, unless explicitly instructed.</td>
              </tr>
 
              {/* Enable Extra Email */}
              <tr className="border-b border-border">
                <td className="px-3 py-3 text-sm font-semibold text-text sticky left-0 bg-surface z-10">Enable Extra Email for Receipts</td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintEmailCopy" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintEmailCopy@p1" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintEmailCopy@p2" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintEmailCopy@p3" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintEmailCopy@p4" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintEmailCopy@p5" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintEmailCopy@p6" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintEmailCopy@p7" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintEmailCopy@p8" /></td>
                <td className="px-3 py-3 text-center"></td>
                <td className="px-3 py-3 text-right text-xs text-muted">P1782</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={12} className="px-3 py-2 text-xs text-muted">When enabled, the POS will check for emailing of receipts rather than printing them.</td>
              </tr>
 
              {/* Continue with remaining settings... */}
              {/* For brevity, I'll add a few more key ones */}
 
              {/* Email Subject Line */}
              <tr className="border-b border-border bg-surface-2">
                <td className="px-3 py-3 text-sm font-semibold text-text sticky left-0 bg-surface-2 z-10">Email Subject Line</td>
                <td className="px-3 py-3"><TextInput settingName="SaleEmailSubject" /></td>
                <td className="px-3 py-3"><TextInput settingName="SaleEmailSubject@p1" /></td>
                <td className="px-3 py-3"><TextInput settingName="SaleEmailSubject@p2" /></td>
                <td className="px-3 py-3"><TextInput settingName="SaleEmailSubject@p3" /></td>
                <td className="px-3 py-3"><TextInput settingName="SaleEmailSubject@p4" /></td>
                <td className="px-3 py-3"><TextInput settingName="SaleEmailSubject@p5" /></td>
                <td className="px-3 py-3"><TextInput settingName="SaleEmailSubject@p6" /></td>
                <td className="px-3 py-3"><TextInput settingName="SaleEmailSubject@p7" /></td>
                <td className="px-3 py-3"><TextInput settingName="SaleEmailSubject@p8" /></td>
                <td className="px-3 py-3"></td>
                <td className="px-3 py-3 text-right text-xs text-muted">P2072</td>
              </tr>
              <tr className="border-b border-border bg-surface-2">
                <td colSpan={12} className="px-3 py-2 text-xs text-muted">Set the subject line for email receipts. If left blank the POS will insert "Sale Receipt"</td>
              </tr>
 
              {/* Auto include Customer Details */}
              <tr className="border-b border-border">
                <td className="px-3 py-3 text-sm font-semibold text-text sticky left-0 bg-surface z-10">Automatically include Customer Details</td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintHeaderAutoCustomer" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintHeaderAutoCustomer@p1" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintHeaderAutoCustomer@p2" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintHeaderAutoCustomer@p3" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintHeaderAutoCustomer@p4" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintHeaderAutoCustomer@p5" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintHeaderAutoCustomer@p6" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintHeaderAutoCustomer@p7" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrintHeaderAutoCustomer@p8" /></td>
                <td className="px-3 py-3 text-center"></td>
                <td className="px-3 py-3 text-right text-xs text-muted">P2209</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={12} className="px-3 py-2 text-xs text-muted">Include customer details on the receipt (default receipt format only) if a customer is detected.</td>
              </tr>
 
              {/* Auto Revector Bad Printers */}
              <tr className="border-b border-border">
                <td className="px-3 py-3 text-sm font-semibold text-text sticky left-0 bg-surface z-10">Auto Revector Bad Printers</td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrinterRevectorBad" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrinterRevectorBad@p1" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrinterRevectorBad@p2" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrinterRevectorBad@p3" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrinterRevectorBad@p4" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrinterRevectorBad@p5" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrinterRevectorBad@p6" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrinterRevectorBad@p7" /></td>
                <td className="px-3 py-3 text-center"><ToggleSwitch settingName="PrinterRevectorBad@p8" /></td>
                <td className="px-3 py-3 text-center"></td>
                <td className="px-3 py-3 text-right text-xs text-muted">P2072</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={12} className="px-3 py-2 text-xs text-muted">If the printer that the receipt format is assigned to use is not available, the POS will automatically substitute a replacement printer.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}