Implement booking management features in the admin panel. Add booking data fetching with mock API response, search functionality, and display of booking details in a table format. Enhance dashboard with statistics overview and loading states. Update layout for improved user experience.
This commit is contained in:
iamkiddy
parent
c9440d3924
commit
7a6a2a3a20
@ -1,15 +1,351 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
import SideNav from "@/app/(admin)/_components/side-nav";
|
import SideNav from "@/app/(admin)/_components/side-nav";
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
Bell,
|
||||||
|
Calendar,
|
||||||
|
Clock,
|
||||||
|
User,
|
||||||
|
DollarSign,
|
||||||
|
Video,
|
||||||
|
FileText,
|
||||||
|
MoreVertical,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
ID: number;
|
||||||
|
CreatedAt?: string;
|
||||||
|
UpdatedAt?: string;
|
||||||
|
DeletedAt?: string | null;
|
||||||
|
first_name: string;
|
||||||
|
last_name: string;
|
||||||
|
email: string;
|
||||||
|
phone: string;
|
||||||
|
location: string;
|
||||||
|
date_of_birth?: string;
|
||||||
|
is_admin?: boolean;
|
||||||
|
bookings?: null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Booking {
|
||||||
|
ID: number;
|
||||||
|
CreatedAt: string;
|
||||||
|
UpdatedAt: string;
|
||||||
|
DeletedAt: string | null;
|
||||||
|
user_id: number;
|
||||||
|
user: User;
|
||||||
|
scheduled_at: string;
|
||||||
|
duration: number;
|
||||||
|
status: string;
|
||||||
|
jitsi_room_id: string;
|
||||||
|
jitsi_room_url: string;
|
||||||
|
payment_id: string;
|
||||||
|
payment_status: string;
|
||||||
|
amount: number;
|
||||||
|
notes: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BookingsResponse {
|
||||||
|
bookings: Booking[];
|
||||||
|
limit: number;
|
||||||
|
offset: number;
|
||||||
|
total: number;
|
||||||
|
}
|
||||||
|
|
||||||
export default function Booking() {
|
export default function Booking() {
|
||||||
|
const [bookings, setBookings] = useState<Booking[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Simulate API call
|
||||||
|
const fetchBookings = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||||
|
|
||||||
|
// Mock API response
|
||||||
|
const mockData: BookingsResponse = {
|
||||||
|
bookings: [
|
||||||
|
{
|
||||||
|
ID: 1,
|
||||||
|
CreatedAt: "2025-11-06T11:33:45.704633Z",
|
||||||
|
UpdatedAt: "2025-11-06T11:33:45.707543Z",
|
||||||
|
DeletedAt: null,
|
||||||
|
user_id: 3,
|
||||||
|
user: {
|
||||||
|
ID: 3,
|
||||||
|
CreatedAt: "2025-11-06T10:43:01.299311Z",
|
||||||
|
UpdatedAt: "2025-11-06T10:43:48.427284Z",
|
||||||
|
DeletedAt: null,
|
||||||
|
first_name: "John",
|
||||||
|
last_name: "Smith",
|
||||||
|
email: "john.doe@example.com",
|
||||||
|
phone: "+1234567891",
|
||||||
|
location: "Los Angeles, CA",
|
||||||
|
date_of_birth: "0001-01-01T00:00:00Z",
|
||||||
|
is_admin: true,
|
||||||
|
bookings: null,
|
||||||
|
},
|
||||||
|
scheduled_at: "2025-11-07T10:00:00Z",
|
||||||
|
duration: 60,
|
||||||
|
status: "scheduled",
|
||||||
|
jitsi_room_id: "booking-1-1762428825-22c92ced2870c17c",
|
||||||
|
jitsi_room_url:
|
||||||
|
"https://meet.jit.si/booking-1-1762428825-22c92ced2870c17c",
|
||||||
|
payment_id: "",
|
||||||
|
payment_status: "pending",
|
||||||
|
amount: 52,
|
||||||
|
notes: "Initial consultation session",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
limit: 50,
|
||||||
|
offset: 0,
|
||||||
|
total: 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
setBookings(mockData.bookings);
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchBookings();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatTime = (dateString: string) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleTimeString("en-US", {
|
||||||
|
hour: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour12: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status.toLowerCase()) {
|
||||||
|
case "scheduled":
|
||||||
|
return "bg-blue-100 text-blue-700";
|
||||||
|
case "completed":
|
||||||
|
return "bg-green-100 text-green-700";
|
||||||
|
case "cancelled":
|
||||||
|
return "bg-red-100 text-red-700";
|
||||||
|
case "pending":
|
||||||
|
return "bg-yellow-100 text-yellow-700";
|
||||||
|
default:
|
||||||
|
return "bg-gray-100 text-gray-700";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPaymentStatusColor = (status: string) => {
|
||||||
|
switch (status.toLowerCase()) {
|
||||||
|
case "paid":
|
||||||
|
return "bg-green-100 text-green-700";
|
||||||
|
case "pending":
|
||||||
|
return "bg-yellow-100 text-yellow-700";
|
||||||
|
case "failed":
|
||||||
|
return "bg-red-100 text-red-700";
|
||||||
|
default:
|
||||||
|
return "bg-gray-100 text-gray-700";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredBookings = bookings.filter(
|
||||||
|
(booking) =>
|
||||||
|
booking.user.first_name
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(searchTerm.toLowerCase()) ||
|
||||||
|
booking.user.last_name
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(searchTerm.toLowerCase()) ||
|
||||||
|
booking.user.email.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-gray-50">
|
||||||
{/* Side Navigation */}
|
{/* Side Navigation */}
|
||||||
<SideNav />
|
<SideNav />
|
||||||
|
|
||||||
<div className="md:ml-[200px]">
|
<div className="md:ml-[200px]">
|
||||||
|
{/* Top Header Bar */}
|
||||||
|
<div className="bg-white border-b border-gray-200 px-4 sm:px-6 lg:px-8 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex-1 max-w-md">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search bookings..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4 ml-4">
|
||||||
|
<button className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors">
|
||||||
|
<Bell className="w-5 h-5 text-gray-600" />
|
||||||
|
<span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
<main className="p-4 sm:p-6 lg:p-8">
|
<main className="p-4 sm:p-6 lg:p-8">
|
||||||
|
{/* Page Header */}
|
||||||
|
<div className="mb-6 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-semibold text-gray-900 mb-1">
|
||||||
|
Bookings
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
Manage and view all appointment bookings
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button className="px-4 py-2 bg-gray-900 text-white rounded-lg text-sm font-medium hover:bg-gray-800 transition-colors">
|
||||||
|
+ New Booking
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex items-center justify-center py-12">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-400"></div>
|
||||||
|
</div>
|
||||||
|
) : filteredBookings.length === 0 ? (
|
||||||
|
<div className="bg-white rounded-lg border border-gray-200 p-12 text-center">
|
||||||
|
<Calendar className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
||||||
|
<p className="text-gray-600 font-medium mb-1">No bookings found</p>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
{searchTerm
|
||||||
|
? "Try adjusting your search terms"
|
||||||
|
: "Create a new booking to get started"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead className="bg-gray-50 border-b border-gray-200">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Patient
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Date & Time
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Duration
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Payment
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Amount
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Actions
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{filteredBookings.map((booking) => (
|
||||||
|
<tr
|
||||||
|
key={booking.ID}
|
||||||
|
className="hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
|
||||||
|
<User className="w-5 h-5 text-gray-600" />
|
||||||
|
</div>
|
||||||
|
<div className="ml-4">
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{booking.user.first_name} {booking.user.last_name}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-500">
|
||||||
|
{booking.user.email}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="text-sm text-gray-900">
|
||||||
|
{formatDate(booking.scheduled_at)}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-500 flex items-center gap-1">
|
||||||
|
<Clock className="w-3 h-3" />
|
||||||
|
{formatTime(booking.scheduled_at)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||||
|
{booking.duration} min
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span
|
||||||
|
className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(
|
||||||
|
booking.status
|
||||||
|
)}`}
|
||||||
|
>
|
||||||
|
{booking.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span
|
||||||
|
className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getPaymentStatusColor(
|
||||||
|
booking.payment_status
|
||||||
|
)}`}
|
||||||
|
>
|
||||||
|
{booking.payment_status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||||
|
${booking.amount}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<div className="flex items-center justify-end gap-2">
|
||||||
|
{booking.jitsi_room_url && (
|
||||||
|
<a
|
||||||
|
href={booking.jitsi_room_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
title="Join Meeting"
|
||||||
|
>
|
||||||
|
<Video className="w-4 h-4" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{booking.notes && (
|
||||||
|
<button
|
||||||
|
className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
title="View Notes"
|
||||||
|
>
|
||||||
|
<FileText className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">
|
||||||
|
<MoreVertical className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,17 +1,184 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
import SideNav from "@/app/(admin)/_components/side-nav";
|
import SideNav from "@/app/(admin)/_components/side-nav";
|
||||||
|
import {
|
||||||
|
Users,
|
||||||
|
UserCheck,
|
||||||
|
Calendar,
|
||||||
|
CalendarCheck,
|
||||||
|
CalendarX,
|
||||||
|
DollarSign,
|
||||||
|
TrendingUp,
|
||||||
|
Search,
|
||||||
|
Bell,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
interface DashboardStats {
|
||||||
|
total_users: number;
|
||||||
|
active_users: number;
|
||||||
|
total_bookings: number;
|
||||||
|
upcoming_bookings: number;
|
||||||
|
completed_bookings: number;
|
||||||
|
cancelled_bookings: number;
|
||||||
|
total_revenue: number;
|
||||||
|
monthly_revenue: number;
|
||||||
|
}
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
|
const [stats, setStats] = useState<DashboardStats | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Simulate API call
|
||||||
|
const fetchStats = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
// Simulate network delay
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||||
|
|
||||||
|
// Mock API response
|
||||||
|
const mockData: DashboardStats = {
|
||||||
|
total_users: 3,
|
||||||
|
active_users: 3,
|
||||||
|
total_bookings: 6,
|
||||||
|
upcoming_bookings: 6,
|
||||||
|
completed_bookings: 0,
|
||||||
|
cancelled_bookings: 0,
|
||||||
|
total_revenue: 0,
|
||||||
|
monthly_revenue: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
setStats(mockData);
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchStats();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const statCards = [
|
||||||
|
{
|
||||||
|
title: "Total Users",
|
||||||
|
value: stats?.total_users ?? 0,
|
||||||
|
icon: Users,
|
||||||
|
bgColor: "bg-gray-50",
|
||||||
|
iconColor: "text-gray-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Active Users",
|
||||||
|
value: stats?.active_users ?? 0,
|
||||||
|
icon: UserCheck,
|
||||||
|
bgColor: "bg-gray-50",
|
||||||
|
iconColor: "text-gray-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Total Bookings",
|
||||||
|
value: stats?.total_bookings ?? 0,
|
||||||
|
icon: Calendar,
|
||||||
|
bgColor: "bg-gray-50",
|
||||||
|
iconColor: "text-gray-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Upcoming Bookings",
|
||||||
|
value: stats?.upcoming_bookings ?? 0,
|
||||||
|
icon: CalendarCheck,
|
||||||
|
bgColor: "bg-gray-50",
|
||||||
|
iconColor: "text-gray-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Completed Bookings",
|
||||||
|
value: stats?.completed_bookings ?? 0,
|
||||||
|
icon: CalendarCheck,
|
||||||
|
bgColor: "bg-gray-50",
|
||||||
|
iconColor: "text-green-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Cancelled Bookings",
|
||||||
|
value: stats?.cancelled_bookings ?? 0,
|
||||||
|
icon: CalendarX,
|
||||||
|
bgColor: "bg-gray-50",
|
||||||
|
iconColor: "text-red-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Total Revenue",
|
||||||
|
value: `$${stats?.total_revenue.toLocaleString() ?? 0}`,
|
||||||
|
icon: DollarSign,
|
||||||
|
bgColor: "bg-gray-50",
|
||||||
|
iconColor: "text-gray-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Monthly Revenue",
|
||||||
|
value: `$${stats?.monthly_revenue.toLocaleString() ?? 0}`,
|
||||||
|
icon: TrendingUp,
|
||||||
|
bgColor: "bg-gray-50",
|
||||||
|
iconColor: "text-gray-600",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-gray-50">
|
||||||
{/* Side Navigation */}
|
{/* Side Navigation */}
|
||||||
<SideNav />
|
<SideNav />
|
||||||
|
|
||||||
<div className="md:ml-[200px]">
|
<div className="md:ml-[200px]">
|
||||||
|
{/* Top Header Bar */}
|
||||||
|
<div className="bg-white border-b border-gray-200 px-4 sm:px-6 lg:px-8 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex-1 max-w-md">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search something..."
|
||||||
|
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4 ml-4">
|
||||||
|
<button className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors">
|
||||||
|
<Bell className="w-5 h-5 text-gray-600" />
|
||||||
|
<span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<main className="p-4 sm:p-6 lg:p-8">
|
<main className="p-4 sm:p-6 lg:p-8">
|
||||||
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
|
{/* Page Header */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<h1 className="text-2xl font-semibold text-gray-900 mb-1">Dashboard</h1>
|
||||||
|
<p className="text-sm text-gray-500">Overview of your practice statistics</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex items-center justify-center py-12">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-400"></div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{statCards.map((card, index) => {
|
||||||
|
const Icon = card.icon;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<div className={`p-2.5 rounded-lg ${card.bgColor}`}>
|
||||||
|
<Icon className={`w-5 h-5 ${card.iconColor}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">
|
||||||
|
{card.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-2xl font-semibold text-gray-900">
|
||||||
|
{card.value}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user