page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import Link from 'next/link';
 
interface UiOption {
  id: number;
  name: string;
}
 
interface Settings {
  storeServerMesh: { [profile: string]: boolean };
  initialUi: { [profile: string]: string };
  directMesh: boolean;
  defaultUi: string;
  commandsForLane: string;
  installCommands: string;
}
 
export default function StoreConfigurationPage() {
  const [uiOptions, setUiOptions] = useState<UiOption[]>([]);
  const [settings, setSettings] = useState<Settings>({
    storeServerMesh: {},
    initialUi: {},
    directMesh: false,
    defaultUi: '',
    commandsForLane: '',
    installCommands: ''
  });
  const [loading, setLoading] = useState(true);
 
  const profiles = ['0', '1', '2', '3', '4', '5', '6', '7', '8'];
 
  useEffect(() => {
    loadData();
  }, []);
 
  const loadData = async () => {
    try {
      setLoading(true);
      // Load UI options
      // In production, this would call: /api/v1/elink/ui-list
      // For now, using placeholder data
      setUiOptions([
        { id: 1, name: 'Default POS Interface' },
        { id: 2, name: 'Touch Screen UI' },
        { id: 3, name: 'Mobile UI' },
        { id: 4, name: 'Quick Service UI' },
        { id: 5, name: 'Restaurant UI' }
      ]);
 
      // Load current settings
      // In production, this would call: /api/v1/elink/lane-settings
      const defaultSettings: Settings = {
        storeServerMesh: {},
        initialUi: {},
        directMesh: true,
        defaultUi: '1',
        commandsForLane: '',
        installCommands: ''
      };
      
      profiles.forEach(p => {
        defaultSettings.storeServerMesh[p] = true;
        defaultSettings.initialUi[p] = '';
      });
      
      setSettings(defaultSettings);
    } catch (error) {
      console.error('Error loading configuration:', error);
      alert('Failed to load configuration data');
    } finally {
      setLoading(false);
    }
  };
 
  const handleToggleChange = (profile: string, value: boolean) => {
    setSettings(prev => ({
      ...prev,
      storeServerMesh: {
        ...prev.storeServerMesh,
        [profile]: value
      }
    }));
    saveSetting('StoreServerAllowMesh', profile, value);
  };
 
  const handleUiChange = (profile: string, value: string) => {
    setSettings(prev => ({
      ...prev,
      initialUi: {
        ...prev.initialUi,
        [profile]: value
      }
    }));
    saveSetting('LaneCoden400.UserInterfaceN', profile, value);
  };
 
  const handleDirectMeshChange = (value: boolean) => {
    setSettings(prev => ({ ...prev, directMesh: value }));
    saveSetting('LaneInstallDirectMesh', '0', value);
  };
 
  const handleDefaultUiChange = (value: string) => {
    setSettings(prev => ({ ...prev, defaultUi: value }));
    saveSetting('LaneCoden400.UserInterfaceN', '0', value);
  };
 
  const handleCommandsChange = (value: string) => {
    setSettings(prev => ({ ...prev, commandsForLane: value }));
  };
 
  const handleInstallCommandsChange = (value: string) => {
    setSettings(prev => ({ ...prev, installCommands: value }));
  };
 
  const saveSetting = async (settingName: string, profile: string, value: any) => {
    try {
      // In production, this would call: /api/v1/elink/lane-settings
      // POST with { settingName, profile, value }
      console.log('Saving:', settingName, profile, value);
      
      // Placeholder - in production would be actual API call
      // await apiClient.saveLaneSetting(settingName, profile, value);
    } catch (error) {
      console.error('Error saving setting:', error);
      alert('Failed to save setting');
    }
  };
 
  const saveTextAreaSetting = async (settingName: string) => {
    const value = settingName === 'LaneCoden400.FposAllCtl' 
      ? settings.commandsForLane 
      : settings.installCommands;
    
    await saveSetting(settingName, '0', value);
    alert('Commands saved successfully');
  };
 
  if (loading) {
    return (
      <div className="p-8">
        <div className="text-center">Loading configuration...</div>
      </div>
    );
  }
 
  return (
    <div className="min-h-screen bg-bg">
      {/* Top Bar */}
      <div className="bg-[#00946b] text-white p-4 shadow-lg">
        <div className="flex items-center">
          <img 
            src="/logo/fieldpine-logo.png" 
            alt="Fieldpine Logo" 
            className="w-48 h-auto rounded-lg shadow-lg mr-6"
            onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
          />
          <div className="text-sm">
            [ <Link href="/pages/home" className="hover:underline">Home</Link> ] 
            {' '}[ <Link href="/pages/settings/stores" className="hover:underline">Stores</Link> 
            {' '}<span className="text-xl">→</span> ] Configure Lane Definition
          </div>
        </div>
      </div>
 
      {/* Page Title */}
      <div className="bg-surface border-b-2 border-[#00543b] p-4">
        <h1 className="text-3xl font-bold text-text">Configure Lane Definitions</h1>
      </div>
 
      <div className="p-6">
        {/* Profile Settings Table */}
        <div className="bg-surface rounded-lg shadow-md overflow-x-auto mt-8">
          <table className="w-full border-collapse">
            <thead>
              <tr className="bg-[#00543b] text-white">
                <th className="p-3 text-left border border-border">Setting</th>
                {profiles.map(p => (
                  <th key={p} className="p-3 text-center border border-border">
                    {p === '0' ? 'No Profile' : `Profile ${p}`}
                  </th>
                ))}
                <th className="p-3 text-center border border-border">Version</th>
              </tr>
            </thead>
            <tbody>
              {/* Store Server as Database */}
              <tr className="hover:bg-surface-2">
                <td className="p-3 border border-border font-semibold">
                  Store Server as Database
                </td>
                {profiles.map(p => (
                  <td key={p} className="p-3 border border-border text-center">
                    <label className="relative inline-flex items-center cursor-pointer">
                      <input
                        type="checkbox"
                        className="sr-only peer"
                        checked={settings.storeServerMesh[p] || false}
                        onChange={(e) => handleToggleChange(p, e.target.checked)}
                      />
                      <div className="w-11 h-6 bg-surface-2 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#00543b]/30 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-surface after:border-border after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#00543b]"></div>
                    </label>
                  </td>
                ))}
                <td className="p-3 border border-border text-center text-sm text-muted">
                  RL.174
                </td>
              </tr>
              <tr>
                <td colSpan={11} className="p-2 bg-surface-2 text-sm text-muted border border-border">
                  Can a store server act as the primary database for lanes within the store. This is generally enabled.
                </td>
              </tr>
 
              {/* Initial User Interface on Install */}
              <tr className="hover:bg-surface-2">
                <td className="p-3 border border-border font-semibold">
                  Initial User Interface on Install
                </td>
                {profiles.map(p => (
                  <td key={p} className="p-3 border border-border">
                    <select
                      className="w-full px-2 py-1 border border-border rounded focus:ring-2 focus:ring-[#00543b] focus:border-[#00543b]"
                      value={settings.initialUi[p] || ''}
                      onChange={(e) => handleUiChange(p, e.target.value)}
                    >
                      <option value="">--System default</option>
                      {uiOptions.map(ui => (
                        <option key={ui.id} value={ui.id}>{ui.name}</option>
                      ))}
                    </select>
                  </td>
                ))}
                <td className="p-3 border border-border text-center text-sm text-muted">
                  RL.174
                </td>
              </tr>
              <tr>
                <td colSpan={11} className="p-2 bg-surface-2 text-sm text-muted border border-border">
                  When a new lane is installed, which User Interface should it initially be assigned
                </td>
              </tr>
            </tbody>
          </table>
        </div>
 
        {/* Fieldpine.com Lanes Configuration */}
        <div className="bg-surface rounded-lg shadow-md p-6 mt-8">
          <h2 className="text-2xl font-bold text-text mb-6">
            Configuration for Fieldpine.com Lanes
          </h2>
 
          {/* Direct Mesh Communication */}
          <div className="flex items-start gap-4 mb-6 pb-6 border-b border-border">
            <label className="relative inline-flex items-center cursor-pointer mt-1">
              <input
                type="checkbox"
                className="sr-only peer"
                checked={settings.directMesh}
                onChange={(e) => handleDirectMeshChange(e.target.checked)}
              />
              <div className="w-14 h-7 bg-surface-2 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#00543b]/30 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-surface after:border-border after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-[#00543b]"></div>
            </label>
            <div>
              <h3 className="font-semibold text-lg text-text">
                Allow PosGreen lanes to communicate directly to Fieldpine.com
              </h3>
              <p className="text-muted text-sm mt-1">
                Lanes that do this are charged on a usage volume basis
              </p>
            </div>
          </div>
 
          {/* User Interface Selection */}
          <div className="mb-6">
            <h3 className="font-semibold text-text mb-2">User Interface</h3>
            <select
              className="w-full max-w-md px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-[#00543b]"
              value={settings.defaultUi}
              onChange={(e) => handleDefaultUiChange(e.target.value)}
            >
              <option value="">--System default</option>
              {uiOptions.map(ui => (
                <option key={ui.id} value={ui.id}>{ui.name}</option>
              ))}
            </select>
            <p className="text-muted text-sm mt-2">
              The User Interface (aka "UI" or "skin") controls both how the screen the Pos displays and operates.
            </p>
          </div>
 
          {/* Commands for Each Lane */}
          <div className="mb-6">
            <h3 className="font-semibold text-text mb-2">Commands for each lane</h3>
            <textarea
              rows={10}
              className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-[#00543b] font-mono text-sm"
              placeholder="Configuration Commands for each lane"
              value={settings.commandsForLane}
              onChange={(e) => handleCommandsChange(e.target.value)}
              onBlur={() => saveTextAreaSetting('LaneCoden400.FposAllCtl')}
            />
          </div>
 
          {/* Install Commands for Each Lane */}
          <div className="mb-6">
            <h3 className="font-semibold text-text mb-2">Install Commands for each lane</h3>
            <p className="text-muted text-sm mb-2">
              These commands are deployed to the lane on initial install only.
            </p>
            <textarea
              rows={10}
              className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-[#00543b] font-mono text-sm"
              placeholder="Configuration Commands for each lane"
              value={settings.installCommands}
              onChange={(e) => handleInstallCommandsChange(e.target.value)}
              onBlur={() => saveTextAreaSetting('LaneCoden400.FposBlankCtl')}
            />
          </div>
        </div>
 
        {/* Back Button */}
        <div className="mt-6">
          <Link 
            href="/pages/settings/stores"
            className="inline-flex items-center px-6 py-3 bg-muted text-white rounded-lg hover:bg-muted/90 transition-colors"
          >
            ← Back to Stores
          </Link>
        </div>
      </div>
    </div>
  );
}