page.tsx

Go to the documentation of this file.

'use client';
 
import Link from 'next/link';
import { Icon } from '@/contexts/IconContext';
 
export default function PricingPage() {
  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">Pricing</span>
          </div>
          <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-2"><Icon name="sell" size={32} /> Pricing Configuration</h1>
          <p className="text-muted">Configure price rules, markdowns, and pricing strategies</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">Price Rules</h2>
            <p className="text-muted mb-4">Define pricing rules and calculation methods</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">
                  Default Price Level
                </label>
                <select className="w-full px-3 py-2 border border-border rounded-md">
                  <option>Retail</option>
                  <option>Wholesale</option>
                  <option>Trade</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-text mb-2">
                  Tax Calculation Method
                </label>
                <select className="w-full px-3 py-2 border border-border rounded-md">
                  <option>Inclusive</option>
                  <option>Exclusive</option>
                </select>
              </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">Markdowns & Promotions</h2>
            <p className="text-muted mb-4">Configure discount and promotion policies</p>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-text">Allow manual price overrides</span>
                <input type="checkbox" className="toggle" />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-text">Enable promotional pricing</span>
                <input type="checkbox" className="toggle" />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-text">Allow below-cost pricing</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>
  );
}