page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
interface ProfileUsage {
  id: number;
  name: string;
  used: number;
}
 
export default function CashDrawersPage() {
  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 () => {
    // Load profile usage from API
    // API call: /BUCK?3=retailmax.elink.lane.summary&100=profileuse
    console.log('Loading profile usage data...');
  };
 
  const saveSetting = (settingName: string, value: boolean) => {
    console.log(`Saving ${settingName} = ${value}`);
    // API call to save setting via DATI XML
    // <DATI><f8_s>retailmax.elink.config.basesetting.edit</f8_s>
    // <f11_B>E</f11_B><f100_s>${settingName}</f100_s>
    // <f101_E>${value ? 1 : 0}</f101_E><f112_E>1</f112_E></DATI>
  };
 
  // Reusable toggle switch component
  const ToggleSwitch = ({ settingName, onChange }: { settingName: string; onChange?: (checked: boolean) => void }) => {
    const [checked, setChecked] = useState(false);
 
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const newValue = e.target.checked;
      setChecked(newValue);
      saveSetting(settingName, newValue);
      if (onChange) onChange(newValue);
    };
 
    return (
      <label className="relative inline-flex items-center cursor-pointer">
        <input
          type="checkbox"
          className="sr-only peer"
          checked={checked}
          onChange={handleChange}
        />
        <div className="w-11 h-6 bg-danger peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-brand rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[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>
    );
  };
 
  return (
    <div className="p-6 min-h-screen bg-bg">
      <div className="max-w-[1600px] mx-auto">
        {/* Page Title */}
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-2">
            <Icon name="payments" size={32} />
            Cash Drawer Options
          </h1>
        </div>
 
        {/* Info Box */}
        <div className="bg-info/10 border border-info/30 rounded-lg p-4 mb-6">
          <p className="text-text mb-2">
            Cash drawers are typically connected to retail printers, and those printers provide the electronic signal to open the drawer.
          </p>
          <p className="text-text">
            Fieldpine drives the cash drawer directly. You should not use printer driver options to always open the cash drawer after printing
            as this causes the drawer to open when anything is printed, which is less secure and annoying for transactions that do not need it.
          </p>
        </div>
 
        {/* Profile-based Settings Table */}
        <div className="bg-surface rounded-lg shadow-md overflow-x-auto">
          <table className="w-full border-collapse">
            <thead>
              <tr className="bg-surface-2 border-b border-border">
                <th className="px-4 py-3 text-left font-semibold text-text sticky left-0 bg-surface-2 z-10 min-w-[200px]">
                  Setting
                </th>
                {profileUsage.map((profile) => (
                  <th key={profile.id} className="px-3 py-3 text-center font-semibold text-text min-w-[80px]">
                    <div dangerouslySetInnerHTML={{ __html: profile.name }} />
                    <div className="text-xs font-normal text-muted mt-1">
                      {profile.id === 0 && profile.used === 0 ? '' : `${profile.used} lane${profile.used !== 1 ? 's' : ''}`}
                    </div>
                  </th>
                ))}  
                <th className="px-3 py-3 text-right font-semibold text-text min-w-[80px]">
                  Version
                </th>
              </tr>
            </thead>
            <tbody>
              {/* Allow Quickcode to open drawer */}
              <tr className="border-b border-border">
                <td className="px-4 py-3 text-sm font-semibold text-text sticky left-0 bg-surface z-10">
                  Allow Quickcode to open drawer
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="QuickCodeOpenDrawer" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="QuickCodeOpenDrawer@p1" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="QuickCodeOpenDrawer@p2" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="QuickCodeOpenDrawer@p3" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="QuickCodeOpenDrawer@p4" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="QuickCodeOpenDrawer@p5" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="QuickCodeOpenDrawer@p6" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="QuickCodeOpenDrawer@p7" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="QuickCodeOpenDrawer@p8" />
                </td>
                <td className="px-3 py-3 text-right text-xs text-muted">
                  P2355
                </td>
              </tr>
              <tr className="bg-surface-2 border-b border-border">
                <td colSpan={11} className="px-4 py-2 text-sm text-muted">
                  Can the user enter a quickcode to open the cash drawer without a sale requiring it to open? This is disabled by default
                  as it makes systems slightly less secure.
                </td>
              </tr>
 
              {/* Display Errors to Users */}
              <tr className="border-b border-border">
                <td className="px-4 py-3 text-sm font-semibold text-text sticky left-0 bg-surface z-10">
                  Display Errors to Users
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="CashDrawer0Error" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="CashDrawer0Error@p1" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="CashDrawer0Error@p2" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="CashDrawer0Error@p3" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="CashDrawer0Error@p4" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="CashDrawer0Error@p5" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="CashDrawer0Error@p6" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="CashDrawer0Error@p7" />
                </td>
                <td className="px-3 py-3 text-center">
                  <ToggleSwitch settingName="CashDrawer0Error@p8" />
                </td>
                <td className="px-3 py-3 text-right text-xs text-muted">
                  P2015
                </td>
              </tr>
              <tr className="bg-surface-2 border-b border-border">
                <td colSpan={11} className="px-4 py-2 text-sm text-muted">
                  If a technical issue is detected while opening the cash drawer, should we tell the staff member (on) or silently fail (off).
                </td>
              </tr>
            </tbody>
          </table>
        </div>
 
        {/* Additional Info */}
        <div className="mt-6 bg-surface-2 border border-border rounded-lg p-4">
          <h3 className="text-sm font-semibold text-text mb-2">About Cash Drawer Settings</h3>
          <ul className="text-sm text-muted space-y-1 list-disc list-inside">
            <li>Cash drawers open automatically when a sale requires it (cash payments, change given)</li>
            <li>Quickcode opening allows staff to manually open the drawer without a sale</li>
            <li>Error display helps diagnose hardware connectivity issues</li>
            <li>Settings are profile-based to allow different behavior per store or lane type</li>
          </ul>
        </div>
      </div>
    </div>
  );
}