page.tsx

Go to the documentation of this file.

"use client";
import { useState } from "react";
import Link from "next/link";
 
export default function ConfigPage() {
  const [activeSection, setActiveSection] = useState<string>("general");
 
  const sections = [
    { id: "general", title: "General", icon: "⚙️" },
    { id: "pos", title: "POS Settings", icon: "🛒" },
    { id: "hardware", title: "Hardware", icon: "🖨️" },
    { id: "payments", title: "Payment Methods", icon: "💳" },
    { id: "taxes", title: "Tax Configuration", icon: "📊" },
    { id: "receipts", title: "Receipts", icon: "🧾" },
    { id: "security", title: "Security", icon: "🔐" },
    { id: "integrations", title: "Integrations", icon: "🔗" }
  ];
 
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto p-6">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">System Configuration</h1>
          <p className="text-gray-600">Configure system settings, hardware, and integrations</p>
        </div>
 
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* Sidebar */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sticky top-6">
              <h2 className="text-sm font-semibold text-gray-500 uppercase mb-3">Settings</h2>
              <nav className="space-y-1">
                {sections.map((section) => (
                  <button
                    key={section.id}
                    onClick={() => setActiveSection(section.id)}
                    className={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors ${
                      activeSection === section.id
                        ? "bg-blue-50 text-blue-700 font-medium"
                        : "text-gray-700 hover:bg-gray-50"
                    }`}
                  >
                    <span className="mr-2">{section.icon}</span>
                    {section.title}
                  </button>
                ))}
              </nav>
              <div className="mt-6 pt-6 border-t border-gray-200">
                <Link 
                  href="/pages/settings/stores"
                  className="text-sm text-blue-600 hover:text-blue-700 block mb-2"
                >
                  → Store Settings
                </Link>
                <Link 
                  href="/pages/settings/staff"
                  className="text-sm text-blue-600 hover:text-blue-700 block"
                >
                  → Staff Management
                </Link>
              </div>
            </div>
          </div>
 
          {/* Content */}
          <div className="lg:col-span-3">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              {activeSection === "general" && (
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">General Settings</h2>
                  
                  <div className="space-y-6">
                    <div className="border-b border-gray-200 pb-4">
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Business Name
                      </label>
                      <input
                        type="text"
                        defaultValue="EverydayPOS"
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      />
                    </div>
 
                    <div className="border-b border-gray-200 pb-4">
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Default Currency
                      </label>
                      <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option>USD - US Dollar</option>
                        <option>EUR - Euro</option>
                        <option>GBP - British Pound</option>
                        <option>AUD - Australian Dollar</option>
                        <option>NZD - New Zealand Dollar</option>
                      </select>
                    </div>
 
                    <div className="border-b border-gray-200 pb-4">
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Time Zone
                      </label>
                      <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option>Pacific/Auckland (NZST)</option>
                        <option>Australia/Sydney (AEDT)</option>
                        <option>America/Los_Angeles (PST)</option>
                        <option>America/New_York (EST)</option>
                        <option>Europe/London (GMT)</option>
                      </select>
                    </div>
 
                    <div className="border-b border-gray-200 pb-4">
                      <label className="flex items-center">
                        <input type="checkbox" className="mr-2" defaultChecked />
                        <span className="text-sm text-gray-700">Enable automatic backups</span>
                      </label>
                    </div>
 
                    <button className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
                      Save Changes
                    </button>
                  </div>
                </div>
              )}
 
              {activeSection === "pos" && (
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">POS Settings</h2>
                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 text-center">
                    <div className="text-4xl mb-4">🛒</div>
                    <p className="text-gray-700">POS configuration options coming soon</p>
                  </div>
                </div>
              )}
 
              {activeSection === "hardware" && (
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">Hardware Configuration</h2>
                  <div className="space-y-4">
                    <div className="border border-gray-200 rounded-lg p-4">
                      <h3 className="font-semibold text-gray-900 mb-2">🖨️ Receipt Printers</h3>
                      <p className="text-sm text-gray-600 mb-3">Configure thermal and network printers</p>
                      <button className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700">
                        Add Printer
                      </button>
                    </div>
                    <div className="border border-gray-200 rounded-lg p-4">
                      <h3 className="font-semibold text-gray-900 mb-2">📱 Barcode Scanners</h3>
                      <p className="text-sm text-gray-600 mb-3">USB and Bluetooth scanner setup</p>
                      <button className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700">
                        Add Scanner
                      </button>
                    </div>
                    <div className="border border-gray-200 rounded-lg p-4">
                      <h3 className="font-semibold text-gray-900 mb-2">💵 Cash Drawers</h3>
                      <p className="text-sm text-gray-600 mb-3">Configure cash drawer kick mechanisms</p>
                      <button className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700">
                        Add Cash Drawer
                      </button>
                    </div>
                  </div>
                </div>
              )}
 
              {activeSection === "payments" && (
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">Payment Methods</h2>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                      <div>
                        <h3 className="font-semibold text-gray-900">💵 Cash</h3>
                        <p className="text-sm text-gray-600">Accept cash payments</p>
                      </div>
                      <label className="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" className="sr-only peer" defaultChecked />
                        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                      </label>
                    </div>
                    <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                      <div>
                        <h3 className="font-semibold text-gray-900">💳 Card Payments</h3>
                        <p className="text-sm text-gray-600">Credit/Debit card processing</p>
                      </div>
                      <label className="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" className="sr-only peer" defaultChecked />
                        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                      </label>
                    </div>
                    <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                      <div>
                        <h3 className="font-semibold text-gray-900">📱 Digital Wallets</h3>
                        <p className="text-sm text-gray-600">Apple Pay, Google Pay, etc.</p>
                      </div>
                      <label className="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" className="sr-only peer" />
                        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                      </label>
                    </div>
                  </div>
                </div>
              )}
 
              {activeSection === "taxes" && (
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">Tax Configuration</h2>
                  <div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
                    <div className="text-4xl mb-4">📊</div>
                    <p className="text-gray-700">Tax rate configuration coming soon</p>
                  </div>
                </div>
              )}
 
              {activeSection === "receipts" && (
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">Receipt Configuration</h2>
                  <div className="bg-purple-50 border border-purple-200 rounded-lg p-6 text-center">
                    <div className="text-4xl mb-4">🧾</div>
                    <p className="text-gray-700">Receipt template editor coming soon</p>
                  </div>
                </div>
              )}
 
              {activeSection === "security" && (
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">Security Settings</h2>
                  <div className="space-y-4">
                    <div className="border-b border-gray-200 pb-4">
                      <label className="flex items-center">
                        <input type="checkbox" className="mr-2" defaultChecked />
                        <span className="text-sm text-gray-700">Require password for void/refund</span>
                      </label>
                    </div>
                    <div className="border-b border-gray-200 pb-4">
                      <label className="flex items-center">
                        <input type="checkbox" className="mr-2" defaultChecked />
                        <span className="text-sm text-gray-700">Enable audit logging</span>
                      </label>
                    </div>
                    <div className="border-b border-gray-200 pb-4">
                      <label className="flex items-center">
                        <input type="checkbox" className="mr-2" />
                        <span className="text-sm text-gray-700">Two-factor authentication</span>
                      </label>
                    </div>
                    <Link 
                      href="/audit"
                      className="inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
                    >
                      View Audit Log
                    </Link>
                  </div>
                </div>
              )}
 
              {activeSection === "integrations" && (
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">Third-Party Integrations</h2>
                  <div className="space-y-4">
                    <div className="border border-gray-200 rounded-lg p-4">
                      <div className="flex items-center justify-between mb-2">
                        <h3 className="font-semibold text-gray-900">Fieldpine Backend</h3>
                        <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full border border-green-200">
                          Connected
                        </span>
                      </div>
                      <p className="text-sm text-gray-600">Integrated retail management platform</p>
                    </div>
                    <div className="border border-gray-200 rounded-lg p-4 opacity-60">
                      <div className="flex items-center justify-between mb-2">
                        <h3 className="font-semibold text-gray-900">Accounting Software</h3>
                        <span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
                          Not Connected
                        </span>
                      </div>
                      <p className="text-sm text-gray-600">QuickBooks, Xero, MYOB integration</p>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}