page.tsx

Go to the documentation of this file.

"use client";
import { useState } from "react";
 
export default function LanesPage() {
  const [lanes] = useState([
    { id: 1, name: "Lane 1 - Main Counter", status: "active", operator: "John Smith", lastActivity: "2 mins ago" },
    { id: 2, name: "Lane 2 - Express", status: "active", operator: "Sarah Jones", lastActivity: "5 mins ago" },
    { id: 3, name: "Lane 3 - Self-Checkout", status: "idle", operator: null, lastActivity: "15 mins ago" },
    { id: 4, name: "Lane 4 - Customer Service", status: "offline", operator: null, lastActivity: "2 hours ago" }
  ]);
 
  const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "bg-success/10 text-success border-success/20";
      case "idle":
        return "bg-warn/10 text-warn border-warn/20";
      case "offline":
        return "bg-muted/10 text-muted border-muted/20";
      default:
        return "bg-muted/10 text-muted border-muted/20";
    }
  };
 
  const getStatusIcon = (status: string) => {
    switch (status) {
      case "active":
        return "🟢";
      case "idle":
        return "🟡";
      case "offline":
        return "⚫";
      default:
        return "⚪";
    }
  };
 
  return (
    <div className="min-h-screen" style={{ background: 'var(--bg)' }}>
      <div className="max-w-7xl mx-auto p-6">
        <div className="mb-8">
          <h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text)' }}>POS Lanes Management</h1>
          <p style={{ color: 'var(--muted)' }}>Monitor and manage point-of-sale terminals</p>
        </div>
 
        {/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
          <div className="bg-surface rounded-lg shadow-sm border border-border p-4">
            <div className="text-sm mb-1" style={{ color: 'var(--muted)' }}>Total Lanes</div>
            <div className="text-2xl font-bold" style={{ color: 'var(--text)' }}>{lanes.length}</div>
          </div>
          <div className="bg-green-50 rounded-lg shadow-sm border border-green-200 p-4">
            <div className="text-sm text-green-600 mb-1">Active</div>
            <div className="text-2xl font-bold text-green-900">
              {lanes.filter(l => l.status === "active").length}
            </div>
          </div>
          <div className="bg-yellow-50 rounded-lg shadow-sm border border-yellow-200 p-4">
            <div className="text-sm text-yellow-600 mb-1">Idle</div>
            <div className="text-2xl font-bold text-yellow-900">
              {lanes.filter(l => l.status === "idle").length}
            </div>
          </div>
          <div className="bg-gray-50 rounded-lg shadow-sm border border-gray-200 p-4">
            <div className="text-sm text-gray-600 mb-1">Offline</div>
            <div className="text-2xl font-bold text-gray-900">
              {lanes.filter(l => l.status === "offline").length}
            </div>
          </div>
        </div>
 
        {/* Lanes Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          {lanes.map((lane) => (
            <div key={lane.id} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-start justify-between mb-4">
                <div>
                  <h3 className="text-lg font-bold text-gray-900 mb-1">{lane.name}</h3>
                  <p className="text-sm text-gray-600">Lane ID: {lane.id}</p>
                </div>
                <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border ${getStatusColor(lane.status)}`}>
                  <span className="mr-1">{getStatusIcon(lane.status)}</span>
                  {lane.status.toUpperCase()}
                </span>
              </div>
 
              <div className="space-y-2 mb-4">
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Operator:</span>
                  <span className="font-medium text-gray-900">{lane.operator || "None"}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Last Activity:</span>
                  <span className="font-medium text-gray-900">{lane.lastActivity}</span>
                </div>
              </div>
 
              <div className="flex gap-2">
                <button className="flex-1 px-3 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition">
                  View Details
                </button>
                <button className="flex-1 px-3 py-2 text-sm border border-gray-300 text-gray-700 rounded hover:bg-gray-50 transition">
                  Configure
                </button>
              </div>
            </div>
          ))}
        </div>
 
        {/* Actions */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h2 className="text-xl font-bold text-gray-900 mb-4">Lane Management</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button className="px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
              <div className="text-lg font-semibold mb-1">➕ Add New Lane</div>
              <div className="text-xs opacity-90">Register a new POS terminal</div>
            </button>
            <button className="px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
              <div className="text-lg font-semibold mb-1">🔄 Sync All Lanes</div>
              <div className="text-xs opacity-90">Update all terminals</div>
            </button>
            <button className="px-4 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
              <div className="text-lg font-semibold mb-1">📊 Lane Reports</div>
              <div className="text-xs opacity-90">Performance analytics</div>
            </button>
          </div>
        </div>
 
        {/* Info */}
        <div className="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
          <h3 className="font-semibold text-blue-900 mb-2">About POS Lanes</h3>
          <p className="text-blue-800 text-sm">
            POS lanes represent individual checkout terminals in your store. Each lane can be independently 
            configured with its own settings, operator assignments, and hardware peripherals (receipt printers, 
            scanners, cash drawers, etc.).
          </p>
        </div>
      </div>
    </div>
  );
}