page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Icon } from '@/contexts/IconContext';
 
interface Lane {
  f100: string; // ID
  f101: string; // Name
  f102: string; // Location/Store
  f104: string; // Store Name
  f107: string; // Last Seen
  f110: number; // Authorized
  f114: string; // IP Address
  f124: string; // Comments
  f125: string; // Asset Number
  f126: number; // Life Phase
  f128: number; // Profile
  f129: string; // Active UI
  f130: string; // Set UI
  f131: number; // Canary Level
  f132: string; // Auto Update
  uistr?: string; // UI display string
  Version?: string;
  Time?: string;
}
 
interface Profile {
  id: number;
  name: string;
  used: number;
}
 
export default function LanesPage() {
  const [lanes, setLanes] = useState<Lane[]>([]);
  const [filteredLanes, setFilteredLanes] = useState<Lane[]>([]);
  const [profiles, setProfiles] = useState<Profile[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [authFilter, setAuthFilter] = useState('0'); // 0=All, 1=Only Auth, 2=Only Non-Auth
  const [phaseFilter, setPhaseFilter] = useState('-1'); // -3=All, -1=All Active, -2=All Non-Active, 0-3=specific, 64-66=retired/test/deployed
  
  const [showEditModal, setShowEditModal] = useState(false);
  const [showProfileModal, setShowProfileModal] = useState(false);
  const [showScanModal, setShowScanModal] = useState(false);
  const [editingLane, setEditingLane] = useState<Lane | null>(null);
  
  const [laneForm, setLaneForm] = useState({
    f100: '',
    f101: '',
    f102: '',
    f104: '',
    f110: true,
    f114: '',
    f124: '',
    f125: '',
    f126: 0,
    f128: 0,
    f130: '',
    f131: 0,
    f132: '0'
  });
 
  useEffect(() => {
    loadData();
  }, []);
 
  useEffect(() => {
    applyFilters();
  }, [lanes, searchTerm, authFilter, phaseFilter]);
 
  const loadData = async () => {
    try {
      setLoading(true);
      // In production: await apiClient.getLanes()
      // For now, using placeholder data
      const mockLanes: Lane[] = [
        {
          f100: '1001',
          f101: 'POS 1',
          f102: '1',
          f104: 'Main Store',
          f107: '2025-12-24T10:30:00',
          f110: 1,
          f114: '192.168.1.100',
          f124: 'Main counter',
          f125: 'ASSET-001',
          f126: 0,
          f128: 1,
          f129: 'Touch Screen UI',
          f130: 'Touch Screen UI',
          f131: 50,
          f132: 'stable',
          uistr: 'Touch Screen UI',
          Version: 'P2200',
          Time: '24-Dec-2025 10:30'
        },
        {
          f100: '1002',
          f101: 'POS 2',
          f102: '1',
          f104: 'Main Store',
          f107: '2025-12-24T09:15:00',
          f110: 1,
          f114: '192.168.1.101',
          f124: 'Back counter',
          f125: 'ASSET-002',
          f126: 0,
          f128: 1,
          f129: 'Touch Screen UI',
          f130: 'Touch Screen UI',
          f131: 25,
          f132: 'stable',
          uistr: 'Touch Screen UI',
          Version: 'P2200',
          Time: '24-Dec-2025 09:15'
        },
        {
          f100: '2001',
          f101: 'BackOffice',
          f102: '1',
          f104: 'Main Store',
          f107: '2025-12-24T08:00:00',
          f110: 1,
          f114: '192.168.1.150',
          f124: 'Office system',
          f125: 'ASSET-050',
          f126: 1,
          f128: 2,
          f129: 'Default POS Interface',
          f130: 'Default POS Interface',
          f131: 75,
          f132: 'latest',
          uistr: 'Default POS Interface',
          Version: 'P2210',
          Time: '24-Dec-2025 08:00'
        }
      ];
      
      setLanes(mockLanes);
      
      // Load profiles
      const mockProfiles: Profile[] = [
        { id: 1, name: 'Selling Counters', used: 2 },
        { id: 2, name: 'Back Office', used: 1 },
        { 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 }
      ];
      setProfiles(mockProfiles);
    } catch (error) {
      console.error('Error loading lanes:', error);
      alert('Failed to load lanes data');
    } finally {
      setLoading(false);
    }
  };
 
  const applyFilters = () => {
    let filtered = [...lanes];
    
    // Auth filter
    if (authFilter === '1') {
      filtered = filtered.filter(l => l.f110 === 1);
    } else if (authFilter === '2') {
      filtered = filtered.filter(l => l.f110 === 0);
    }
    
    // Phase filter
    const phase = Number(phaseFilter);
    if (phase !== -3) {
      if (phase === -1) {
        // All active (0-3)
        filtered = filtered.filter(l => l.f126 >= 0 && l.f126 < 64);
      } else if (phase === -2) {
        // All non-active (64+)
        filtered = filtered.filter(l => l.f126 >= 64);
      } else {
        // Specific phase
        filtered = filtered.filter(l => l.f126 === phase);
      }
    }
    
    // Search filter
    if (searchTerm) {
      const term = searchTerm.toLowerCase();
      filtered = filtered.filter(l => 
        l.f100.toLowerCase().includes(term) ||
        l.f101.toLowerCase().includes(term) ||
        l.f102.toLowerCase().includes(term) ||
        l.f104.toLowerCase().includes(term) ||
        l.f114.toLowerCase().includes(term) ||
        l.f125.toLowerCase().includes(term)
      );
    }
    
    setFilteredLanes(filtered);
  };
 
  const openNewLaneModal = () => {
    setEditingLane(null);
    setLaneForm({
      f100: '',
      f101: '',
      f102: '',
      f104: '',
      f110: true,
      f114: '',
      f124: '',
      f125: '',
      f126: 0,
      f128: 0,
      f130: '',
      f131: 0,
      f132: '0'
    });
    setShowEditModal(true);
  };
 
  const openEditLaneModal = (lane: Lane) => {
    setEditingLane(lane);
    setLaneForm({
      f100: lane.f100,
      f101: lane.f101,
      f102: lane.f102,
      f104: lane.f104,
      f110: lane.f110 === 1,
      f114: lane.f114,
      f124: lane.f124,
      f125: lane.f125,
      f126: lane.f126,
      f128: lane.f128,
      f130: lane.f130,
      f131: lane.f131,
      f132: lane.f132
    });
    setShowEditModal(true);
  };
 
  const saveLane = async () => {
    try {
      if (!editingLane && !laneForm.f100) {
        alert('A valid unique ID is required');
        return;
      }
      
      // In production: await apiClient.saveLane(laneForm, editingLane ? 'edit' : 'new')
      console.log('Saving lane:', laneForm);
      alert('Lane saved successfully');
      setShowEditModal(false);
      loadData();
    } catch (error) {
      console.error('Error saving lane:', error);
      alert('Failed to save lane');
    }
  };
 
  const getLifePhaseName = (phase: number) => {
    const phases: { [key: number]: string } = {
      0: 'Trading Lane',
      1: 'Back Office Lane',
      2: 'Head Office Lane',
      3: 'IT/Support Lane',
      64: 'Retired/Historic',
      65: 'Test Lane',
      66: 'Deployed Lane'
    };
    return phases[phase] || 'Unknown';
  };
 
  const formatDateTime = (dateStr: string) => {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    return date.toLocaleString();
  };
 
  if (loading) {
    return (
      <div className="p-8">
        <div className="text-center">Loading lanes...</div>
      </div>
    );
  }
 
  return (
    <div className="min-h-screen bg-bg">
      {/* Page Title */}
      <div className="bg-surface border-b-2 border-[var(--brand)] p-6">
        <h1 className="text-3xl font-bold text-text flex items-center gap-2">
          <Icon name="storefront" size={32} className="text-brand" />
          Lanes
        </h1>
      </div>
 
      <div className="p-6">
        {/* Action Cards */}
        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
          <button
            onClick={() => setShowProfileModal(true)}
            className="bg-surface rounded-lg shadow p-4 hover:shadow-lg transition-shadow flex flex-col items-center justify-center gap-2 border-2 border-transparent hover:border-brand"
          >
            <Icon name="dashboard" size={40} className="text-brand" />
            <span className="font-semibold text-text text-sm text-center">Manage Profiles</span>
          </button>
 
          <button
            onClick={openNewLaneModal}
            className="bg-surface rounded-lg shadow p-4 hover:shadow-lg transition-shadow flex flex-col items-center justify-center gap-2 border-2 border-transparent hover:border-brand"
          >
            <Icon name="add" size={40} className="text-brand" />
            <span className="font-semibold text-text text-sm text-center">Add New Lane</span>
          </button>
 
          <button
            onClick={() => setShowScanModal(true)}
            className="bg-surface rounded-lg shadow p-4 hover:shadow-lg transition-shadow flex flex-col items-center justify-center gap-2 border-2 border-transparent hover:border-brand"
          >
            <Icon name="search" size={40} className="text-brand" />
            <span className="font-semibold text-text text-sm text-center">Scan All Lanes</span>
          </button>
        </div>
 
        {/* Search and Filters */}
        <div className="bg-surface rounded-lg shadow p-4 mb-6">
          <div className="flex flex-wrap items-center gap-4">
            <div className="flex-1 min-w-[200px]">
              <input
                type="text"
                placeholder="Search lanes..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full px-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent"
              />
            </div>
            
            <div className="flex items-center gap-2">
              <label className="text-sm font-medium text-text">Auth:</label>
              <select
                value={authFilter}
                onChange={(e) => setAuthFilter(e.target.value)}
                className="px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
              >
                <option value="0">All Lanes</option>
                <option value="1">Only Authorised</option>
                <option value="2">Only Non-Authorised</option>
              </select>
            </div>
            
            <div className="flex items-center gap-2">
              <label className="text-sm font-medium text-text">Phase:</label>
              <select
                value={phaseFilter}
                onChange={(e) => setPhaseFilter(e.target.value)}
                className="px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
              >
                <option value="-3">All Lanes Regardless</option>
                <optgroup label="Active">
                  <option value="-1">All Active Lanes</option>
                  <option value="0">Trading Lanes</option>
                  <option value="1">Store Back Office Lanes</option>
                  <option value="2">Head Office Lanes</option>
                  <option value="3">IT Support Lanes</option>
                </optgroup>
                <optgroup label="Not Active">
                  <option value="-2">All Non Active Lanes</option>
                  <option value="64">Retired Lanes</option>
                  <option value="66">Deployed Lanes</option>
                  <option value="65">Test Lanes</option>
                </optgroup>
              </select>
            </div>
            
            <div className="text-sm text-muted">
              Displaying {filteredLanes.length} of {lanes.length}
            </div>
          </div>
        </div>
 
        {/* Lanes Table */}
        <div className="bg-surface rounded-lg shadow overflow-x-auto">
          <table className="w-full">
            <thead className="bg-[var(--brand)] text-surface">
              <tr>
                <th className="p-3 text-left">ID</th>
                <th className="p-3 text-left">Last IP</th>
                <th className="p-3 text-left">Store</th>
                <th className="p-3 text-left">Name</th>
                <th className="p-3 text-left">Profile</th>
                <th className="p-3 text-left">User Interface</th>
                <th className="p-3 text-left">Asset #</th>
                <th className="p-3 text-left">Last Seen</th>
                <th className="p-3 text-left">Options</th>
              </tr>
            </thead>
            <tbody>
              {filteredLanes.map((lane, index) => (
                <tr key={lane.f100} className={index % 2 === 0 ? 'bg-surface-2' : 'bg-surface'}>
                  <td className="p-3 border-t border-border">
                    <div className="font-semibold text-text">{lane.f100}</div>
                    <div className="text-xs text-muted flex items-center gap-1">
                      {lane.f110 ? (
                        <><Icon name="check_circle" size={12} className="text-success" /> Auth</>
                      ) : (
                        <><Icon name="cancel" size={12} className="text-danger" /> Not Auth</>
                      )}
                    </div>
                  </td>
                  <td className="p-3 border-t border-border text-sm">{lane.f114}</td>
                  <td className="p-3 border-t border-border text-sm">{lane.f102}</td>
                  <td className="p-3 border-t border-border font-medium">{lane.f101}</td>
                  <td className="p-3 border-t border-border text-sm">
                    {lane.f128 > 0 ? `Profile ${lane.f128}` : 'None'}
                  </td>
                  <td className="p-3 border-t border-border text-sm">
                    {lane.uistr || lane.f129 || 'Default'}
                  </td>
                  <td className="p-3 border-t border-border text-sm">{lane.f125}</td>
                  <td className="p-3 border-t border-border text-sm">{formatDateTime(lane.f107)}</td>
                  <td className="p-3 border-t border-border">
                    <div className="flex gap-2">
                      <button
                        onClick={() => openEditLaneModal(lane)}
                        className="px-3 py-1 bg-info text-surface text-sm rounded hover:bg-info/80 flex items-center gap-1"
                      >
                        <Icon name="edit" size={14} />
                        Edit
                      </button>
                      <Link
                        href={`/pages/settings/staff?lane=${lane.f100}`}
                        className="px-3 py-1 bg-brand text-surface text-sm rounded hover:bg-brand/90 flex items-center gap-1"
                      >
                        <Icon name="assignment" size={14} />
                        Login Report
                      </Link>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          
          {filteredLanes.length === 0 && (
            <div className="p-8 text-center text-muted">
              No lanes found matching your criteria
            </div>
          )}
        </div>
      </div>
 
      {/* Edit/New Lane Modal */}
      {showEditModal && (
        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="bg-surface/95 backdrop-blur-md rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div className="sticky top-0 bg-[var(--brand)] text-surface p-4 flex justify-between items-center">
              <h2 className="text-xl font-bold">{editingLane ? 'Edit Lane' : 'Add New Lane'}</h2>
              <button
                onClick={() => setShowEditModal(false)}
                className="text-surface hover:text-muted/70 text-2xl font-bold"
              >
                <Icon name="close" size={24} />
              </button>
            </div>
            
            <div className="p-6">
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-text mb-1">
                      Unique ID {!editingLane && <span className="text-danger">*</span>}
                    </label>
                    <input
                      type="text"
                      value={laneForm.f100}
                      onChange={(e) => setLaneForm({...laneForm, f100: e.target.value})}
                      disabled={!!editingLane}
                      className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent disabled:bg-surface-2"
                    />
                  </div>
                  
                  <div>
                    <label className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={laneForm.f110}
                        onChange={(e) => setLaneForm({...laneForm, f110: e.target.checked})}
                        className="w-5 h-5 text-[var(--brand)] focus:ring-[var(--brand)]"
                      />
                      <span className="text-sm font-medium text-text">Authorised</span>
                    </label>
                  </div>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Name</label>
                  <input
                    type="text"
                    value={laneForm.f101}
                    onChange={(e) => setLaneForm({...laneForm, f101: e.target.value})}
                    placeholder="e.g., POS1"
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                  />
                  <p className="text-xs text-muted mt-1">A brief name for this lane</p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Store Name</label>
                  <input
                    type="text"
                    value={laneForm.f104}
                    onChange={(e) => setLaneForm({...laneForm, f104: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                  />
                  <p className="text-xs text-muted mt-1">Optional, only used for some reports</p>
                </div>
 
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-text mb-1">Location</label>
                    <input
                      type="text"
                      value={laneForm.f102}
                      onChange={(e) => setLaneForm({...laneForm, f102: e.target.value})}
                      className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-text mb-1">Profile</label>
                    <select
                      value={laneForm.f128}
                      onChange={(e) => setLaneForm({...laneForm, f128: Number(e.target.value)})}
                      className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                    >
                      <option value={0}>None</option>
                      {profiles.map(p => (
                        <option key={p.id} value={p.id}>
                          {p.name || `Profile ${p.id}`}
                        </option>
                      ))}
                    </select>
                  </div>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Automatic Code Update</label>
                  <select
                    value={laneForm.f132}
                    onChange={(e) => setLaneForm({...laneForm, f132: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                  >
                    <option value="0">Inherit from profile</option>
                    <option value="manual">Manual</option>
                    <option value="latest">Latest</option>
                    <option value="stable">Stable</option>
                    <option value="dev">Development</option>
                    <option value="whitehot">Whitehot</option>
                    <option value="longterm">Previous Generation</option>
                  </select>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Canary Level: {laneForm.f131}
                  </label>
                  <input
                    type="range"
                    min="0"
                    max="100"
                    value={laneForm.f131}
                    onChange={(e) => setLaneForm({...laneForm, f131: Number(e.target.value)})}
                    className="w-full"
                  />
                  <p className="text-xs text-muted mt-1">
                    Controls how aggressive updates are applied. Higher = earlier updates.
                  </p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">User Interface #</label>
                  <input
                    type="text"
                    value={laneForm.f130}
                    onChange={(e) => setLaneForm({...laneForm, f130: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Asset Number</label>
                  <input
                    type="text"
                    value={laneForm.f125}
                    onChange={(e) => setLaneForm({...laneForm, f125: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Comments</label>
                  <textarea
                    rows={2}
                    value={laneForm.f124}
                    onChange={(e) => setLaneForm({...laneForm, f124: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">IP Address</label>
                  <input
                    type="text"
                    value={laneForm.f114}
                    onChange={(e) => setLaneForm({...laneForm, f114: e.target.value})}
                    placeholder="e.g., 192.168.1.100"
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                  />
                  <p className="text-xs text-muted mt-1">Optional, will be updated when it connects</p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">Life Phase</label>
                  <select
                    value={laneForm.f126}
                    onChange={(e) => setLaneForm({...laneForm, f126: Number(e.target.value)})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                  >
                    <optgroup label="Active">
                      <option value={0}>Trading Lane</option>
                      <option value={1}>Back Office Lane</option>
                      <option value={2}>Head Office Lane</option>
                      <option value={3}>IT/Support Lane</option>
                    </optgroup>
                    <optgroup label="Non Active">
                      <option value={64}>Retired/Historic</option>
                      <option value={65}>Test Lane</option>
                      <option value={66}>Deployed Lane</option>
                    </optgroup>
                  </select>
                </div>
              </div>
 
              <div className="mt-6 flex gap-3">
                <button
                  onClick={saveLane}
                  className="flex-1 px-6 py-3 bg-[var(--brand)] text-surface rounded-lg hover:bg-[var(--brand2)] transition-colors font-semibold flex items-center justify-center gap-2"
                >
                  <Icon name="save" size={20} />
                  Save
                </button>
                <button
                  onClick={() => setShowEditModal(false)}
                  className="px-6 py-3 bg-surface-2 text-text rounded-lg hover:bg-surface-2/80 transition-colors"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
 
      {/* Profile Management Modal */}
      {showProfileModal && (
        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="bg-surface/95 backdrop-blur-md rounded-lg shadow-2xl max-w-3xl w-full">
            <div className="bg-[var(--brand)] text-surface p-4 flex justify-between items-center rounded-t-lg">
              <h2 className="text-xl font-bold">Manage Profiles</h2>
              <button
                onClick={() => setShowProfileModal(false)}
                className="text-surface hover:text-muted/70 text-2xl font-bold"
              >
                <Icon name="close" size={24} />
              </button>
            </div>
            
            <div className="p-6">
              <p className="text-text mb-6" style={{maxWidth: '26em'}}>
                A profile is a grouping of lanes that share similar attributes and should be configured the same way. 
                Typically all selling counters might belong to one profile and all backoffice systems to another profile. 
                Several of the configuration options allow you to configure based on profile.
              </p>
              
              <table className="w-full border-collapse">
                <thead>
                  <tr className="bg-surface-2">
                    <th className="p-3 text-center border border-border">Profile Number</th>
                    <th className="p-3 text-center border border-border">Profile Name</th>
                    <th className="p-3 text-center border border-border">Count Using this profile</th>
                  </tr>
                </thead>
                <tbody>
                  {profiles.map((profile) => (
                    <tr key={profile.id}>
                      <td className="p-3 text-center border border-border font-semibold">{profile.id}</td>
                      <td className="p-3 border border-border">
                        <input
                          type="text"
                          size={14}
                          value={profile.name}
                          onChange={(e) => {
                            const updated = profiles.map(p => 
                              p.id === profile.id ? {...p, name: e.target.value} : p
                            );
                            setProfiles(updated);
                          }}
                          onBlur={async (e) => {
                            // Save profile name on blur
                            const name = e.target.value || `Profile ${profile.id}`;
                            try {
                              // In production: await apiClient.saveProfileName(profile.id, name)
                              console.log(`Saving profile ${profile.id} name:`, name);
                            } catch (error) {
                              console.error('Error saving profile name:', error);
                            }
                          }}
                          className="w-full px-2 py-1 border border-border rounded focus:ring-1 focus:ring-[var(--brand)] focus:border-transparent"
                        />
                      </td>
                      <td className="p-3 text-center border border-border">{profile.used}</td>
                    </tr>
                  ))}
                  <tr>
                    <td colSpan={2} className="p-3 text-center border border-border font-semibold">
                      Lanes not assigned to any profile
                    </td>
                    <td className="p-3 text-center border border-border">0</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}
 
      {/* Scan Lanes Modal */}
      {showScanModal && (
        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="bg-surface/95 backdrop-blur-md rounded-lg shadow-2xl max-w-2xl w-full">
            <div className="bg-[var(--brand)] text-surface p-4 flex justify-between items-center rounded-t-lg">
              <h2 className="text-xl font-bold">Scan All Lanes</h2>
              <button
                onClick={() => setShowScanModal(false)}
                className="text-surface hover:text-muted/70 text-2xl font-bold"
              >
                <Icon name="close" size={24} />
              </button>
            </div>
            
            <div className="p-6">
              <h3 className="text-lg font-semibold mb-4">PosGreen Lanes</h3>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Retrieve Current Setting
                  </label>
                  <input
                    type="text"
                    placeholder="Setting name"
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Database Table Row Estimate
                  </label>
                  <input
                    type="text"
                    placeholder="Table name"
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    TCP Port
                  </label>
                  <input
                    type="number"
                    defaultValue={8095}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent"
                  />
                </div>
                
                <button
                  onClick={() => alert('Scan functionality will be implemented with API integration')}
                  className="w-full px-6 py-3 bg-[var(--brand)] text-surface rounded-lg hover:bg-[var(--brand2)] transition-colors font-semibold flex items-center justify-center gap-2"
                >
                  <Icon name="add_circle" size={20} />
                  Add Column
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}