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;
}
 
interface ToggleSwitchProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}
 
const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ checked, onChange, disabled = false }) => {
  return (
    <label className="relative inline-block w-12 h-6">
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
        disabled={disabled}
        className="sr-only peer"
      />
      <span className={`absolute inset-0 rounded-full transition-colors duration-300 cursor-pointer
        ${checked ? 'bg-brand' : 'bg-danger'}
        ${disabled ? 'opacity-30 cursor-not-allowed' : ''}
        peer-focus:ring-2 peer-focus:ring-brand`}>
        <span className={`absolute left-1 top-1 w-4 h-4 bg-surface rounded-full transition-transform duration-300
          ${checked ? 'translate-x-6' : 'translate-x-0'}`} />
      </span>
    </label>
  );
};
 
export default function CameraSettingsPage() {
  const [profiles, setProfiles] = 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 },
  ]);
 
  // Settings state - all are simple toggles
  const [photoFirstItem, setPhotoFirstItem] = useState<Record<number, boolean>>({});
  const [photoLogin, setPhotoLogin] = useState<Record<number, boolean>>({});
  const [photoSettle, setPhotoSettle] = useState<Record<number, boolean>>({});
 
  useEffect(() => {
    loadProfileUsage();
    loadSettings();
  }, []);
 
  const loadProfileUsage = () => {
    // API call: /BUCK?3=retailmax.elink.lane.summary&100=profileuse
    console.log('Loading profile usage...');
    // Mock data - would update profiles state with actual lane counts
  };
 
  const loadSettings = () => {
    // Load all settings for all profiles
    console.log('Loading camera settings...');
    // Would make multiple API calls to load each setting
  };
 
  const saveSetting = (settingName: string, profile: number, value: boolean) => {
    const suffix = profile === -1 ? '' : `@p${profile}`;
    const fullSettingName = `${settingName}${suffix}`;
    
    // API call: /DATI with XML payload
    const xml = `<DATI>
      <f8_s>retailmax.elink.config.basesetting.edit</f8_s>
      <f11_B>E</f11_B>
      <f100_s>${fullSettingName}</f100_s>
      <f101_E>${value ? 1 : 0}</f101_E>
      <f112_E>1</f112_E>
    </DATI>`;
    
    console.log(`Saving ${fullSettingName} = ${value}`);
    console.log('XML:', xml);
  };
 
  const ProfileCell: React.FC<{ profile: number }> = ({ profile }) => {
    if (profile === -1) {
      return <div className="text-xs text-muted">Default</div>;
    }
    const p = profiles.find(pr => pr.id === profile);
    return (
      <div className="text-center">
        <div className="text-xs font-medium text-text">{p?.name}</div>
        <div className="text-xs text-muted">{p?.used} lanes</div>
      </div>
    );
  };
 
  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-2">
          <Icon name="camera_alt" size={32} />
          Cameras
        </h1>
        <p className="text-muted">
          Configure when cameras automatically capture photos
        </p>
      </div>
 
      <div className="max-w-[1600px] mx-auto">
        {/* Title */}
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-text mb-2">Camera Settings</h1>
          <p className="text-sm text-muted">
            Configure when cameras should automatically capture photos
          </p>
        </div>
 
        {/* Storage Warning */}
        <div className="bg-warn/10 border border-warn/30 rounded-lg p-4 mb-6">
          <div className="flex items-start">
            <Icon name="warning" size={20} className="text-warn mt-0.5 mr-3 flex-shrink-0" />
            <div>
              <h3 className="text-sm font-semibold text-text mb-1">Storage Requirements</h3>
              <p className="text-sm text-text">
                Enabling photos can require large amounts of disk storage, especially in high volume environments. 
                Ensure adequate storage capacity is available before enabling these features.
              </p>
            </div>
          </div>
        </div>
 
        {/* Profile 0 Notice */}
        {profiles[0].used > 0 && (
          <div className="bg-info/10 border border-info/30 rounded-lg p-4 mb-6">
            <p className="text-sm text-info">
              There are {profiles[0].used} lanes not assigned to a profile. They use the default settings.
            </p>
          </div>
        )}
 
        {/* Settings Table */}
        <div className="bg-surface rounded-lg shadow overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-border bg-surface-2">
                <th className="text-left p-4 font-semibold text-text min-w-[200px]">Setting</th>
                <th className="text-center p-4 font-medium text-muted min-w-[100px]">
                  <ProfileCell profile={-1} />
                </th>
                {[1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <th key={p} className="text-center p-4 font-medium text-muted min-w-[100px]">
                    <ProfileCell profile={p} />
                  </th>
                ))}
                <th className="text-center p-4 font-medium text-muted min-w-[80px]">Version</th>
              </tr>
            </thead>
            <tbody>
              {/* Take Photo on first item sold */}
              <tr className="border-b border-border">
                <td className="p-4 font-medium text-text">Take Photo on First Item Sold</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <div className="flex justify-center">
                      <ToggleSwitch
                        checked={photoFirstItem[p] || false}
                        onChange={(checked) => {
                          setPhotoFirstItem({ ...photoFirstItem, [p]: checked });
                          saveSetting('SalePhotoFirstItem', p, checked);
                        }}
                      />
                    </div>
                  </td>
                ))}
                <td className="p-4 text-center text-xs text-muted">P1926</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  Should a photo be captured when the first item is sold onto a new sale?
                  <p className="mt-2 text-text">
                    <strong>Example use case:</strong> One retailer enabled this photo option and removed login requirements for sales, 
                    only requiring a login for more advanced options. They are a high volume environment, often with queues at the checkouts, 
                    so staff welcomed the chance to speed up the process. The photos are available for the rare instances where they needed 
                    to identify the staff member that processed a sale.
                  </p>
                </td>
              </tr>
 
              {/* Take Photo on staff login */}
              <tr className="border-b border-border bg-surface">
                <td className="p-4 font-medium text-text">Take Photo on Staff Login</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <div className="flex justify-center">
                      <ToggleSwitch
                        checked={photoLogin[p] || false}
                        onChange={(checked) => {
                          setPhotoLogin({ ...photoLogin, [p]: checked });
                          saveSetting('LoginPhoto', p, checked);
                        }}
                      />
                    </div>
                  </td>
                ))}  
                <td className="p-4 text-center text-xs text-muted">P1926</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  Should a photo be captured when a login is processed? This provides a visual record of who logged in at each terminal 
                  and when, useful for security auditing and staff accountability.
                </td>
              </tr>
 
              {/* Take Photo on End of Day */}
              <tr className="border-b border-border bg-surface">
                <td className="p-4 font-medium text-text">Take Photo on End of Day</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <div className="flex justify-center">
                      <ToggleSwitch
                        checked={photoSettle[p] || false}
                        onChange={(checked) => {
                          setPhotoSettle({ ...photoSettle, [p]: checked });
                          saveSetting('SettlePhoto', p, checked);
                        }}
                      />
                    </div>
                  </td>
                ))}  
                <td className="p-4 text-center text-xs text-muted">P1926</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  Should a photo be captured when the EOD settlement screen is accessed? This creates a visual record of who performed 
                  end-of-day procedures, which is useful for reconciliation and audit purposes.
                </td>
              </tr>
            </tbody>
          </table>
        </div>
 
        {/* Info Boxes */}
        <div className="mt-6 grid md:grid-cols-2 gap-6">
          <div className="bg-info/10 border border-info/30 rounded-lg p-4">
            <h3 className="text-sm font-semibold text-text mb-2">About Camera Photos</h3>
            <ul className="text-sm text-text space-y-1">
              <li>• Photos are captured using the device&apos;s camera (webcam, tablet camera, etc.)</li>
              <li>• Images are stored on the local system and synced to the server</li>
              <li>• Photos are linked to sales, logins, or EOD procedures for easy retrieval</li>
              <li>• Ensure cameras are properly positioned to capture useful images</li>
            </ul>
          </div>
 
          <div className="bg-success/10 border border-success/30 rounded-lg p-4">
            <h3 className="text-sm font-semibold text-text mb-2">Best Practices</h3>
            <ul className="text-sm text-text space-y-1">
              <li>• Test camera positioning before enabling in production</li>
              <li>• Monitor disk usage regularly when photo capture is enabled</li>
              <li>• Implement photo retention policies to manage storage</li>
              <li>• Inform staff that photos are being captured for transparency</li>
            </ul>
          </div>
        </div>
 
        {/* Privacy Notice */}
        <div className="mt-6 bg-surface-2 border border-border rounded-lg p-4">
          <h3 className="text-sm font-semibold text-text mb-2">Privacy Considerations</h3>
          <p className="text-sm text-text">
            Ensure your use of camera photos complies with local privacy laws and workplace policies. 
            Staff should be notified that photos may be captured during their work activities. Photos 
            captured are intended for security, audit, and operational purposes only.
          </p>
        </div>
      </div>
    </div>
  );
}