326 lines
12 KiB
TypeScript
326 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
Calendar,
|
|
Clock,
|
|
User,
|
|
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() {
|
|
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 (
|
|
<div className="min-h-screen bg-gray-50">
|
|
|
|
{/* Main Content */}
|
|
<main className="p-3 sm:p-4 md:p-6 lg:p-8">
|
|
{/* Page Header */}
|
|
<div className="mb-4 sm:mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
|
|
<div>
|
|
<h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">
|
|
Bookings
|
|
</h1>
|
|
<p className="text-xs sm:text-sm text-gray-500">
|
|
Manage and view all appointment bookings
|
|
</p>
|
|
</div>
|
|
<button className="w-full sm:w-auto px-3 sm:px-4 py-2 bg-gray-900 text-white rounded-lg text-xs sm: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-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Patient
|
|
</th>
|
|
<th className="px-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">
|
|
Date & Time
|
|
</th>
|
|
<th className="px-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden lg:table-cell">
|
|
Duration
|
|
</th>
|
|
<th className="px-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
<th className="px-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden lg:table-cell">
|
|
Payment
|
|
</th>
|
|
<th className="px-3 sm:px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden xl:table-cell">
|
|
Amount
|
|
</th>
|
|
<th className="px-3 sm:px-4 md: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-3 sm:px-4 md:px-6 py-4">
|
|
<div className="flex items-center">
|
|
<div className="shrink-0 h-8 w-8 sm:h-10 sm:w-10 rounded-full bg-gray-100 flex items-center justify-center">
|
|
<User className="w-4 h-4 sm:w-5 sm:h-5 text-gray-600" />
|
|
</div>
|
|
<div className="ml-2 sm:ml-4 min-w-0">
|
|
<div className="text-xs sm:text-sm font-medium text-gray-900 truncate">
|
|
{booking.user.first_name} {booking.user.last_name}
|
|
</div>
|
|
<div className="text-xs sm:text-sm text-gray-500 truncate hidden sm:block">
|
|
{booking.user.email}
|
|
</div>
|
|
<div className="text-xs text-gray-500 sm:hidden mt-0.5">
|
|
{formatDate(booking.scheduled_at)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-3 sm:px-4 md:px-6 py-4 whitespace-nowrap hidden md:table-cell">
|
|
<div className="text-xs sm:text-sm text-gray-900">
|
|
{formatDate(booking.scheduled_at)}
|
|
</div>
|
|
<div className="text-xs sm: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-3 sm:px-4 md:px-6 py-4 whitespace-nowrap text-xs sm:text-sm text-gray-900 hidden lg:table-cell">
|
|
{booking.duration} min
|
|
</td>
|
|
<td className="px-3 sm:px-4 md: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-3 sm:px-4 md:px-6 py-4 whitespace-nowrap hidden lg:table-cell">
|
|
<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-3 sm:px-4 md:px-6 py-4 whitespace-nowrap text-xs sm:text-sm font-medium text-gray-900 hidden xl:table-cell">
|
|
${booking.amount}
|
|
</td>
|
|
<td className="px-3 sm:px-4 md:px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<div className="flex items-center justify-end gap-1 sm:gap-2">
|
|
{booking.jitsi_room_url && (
|
|
<a
|
|
href={booking.jitsi_room_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="p-1.5 sm: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-1.5 sm: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-1.5 sm: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>
|
|
</div>
|
|
);
|
|
}
|
|
|