Untitled

import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { 
  BarChart, 
  CreditCard, 
  Users, 
  Gift, 
  LineChart,
  Settings,
  AlertCircle
} from 'lucide-react';

// Sample data - In production, this would come from your backend
const transactionData = [
  { date: '2024-12-27', amount: 150.00, type: 'credit', cashDiscount: 5.99 },
  { date: '2024-12-27', amount: 75.50, type: 'cash', cashDiscount: 0 },
];

const rewardsData = [
  { id: 1, name: 'Gold Tier', pointsPerDollar: 2, minimumSpend: 500 },
  { id: 2, name: 'Silver Tier', pointsPerDollar: 1.5, minimumSpend: 250 },
];

const MerchantDashboard = () => {
  const [activeTab, setActiveTab] = useState('overview');

  const calculateTotalRevenue = () => {
    return transactionData.reduce((sum, transaction) => sum + transaction.amount, 0);
  };

  const calculateCashDiscountSavings = () => {
    return transactionData.reduce((sum, transaction) => sum + transaction.cashDiscount, 0);
  };

  return (
    <div className="min-h-screen bg-gray-50 p-4">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-3xl font-bold mb-6">Merchant Dashboard</h1>
        
        {/* Quick Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
              <BarChart className="h-4 w-4 text-gray-500" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                ${calculateTotalRevenue().toFixed(2)}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium">Cash Discount Savings</CardTitle>
              <CreditCard className="h-4 w-4 text-gray-500" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                ${calculateCashDiscountSavings().toFixed(2)}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium">Active Rewards Members</CardTitle>
              <Users className="h-4 w-4 text-gray-500" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">247</div>
            </CardContent>
          </Card>
        </div>

        {/* Main Content Tabs */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
          <TabsList className="grid grid-cols-2 md:grid-cols-6 gap-2">
            <TabsTrigger value="overview" className="flex items-center gap-2">
              <LineChart className="h-4 w-4" /> Overview
            </TabsTrigger>
            <TabsTrigger value="transactions" className="flex items-center gap-2">
              <CreditCard className="h-4 w-4" /> Transactions
            </TabsTrigger>
            <TabsTrigger value="rewards" className="flex items-center gap-2">
              <Gift className="h-4 w-4" /> Rewards
            </TabsTrigger>
            <TabsTrigger value="customers" className="flex items-center gap-2">
              <Users className="h-4 w-4" /> Customers
            </TabsTrigger>
            <TabsTrigger value="reports" className="flex items-center gap-2">
              <BarChart className="h-4 w-4" /> Reports
            </TabsTrigger>
            <TabsTrigger value="settings" className="flex items-center gap-2">
              <Settings className="h-4 w-4" /> Settings
            </TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Recent Activity</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {transactionData.map((transaction, index) => (
                    <div key={index} className="flex justify-between items-center border-b pb-2">
                      <div>
                        <p className="font-medium">{transaction.type === 'credit' ? 'Credit Card Payment' : 'Cash Payment'}</p>
                        <p className="text-sm text-gray-500">{transaction.date}</p>
                      </div>
                      <div className="text-right">
                        <p className="font-medium">${transaction.amount.toFixed(2)}</p>
                        {transaction.cashDiscount > 0 && (
                          <p className="text-sm text-green-600">Saved: ${transaction.cashDiscount.toFixed(2)}</p>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Reward Tiers</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {rewardsData.map((tier) => (
                    <div key={tier.id} className="flex justify-between items-center border-b pb-2">
                      <div>
                        <p className="font-medium">{tier.name}</p>
                        <p className="text-sm text-gray-500">
                          {tier.pointsPerDollar}x points per dollar
                        </p>
                      </div>
                      <div className="text-right">
                        <p className="text-sm">
                          Min. Spend: ${tier.minimumSpend}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Placeholder content for other tabs */}
          <TabsContent value="transactions">
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-center text-gray-500">
                  <AlertCircle className="mr-2" />
                  Transaction history will be displayed here
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
};

export default MerchantDashboard;