page.tsx

Go to the documentation of this file.

"use client";
import { useState } from "react";
import { Icon } from '@/contexts/IconContext';
 
export default function PrepayPage() {
  const [activeTab, setActiveTab] = useState<"giftcards" | "vouchers" | "accounts">("giftcards");
 
  return (
    <div className="min-h-screen bg-surface-2">
      <div className="max-w-7xl mx-auto p-6">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-text mb-2">Prepay & Gift Cards</h1>
          <p className="text-muted">Manage gift cards, vouchers, and prepaid accounts</p>
        </div>
 
        {/* Tabs */}
        <div className="bg-surface rounded-lg shadow-sm border border-border mb-6">
          <div className="border-b border-border">
            <nav className="flex -mb-px">
              <button
                onClick={() => setActiveTab("giftcards")}
                className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
                  activeTab === "giftcards"
                    ? "border-brand text-brand"
                    : "border-transparent text-muted hover:text-text hover:border-border"
                }`}
              >
                <Icon name="card_giftcard" size={20} className="inline mr-2" />Gift Cards
              </button>
              <button
                onClick={() => setActiveTab("vouchers")}
                className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
                  activeTab === "vouchers"
                    ? "border-brand text-brand"
                    : "border-transparent text-muted hover:text-text hover:border-border"
                }`}
              >
                <Icon name="confirmation_number" size={20} className="inline mr-2" />Vouchers
              </button>
              <button
                onClick={() => setActiveTab("accounts")}
                className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
                  activeTab === "accounts"
                    ? "border-brand text-brand"
                    : "border-transparent text-muted hover:text-text hover:border-border"
                }`}
              >
                <Icon name="account_balance_wallet" size={20} className="inline mr-2" />Prepaid Accounts
              </button>
            </nav>
          </div>
 
          <div className="p-6">
            {activeTab === "giftcards" && (
              <div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                  <div className="bg-surface border border-border rounded-lg p-6">
                    <h3 className="text-lg font-bold text-text mb-2">Issue New Gift Card</h3>
                    <p className="text-muted text-sm mb-4">Create and activate a new gift card</p>
                    <button className="px-4 py-2 bg-brand text-white rounded hover:bg-brand/90 transition">
                      Issue Gift Card
                    </button>
                  </div>
 
                  <div className="bg-surface border border-border rounded-lg p-6">
                    <h3 className="text-lg font-bold text-text mb-2">Check Balance</h3>
                    <p className="text-muted text-sm mb-4">Look up gift card balance and history</p>
                    <button className="px-4 py-2 bg-success text-white rounded hover:bg-success/80 transition">
                      Check Balance
                    </button>
                  </div>
                </div>
 
                <div className="bg-surface border border-border rounded-lg p-6">
                  <h3 className="font-semibold text-text mb-4">Recent Gift Card Activity</h3>
                  <div className="text-center text-muted py-8">
                    No recent gift card transactions
                  </div>
                </div>
              </div>
            )}
 
            {activeTab === "vouchers" && (
              <div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                  <div className="bg-surface border border-border rounded-lg p-6">
                    <h3 className="text-lg font-bold text-text mb-2">Create Voucher</h3>
                    <p className="text-muted text-sm mb-4">Generate discount or value vouchers</p>
                    <button className="px-4 py-2 bg-info text-white rounded hover:bg-info/80 transition">
                      Create Voucher
                    </button>
                  </div>
 
                  <div className="bg-surface border border-border rounded-lg p-6">
                    <h3 className="text-lg font-bold text-text mb-2">Redeem Voucher</h3>
                    <p className="text-muted text-sm mb-4">Process voucher redemption</p>
                    <button className="px-4 py-2 bg-accent text-white rounded hover:bg-accent/80 transition">
                      Redeem
                    </button>
                  </div>
                </div>
 
                <div className="bg-surface border border-border rounded-lg p-6">
                  <h3 className="font-semibold text-text mb-4">Active Vouchers</h3>
                  <div className="text-center text-muted py-8">
                    No active vouchers
                  </div>
                </div>
              </div>
            )}
 
            {activeTab === "accounts" && (
              <div>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                  <div className="bg-surface border border-border rounded-lg p-4">
                    <div className="text-sm text-muted mb-1">Total Accounts</div>
                    <div className="text-2xl font-bold text-text">0</div>
                  </div>
                  <div className="bg-surface border border-border rounded-lg p-4">
                    <div className="text-sm text-muted mb-1">Total Balance</div>
                    <div className="text-2xl font-bold text-text">$0.00</div>
                  </div>
                  <div className="bg-surface border border-border rounded-lg p-4">
                    <div className="text-sm text-muted mb-1">Active This Month</div>
                    <div className="text-2xl font-bold text-text">0</div>
                  </div>
                </div>
 
                <div className="bg-surface border border-border rounded-lg p-6">
                  <h3 className="font-semibold text-text mb-4">Prepaid Account List</h3>
                  <div className="text-center text-muted py-8">
                    No prepaid accounts found
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
 
        {/* Info Box */}
        <div className="bg-surface border border-border rounded-lg p-6">
          <div className="flex items-start">
            <div className="text-2xl mr-3"><Icon name="construction" size={28} /></div>
            <div>
              <h3 className="font-semibold text-text mb-2">Prepay System Under Development</h3>
              <p className="text-muted text-sm">
                The full prepay and gift card management system is being developed. This will include:
              </p>
              <ul className="list-disc list-inside text-muted text-sm mt-2 space-y-1 ml-2">
                <li>Physical and digital gift card issuance</li>
                <li>Balance checking and top-up functionality</li>
                <li>Voucher creation with custom rules and expiry</li>
                <li>Prepaid account management with transaction history</li>
                <li>Integration with POS for redemption</li>
                <li>Reporting and analytics for prepay programs</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}