page.tsx

Go to the documentation of this file.

'use client';
 
import Link from 'next/link';
import { Icon } from '@/contexts/IconContext';
 
export default function EndOfDayPage() {
  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">End of Day</span>
          </div>
          <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-3">
            <Icon name="event_note" size={32} />
            End of Day Configuration
          </h1>
          <p className="text-muted">Configure till reconciliation and closing procedures</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">Closing Procedures</h2>
            <p className="text-muted mb-4">Configure end of day processes</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">
                  Cash Up Time
                </label>
                <input 
                  type="time" 
                  className="w-full px-3 py-2 border border-border rounded-md"
                  defaultValue="23:00"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-text mb-2">
                  Variance Tolerance
                </label>
                <input 
                  type="number" 
                  placeholder="5.00"
                  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">Reconciliation Settings</h2>
            <p className="text-muted mb-4">Configure till reconciliation requirements</p>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-text">Require manager approval</span>
                <input type="checkbox" className="toggle" />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-text">Auto-generate reports</span>
                <input type="checkbox" className="toggle" defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-text">Email reports to management</span>
                <input type="checkbox" className="toggle" />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-text">Lock day after closing</span>
                <input type="checkbox" className="toggle" defaultChecked />
              </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={20} />
              Save Changes
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}