page.tsx

Go to the documentation of this file.

'use client';
 
import Link from 'next/link';
import { Icon } from '@/contexts/IconContext';
 
export default function LoyaltyPage() {
  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">Loyalty Programs</span>
          </div>
          <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-3">
            <Icon name="loyalty" size={32} />
            Loyalty Programs Configuration
          </h1>
          <p className="text-muted">Configure rewards and loyalty schemes</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">Points System</h2>
            <p className="text-muted mb-4">Configure how loyalty points are earned and redeemed</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">
                  Points Per Dollar Spent
                </label>
                <input 
                  type="number" 
                  placeholder="1"
                  className="w-full px-3 py-2 border border-border rounded-md"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-text mb-2">
                  Points Value (Cents)
                </label>
                <input 
                  type="number" 
                  placeholder="1"
                  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">Program Features</h2>
            <p className="text-muted mb-4">Enable or disable loyalty program features</p>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-text">Enable loyalty program</span>
                <input type="checkbox" className="toggle" defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-text">Allow points redemption</span>
                <input type="checkbox" className="toggle" defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-text">Tiered membership levels</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={20} />
              Save Changes
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}