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;
Leave a Comment