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.

app/(admin)/booking/page.tsx

@@ -1,15 +1,351 @@
 "use client";
 
+import { useState, useEffect } from "react";
 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() {
+  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">
       {/* Side Navigation */}
       <SideNav />
 
       <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">
+          {/* 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>
       </div>
     </div>

app/(admin)/dashboard/page.tsx

@@ -1,17 +1,184 @@
 "use client";
 
+import { useState, useEffect } from "react";
 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() {
+  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 (
     <div className="min-h-screen bg-gray-50">
       {/* Side Navigation */}
       <SideNav />
 
       <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 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>
       </div>
     </div>