svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+ className
+ )}
+ {...props} />
+ );
+}
+
+export {
+ Avatar,
+ AvatarImage,
+ AvatarFallback,
+ AvatarGroup,
+ AvatarGroupCount,
+ AvatarBadge,
+}
diff --git a/client/src/components/ui/badge.jsx b/client/src/components/ui/badge.jsx
new file mode 100644
index 0000000000..6a07934d60
--- /dev/null
+++ b/client/src/components/ui/badge.jsx
@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+ secondary:
+ "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+ destructive:
+ "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+ outline:
+ "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+ ghost:
+ "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Badge({
+ className,
+ variant = "default",
+ asChild = false,
+ ...props
+}) {
+ const Comp = asChild ? Slot.Root : "span"
+
+ return (
+
img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ className
+ )}
+ {...props} />
+ );
+}
+
+function CardHeader({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function CardTitle({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function CardDescription({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function CardAction({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function CardContent({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function CardFooter({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/client/src/components/ui/dialog.jsx b/client/src/components/ui/dialog.jsx
new file mode 100644
index 0000000000..b30f2e4efd
--- /dev/null
+++ b/client/src/components/ui/dialog.jsx
@@ -0,0 +1,148 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+ ...props
+}) {
+ return
+
+ {children}
+ {showCloseButton && (
+
+
+
+ )}
+
+
+ );
+}
+
+function DialogHeader({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function DialogFooter({
+ className,
+ showCloseButton = false,
+ children,
+ ...props
+}) {
+ return (
+
+
+ );
+}
+
+export { Switch }
diff --git a/client/src/components/ui/table.jsx b/client/src/components/ui/table.jsx
new file mode 100644
index 0000000000..a4a7971993
--- /dev/null
+++ b/client/src/components/ui/table.jsx
@@ -0,0 +1,146 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Table({
+ className,
+ ...props
+}) {
+ return (
+
+
+
+
+);
diff --git a/client/src/presentation/.gitkeep b/client/src/presentation/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/client/src/presentation/components/admin/.gitkeep b/client/src/presentation/components/admin/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/client/src/presentation/components/admin/AdminHeader.jsx b/client/src/presentation/components/admin/AdminHeader.jsx
new file mode 100644
index 0000000000..fb68803909
--- /dev/null
+++ b/client/src/presentation/components/admin/AdminHeader.jsx
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { ChevronDown, User, LogOut } from "lucide-react";
+import toast from "react-hot-toast";
+import { useDispatch } from "react-redux";
+import { logout } from "@/redux/slices/AuthSlice";
+import { ROLES } from "@/constants/Roles";
+import { useNavigate } from "react-router-dom";
+import { ROUTES } from "@/constants/routes";
+
+const AdminHeader = () => {
+ const dispatch = useDispatch()
+ const navigate = useNavigate()
+ const [showDropdown, setShowDropdown] = useState(false);
+
+ const handleLogout = async () => {
+ try {
+ await dispatch(logout({role: ROLES.ADMIN})).unwrap()
+ toast('Admin logged out successfully')
+ navigate(ROUTES.ADMIN.LOGIN)
+ } catch (error) {
+ toast.error(error)
+ }
+ }
+
+ return (
+
+
+
+
+
+ );
+
+};
+
+export default AdminHeader;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/AdminSidebar.jsx b/client/src/presentation/components/admin/AdminSidebar.jsx
new file mode 100644
index 0000000000..a968f1e786
--- /dev/null
+++ b/client/src/presentation/components/admin/AdminSidebar.jsx
@@ -0,0 +1,76 @@
+import { LogOut } from "lucide-react";
+import { ADMIN_MENU } from "@/constants/adminMenu";
+import SidebarItem from "./SidebarItem";
+import logo from "@/assets/images/logo.jpeg"
+
+const AdminSidebar = () => {
+
+ return (
+
+
+
+ );
+
+};
+
+export default AdminSidebar;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/SidebarItem.jsx b/client/src/presentation/components/admin/SidebarItem.jsx
new file mode 100644
index 0000000000..97ed25e89e
--- /dev/null
+++ b/client/src/presentation/components/admin/SidebarItem.jsx
@@ -0,0 +1,41 @@
+import { NavLink } from "react-router-dom";
+
+const SidebarItem = ({ menu }) => {
+
+ const Icon = menu.icon;
+
+ return (
+
+
+
+ `flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200
+
+ ${
+
+ isActive
+
+ ? "bg-orange-500 text-white"
+
+ : "text-gray-300 hover:bg-gray-800 hover:text-white"
+
+ }`
+
+ }
+
+ >
+
+
+
+ );
+
+};
+
+export default SidebarItem;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/bookingManagement/BookingActionCard.jsx b/client/src/presentation/components/admin/bookingManagement/BookingActionCard.jsx
new file mode 100644
index 0000000000..6606d89d15
--- /dev/null
+++ b/client/src/presentation/components/admin/bookingManagement/BookingActionCard.jsx
@@ -0,0 +1,136 @@
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+import { Badge } from "@/components/ui/badge";
+
+const BookingActionCard = ({ booking }) => {
+
+ const getBadgeClass = (status) => {
+
+ switch (status?.toLowerCase()) {
+
+ // Booking Status
+ case "pending":
+ return "bg-yellow-100 text-yellow-800 border-yellow-300";
+
+ case "confirmed":
+ return "bg-green-100 text-green-800 border-green-300";
+
+ case "completed":
+ return "bg-blue-100 text-blue-800 border-blue-300";
+
+ case "cancelled":
+ return "bg-red-100 text-red-800 border-red-300";
+
+ // Payment Status
+ case "partial":
+ return "bg-sky-100 text-sky-800 border-sky-300";
+
+ case "paid":
+ case "success":
+ return "bg-green-100 text-green-800 border-green-300";
+
+ case "failed":
+ return "bg-red-100 text-red-800 border-red-300";
+
+ case "refunded":
+ return "bg-purple-100 text-purple-800 border-purple-300";
+
+ default:
+ return "";
+ }
+
+ };
+console.log("Booking:", booking);
+
+ return (
+
+
+
+
+
+
+
+ Booking Status
+
+
+
+
+
+
+
+ {/* Booking Status */}
+
+
+
+
+
+ );
+
+};
+
+export default BookingActionCard;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/bookingManagement/BookingFilters.jsx b/client/src/presentation/components/admin/bookingManagement/BookingFilters.jsx
new file mode 100644
index 0000000000..a8124f2486
--- /dev/null
+++ b/client/src/presentation/components/admin/bookingManagement/BookingFilters.jsx
@@ -0,0 +1,97 @@
+import SearchBar from "../common/SearchBar";
+import FilterTabs from "../common/FilterTabs";
+import FilterDropdown from "../common/FilterDropdown";
+
+const BookingFilters = ({
+ search,
+ onSearchChange,
+ status,
+ onStatusChange,
+ paymentStatus,
+ onPaymentStatusChange,
+}) => {
+
+ const tabs = [
+ {
+ label: "All",
+ value: "",
+ },
+ {
+ label: "Pending",
+ value: "pending",
+ },
+ {
+ label: "Confirmed",
+ value: "confirmed",
+ },
+ {
+ label: "Completed",
+ value: "completed",
+ },
+ {
+ label: "Cancelled",
+ value: "cancelled",
+ },
+
+ ];
+
+ const paymentOptions = [
+ {
+ label: "All Payments",
+ value: "",
+ },
+ {
+ label: "Pending",
+ value: "pending",
+ },
+ {
+ label: "Partial",
+ value: "partial",
+ },
+ {
+ label: "Paid",
+ value: "paid",
+ },
+ {
+ label: "Failed",
+ value: "failed",
+ },
+ {
+ label: "Refunded",
+ value: "refunded",
+ },
+ ];
+
+ return (
+
+
+
+
+
+
+
+ Booking Status
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default BookingStatusCard;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/bookingManagement/BookingTable.jsx b/client/src/presentation/components/admin/bookingManagement/BookingTable.jsx
new file mode 100644
index 0000000000..f67cd07704
--- /dev/null
+++ b/client/src/presentation/components/admin/bookingManagement/BookingTable.jsx
@@ -0,0 +1,89 @@
+import {
+ Table,
+ TableBody,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+
+import BookingTableRow from "./BookingTableRow";
+
+const BookingTable = ({
+ bookings,
+ onView,
+}) => {
+
+ return (
+
+
+
+ {/* Booking ID */}
+
+
+
+ {booking._id?.slice(-6)}
+
+
+
+ {/* User */}
+
+
+
+ {booking.user?.fullName || "-"}
+
+
+
+ {/* Venue */}
+
+
+
+ {booking.venue?.name || "-"}
+
+
+
+ {/* Vendor */}
+
+
+
+ {
+ booking.vendor?.fullName ||
+ "-"}
+
+
+
+ {/* Booking Date */}
+
+
+
+ {new Date(
+ booking.bookingDate
+ ).toLocaleDateString()}
+
+
+
+ {/* Total Amount */}
+
+
+
+ ₹{booking.totalAmount?.toLocaleString()}
+
+
+
+ {/* Booking Status */}
+
+
+
+
+
+ {bookingStatus}
+
+
+
+
+
+ {/* Payment Status */}
+
+
+
+
+
+ {paymentStatus}
+
+
+
+
+
+ {/* Actions */}
+
+
+
+
+
+
+
+ );
+
+};
+
+export default BookingTableRow;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/bookingManagement/BookingTimelineCard.jsx b/client/src/presentation/components/admin/bookingManagement/BookingTimelineCard.jsx
new file mode 100644
index 0000000000..da4d0cf0ae
--- /dev/null
+++ b/client/src/presentation/components/admin/bookingManagement/BookingTimelineCard.jsx
@@ -0,0 +1,164 @@
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+const BookingTimelineCard = ({ booking }) => {
+
+ const formatDate = (date) => {
+
+ if (!date) return "-";
+
+ return new Date(date).toLocaleDateString("en-IN", {
+ day: "2-digit",
+ month: "short",
+ year: "numeric",
+ });
+
+ };
+
+ const formatDateTime = (date) => {
+
+ if (!date) return "-";
+
+ return new Date(date).toLocaleString("en-IN", {
+ day: "2-digit",
+ month: "short",
+ year: "numeric",
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+
+ };
+
+ return (
+
+
+
+
+
+
+
+ Booking Timeline
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default BookingTimelineCard;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/bookingManagement/BookingpaymentCard.jsx b/client/src/presentation/components/admin/bookingManagement/BookingpaymentCard.jsx
new file mode 100644
index 0000000000..d319af946f
--- /dev/null
+++ b/client/src/presentation/components/admin/bookingManagement/BookingpaymentCard.jsx
@@ -0,0 +1,140 @@
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+const BookingPaymentCard = ({ booking }) => {
+
+ const paymentStatusColor = {
+
+ pending: "text-yellow-600",
+
+ partial: "text-orange-600",
+
+ paid: "text-green-600",
+
+ failed: "text-red-600",
+
+ refunded: "text-blue-600",
+
+ success: "text-green-600",
+
+ };
+
+ return (
+
+
+
+
+
+
+
+ Payment Information
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default BookingPaymentCard;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/bookingManagement/UserInfoCard.jsx b/client/src/presentation/components/admin/bookingManagement/UserInfoCard.jsx
new file mode 100644
index 0000000000..f35be4bc9c
--- /dev/null
+++ b/client/src/presentation/components/admin/bookingManagement/UserInfoCard.jsx
@@ -0,0 +1,82 @@
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+const UserInfoCard = ({ user }) => {
+
+ return (
+
+
+
+
+
+
+
+ User Information
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default UserInfoCard;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/bookingManagement/VendorInfoCard.jsx b/client/src/presentation/components/admin/bookingManagement/VendorInfoCard.jsx
new file mode 100644
index 0000000000..efecc81c6d
--- /dev/null
+++ b/client/src/presentation/components/admin/bookingManagement/VendorInfoCard.jsx
@@ -0,0 +1,98 @@
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+const VendorInfoCard = ({ vendor }) => {
+
+ return (
+
+
+
+
+
+
+
+ Vendor Information
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default VendorInfoCard;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/bookingManagement/VenueInfoCard.jsx b/client/src/presentation/components/admin/bookingManagement/VenueInfoCard.jsx
new file mode 100644
index 0000000000..06dff9def3
--- /dev/null
+++ b/client/src/presentation/components/admin/bookingManagement/VenueInfoCard.jsx
@@ -0,0 +1,120 @@
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+const VenueInfoCard = ({ venue }) => {
+
+ return (
+
+
+
+
+
+
+
+ Venue Information
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default VenueInfoCard;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/common/FilterDropdown.jsx b/client/src/presentation/components/admin/common/FilterDropdown.jsx
new file mode 100644
index 0000000000..66f49b7993
--- /dev/null
+++ b/client/src/presentation/components/admin/common/FilterDropdown.jsx
@@ -0,0 +1,34 @@
+const FilterDropdown = ({
+ label,
+ value,
+ onChange,
+ options = [],
+ className = "",
+}) => {
+ return (
+
+
+
+
+
+
+ Booking Overview
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default BookingOverviewChart;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/dashboard/DashboardStats.jsx b/client/src/presentation/components/admin/dashboard/DashboardStats.jsx
new file mode 100644
index 0000000000..987857f9ba
--- /dev/null
+++ b/client/src/presentation/components/admin/dashboard/DashboardStats.jsx
@@ -0,0 +1,119 @@
+import {
+ Users,
+ UserCheck,
+ Building2,
+ CalendarDays,
+ IndianRupee,
+ Clock3,
+ BadgeCheck,
+} from "lucide-react";
+
+import {
+ Card,
+ CardContent,
+} from "@/components/ui/card";
+
+const DashboardStats = ({ stats }) => {
+
+ const cards = [
+
+ {
+ title: "Total Users",
+ value: stats?.summary?.totalUsers || 0,
+ icon: Users,
+ color: "text-blue-600",
+ },
+
+ {
+ title: "Total Vendors",
+ value: stats?.summary?.totalVendors || 0,
+ icon: UserCheck,
+ color: "text-green-600",
+ },
+
+ {
+ title: "Total Venues",
+ value: stats?.summary?.totalVenues || 0,
+ icon: Building2,
+ color: "text-purple-600",
+ },
+
+ {
+ title: "Total Bookings",
+ value: stats?.summary?.totalBookings || 0,
+ icon: CalendarDays,
+ color: "text-orange-600",
+ },
+
+ {
+ title: "Revenue",
+ value: `₹${(stats?.summary?.totalRevenue || 0).toLocaleString()}`,
+ icon: IndianRupee,
+ color: "text-emerald-600",
+ },
+
+ {
+ title: "Pending Vendors",
+ value: stats?.summary?.pendingVendorApprovals || 0,
+ icon: Clock3,
+ color: "text-yellow-600",
+ },
+
+ {
+ title: "Pending Venues",
+ value: stats?.summary?.pendingVenueApprovals || 0,
+ icon: BadgeCheck,
+ color: "text-red-600",
+ },
+
+ ];
+
+ return (
+
+
+
+
+
+
+
+ Revenue Overview
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default RevenueChart;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/paymentManagement/BookingInfoCard.jsx b/client/src/presentation/components/admin/paymentManagement/BookingInfoCard.jsx
new file mode 100644
index 0000000000..e410374fcc
--- /dev/null
+++ b/client/src/presentation/components/admin/paymentManagement/BookingInfoCard.jsx
@@ -0,0 +1,137 @@
+import {
+ CalendarDays,
+ Clock3,
+ ClipboardList,
+ CreditCard,
+} from "lucide-react";
+
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+import { Badge } from "@/components/ui/badge";
+
+const BookingInfoCard = ({ booking }) => {
+ if (!booking) return null;
+
+ const bookingStatusClass = {
+ pending: "bg-yellow-100 text-yellow-700",
+ confirmed: "bg-green-100 text-green-700",
+ cancelled: "bg-red-100 text-red-700",
+ completed: "bg-blue-100 text-blue-700",
+ rejected: "bg-red-100 text-red-700",
+ };
+
+ const paymentStatusClass = {
+ pending: "bg-yellow-100 text-yellow-700",
+ partial: "bg-orange-100 text-orange-700",
+ paid: "bg-green-100 text-green-700",
+ refunded: "bg-purple-100 text-purple-700",
+ failed: "bg-red-100 text-red-700",
+ success: "bg-green-100 text-green-700",
+ };
+
+ return (
+
+
+ Booking Information
+
+
+
+
+ {/* Booking ID */}
+
+
+ );
+};
+
+export default BookingInfoCard;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/paymentManagement/PaymentFilters.jsx b/client/src/presentation/components/admin/paymentManagement/PaymentFilters.jsx
new file mode 100644
index 0000000000..4be7103c77
--- /dev/null
+++ b/client/src/presentation/components/admin/paymentManagement/PaymentFilters.jsx
@@ -0,0 +1,95 @@
+import SearchBar from "../common/SearchBar";
+import FilterTabs from "../common/FilterTabs";
+import FilterDropdown from "../common/FilterDropdown";
+
+const PaymentFilters = ({
+ search,
+ onSearchChange,
+ paymentStatus,
+ onPaymentStatusChange,
+ paymentType,
+ onPaymentTypeChange,
+}) => {
+
+const tabs = [
+ {
+ label: "All",
+ value: "",
+ },
+ {
+ label: "Advance",
+ value: "advance",
+ },
+ {
+ label: "Balance",
+ value: "balance",
+ },
+ {
+ label: "Full",
+ value: "full",
+ },
+];
+
+ const paymentStatusOptions = [
+ {
+ label: "All Payments",
+ value: "",
+ },
+ {
+ label: "Pending",
+ value: "pending",
+ },
+ {
+ label: "Success",
+ value: "success",
+ },
+ {
+ label: "Failed",
+ value: "failed",
+ },
+ {
+ label: "Refunded",
+ value: "refunded",
+ },
+ ];
+
+
+ return (
+
+
+
+ Payment Information
+
+
+
+
+ {/* Amount */}
+
+
+ );
+};
+
+export default PaymentInfoCard;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/paymentManagement/PaymentStats.jsx b/client/src/presentation/components/admin/paymentManagement/PaymentStats.jsx
new file mode 100644
index 0000000000..7eab0a61d9
--- /dev/null
+++ b/client/src/presentation/components/admin/paymentManagement/PaymentStats.jsx
@@ -0,0 +1,111 @@
+import {
+ CreditCard,
+ CheckCircle,
+ Clock3,
+ XCircle,
+ RotateCcw,
+ IndianRupee,
+} from "lucide-react";
+
+import {
+ Card,
+ CardContent,
+} from "@/components/ui/card";
+
+const PaymentStats = ({ stats }) => {
+
+ const cards = [
+
+ {
+ title: "Total Payments",
+ value: stats?.totalPayments || 0,
+ icon: CreditCard,
+ color: "text-blue-600",
+ },
+
+ {
+ title: "Successful",
+ value: stats?.successfulPayments || 0,
+ icon: CheckCircle,
+ color: "text-green-600",
+ },
+
+ {
+ title: "Pending",
+ value: stats?.pendingPayments || 0,
+ icon: Clock3,
+ color: "text-yellow-600",
+ },
+
+ {
+ title: "Failed",
+ value: stats?.failedPayments || 0,
+ icon: XCircle,
+ color: "text-red-600",
+ },
+
+ {
+ title: "Refunded",
+ value: stats?.refundedPayments || 0,
+ icon: RotateCcw,
+ color: "text-purple-600",
+ },
+
+ {
+ title: "Revenue",
+ value: `₹${(stats?.totalRevenue || 0).toLocaleString()}`,
+ icon: IndianRupee,
+ color: "text-emerald-600",
+ },
+
+ ];
+
+ return (
+
+
+
+
+ Payment Summary
+
+
+
+
+
+
+
+ );
+};
+
+export default PaymentSummaryCard;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/paymentManagement/PaymentTable.jsx b/client/src/presentation/components/admin/paymentManagement/PaymentTable.jsx
new file mode 100644
index 0000000000..4e34e680a8
--- /dev/null
+++ b/client/src/presentation/components/admin/paymentManagement/PaymentTable.jsx
@@ -0,0 +1,91 @@
+import {
+ Table,
+ TableBody,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+
+import PaymentTableRow from "./PaymentTableRow";
+
+const PaymentTable = ({
+ payments,
+ onView,
+}) => {
+
+ return (
+
+
+
+ {/* Payment ID */}
+
+
+
+ {payment._id?.slice(-6)}
+
+
+
+ {/* Booking ID */}
+
+
+
+ {payment.bookingId?._id?.slice(-6) || "-"}
+
+
+
+ {/* User */}
+
+
+
+ {payment.userId?.fullName || "-"}
+
+
+
+ {/* Vendor */}
+
+
+
+ {payment.vendorId?.fullName ||
+ payment.vendorId?.companyName ||
+ "-"}
+
+
+
+ {/* Amount */}
+
+
+
+ ₹{payment.amount?.toLocaleString()}
+
+
+
+ {/* Payment Type */}
+
+
+
+
+
+ {payment.paymentType}
+
+
+
+
+
+ {/* Payment Status */}
+
+
+
+
+
+ {payment.paymentStatus}
+
+
+
+
+
+ {/* Date */}
+
+
+
+ {new Date(
+ payment.createdAt
+ ).toLocaleDateString()}
+
+
+
+ {/* Actions */}
+
+
+
+
+
+
+
+ );
+
+};
+
+export default PaymentTableRow;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/userManagement/UserFilters.jsx b/client/src/presentation/components/admin/userManagement/UserFilters.jsx
new file mode 100644
index 0000000000..dfe6d76b04
--- /dev/null
+++ b/client/src/presentation/components/admin/userManagement/UserFilters.jsx
@@ -0,0 +1,61 @@
+
+import SearchBar from "../common/SearchBar";
+import FilterTabs from "../common/FilterTabs";
+
+const UserFilters = ({
+ search,
+ onSearchChange,
+ status,
+ onStatusChange
+}) => {
+
+ const tabs = [
+
+ {
+ label: "All",
+ value: "all"
+ },
+
+ {
+ label: "Active",
+ value: "active"
+ },
+
+ {
+ label: "Blocked",
+ value: "blocked"
+ }
+
+ ];
+
+ return (
+
+
+
+
+
+ );
+
+};
+
+export default UserTable;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/userManagement/UserTableRow.jsx b/client/src/presentation/components/admin/userManagement/UserTableRow.jsx
new file mode 100644
index 0000000000..a29d2f9bff
--- /dev/null
+++ b/client/src/presentation/components/admin/userManagement/UserTableRow.jsx
@@ -0,0 +1,135 @@
+import { Eye, Ban, CheckCircle } from "lucide-react";
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+
+import {
+ TableCell,
+ TableRow,
+} from "@/components/ui/table"
+
+const UserTableRow = ({
+ user,
+ onView,
+ onBlock,
+}) => {
+ console.log(user)
+
+ const isBlocked = user.isBlocked;
+
+
+ return (
+
+
+
+
+
+ {user.id.slice(0,8)}
+
+
+
+
+
+ {user.fullName}
+
+
+
+
+
+ {user.email}
+
+
+
+
+
+ {user.phone}
+
+
+
+
+
+
+ {isBlocked ? "Blocked" : "Active"}
+
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default UserTableRow;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/vendorManagement/VendorFilters.jsx b/client/src/presentation/components/admin/vendorManagement/VendorFilters.jsx
new file mode 100644
index 0000000000..7d79ef5227
--- /dev/null
+++ b/client/src/presentation/components/admin/vendorManagement/VendorFilters.jsx
@@ -0,0 +1,62 @@
+import SearchBar from "../common/SearchBar";
+import FilterTabs from "../common/FilterTabs";
+
+const VendorFilters = ({
+ search,
+ onSearchChange,
+ status,
+ onStatusChange,
+}) => {
+
+ const tabs = [
+
+ {
+ label: "All",
+ value: "all",
+ },
+
+ {
+ label: "Pending",
+ value: "pending",
+ },
+
+ {
+ label: "Approved",
+ value: "approved",
+ },
+
+ {
+ label: "Rejected",
+ value: "rejected",
+ },
+
+ {
+ label: "Blocked",
+ value: "blocked",
+ },
+
+ ];
+
+ return (
+
+
+
+ {/* Vendor ID */}
+
+
+
+ {vendor.id.slice(-6)}
+
+
+
+ {/* Company */}
+
+
+
+ {vendor.companyName}
+
+
+
+ {/* Owner */}
+
+
+
+ {vendor.fullName}
+
+
+
+ {/* Email */}
+
+
+
+ {vendor.email}
+
+
+
+ {/* Phone */}
+
+
+
+ {vendor.phone}
+
+
+
+ {/* Status */}
+
+
+
+
+ {displayStatus}
+
+
+
+
+ {/* Actions */}
+
+
+
+
+
+
+
+ );
+
+};
+
+export default VendorTableRow;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/venueManagement/VenueFilters.jsx b/client/src/presentation/components/admin/venueManagement/VenueFilters.jsx
new file mode 100644
index 0000000000..a654aee935
--- /dev/null
+++ b/client/src/presentation/components/admin/venueManagement/VenueFilters.jsx
@@ -0,0 +1,128 @@
+import SearchBar from "../common/SearchBar";
+import FilterTabs from "../common/FilterTabs";
+import FilterDropdown from "../common/FilterDropdown";
+
+const VenueFilters = ({
+ search,
+ onSearchChange,
+ status,
+ onStatusChange,
+ category,
+ onCategoryChange,
+}) => {
+
+ const tabs = [
+ {
+ label: "All",
+ value: "all",
+ },
+ {
+ label: "Pending",
+ value: "pending",
+ },
+ {
+ label: "Approved",
+ value: "approved",
+ },
+ {
+ label: "Rejected",
+ value: "rejected",
+ },
+ {
+ label: "Blocked",
+ value: "blocked",
+ },
+ ];
+
+const categoryOptions = [
+ {
+ label: "All Categories",
+ value: "",
+ },
+ {
+ label: "Beach Side",
+ value: "Beach Side",
+ },
+ {
+ label: "Conference Hall",
+ value: "Conference Hall",
+ },
+ {
+ label: "Auditorium",
+ value: "Auditorium",
+ },
+ {
+ label: "Banquet Hall",
+ value: "Banquet Hall",
+ },
+ {
+ label: "Party Hall",
+ value: "Party Hall",
+ },
+ {
+ label: "Rooftop",
+ value: "Rooftop",
+ },
+ {
+ label: "Cafe",
+ value: "Cafe",
+ },
+ {
+ label: "Farm House",
+ value: "Farm House",
+ },
+ {
+ label: "Palace",
+ value: "Palace",
+ },
+ {
+ label: "Studio",
+ value: "Studio",
+ },
+ {
+ label: "Outdoor Garden",
+ value: "Outdoor Garden",
+ },
+ {
+ label: "Resort",
+ value: "Resort",
+ },
+ {
+ label: "Hotel",
+ value: "Hotel",
+ },
+];
+
+ return (
+
+
+
+ {/* Venue ID */}
+
+
+
+ {venue.id.slice(-6)}
+
+
+
+ {/* name */}
+
+
+
+ {venue.name}
+
+
+
+ {/* category */}
+
+
+
+ {venue.category}
+
+
+
+ {/* Address */}
+
+
+
+ {venue.address?.city}
+
+
+
+ {/* Price */}
+
+
+
+ ₹{venue.pricePerDay.toLocaleString()}
+
+
+
+ {/* Status */}
+
+
+
+
+ {displayStatus}
+
+
+
+
+ {/* Actions */}
+
+
+
+
+
+
+
+ );
+
+};
+
+export default VenueTableRow;
\ No newline at end of file
diff --git a/client/src/presentation/components/auth/.gitkeep b/client/src/presentation/components/auth/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/client/src/presentation/components/auth/AuthBanner.jsx b/client/src/presentation/components/auth/AuthBanner.jsx
new file mode 100644
index 0000000000..f0901d0674
--- /dev/null
+++ b/client/src/presentation/components/auth/AuthBanner.jsx
@@ -0,0 +1,40 @@
+const features = [
+ "5,000+ Verified Venues",
+ "Secure Booking Process",
+ "24/7 Customer Support"
+]
+
+const AuthBanner = () => {
+ return (
+
+
+ )
+}
+
+export default Header
\ No newline at end of file
diff --git a/client/src/presentation/components/common/Pagination.jsx b/client/src/presentation/components/common/Pagination.jsx
new file mode 100644
index 0000000000..36d00b7b38
--- /dev/null
+++ b/client/src/presentation/components/common/Pagination.jsx
@@ -0,0 +1,72 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+const Pagination = ({
+ currentPage,
+ totalPages,
+ onPageChange,
+}) => {
+
+ if (totalPages <= 1) return null;
+
+ const pages = [];
+
+ for (let i = 1; i <= totalPages; i++) {
+ pages.push(i);
+ }
+
+ return (
+
+
+
+ );
+};
+
+export default ConfirmationModal;
\ No newline at end of file
diff --git a/client/src/presentation/components/modal/Modal.jsx b/client/src/presentation/components/modal/Modal.jsx
new file mode 100644
index 0000000000..7ff64d06fb
--- /dev/null
+++ b/client/src/presentation/components/modal/Modal.jsx
@@ -0,0 +1,44 @@
+const Modal = ({
+ isOpen,
+ onClose,
+ title,
+ children,
+}) => {
+
+ if (!isOpen) return null;
+
+ return (
+
+
+ {children}
+ {showCloseButton && (
+
+
+
+ )}
+
+ );
+}
+
+function DialogTitle({
+ className,
+ ...props
+}) {
+ return (
+
+
+
+ );
+}
+
+function TableHeader({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function TableBody({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function TableFooter({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function TableRow({
+ className,
+ ...props
+}) {
+ return (
+
+
+
+
+ {
+
+ showDropdown && (
+
+
+
+
+
+
+
+
+
+ )
+
+ }
+
+
+
+
+ {booking?.status}
+
+
+
+
+ {/* Payment Status */}
+
+ + + Booking Status + +
+ +
+
+
+ {booking?.paymentStatus}
+
+
+
+
+ {/* Cancellation Reason */}
+
+ {booking?.cancellationReason && (
+
+ + + Payment Status + +
+ +
+
+
+
+ )}
+
+
+
+ + + Cancellation Reason + +
+ +
+
+ {booking.cancellationReason}
+
+
+
+
+
+
+
+ );
+};
+
+export default BookingFilters;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/bookingManagement/BookingStats.jsx b/client/src/presentation/components/admin/bookingManagement/BookingStats.jsx
new file mode 100644
index 0000000000..289cd3796f
--- /dev/null
+++ b/client/src/presentation/components/admin/bookingManagement/BookingStats.jsx
@@ -0,0 +1,95 @@
+import {
+ CalendarCheck,
+ Clock3,
+ CheckCircle,
+ XCircle,
+ CalendarDays,
+} from "lucide-react";
+
+import {
+ Card,
+ CardContent,
+} from "@/components/ui/card";
+
+const BookingStats = ({ stats }) => {
+
+ const cards = [
+ {
+ title: "TotalBookings",
+ value: stats?.totalBookings || 0,
+ icon: CalendarDays,
+ color: "text-blue-600",
+ },
+ {
+ title: "Pending",
+ value: stats?.pendingBookings || 0,
+ icon: Clock3,
+ color: "text-yellow-600",
+ },
+ {
+ title: "Confirmed",
+ value: stats?.confirmedBookings || 0,
+ icon: CheckCircle,
+ color: "text-green-600",
+ },
+
+ {
+ title: "Cancelled",
+ value: stats?.cancelledBookings || 0,
+ icon: XCircle,
+ color: "text-red-600",
+ },
+ {
+ title: "Completed",
+ value: stats?.completedBookings || 0,
+ icon: CalendarCheck,
+ color: "text-indigo-600",
+ },
+ ];
+
+ return (
+
+
+
+
+
+
+ {cards.map((card) => {
+
+ const Icon = card.icon;
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+
+ })}
+
+
+ );
+};
+
+export default BookingStats;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/bookingManagement/BookingStatusCard.jsx b/client/src/presentation/components/admin/bookingManagement/BookingStatusCard.jsx
new file mode 100644
index 0000000000..c07ee76781
--- /dev/null
+++ b/client/src/presentation/components/admin/bookingManagement/BookingStatusCard.jsx
@@ -0,0 +1,143 @@
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+import { Badge } from "@/components/ui/badge";
+
+const BookingStatusCard = ({ booking }) => {
+
+ const getStatusVariant = (status) => {
+
+ switch (status) {
+
+ case "confirmed":
+ return "default";
+
+ case "pending":
+ return "secondary";
+
+ case "cancelled":
+ return "destructive";
+
+ case "completed":
+ return "outline";
+
+ default:
+ return "secondary";
+
+ }
+
+ };
+
+ const formatDate = (date) => {
+
+ if (!date) return "-";
+
+ return new Date(date).toLocaleDateString("en-IN", {
+
+ day: "2-digit",
+
+ month: "long",
+
+ year: "numeric",
+
+ });
+
+ };
+
+ return (
+
+
+
+
+
+ + + {card.title} + +
+ ++ + {card.value} + +
+ +
+
+
+
+
+
+
+
+ {booking.status}
+
+
+
+
+
+ + + Status + +
+ +
+
+
+
+ {booking.paymentStatus}
+
+
+
+
+
+ + + Payment Status + +
+ +
+
+
+
+ + + Booking Date + +
+ ++ + {formatDate(booking.bookingDate)} + +
+ +
+
+
+
+ + + Created At + +
+ ++ + {formatDate(booking.createdAt)} + +
+ +
+
+
+
+
+
+
+
+ );
+
+};
+
+export default BookingTable;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/bookingManagement/BookingTableRow.jsx b/client/src/presentation/components/admin/bookingManagement/BookingTableRow.jsx
new file mode 100644
index 0000000000..67bfa231f7
--- /dev/null
+++ b/client/src/presentation/components/admin/bookingManagement/BookingTableRow.jsx
@@ -0,0 +1,168 @@
+import { Eye } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+import {
+ TableCell,
+ TableRow,
+} from "@/components/ui/table";
+
+const BookingTableRow = ({
+ booking,
+ onView,
+}) => {
+
+ const bookingStatus = booking.status;
+
+ const paymentStatus = booking.paymentStatus;
+
+ const bookingStatusClass = {
+
+ pending: "bg-yellow-100 text-yellow-700",
+
+ confirmed: "bg-green-100 text-green-700",
+
+ cancelled: "bg-red-100 text-red-700",
+
+ completed: "bg-blue-100 text-blue-700",
+
+ };
+
+ const paymentStatusClass = {
+
+ pending: "bg-yellow-100 text-yellow-700",
+
+ partial: "bg-orange-100 text-orange-700",
+
+ paid: "bg-green-100 text-green-700",
+
+ refunded: "bg-purple-100 text-purple-700",
+
+ failed: "bg-red-100 text-red-700",
+
+ success: "bg-green-100 text-green-700",
+
+ };
+
+ return (
+
+ | + No bookings found + | + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + Booking Date + +
+ ++ + {formatDate(booking?.bookingDate)} + +
+ +
+
+
+
+ + + Guest Count + +
+ ++ + {booking?.guestCount} + +
+ +
+
+
+
+
+
+
+
+ + + Start Time + +
+ ++ + {booking?.startTime} + +
+ +
+
+
+
+ + + End Time + +
+ ++ + {booking?.endTime} + +
+ +
+
+
+
+ + + Created At + +
+ ++ + {formatDateTime(booking?.createdAt)} + +
+ +
+
+
+
+ + + Last Updated + +
+ ++ + {formatDateTime(booking?.updatedAt)} + +
+ +
+
+
+
+
+
+
+
+ + + Total Amount + +
+ ++ + ₹ {booking?.totalAmount ?? 0} + +
+ +
+
+
+
+ + + Advance Amount + +
+ ++ + ₹ {booking?.advanceAmount ?? 0} + +
+ +
+
+
+
+
+
+
+
+ + + Paid Amount + +
+ ++ + ₹ {booking?.paidAmount ?? 0} + +
+ +
+
+
+
+ + + Remaining Amount + +
+ ++ + ₹ {booking?.remainingAmount ?? 0} + +
+ +
+
+
+
+ + + Payment Status + +
+ ++ + {booking?.paymentStatus || "-"} + +
+ +
+
+
+
+ + + Full Name + +
+ ++ + {user?.fullName || "-"} + +
+ +
+
+
+
+ + + Email + +
+ ++ + {user?.email || "-"} + +
+ +
+
+
+
+ + + Phone + +
+ ++ + {user?.phone || "-"} + +
+ +
+
+
+
+ + + Full Name + +
+ ++ + {vendor?.fullName || "-"} + +
+ +
+
+
+
+ + + Company Name + +
+ ++ + {vendor?.companyName || "-"} + +
+ +
+
+
+
+ + + Email + +
+ ++ + {vendor?.email || "-"} + +
+ +
+
+
+
+ + + Phone + +
+ ++ + {vendor?.phone || "-"} + +
+ +
+
+
+
+ + + Venue Name + +
+ ++ + {venue?.name || "-"} + +
+ +
+
+
+
+ + + Category + +
+ ++ + {venue?.category || "-"} + +
+ +
+
+
+
+ + + Address + +
+ ++ + {venue?.address + ? `${venue.address.addressLine1}, ${venue.address.city}, ${venue.address.state}` + : "-"} + +
+ +
+
+
+
+
+
+
+
+ + + Seating Capacity + +
+ ++ + {venue?.seatingCapacity ?? "-"} + +
+ +
+
+
+
+ + + Standing Capacity + +
+ ++ + {venue?.standingCapacity ?? "-"} + +
+ +
+ {label && (
+
+ )}
+
+
+
+ );
+};
+
+export default FilterDropdown;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/common/FilterTabs.jsx b/client/src/presentation/components/admin/common/FilterTabs.jsx
new file mode 100644
index 0000000000..6df93821f4
--- /dev/null
+++ b/client/src/presentation/components/admin/common/FilterTabs.jsx
@@ -0,0 +1,42 @@
+const FilterTabs = ({
+ tabs,
+ activeTab,
+ onTabChange
+}) => {
+console.log("activeTab",activeTab)
+console.log("tabs",tabs)
+ return (
+
+
+
+ {tabs.map((tab) => (
+
+
+
+ ))}
+
+
+
+ );
+
+};
+
+export default FilterTabs;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/common/PageHeader.jsx b/client/src/presentation/components/admin/common/PageHeader.jsx
new file mode 100644
index 0000000000..3c431579a4
--- /dev/null
+++ b/client/src/presentation/components/admin/common/PageHeader.jsx
@@ -0,0 +1,25 @@
+const PageHeader = ({ title, subtitle, children }) => {
+ return (
+
+
+ );
+};
+
+export default PageHeader;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/common/SearchBar.jsx b/client/src/presentation/components/admin/common/SearchBar.jsx
new file mode 100644
index 0000000000..27d253bea1
--- /dev/null
+++ b/client/src/presentation/components/admin/common/SearchBar.jsx
@@ -0,0 +1,46 @@
+import { Search } from "lucide-react";
+
+const SearchBar = ({
+ value,
+ onChange,
+ placeholder = "Search..."
+}) => {
+
+ return (
+
+
+
+
+ {children && (
+ + {title} +
+ + {subtitle && ( ++ {subtitle} +
+ )} +
+ {children}
+
+ )}
+
+
+
+
+ );
+
+};
+
+export default SearchBar;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/dashboard/BookingOverviewChart.jsx b/client/src/presentation/components/admin/dashboard/BookingOverviewChart.jsx
new file mode 100644
index 0000000000..65915689d3
--- /dev/null
+++ b/client/src/presentation/components/admin/dashboard/BookingOverviewChart.jsx
@@ -0,0 +1,81 @@
+import {
+ ResponsiveContainer,
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+} from "recharts";
+
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+const BookingOverviewChart = ({ data }) => {
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {cards.map((card) => {
+
+ const Icon = card.icon;
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+
+ })}
+
+
+
+ );
+
+};
+
+export default DashboardStats;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/dashboard/RevenueChart.jsx b/client/src/presentation/components/admin/dashboard/RevenueChart.jsx
new file mode 100644
index 0000000000..8bd07848e4
--- /dev/null
+++ b/client/src/presentation/components/admin/dashboard/RevenueChart.jsx
@@ -0,0 +1,85 @@
+import {
+ ResponsiveContainer,
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+} from "recharts";
+
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+const RevenueChart = ({ data }) => {
+
+ return (
+
+
+
+
+
+ + + {card.title} + +
+ ++ + {card.value} + +
+ +
+
+
+
+
+
+
+ `₹${value.toLocaleString()}`
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+ {/* Booking Date */}
+
+
+ + Booking ID +
+ ++ {booking.id?.slice(-8)} +
+
+
+
+ {/* Event Time */}
+
+
+ + Booking Date +
+ ++ {new Date( + booking.bookingDate + ).toLocaleDateString()} +
+
+
+
+ {/* Booking Status */}
+
+
+ + Event Time +
+ ++ {booking.startTime} - {booking.endTime} +
+
+
+
+ {/* Booking Payment Status */}
+
+
+ {booking.status}
+
+
+ + Booking Status +
+ +
+
+
+
+
+ {booking.paymentStatus}
+
+
+ + Booking Payment Status +
+ +
+
+
+
+ );
+
+};
+
+export default PaymentFilters;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/paymentManagement/PaymentInfoCard.jsx b/client/src/presentation/components/admin/paymentManagement/PaymentInfoCard.jsx
new file mode 100644
index 0000000000..b5b96a5408
--- /dev/null
+++ b/client/src/presentation/components/admin/paymentManagement/PaymentInfoCard.jsx
@@ -0,0 +1,159 @@
+import {
+ IndianRupee,
+ CreditCard,
+ Wallet,
+ BadgeCheck,
+ RotateCcw,
+ CalendarClock,
+} from "lucide-react";
+
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+import { Badge } from "@/components/ui/badge";
+
+const PaymentInfoCard = ({ payment }) => {
+ if (!payment) return null;
+
+ const statusClass = {
+ success: "bg-green-100 text-green-700",
+ pending: "bg-yellow-100 text-yellow-700",
+ failed: "bg-red-100 text-red-700",
+ refunded: "bg-purple-100 text-purple-700",
+ partial: "bg-orange-100 text-orange-700",
+ paid: "bg-green-100 text-green-700",
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {/* Payment Type */}
+
+
+ + Amount Paid +
+ ++ ₹{payment.amount?.toLocaleString()} +
+
+
+
+ {/* Payment Method */}
+
+
+ + Payment Type +
+ ++ {payment.paymentType} +
+
+
+
+ {/* Payment Status */}
+
+
+ + Payment Method +
+ ++ {payment.paymentMethod} +
+
+
+
+ {/* Refund Amount */}
+
+
+ {payment.paymentStatus}
+
+
+ + Payment Status +
+ +
+
+
+ {/* Refund Reason */}
+
+
+ + Refund Amount +
+ ++ {payment.refundAmount + ? `₹${payment.refundAmount.toLocaleString()}` + : "-"} +
+
+
+
+ {/* Refunded At */}
+
+
+ + Refund Reason +
+ ++ {payment.refundReason || "-"} +
+
+
+
+
+
+ + Refunded At +
+ ++ {payment.refundedAt + ? new Date( + payment.refundedAt + ).toLocaleString() + : "-"} +
+
+
+ {cards.map((card) => {
+
+ const Icon = card.icon;
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+
+ })}
+
+
+
+ );
+
+};
+
+export default PaymentStats;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/paymentManagement/PaymentSummaryCard.jsx b/client/src/presentation/components/admin/paymentManagement/PaymentSummaryCard.jsx
new file mode 100644
index 0000000000..9015a9538c
--- /dev/null
+++ b/client/src/presentation/components/admin/paymentManagement/PaymentSummaryCard.jsx
@@ -0,0 +1,142 @@
+import {
+ CreditCard,
+ BadgeCheck,
+ Calendar,
+ Wallet,
+} from "lucide-react";
+
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+import { Badge } from "@/components/ui/badge";
+
+const PaymentSummaryCard = ({ payment }) => {
+ const statusClass = {
+ success: "bg-green-100 text-green-700",
+ pending: "bg-yellow-100 text-yellow-700",
+ failed: "bg-red-100 text-red-700",
+ refunded: "bg-purple-100 text-purple-700",
+ };
+
+ return (
+
+
+
+
+ + + {card.title} + +
+ ++ + {card.value} + +
+ +
+
+ {/* Payment ID */}
+
+
+
+
+
+ {/* Status */}
+
+
+ + Payment ID +
+ ++ {payment.id?.slice(-8)} +
+
+
+
+ {/* Payment Type */}
+
+
+ {payment.paymentStatus}
+
+
+ + Payment Status +
+ +
+
+
+ {/* Payment Method */}
+
+
+ + Payment Type +
+ ++ {payment.paymentType} +
+
+
+
+ {/* Created */}
+
+
+ + Payment Method +
+ ++ {payment.paymentMethod} +
+
+
+
+ {/* Updated */}
+
+
+ + Created At +
+ ++ {new Date( + payment.createdAt + ).toLocaleString()} +
+
+
+
+
+
+ + Updated At +
+ ++ {new Date( + payment.updatedAt + ).toLocaleString()} +
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default PaymentTable;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/paymentManagement/PaymentTableRow.jsx b/client/src/presentation/components/admin/paymentManagement/PaymentTableRow.jsx
new file mode 100644
index 0000000000..589d89be64
--- /dev/null
+++ b/client/src/presentation/components/admin/paymentManagement/PaymentTableRow.jsx
@@ -0,0 +1,158 @@
+import { Eye } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+import {
+ TableCell,
+ TableRow,
+} from "@/components/ui/table";
+
+const PaymentTableRow = ({
+ payment,
+ onView,
+}) => {
+
+ const paymentStatusClass = {
+
+ pending: "bg-yellow-100 text-yellow-700",
+
+ success: "bg-green-100 text-green-700",
+
+ failed: "bg-red-100 text-red-700",
+
+ refunded: "bg-purple-100 text-purple-700",
+
+ };
+
+ const paymentTypeClass = {
+
+ advance: "bg-blue-100 text-blue-700",
+
+ balance: "bg-orange-100 text-orange-700",
+
+ full: "bg-purple-100 text-purple-700",
+
+ };
+
+ return (
+
+ | + + No payments found + + | + +
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default UserFilters;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/userManagement/UserTable.jsx b/client/src/presentation/components/admin/userManagement/UserTable.jsx
new file mode 100644
index 0000000000..557f65052b
--- /dev/null
+++ b/client/src/presentation/components/admin/userManagement/UserTable.jsx
@@ -0,0 +1,97 @@
+import UserTableRow from "./UserTableRow";
+
+import {
+ Table,
+ TableBody,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table"
+
+const UserTable = ({
+ users,
+ onView,
+ onBlock,
+}) => {
+
+ return (
+
+ | + + No users found + + | + +
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default VendorFilters;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/vendorManagement/VendorTable.jsx b/client/src/presentation/components/admin/vendorManagement/VendorTable.jsx
new file mode 100644
index 0000000000..8c8ade6e7c
--- /dev/null
+++ b/client/src/presentation/components/admin/vendorManagement/VendorTable.jsx
@@ -0,0 +1,107 @@
+import VendorTableRow from "./VendorTableRow";
+
+import {
+ Table,
+ TableHeader,
+ TableBody,
+ TableHead,
+ TableRow,
+} from "@/components/ui/table";
+
+const VendorTable = ({
+ vendors,
+ onView,
+ onApprove,
+ onReject,
+ onBlock,
+ onUnblock,
+}) => {
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default VendorTable;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/vendorManagement/VendorTableRow.jsx b/client/src/presentation/components/admin/vendorManagement/VendorTableRow.jsx
new file mode 100644
index 0000000000..4c92ca994e
--- /dev/null
+++ b/client/src/presentation/components/admin/vendorManagement/VendorTableRow.jsx
@@ -0,0 +1,233 @@
+import {
+ Eye,
+ CheckCircle,
+ XCircle,
+ Ban,
+ ShieldCheck,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+import {
+ TableCell,
+ TableRow,
+} from "@/components/ui/table";
+
+const VendorTableRow = ({
+ vendor,
+ onView,
+ onApprove,
+ onReject,
+ onBlock,
+ onUnblock,
+}) => {
+
+ const isBlocked = vendor.isBlocked;
+
+ const approvalStatus = vendor.approvalStatus;
+
+ // Display Status
+ let displayStatus = "";
+
+ if (isBlocked) {
+
+ displayStatus = "Blocked";
+
+ } else {
+
+ displayStatus =
+ approvalStatus.charAt(0) +
+ approvalStatus.slice(1).toLowerCase();
+
+ }
+
+ // Badge Variant
+ let badgeVariant = "secondary";
+
+ if (isBlocked) {
+
+ badgeVariant = "destructive";
+
+ } else if (approvalStatus === "APPROVED") {
+
+ badgeVariant = "default";
+
+ } else if (approvalStatus === "REJECTED") {
+
+ badgeVariant = "outline";
+
+ }
+
+ return (
+
+ | + No vendors found. + | + +
+
+ {/* View */}
+
+
+
+ {/* Pending */}
+
+ {
+ !isBlocked &&
+ approvalStatus === "PENDING" && (
+
+ <>
+
+
+
+
+
+
+ )
+ }
+
+ {/* Approved */}
+
+ {
+ !isBlocked &&
+ approvalStatus === "APPROVED" && (
+
+
+
+ )
+ }
+
+ {/* Blocked */}
+
+ {
+ isBlocked && (
+
+
+
+ )
+ }
+
+
+
+
+
+
+
+ );
+};
+
+export default VenueFilters;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/venueManagement/VenueTable.jsx b/client/src/presentation/components/admin/venueManagement/VenueTable.jsx
new file mode 100644
index 0000000000..7edc5a7d5b
--- /dev/null
+++ b/client/src/presentation/components/admin/venueManagement/VenueTable.jsx
@@ -0,0 +1,99 @@
+import VenueTableRow from "./VenueTableRow";
+
+import {
+ Table,
+ TableHeader,
+ TableBody,
+ TableHead,
+ TableRow,
+} from "@/components/ui/table";
+
+const VenueTable = ({
+ venues,
+ onView,
+ onApprove,
+ onReject,
+ onBlock,
+ onUnblock,
+}) => {
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default VenueTable;
\ No newline at end of file
diff --git a/client/src/presentation/components/admin/venueManagement/VenueTableRow.jsx b/client/src/presentation/components/admin/venueManagement/VenueTableRow.jsx
new file mode 100644
index 0000000000..2caa133285
--- /dev/null
+++ b/client/src/presentation/components/admin/venueManagement/VenueTableRow.jsx
@@ -0,0 +1,233 @@
+import {
+ Eye,
+ CheckCircle,
+ XCircle,
+ Ban,
+ ShieldCheck,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+import {
+ TableCell,
+ TableRow,
+} from "@/components/ui/table";
+
+const VenueTableRow = ({
+ venue,
+ onView,
+ onApprove,
+ onReject,
+ onBlock,
+ onUnblock,
+}) => {
+
+ const isBlocked = venue.isBlocked;
+
+ const approvalStatus = venue.approvalStatus;
+
+ // Display Status
+ let displayStatus = "";
+
+ if (isBlocked) {
+
+ displayStatus = "Blocked";
+
+ } else {
+
+ displayStatus =
+ approvalStatus.charAt(0) +
+ approvalStatus.slice(1).toLowerCase();
+
+ }
+
+ //Badge Variant
+ let badgeVariant = "secondary";
+
+ if (isBlocked) {
+
+ badgeVariant = "destructive";
+
+ } else if (approvalStatus === "APPROVED") {
+
+ badgeVariant = "default";
+
+ } else if (approvalStatus === "REJECTED") {
+
+ badgeVariant = "outline";
+
+ }
+
+ return (
+
+ | + No venues found. + | + +
+
+ {/* View */}
+
+
+
+ {/* Pending */}
+
+ {
+ !isBlocked &&
+ approvalStatus === "PENDING" && (
+
+ <>
+
+
+
+
+
+
+ )
+ }
+
+ {/* Approved */}
+
+ {
+ !isBlocked &&
+ approvalStatus === "ACTIVE" && (
+
+
+
+ )
+ }
+
+ {/* Blocked */}
+
+ {
+ isBlocked && (
+
+
+
+ )
+ }
+
+
+
+
+
+ {/* Background image overlay */}
+
+
+
+ )
+}
+
+export default AuthBanner
diff --git a/client/src/presentation/components/auth/ForgotPasswordForm.jsx b/client/src/presentation/components/auth/ForgotPasswordForm.jsx
new file mode 100644
index 0000000000..346c2bfdf3
--- /dev/null
+++ b/client/src/presentation/components/auth/ForgotPasswordForm.jsx
@@ -0,0 +1,137 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { Mail, ArrowLeft } from 'lucide-react'
+import api from '@/lib/axios'
+import { ROLES } from "@/constants/Roles";
+import { API_ROUTES } from "@/constants/apiRoutes"
+
+import { ROUTES } from '@/constants/routes'
+
+const ForgotPasswordForm = ({role}) => {
+ const [email, setEmail] = useState('')
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState(null)
+ const [success, setSuccess] = useState(false)
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+ setLoading(true)
+ setError(null)
+
+ try {
+ await api.post(API_ROUTES.AUTH.FORGOT_PASSWORD(role), { email })
+ setSuccess(true)
+ } catch (err) {
+ console.log(err)
+ setError(err.response?.data?.message || 'Something went wrong. Please try again.')
+ } finally {
+
+ setLoading(false)
+ }
+ }
+
+ return (
+
+
+ + Find Your Perfect Event Venue +
+ ++ Access thousands of verified venues across India. Book with confidence for your special occasions. +
+ +-
+ {features.map((feature) => (
+
-
+ + ++ {feature} +
+ ))}
+
+ {/* Logo */}
+
+ )
+}
+
+export default ForgotPasswordForm
diff --git a/client/src/presentation/components/auth/LoginForm.jsx b/client/src/presentation/components/auth/LoginForm.jsx
new file mode 100644
index 0000000000..d6bc048723
--- /dev/null
+++ b/client/src/presentation/components/auth/LoginForm.jsx
@@ -0,0 +1,204 @@
+import { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate, Link, useLocation } from 'react-router-dom'
+import { User, Mail, Lock, Eye, EyeOff } from 'lucide-react'
+import { login } from "@/redux/slices/AuthSlice"
+import { ROUTES } from "@/constants/routes"
+import { ROLES } from '@/constants/Roles'
+import toast from "react-hot-toast"
+
+const LoginForm = () => {
+ const dispatch = useDispatch()
+ const navigate = useNavigate()
+ const location = useLocation()
+
+ const initialRole = location.state?.role || ROLES.USER
+ const initialEmail = location.state?.email || ""
+
+ const [role, setRole] = useState(initialRole)
+ const [formData, setFormData] = useState({ email: initialEmail, password: "" })
+ const [showPassword, setShowPassword] = useState(false)
+
+ const { loading, error } = useSelector((state) => state.auth)
+
+ const handleChange = (e) => {
+ setFormData({ ...formData, [e.target.name]: e.target.value })
+ }
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+
+ try {
+ // 1. Dispatch login action passing selected role (USER or VENDOR)
+ const result = await dispatch(
+ login({
+ role,
+ data: formData,
+ })
+ ).unwrap()
+
+ console.log("Login Result:", result);
+
+ toast.success("Login successful!")
+
+
+ const userRole = result?.data?.user?.role || result?.data?.vendor?.role || result?.user?.role || result?.role || role
+
+
+ if (userRole.toLowerCase() === ROLES.VENDOR.toLowerCase()) {
+ navigate(ROUTES.VENDOR.DASHBOARD)
+
+ } else if (userRole === "customer") {
+
+ navigate(ROUTES.PUBLIC.HOME)
+ }
+
+ } catch (err) {
+ console.error("Login failed:", err)
+ toast.error(err?.message || err || "Invalid email or password")
+ }
+ }
+
+ return (
+
+
+
+ {/* Card */}
+
+
+
+ 🏛️
+
+ Book My Venue
+
+
+
+ {/* Help footer */}
+
+
+ {success ? (
+ /* Success state */
+
+
+
+ ) : (
+ /* Form state */
+ <>
+
+
+
+ Check your inbox
++ We've sent a password reset link to {email} +
+ +Forgot Password?
++ No worries! Enter your email and we'll send you a reset link. +
+ + {error && ( +
+ {error}
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+
+
+ Need help? Contact our support team at{' '}
+
+ support@bookmyvenue.com
+
+
+
+
+ )
+}
+
+export default LoginForm
\ No newline at end of file
diff --git a/client/src/presentation/components/auth/RegisterForm.jsx b/client/src/presentation/components/auth/RegisterForm.jsx
new file mode 100644
index 0000000000..32485b5956
--- /dev/null
+++ b/client/src/presentation/components/auth/RegisterForm.jsx
@@ -0,0 +1,176 @@
+import { useState } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import { User, Mail, Phone, Lock, Eye, EyeOff } from 'lucide-react'
+import { useDispatch, useSelector } from "react-redux"
+import toast from "react-hot-toast"
+
+import { ROUTES } from '@/constants/routes'
+import { registerSchema } from '@/lib/validation/authValidation'
+import { ROLES } from '@/constants/Roles'
+import { registerUser } from "@/redux/slices/AuthSlice"
+
+const RegisterForm = () => {
+ const navigate = useNavigate()
+ const dispatch = useDispatch()
+
+ const [formData, setFormData] = useState({
+ fullName: '',
+ email: '',
+ phone: '',
+ password: '',
+ confirmPassword: '',
+ })
+ const [role, setRole] = useState(ROLES.USER)
+ const [showPassword, setShowPassword] = useState(false)
+ const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+
+ const { loading } = useSelector((state) => state.auth)
+
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ })
+ }
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+
+
+ if (formData.password !== formData.confirmPassword) {
+ toast.error('Passwords do not match')
+ return
+ }
+
+ // 2. Schema validation (Zod)
+ const validation = registerSchema.safeParse({
+ ...formData,
+ role,
+ })
+
+ if (!validation.success) {
+ const errorMessage = validation.error.issues[0]?.message || 'Validation failed'
+ toast.error(errorMessage)
+ return
+ }
+
+
+ try {
+ const result = await dispatch(
+ registerUser({
+ role,
+ userData: validation.data,
+ })
+ ).unwrap()
+
+ console.log("success")
+ toast.success(result?.message || "Account created successfully! Please verify your OTP.")
+
+ navigate(ROUTES.PUBLIC.VERIFY_OTP, {
+ state: {
+ email: formData.email,
+ role,
+
+ },
+ })
+ } catch (err) {
+ const apiError = err?.message || err || "Registration failed"
+ toast.error(apiError)
+ }
+
+ }
+
+ return (
+ Welcome Back
+Sign in to your account to continue
+ + {/* Role Selector Buttons */} +
+
+
+
+
+ {/* Error Message Banner */}
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+ + Don't have an account?{' '} + + Sign up + +
+
+
+ )
+}
+
+export default RegisterForm
\ No newline at end of file
diff --git a/client/src/presentation/components/auth/ResetPasswordForm.jsx b/client/src/presentation/components/auth/ResetPasswordForm.jsx
new file mode 100644
index 0000000000..ade001c156
--- /dev/null
+++ b/client/src/presentation/components/auth/ResetPasswordForm.jsx
@@ -0,0 +1,115 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { useNavigate, useLocation } from "react-router-dom";
+import toast from "react-hot-toast";
+
+import { resetPassword } from "@/redux/slices/AuthSlice";
+import { ROUTES } from "@/constants/routes";
+import { ROLES } from "@/constants/Roles";
+import {useSearchParams } from "react-router-dom";
+
+const ResetPasswordForm = () => {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+
+ const [searchParams] = useSearchParams();
+ const token = searchParams.get("token");
+ const role = searchParams.get("role");
+
+
+ const [password, setPassword] = useState("");
+ const [confirmPassword, setConfirmPassword] = useState("");
+ const [loading, setLoading] = useState(false);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+
+
+ if (!token || !role) {
+ toast.error("Invalid reset password link.");
+ navigate(ROUTES.PUBLIC.LOGIN);
+ return;
+}
+
+
+
+ if (password !== confirmPassword) {
+ toast.error("Passwords do not match.");
+ return;
+ }
+
+ try {
+ setLoading(true);
+
+ await dispatch(
+ resetPassword({
+
+ token,
+ role,
+ password,
+ confirmPassword,
+
+ })
+ ).unwrap();
+
+ toast.success("Password reset successfully.");
+
+ if (role === ROLES.ADMIN) {
+ navigate(ROUTES.ADMIN.LOGIN);
+ } else if (role === ROLES.VENDOR) {
+ navigate(ROUTES.VENDOR.LOGIN);
+ } else {
+ navigate(ROUTES.PUBLIC.LOGIN);
+ }
+
+ } catch (error) {
+ toast.error(error || "Failed to reset password.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ Create Account
+Join thousands of happy customers
+ + {/* Role toggle */} +
+
+
+
+
+
+
+ + Already have an account?{' '} + Sign in +
+
+
+
+ );
+};
+
+export default ResetPasswordForm;
\ No newline at end of file
diff --git a/client/src/presentation/components/auth/VerifyOtpForm.jsx b/client/src/presentation/components/auth/VerifyOtpForm.jsx
new file mode 100644
index 0000000000..5fa88d0c29
--- /dev/null
+++ b/client/src/presentation/components/auth/VerifyOtpForm.jsx
@@ -0,0 +1,179 @@
+import { useState, useEffect } from "react";
+import { Mail } from "lucide-react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import toast from "react-hot-toast"
+import { resendOtp, verifyOtp } from "@/redux/slices/AuthSlice";
+
+import { ROUTES } from "@/constants/routes";
+
+const VerifyOtpForm = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const dispatch = useDispatch();
+
+ const email = location.state?.email || "";
+ const role = location.state?.role;
+
+ const { loading, error } = useSelector((state) => state.auth);
+
+ const [otpCode, setOtpCode] = useState("");
+ const [resending, setResending] = useState(false);
+
+ const [countdown, setCountdown] = useState(30);
+ const [canResend, setCanResend] = useState(false);
+
+ useEffect(() => {
+ if (countdown <= 0) {
+ setCanResend(true);
+ return;
+ }
+
+ const timer = setTimeout(() => {
+ setCountdown((prev) => prev - 1);
+ }, 1000);
+
+ return () => clearTimeout(timer);
+ }, [countdown]);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+
+ if (!/^\d{6}$/.test(otpCode)) {
+ toast.error("Please enter a valid 6-digit OTP");
+ return;
+ }
+
+ try {
+
+ const response = await dispatch(
+ verifyOtp({
+ role,
+ email,
+ otpCode,
+ })
+ ).unwrap();
+
+ toast.success(response?.message || "OTP verified successfully!");
+
+ navigate(ROUTES.PUBLIC.LOGIN, {
+ state: {
+ role,
+ email,
+ },
+ });
+ } catch (err) {
+ // err contains the payload passed via rejectWithValue in your slice
+ const errorMessage = typeof err === "string" ? err : err?.message || "OTP verification failed";
+ toast.error(errorMessage);
+ }
+ };
+
+ const handleResendOtp = async () => {
+ if (!email || !role) {
+ toast.error("Missing email or role. Please try logging in again.");
+ return;
+ }
+
+ setResending(true);
+
+ try {
+ const response = await dispatch(
+ resendOtp({
+ role,
+ email,
+ })
+ ).unwrap();
+
+ toast.success(response?.message || "New OTP sent to your email!");
+
+ setCountdown(30);
+ setCanResend(false);
+ setOtpCode("");
+ } catch (err) {
+ const errorMessage = typeof err === "string" ? err : err?.message || "Failed to resend OTP";
+ toast.error(errorMessage);
+ } finally {
+ setResending(false);
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default VerifyOtpForm;
\ No newline at end of file
diff --git a/client/src/presentation/components/common/Footer.jsx b/client/src/presentation/components/common/Footer.jsx
new file mode 100644
index 0000000000..90b955e460
--- /dev/null
+++ b/client/src/presentation/components/common/Footer.jsx
@@ -0,0 +1,89 @@
+
+const Footer = () => {
+ return (
+
+
+
+
+
+
+
+ + Verify Your Email +
+ ++ We sent a 6-digit OTP to {email} +
+ + {error && ( +
+ {error}
+
+ )}
+
+
+
+
+ {canResend ? (
+
+ ) : (
+
+
+ Resend OTP in {countdown}s
+ )} +
+
+
+
+
+
+ )
+}
+
+export default Footer
diff --git a/client/src/presentation/components/common/Header.jsx b/client/src/presentation/components/common/Header.jsx
new file mode 100644
index 0000000000..8c70c42b40
--- /dev/null
+++ b/client/src/presentation/components/common/Header.jsx
@@ -0,0 +1,115 @@
+import { Heart, User, ChevronDown, LogOut } from 'lucide-react'
+import { useState } from 'react'
+import Logo from '@/assets/images/logo.jpeg'
+import { useNavigate } from 'react-router-dom'
+import { ROUTES } from '@/constants/routes'
+import { useSelector, useDispatch } from 'react-redux'
+import { logout } from '@/redux/slices/AuthSlice'
+import { ROLES } from '@/constants/Roles'
+import toast from 'react-hot-toast'
+// import { logout } from '@/redux/slices/authSlice'
+
+const Header = () => {
+ const navigate = useNavigate()
+ const dispatch = useDispatch()
+
+ const { user } = useSelector((state) => state.auth)
+
+ const [open, setOpen] = useState(false)
+ const role = user?.role === "customer" ? ROLES.USER : ROLES.VENDOR
+
+ const handleLogout = async() => {
+ try {
+ await dispatch(logout({role})).unwrap()
+ toast.success(`${role} logged out successfully`)
+ } catch (error) {
+ toast.error(error)
+ }
+ }
+
+ return (
+
+
+
+
+
+
+ 
+
+
+ Book My Venue
+
+
+
+
+
+ {open && (
+
+ )}
+
+
+
+
+
+ )}
+
+
+ {/* Previous Button */}
+
+
+
+ {/* Page Numbers */}
+
+
+
+ );
+
+};
+
+export default Pagination;
\ No newline at end of file
diff --git a/client/src/presentation/components/common/VenueCard.jsx b/client/src/presentation/components/common/VenueCard.jsx
new file mode 100644
index 0000000000..90e6be06d9
--- /dev/null
+++ b/client/src/presentation/components/common/VenueCard.jsx
@@ -0,0 +1,126 @@
+import { useNavigate } from "react-router-dom";
+
+export default function VenueCard({
+ venue,
+ variant = "default",
+ isWishlisted = false,
+ onWishlistToggle,
+}) {
+ const navigate = useNavigate();
+
+ const handleVenueClick = () => {
+ navigate(`/user/venue/${venue.id}`);
+ };
+
+ const handleWishlistClick = (event) => {
+ event.stopPropagation();
+ onWishlistToggle?.(venue.id);
+ };
+
+ return (
+
+
+ {pages.map((page) => (
+
+
+
+ ))}
+
+
+
+ {/* Next Button */}
+
+
+
+
+ {/* Image */}
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/presentation/components/modal/.gitkeep b/client/src/presentation/components/modal/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/client/src/presentation/components/modal/ConfirmationModal.jsx b/client/src/presentation/components/modal/ConfirmationModal.jsx
new file mode 100644
index 0000000000..37bf6aa230
--- /dev/null
+++ b/client/src/presentation/components/modal/ConfirmationModal.jsx
@@ -0,0 +1,46 @@
+import { Button } from "@/components/ui/button"
+import Modal from "./Modal";
+
+const ConfirmationModal = ({
+ isOpen,
+ onClose,
+ onConfirm,
+ title,
+ message,
+ confirmText = "Confirm",
+ cancelText = "Cancel",
+ confirmVariant = "destructive",
+}) => {
+ return (
+
+ 
+
+
+ {venue.category}
+
+
+
+
+
+
+ {/* Rating */}
+
+
+ ⭐
+ {venue.rating || 0}
+
+
+ {/* Name */}
+ {venue.name}
+ + {/* Location */} ++ 📍 {venue.address?.city}, {venue.address?.state} +
+ + {/* Description */} + {variant === "default" && ( ++ {venue.description} +
+ )} + + {/* Price + Capacity */} +
+
+
+ {/* Browse Extra Details */}
+ {variant === "default" && (
+ <>
+
+
+
+ Starting from
+ ++ ₹{venue.pricePerDay} + /day +
+
+
+ Capacity
+ ++ {venue.seatingCapacity} Seating +
+ ++ {venue.standingCapacity} Standing +
+
+
+
+ Available
+ ++ {venue.availabilityRules?.openTime}- + {venue.availabilityRules?.closeTime} +
+
+ {venue.amenities?.slice(0, 3).map((item, index) => (
+
+ {item}
+
+ ))}
+
+
+ )}
+
+
+ + {message} +
+ +
+
+
+
+
+
+
+
+
+ );
+
+};
+
+export default Modal;
\ No newline at end of file
diff --git a/client/src/presentation/components/modal/RejectReasonModal.jsx b/client/src/presentation/components/modal/RejectReasonModal.jsx
new file mode 100644
index 0000000000..9f80dee905
--- /dev/null
+++ b/client/src/presentation/components/modal/RejectReasonModal.jsx
@@ -0,0 +1,98 @@
+import { useState, useEffect } from "react";
+import { rejectReasonSchema } from "@/lib/validation/adminVendorValidation";
+
+const RejectReasonModal = ({
+ isOpen,
+ onClose,
+ onSubmit,
+ title = "Reject",
+}) => {
+
+ const [reason, setReason] = useState("");
+ const [error, setError] = useState("");
+
+ useEffect(() => {
+ if (!isOpen) {
+ setReason("");
+ setError("");
+ }
+ }, [isOpen]);
+
+ if (!isOpen) return null;
+
+ /* const handleReject = () => {
+
+ if (!reason.trim()) {
+ alert("Please enter rejection reason.");
+ return;
+ }
+
+ onSubmit(reason);
+ };*/
+ const handleReject = () => {
+
+ const result = rejectReasonSchema.safeParse({
+ reason,
+ });
+
+ if (!result.success) {
+ setError(result.error.issues[0].message);
+ return;
+ }
+
+ setError("");
+ onSubmit(reason);
+ };
+
+ return (
+
+
+ {/* Header */}
+
+
+
+
+
+
+
+ {/* Body */}
+
+ {title}
+ + + +
+
+ {children}
+
+
+
+
+
+
+
+