Dev

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.turbo
+.env
+dist

apps/admin/.env.example

@@ -0,0 +1,9 @@
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
+CLERK_SECRET_KEY=
+
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
+
+CLERK_WEBHOOK_SECRET=
+
+DATABASE_URL="postgresql://<username>:<password>@<host>:<port>/bookmyvenue?schema=public"

apps/admin/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/admin/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/admin/app/(admin)/bookings/page.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Search, Download, CalendarCheck } from "lucide-react";
+import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from "../../../components/ui/table";
+import { Booking, fetchBookings } from "../../actions/booking";
+import { BookingStatus } from "@bookmyvenue/database/enums";
+import {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+} from "../../../components/ui/pagination";
+import { BOOKING_STATUS_STYLE, fmtAmount } from "../../../lib/utils";
+import { Skeleton } from "../../../components/ui/skeleton";
+
+const PAGE_SIZE = 10;
+
+export default function BookingsPage() {
+    const [bookingSearch, setBookingSearch] = useState("");
+    const [bookingFilter, setBookingFilter] = useState<BookingStatus | "All">("All");
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState(1);
+    const [bookings, setBookings] = useState<Booking[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+
+    const bookingFilters: (BookingStatus | "All")[] = [
+        "All",
+        ...Object.values(BookingStatus).filter((status) => status !== BookingStatus.PENDING),
+    ];
+
+    useEffect(() => {
+        fetchBookings("All", 1, PAGE_SIZE).then((result) => {
+            setTotal(result.total);
+            setBookings(result.bookings);
+            setLoading(false);
+        });
+    }, []);
+
+    const handleFilterChange = async (filter: BookingStatus | "All") => {
+        setBookingFilter(filter);
+        setPage(1);
+        setLoading(true);
+        fetchBookings(filter, 1, PAGE_SIZE).then((result) => {
+            setTotal(result.total);
+            setBookings(result.bookings);
+            setLoading(false);
+        });
+    };
+
+    const handlePageChange = async (p: number) => {
+        setPage(p);
+        setLoading(true);
+        fetchBookings(bookingFilter, p, PAGE_SIZE).then((result) => {
+            setTotal(result.total);
+            setBookings(result.bookings);
+            setLoading(false);
+        });
+    };
+
+    const filteredBookings = bookings.filter((b) => {
+        const mq =
+            b.client.toLowerCase().includes(bookingSearch.toLowerCase()) ||
+            b.venue.toLowerCase().includes(bookingSearch.toLowerCase()) ||
+            b.id.toLowerCase().includes(bookingSearch.toLowerCase());
+        return mq;
+    });
+
+    const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const pagedBookings = filteredBookings;
+
+    const getPageNumbers = () => {
+        if (totalPages <= 5) return Array.from({ length: totalPages }, (_, i) => i + 1);
+        if (page <= 3) return [1, 2, 3, 4, null, totalPages];
+        if (page >= totalPages - 2)
+            return [1, null, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
+        return [1, null, page - 1, page, page + 1, null, totalPages];
+    };
+
+    return (
+        <div className="bg-card border border-border rounded-2xl overflow-hidden">
+            <div className="px-5 py-4 border-b border-border flex flex-col sm:flex-row gap-3">
+                <div className="relative flex-1">
+                    <Search className="absolute left-3 top-2.5 w-4 h-4 text-muted-foreground" />
+                    <input
+                        className="w-full pl-9 pr-4 py-2 bg-input-background border border-border rounded-xl text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                        placeholder="Search by client, venue, booking ID…"
+                        value={bookingSearch}
+                        onChange={(e) => setBookingSearch(e.target.value)}
+                    />
+                </div>
+                <div className="flex gap-2">
+                    {bookingFilters.map((s) => (
+                        <button
+                            key={s}
+                            onClick={() => handleFilterChange(s)}
+                            className={`px-3 py-2 rounded-xl text-xs font-semibold transition-all capitalize ${bookingFilter === s ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-secondary"}`}
+                        >
+                            {s.toLocaleLowerCase()}
+                        </button>
+                    ))}
+                </div>
+                <button className="flex items-center gap-1.5 px-3 py-2 rounded-xl border border-border text-xs font-semibold text-muted-foreground hover:bg-muted transition-colors shrink-0">
+                    <Download className="w-3.5 h-3.5" /> Export
+                </button>
+            </div>
+
+            <div className="overflow-x-auto">
+                <Table>
+                    <TableHeader>
+                        <TableRow className="bg-muted/50 hover:bg-muted/50">
+                            {[
+                                "Booking ID",
+                                "Client",
+                                "Venue",
+                                "Owner",
+                                "Date",
+                                "Category",
+                                "Amount",
+                                "Status",
+                            ].map((h) => (
+                                <TableHead
+                                    key={h}
+                                    className="px-5 py-3 text-xs font-bold text-muted-foreground uppercase tracking-wider"
+                                >
+                                    {h}
+                                </TableHead>
+                            ))}
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {loading
+                            ? Array.from({ length: 6 }).map((_, i) => (
+                                  <TableRow key={i}>
+                                      {Array.from({ length: 8 }).map((_, j) => (
+                                          <TableCell key={j}>
+                                              <Skeleton className="h-10 w-full" />
+                                          </TableCell>
+                                      ))}
+                                  </TableRow>
+                              ))
+                            : pagedBookings.map((b) => (
+                                  <TableRow key={b.id} className="hover:bg-muted/30">
+                                      <TableCell className="px-5 py-3.5 font-mono text-xs text-muted-foreground">
+                                          {b.id}
+                                      </TableCell>
+                                      <TableCell className="px-5 py-3.5 font-semibold text-foreground capitalize">
+                                          {b.client}
+                                      </TableCell>
+                                      <TableCell className="px-5 py-3.5 text-foreground/80">
+                                          {b.venue}
+                                      </TableCell>
+                                      <TableCell className="px-5 py-3.5 text-foreground/70 capitalize">
+                                          {b.owner}
+                                      </TableCell>
+                                      <TableCell className="px-5 py-3.5 text-foreground/70">
+                                          {b.date}
+                                      </TableCell>
+                                      <TableCell className="px-5 py-3.5 text-foreground/70">
+                                          {b.category}
+                                      </TableCell>
+                                      <TableCell className="px-5 py-3.5 font-bold text-foreground">
+                                          {fmtAmount(b.amount)}
+                                      </TableCell>
+                                      <TableCell className="px-5 py-3.5">
+                                          <span
+                                              className={`text-xs font-semibold px-2.5 py-1 rounded-full border ${BOOKING_STATUS_STYLE[b.status]}`}
+                                          >
+                                              {b.status}
+                                          </span>
+                                      </TableCell>
+                                  </TableRow>
+                              ))}
+                    </TableBody>
+                </Table>
+                {!loading && pagedBookings.length === 0 && (
+                    <div className="text-center py-16 text-muted-foreground">
+                        <CalendarCheck className="w-10 h-10 mx-auto mb-3 opacity-25" />
+                        <p className="font-medium">No bookings match your filter.</p>
+                    </div>
+                )}
+            </div>
+
+            <div className="px-5 py-3.5 border-t border-border flex items-center justify-between text-xs text-muted-foreground">
+                <span>
+                    Showing {total === 0 ? 0 : (page - 1) * PAGE_SIZE + 1}–{Math.min(page * PAGE_SIZE, total)}{" "}
+                    of {total} bookings
+                </span>
+                <Pagination className="w-auto mx-0">
+                    <PaginationContent>
+                        <PaginationItem>
+                            <PaginationPrevious
+                                href="#"
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    handlePageChange(Math.max(1, page - 1));
+                                }}
+                                aria-disabled={page === 1}
+                                className={page === 1 ? "pointer-events-none opacity-50" : ""}
+                            />
+                        </PaginationItem>
+                        {getPageNumbers().map((n, i) =>
+                            n === null ? (
+                                <PaginationItem key={`ellipsis-${i}`}>
+                                    <PaginationEllipsis />
+                                </PaginationItem>
+                            ) : (
+                                <PaginationItem key={n}>
+                                    <PaginationLink
+                                        href="#"
+                                        isActive={n === page}
+                                        onClick={(e) => {
+                                            e.preventDefault();
+                                            handlePageChange(n);
+                                        }}
+                                    >
+                                        {n}
+                                    </PaginationLink>
+                                </PaginationItem>
+                            ),
+                        )}
+                        <PaginationItem>
+                            <PaginationNext
+                                href="#"
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    handlePageChange(Math.min(totalPages, page + 1));
+                                }}
+                                aria-disabled={page === totalPages}
+                                className={page === totalPages ? "pointer-events-none opacity-50" : ""}
+                            />
+                        </PaginationItem>
+                    </PaginationContent>
+                </Pagination>
+            </div>
+        </div>
+    );
+}

