page.tsx

Go to the documentation of this file.

'use client';
 
import Link from 'next/link';
import { Icon } from '@/contexts/IconContext';
 
export default function StockControlPage() {
  return (
    <div className="min-h-screen bg-bg">
      <div className="max-w-7xl mx-auto p-6">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center gap-2 text-sm text-muted mb-4">
            <Link href="/pages/settings" className="hover:text-text">Settings</Link>
            <span>›</span>
            <span className="text-text">Stock Control</span>
          </div>
          <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-2"><Icon name="inventory" size={32} /> Stock Control Configuration</h1>
          <p className="text-muted">Configure inventory tracking and management settings</p>
        </div>
 
        {/* Configuration Sections */}
        <div className="space-y-6">
          <div className="bg-surface rounded-lg shadow-sm border border-border p-6">
            <h2 className="text-xl font-semibold text-text mb-4">Inventory Tracking</h2>
            <p className="text-muted mb-4">Configure how stock levels are tracked</p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-text mb-2">
                  Stock Tracking Method
                </label>
                <select className="w-full px-3 py-2 border border-border rounded-md">
                  <option>Real-time</option>
                  <option>End of Day</option>
                  <option>Manual</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-text mb-2">
                  Low Stock Threshold
                </label>
                <input 
                  type="number" 
                  placeholder="5"
                  className="w-full px-3 py-2 border border-border rounded-md"
                />
              </div>
            </div>
          </div>
 
          <div className="bg-surface rounded-lg shadow-sm border border-border p-6">
            <h2 className="text-xl font-semibold text-text mb-4">Stock Alerts</h2>
            <p className="text-muted mb-4">Configure alerts and notifications</p>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-text">Alert on negative stock</span>
                <input type="checkbox" className="toggle" />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-text">Alert on low stock</span>
                <input type="checkbox" className="toggle" />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-text">Alert on stock discrepancies</span>
                <input type="checkbox" className="toggle" />
              </div>
            </div>
          </div>
 
          <div className="flex justify-end gap-3">
            <button className="px-4 py-2 border border-border rounded-md text-text hover:bg-surface-2">
              Cancel
            </button>
            <button className="px-4 py-2 bg-brand text-white rounded-md hover:bg-brand2 flex items-center gap-2">
              <Icon name="save" size={18} /> Save Changes
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}