apps/admin/app/(admin)/layout.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+import { Sidebar } from "../../components/Sidebar";
+import { TopBar } from "../../components/TopBar";
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+
+    return (
+        <div className="h-screen flex overflow-hidden bg-background">
+            <div className="w-56 shrink-0 hidden lg:block">
+                <Sidebar setSidebarOpen={setSidebarOpen} />
+            </div>
+
+            {sidebarOpen && (
+                <div className="fixed inset-0 z-50 flex lg:hidden">
+                    <div className="absolute inset-0 bg-black/50" onClick={() => setSidebarOpen(false)} />
+                    <div className="relative w-56 h-full shadow-2xl">
+                        <Sidebar setSidebarOpen={setSidebarOpen} mobile />
+                    </div>
+                </div>
+            )}
+
+            <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+                <TopBar setSidebarOpen={setSidebarOpen} />
+                <main className="flex-1 overflow-y-auto px-4 sm:px-6 py-6">
+                    {children}
+                </main>
+            </div>
+        </div>
+    );
+}

apps/admin/app/(admin)/users/page.tsx

@@ -0,0 +1,5 @@
+import { UsersPage as UsersTab } from "../../../components/tabs/Users";
+
+export default function UsersPage() {
+    return <UsersTab />;
+}

apps/admin/app/(admin)/venues/page.tsx

@@ -0,0 +1,5 @@
+import { VenuesPage as VenuesTab } from "../../../components/tabs/Venues";
+
+export default function VenuesPage() {
+    return <VenuesTab />;
+}