+ {/* Overlay */}
+
{
+ return setMobileMenuOpen(false);
+ }
+ }
+ />
+
+ {/* Drawer */}
+
+ {/* Drawer Header */}
+
+
+
+
+
{
+ return setMobileMenuOpen(false);
+ }
+ }
+ className={headerStyle.mobileDrawerCloseBtn}
+ >
+
+
+
+ {/* Menu */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/frontend/src/components/global/header/HeaderStyles.ts b/apps/frontend/src/components/global/header/HeaderStyles.ts
new file mode 100644
index 000000000..95d5315f0
--- /dev/null
+++ b/apps/frontend/src/components/global/header/HeaderStyles.ts
@@ -0,0 +1,215 @@
+import clsx from "clsx";
+
+export const headerStyle = {
+ headerWrapper: clsx(
+ "sticky",
+ "top-0",
+ "z-40",
+ "h-[72px]",
+ "border-b",
+ "border-border",
+ "bg-background",
+ "text-foreground",
+ ),
+
+ container: clsx(
+ "grid",
+ "h-full",
+ "grid-cols-[1fr_auto]",
+ "items-center",
+ "px-4",
+ "md:px-6",
+ "lg:grid-cols-[1fr_auto_1fr]",
+ ),
+
+ leftSection: clsx("flex", "items-center", "gap-3"),
+
+ menuBtn: clsx(
+ "rounded-lg",
+ "p-2",
+ "text-muted-foreground",
+ "transition",
+ "hover:bg-muted",
+ "lg:hidden",
+ ),
+
+ divider: clsx("hidden", "h-6", "w-px", "bg-border", "md:block"),
+
+ logoContainer: clsx(
+ "relative",
+ "h-10",
+ "w-[140px]",
+ "sm:w-[170px]",
+ "md:h-12",
+ "md:w-[200px]",
+ "lg:w-[220px]",
+ ),
+
+ navBar: clsx("hidden", "items-center", "justify-center", "gap-10", "lg:flex"),
+
+ navBtnActive: clsx(
+ "relative",
+ "text-[12px]",
+ "font-semibold",
+ "text-foreground",
+ ),
+
+ activeIndicator: clsx(
+ "absolute",
+ "-bottom-[26px]",
+ "left-0",
+ "h-[3px]",
+ "w-full",
+ "rounded-full",
+ "bg-teal-700",
+ ),
+
+ navBtn: clsx(
+ "text-[12px]",
+ "font-semibold",
+ "text-muted-foreground",
+ "transition",
+ "hover:text-foreground",
+ ),
+
+ navBtnRelative: clsx(
+ "relative",
+ "text-[12px]",
+ "font-semibold",
+ "text-muted-foreground",
+ "transition",
+ "hover:text-foreground",
+ ),
+
+ offersBadge: clsx(
+ "absolute",
+ "-right-4",
+ "-top-2",
+ "flex",
+ "h-5",
+ "min-w-[20px]",
+ "items-center",
+ "justify-center",
+ "rounded-full",
+ "px-1",
+ "text-[10px]",
+ "font-bold",
+ "text-white",
+ ),
+
+ rightSection: clsx(
+ "flex",
+ "items-center",
+ "justify-end",
+ "gap-2",
+ "md:gap-4",
+ ),
+
+ notificationBtn: clsx(
+ "relative",
+ "rounded-lg",
+ "p-2",
+ "transition",
+ "hover:bg-muted",
+ ),
+
+ notificationBadge: clsx(
+ "absolute",
+ "right-1",
+ "top-1",
+ "hidden",
+ "h-4",
+ "w-4",
+ "items-center",
+ "justify-center",
+ "rounded-full",
+ "text-[9px]",
+ "font-bold",
+ "text-white",
+ "sm:flex",
+ ),
+
+ profileContainer: clsx("relative"),
+
+ profileBtn: clsx(
+ "h-11",
+ "cursor-pointer",
+ "flex",
+ "items-center",
+ "gap-2",
+ "rounded-full",
+ "border",
+ "border-border",
+ "px-3",
+ "py-1",
+ "transition",
+ "hover:bg-muted",
+ ),
+
+ avatar: clsx(
+ "h-8",
+ "w-8",
+ "rounded-full",
+ "object-cover",
+ "md:h-9",
+ "md:w-9",
+ ),
+
+ chevron: clsx(
+ "hidden",
+ "h-4",
+ "w-4",
+ "text-muted-foreground",
+ "transition-transform",
+ "duration-200",
+ "sm:block",
+ ),
+
+ mobileDrawerOverlayWrapper: clsx("fixed", "inset-0", "z-50", "lg:hidden"),
+
+ mobileDrawerBackdrop: clsx(
+ "absolute",
+ "inset-0",
+ "bg-black/40",
+ "transition-opacity",
+ ),
+
+ mobileDrawerPanel: clsx(
+ "absolute",
+ "left-0",
+ "top-0",
+ "h-full",
+ "w-[280px]",
+ "bg-background",
+ "shadow-xl",
+ "transition-transform",
+ "duration-300",
+ ),
+
+ mobileDrawerHeader: clsx(
+ "flex",
+ "items-center",
+ "justify-between",
+ "border-b",
+ "border-border",
+ "p-4",
+ ),
+
+ mobileDrawerTitle: clsx("font-semibold", "text-foreground"),
+
+ mobileDrawerCloseBtn: clsx("rounded-lg", "p-2", "hover:bg-muted"),
+
+ mobileDrawerMenu: clsx("flex", "flex-col", "p-4", "items-start"),
+
+ mobileDrawerMenuItem: clsx(
+ "rounded-lg",
+ "px-3",
+ "py-3",
+ "text-left",
+ "font-medium",
+ "text-foreground/80",
+ "hover:bg-muted",
+ ),
+
+ mobileDrawerDivider: clsx("my-3", "border-border"),
+};
diff --git a/apps/frontend/src/components/global/locationform.tsx b/apps/frontend/src/components/global/locationform.tsx
new file mode 100644
index 000000000..a117ccfb4
--- /dev/null
+++ b/apps/frontend/src/components/global/locationform.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { MapPin, Search } from "lucide-react";
+
+import { venueStyle } from "@/features/venues/styles/VenueStyle";
+
+export default function LocationForm() {
+ return (
+
+ {/* Header */}
+
+
+
+
+
+ 5. Location
+
+
+
+ Search or pin the exact location of your venue
+
+
+
+
+ {/* Search */}
+
+
+
+ {/* Map */}
+
+
+
+ OpenLayers Map Here
+
+
+
+
+
+ Drag the marker to adjust the exact location
+
+
+ {/* Coordinates */}
+
+
+ {/* Address */}
+
+
+ Address
+
+
+
+
+ {/* Landmark */}
+
+
+ Landmark (Optional)
+
+
+
+
+ );
+}
diff --git a/apps/frontend/src/components/global/login/Login.tsx b/apps/frontend/src/components/global/login/Login.tsx
new file mode 100644
index 000000000..7bbe6fcda
--- /dev/null
+++ b/apps/frontend/src/components/global/login/Login.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import {
+ ArrowLeft,
+ CheckCircle2,
+ Mail,
+ ShieldCheck,
+} from "lucide-react";
+import {
+ Dialog,
+ DialogContent,
+ DialogTitle,
+} from "@/components/ui/dialog/Dialog";
+
+import { LoginStatus } from "@/lib/Constants";
+import NxtImage from "next/image";
+import googleIcon from "../../../../public/assets/images/login/google-color.svg";
+import { loginStyle } from "./LoginStyle";
+import { useState } from "react";
+
+type LoginModalProps = {
+ isOpen: boolean;
+ onOpenChange: (open: boolean) => void;
+};
+
+export default function LoginModal({
+ isOpen,
+ onOpenChange,
+}: LoginModalProps) {
+ const [
+ step, setStep
+ ] = useState
(LoginStatus.LOGIN);
+
+ const [
+ value, setValue
+ ] = useState("");
+
+ const handleContinue = () => {
+ if (!value) return;
+ setStep(LoginStatus.OTP);
+ };
+
+ const handleVerify = () => {
+ setStep(LoginStatus.SUCCESS);
+
+ setTimeout(() => {
+ onOpenChange(false);
+ setStep(LoginStatus.LOGIN);
+ }, 2000);
+ };
+
+ return (
+
+
+
+ {/* LOGIN STEP */}
+ {step === LoginStatus.LOGIN && (
+
+
+
+
+
+ Welcome Back
+
+
+
+ Login or sign in to continue
+
+
+ {/* Google */}
+
+
+
+
+
+
+ Enter your mobile number or email
+
+
+
+
+
+
+ Continue
+
+
+
+ We'll send a one-time password (OTP)
+
+
+
+
+
{
+ return setStep(LoginStatus.LOGIN);
+ }}
+ className={loginStyle.backButton}
+ >
+
+
+
+
+
+ Enter OTP
+
+
+
+ We sent a 6-digit OTP
+
+
+
+ {[
+ 1, 2, 3, 4, 5, 6
+ ].map((item) => {
+ return (
+
+
+
+ Verify & Login
+
+
+
+ Resend OTP
+
+
+
+
+
+
+
+ Login Successful!
+
+
+
+ Welcome back ๐
+
+
+
+
+
+ Redirecting...
+
+
+
+
+ );
+}
diff --git a/apps/frontend/src/components/global/login/LoginStyle.ts b/apps/frontend/src/components/global/login/LoginStyle.ts
new file mode 100644
index 000000000..f41aab1ea
--- /dev/null
+++ b/apps/frontend/src/components/global/login/LoginStyle.ts
@@ -0,0 +1,257 @@
+import clsx from "clsx";
+
+export const loginStyle = {
+ dialogContent: clsx(
+ "max-w-md",
+ "rounded-3xl",
+ "border-0",
+ "p-0",
+ "overflow-hidden",
+ "bg-dialog-bg-color",
+ "text-primary-text-color"
+ ),
+
+ loginStep: clsx("p-8"),
+
+ otpStep: clsx("p-8"),
+
+ successStep: clsx("p-10", "text-center"),
+
+ iconContainer: clsx(
+ "flex",
+ "h-20",
+ "w-20",
+ "items-center",
+ "justify-center",
+ "rounded-full",
+ "bg-teal-50",
+ "dark:bg-teal-950/30"
+ ),
+
+ successIconContainer: clsx(
+ "flex",
+ "h-24",
+ "w-24",
+ "items-center",
+ "justify-center",
+ "rounded-full",
+ "bg-teal-50",
+ "dark:bg-teal-950/30"
+ ),
+
+ icon: clsx(
+ "h-10",
+ "w-10",
+ "text-teal-600",
+ "dark:text-teal-400"
+ ),
+
+ successIcon: clsx(
+ "h-12",
+ "w-12",
+ "text-teal-600",
+ "dark:text-teal-400"
+ ),
+
+ title: clsx(
+ "mt-6",
+ "text-center",
+ "text-3xl",
+ "font-bold",
+ "text-primary-text-color"
+ ),
+
+ otpTitle: clsx(
+ "mt-5",
+ "text-center",
+ "text-3xl",
+ "font-bold",
+ "text-primary-text-color"
+ ),
+
+ successTitle: clsx(
+ "mt-6",
+ "text-3xl",
+ "font-bold",
+ "text-primary-text-color"
+ ),
+
+ subtitle: clsx(
+ "mt-2",
+ "text-center",
+ "text-sm",
+ "text-tertiary-text-color"
+ ),
+
+ successSubtitle: clsx(
+ "mt-2",
+ "text-tertiary-text-color"
+ ),
+
+ googleButton: clsx(
+ "mt-6",
+ "flex",
+ "h-12",
+ "w-full",
+ "items-center",
+ "justify-center",
+ "gap-3",
+ "rounded-xl",
+ "border",
+ "border-login-btn-border",
+ "bg-login-btn-bg",
+ "text-primary-text-color",
+ "font-medium",
+ "transition",
+ "hover:bg-muted/50"
+ ),
+
+ googleIcon: clsx("h-5", "w-5"),
+
+ separatorWrapper: clsx(
+ "my-6",
+ "flex",
+ "items-center",
+ "gap-4"
+ ),
+
+ separatorLine: clsx(
+ "h-px",
+ "flex-1",
+ "bg-sign-separator-color"
+ ),
+
+ separatorText: clsx(
+ "text-sm",
+ "text-tertiary-text-color"
+ ),
+
+ formPrompt: clsx(
+ "mb-3",
+ "text-center",
+ "text-sm",
+ "text-tertiary-text-color"
+ ),
+
+ inputWrapper: clsx("relative"),
+
+ inputIcon: clsx(
+ "absolute",
+ "left-4",
+ "top-1/2",
+ "h-5",
+ "w-5",
+ "-translate-y-1/2",
+ "text-tertiary-text-color"
+ ),
+
+ inputField: clsx(
+ "h-14",
+ "w-full",
+ "rounded-xl",
+ "border",
+ "border-login-btn-border",
+ "bg-textfield-bg-color",
+ "pl-12",
+ "pr-4",
+ "text-primary-text-color",
+ "outline-none",
+ "placeholder:text-tertiary-text-color/60",
+ "focus:border-teal-600"
+ ),
+
+ primaryButton: clsx(
+ "mt-4",
+ "h-14",
+ "w-full",
+ "rounded-xl",
+ "bg-teal-600",
+ "font-semibold",
+ "text-white",
+ "transition",
+ "hover:bg-teal-700",
+ "dark:bg-teal-600",
+ "dark:hover:bg-teal-500"
+ ),
+
+ otpButton: clsx(
+ "mt-8",
+ "h-14",
+ "w-full",
+ "rounded-xl",
+ "bg-teal-600",
+ "font-semibold",
+ "text-white",
+ "transition",
+ "hover:bg-teal-700",
+ "dark:bg-teal-600",
+ "dark:hover:bg-teal-500"
+ ),
+
+ disclaimer: clsx(
+ "mt-4",
+ "text-center",
+ "text-xs",
+ "text-tertiary-text-color"
+ ),
+
+ resendOtp: clsx(
+ "mt-4",
+ "text-center",
+ "text-sm",
+ "text-teal-600",
+ "dark:text-teal-400",
+ "hover:underline",
+ "cursor-pointer"
+ ),
+
+ backButton: clsx(
+ "mb-4",
+ "text-primary-text-color",
+ "hover:text-teal-600",
+ "transition"
+ ),
+
+ otpInputsContainer: clsx(
+ "mt-8",
+ "flex",
+ "justify-center",
+ "gap-3"
+ ),
+
+ otpInputItem: clsx(
+ "h-12",
+ "w-12",
+ "rounded-xl",
+ "border",
+ "border-login-btn-border",
+ "bg-textfield-bg-color",
+ "text-primary-text-color",
+ "text-center",
+ "text-lg",
+ "font-semibold",
+ "outline-none",
+ "focus:border-teal-600"
+ ),
+
+ progressBarContainer: clsx(
+ "mt-8",
+ "h-2",
+ "overflow-hidden",
+ "rounded-full",
+ "bg-secondary-button-bg-color"
+ ),
+
+ progressBarFill: clsx(
+ "h-full",
+ "w-full",
+ "animate-pulse",
+ "bg-teal-600"
+ ),
+
+ redirectText: clsx(
+ "mt-4",
+ "text-sm",
+ "text-tertiary-text-color"
+ )
+};
diff --git a/apps/frontend/src/components/global/mappanel.tsx b/apps/frontend/src/components/global/mappanel.tsx
new file mode 100644
index 000000000..e0229f11f
--- /dev/null
+++ b/apps/frontend/src/components/global/mappanel.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+export default function MapPanel() {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/apps/frontend/src/components/global/microcard.tsx b/apps/frontend/src/components/global/microcard.tsx
new file mode 100644
index 000000000..d0bebffeb
--- /dev/null
+++ b/apps/frontend/src/components/global/microcard.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Heart, MapPin } from "lucide-react";
+import Image from "next/image";
+
+interface SavedVenueCardProps {
+ image: string;
+ name: string;
+ location: string;
+ price: number;
+ isFavourite?: boolean;
+}
+
+export default function SavedVenueCard({
+ image,
+ name,
+ location,
+ price,
+ isFavourite = true,
+}: SavedVenueCardProps) {
+ return (
+
+
+ {/* Image */}
+
+
+
+ )}
+
+
+ {/* Content */}
+
+
+ {name}
+
+
+
+
+
+
+ โน{price.toLocaleString()}
+
+ / day
+
+
+
+
+
+
+ {status}
+
+
+
+
+
+
{name}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Edit
+
+
+
+ View Bookings
+
+
+
+
+
+ {/* Header */}
+
+
+
+ Exclusive Offers
+
+
+
+ Handpicked deals for your next celebration
+
+
+
+
+ View All
+
+
+
+
+ {/* Badge */}
+
+
+ {offer.badge}
+
+
+
+ {/* Title + Discount */}
+
+
+
+
+ {offer.title}
+
+
+
+ {offer.description}
+
+
+
+
+
+ {offer.discount}
+
+
+
+ OFF
+
+
+
+
+
+ {/* Bottom Row */}
+
+
+
+ {offer.venues}
+
+
+
+ Ends Soon
+
+
+
+ Explore
+
+
+
+
+
+
+
+ {offers.map((_, index) => {
+ return (
+ {
+ return setActive(index);
+ }}
+ className={`rounded-full transition-all duration-300 ${
+ active === index
+ ? "h-1.5 w-6 bg-teal-700"
+ : "h-1.5 w-1.5 bg-border"
+ }`}
+ />
+ );
+ })}
+
+
+
+
+ );
+}
+// "use client";
+
+// import { useEffect, useState } from "react";
+// import { ArrowRight } from "lucide-react";
+
+// const offers = [
+// {
+// id: 1,
+// badge: "LIMITED TIME",
+// title: "Wedding Season Special",
+// description:
+// "Save up to 25% on premium banquet halls, resorts and destination wedding venues.",
+// discount: "25%",
+// venues: "120+ Venues",
+// bg: "from-teal-700 via-teal-600 to-cyan-500",
+// },
+// {
+// id: 2,
+// badge: "POPULAR",
+// title: "Birthday Celebration Deals",
+// description:
+// "Flat โน5,000 OFF on selected birthday venues and party packages.",
+// discount: "โน5K",
+// venues: "85+ Venues",
+// bg: "from-rose-600 via-pink-500 to-orange-400",
+// },
+// {
+// id: 3,
+// badge: "CORPORATE",
+// title: "Corporate Event Packages",
+// description:
+// "Special pricing for team outings, conferences and annual meetings.",
+// discount: "15%",
+// venues: "60+ Venues",
+// bg: "from-slate-800 via-slate-700 to-slate-600",
+// },
+// {
+// id: 4,
+// badge: "WEEKEND",
+// title: "Weekend Specials",
+// description:
+// "Exclusive discounts on premium venues every Friday to Sunday.",
+// discount: "10%",
+// venues: "90+ Venues",
+// bg: "from-violet-700 via-purple-600 to-fuchsia-500",
+// },
+// ];
+
+// export default function OffersSection() {
+// const [active, setActive] = useState(0);
+
+// useEffect(() => {
+// const interval = setInterval(() => {
+// setActive((prev) => (prev + 1) % offers.length);
+// }, 5000);
+
+// return () => clearInterval(interval);
+// }, []);
+
+// const offer = offers[active];
+
+// return (
+//
+
+// {/* Header */}
+//
+//
+//
+// Exclusive Offers
+//
+
+//
+// Handpicked deals for your next celebration
+//
+//
+
+//
+// View All
+//
+//
+//
+
+// {/* Left */}
+//
+
+//
+// {offer.badge}
+//
+
+//
+// {offer.title}
+//
+
+//
+// {offer.description}
+//
+
+//
+
+//
+// {offer.venues}
+//
+
+//
+// Ends Soon
+//
+
+//
+
+//
+// Explore Venues
+//
+
+//
+
+// {/* Right */}
+//
+
+//
+// {offer.discount}
+//
+
+//
+// OFF
+//
+
+//
+
+//
+//
+
+// {offers.map((_, index) => (
+// setActive(index)}
+// className={`h-2 rounded-full transition-all duration-300 ${
+// active === index
+// ? "w-8 bg-teal-700"
+// : "w-2 bg-slate-300"
+// }`}
+// />
+// ))}
+
+//
+
+//
+// );
+// }
diff --git a/apps/frontend/src/components/global/performancemonitor/PerformanceMonitor.tsx b/apps/frontend/src/components/global/performancemonitor/PerformanceMonitor.tsx
new file mode 100644
index 000000000..a2de9d4f3
--- /dev/null
+++ b/apps/frontend/src/components/global/performancemonitor/PerformanceMonitor.tsx
@@ -0,0 +1,467 @@
+"use client";
+
+import {
+ Activity,
+ ChevronDown,
+ Cpu,
+ Gauge,
+ HardDrive,
+ Monitor,
+ Route,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+
+import { disableDevMode } from "@/store/AppConfigReducer";
+import { useDispatch } from "react-redux";
+
+interface Timings {
+ dns: number;
+ tcp: number;
+ ttfb: number;
+ domReady: number;
+ loadTime: number;
+}
+
+interface RouteEntry {
+ path: string;
+ renderMs: number;
+}
+
+interface MemoryInfo {
+ used: string;
+ total: string;
+ pct: number;
+}
+function Metric({
+ label,
+ value,
+ className = "",
+}: {
+ label: string;
+ value: string | number;
+ className?: string;
+}) {
+ return (
+
+
+ {label}
+
+
+
+ {value}
+
+
+ );
+}
+
+export default function PerformanceMonitor() {
+ const dispatch = useDispatch();
+ const pathname = usePathname();
+ const searchParams = useSearchParams();
+
+ const route = useMemo(() => {
+ const qs = searchParams.toString();
+ return qs ? `${pathname}?${qs}` : pathname;
+ }, [
+ pathname, searchParams
+ ]);
+
+ const [
+ collapsed, setCollapsed
+ ] = useState(false);
+
+ const [
+ timings, setTimings
+ ] = useState({
+ dns: 0,
+ tcp: 0,
+ ttfb: 0,
+ domReady: 0,
+ loadTime: 0,
+ });
+
+ const [
+ fps, setFps
+ ] = useState(0);
+
+ const [
+ resolution, setResolution
+ ] = useState("");
+
+ const [
+ memory, setMemory
+ ] = useState(null);
+
+ const [
+ navCount, setNavCount
+ ] = useState(0);
+
+ const [
+ rootHistory, setHistory
+ ] = useState([
+ ]);
+
+ const frameRef = useRef(0);
+ const lastTimeRef = useRef(0);
+
+ useEffect(() => {
+ const saved =
+ localStorage.getItem("perf-monitor-collapsed") === "true";
+
+ setCollapsed(saved);
+ }, [
+ ]);
+
+ const toggle = () => {
+ if (!collapsed) {
+ dispatch(disableDevMode());
+ }
+ const next = !collapsed;
+
+ setCollapsed(next);
+
+ localStorage.setItem(
+ "perf-monitor-collapsed",
+ String(next)
+ );
+ };
+
+ useEffect(() => {
+ const nav =
+ performance.getEntriesByType(
+ "navigation"
+ )[ 0 ] as PerformanceNavigationTiming;
+
+ if (!nav) return;
+
+ setTimings({
+ dns: Math.round(
+ nav.domainLookupEnd - nav.domainLookupStart
+ ),
+ tcp: Math.round(
+ nav.connectEnd - nav.connectStart
+ ),
+ ttfb: Math.round(
+ nav.responseStart - nav.requestStart
+ ),
+ domReady: Math.round(
+ nav.domContentLoadedEventEnd
+ ),
+ loadTime: Math.round(nav.loadEventEnd),
+ });
+ }, [
+ ]);
+
+ useEffect(() => {
+ lastTimeRef.current = performance.now();
+
+ let raf = 0;
+
+ const loop = () => {
+ frameRef.current++;
+
+ const now = performance.now();
+
+ if (now - lastTimeRef.current >= 1000) {
+ setFps(
+ Math.round(
+ (frameRef.current * 1000) /
+ (now - lastTimeRef.current)
+ )
+ );
+
+ frameRef.current = 0;
+ lastTimeRef.current = now;
+ }
+
+ raf = requestAnimationFrame(loop);
+ };
+
+ raf = requestAnimationFrame(loop);
+
+ return () => {
+ return cancelAnimationFrame(raf);
+ };
+ }, [
+ ]);
+
+ // -----------------------------
+ // Memory
+ // -----------------------------
+ useEffect(() => {
+ const timer = setInterval(() => {
+ const perf = performance as any;
+
+ if (!perf.memory) return;
+
+ const used =
+ perf.memory.usedJSHeapSize /
+ 1024 /
+ 1024;
+
+ const total =
+ perf.memory.totalJSHeapSize /
+ 1024 /
+ 1024;
+
+ setMemory({
+ used: used.toFixed(2),
+ total: total.toFixed(2),
+ pct: Math.round((used / total) * 100),
+ });
+ }, 1000);
+
+ return () => {
+ return clearInterval(timer);
+ };
+ }, [
+ ]);
+
+ // -----------------------------
+ // Screen size
+ // -----------------------------
+ useEffect(() => {
+ const update = () => {
+ setResolution(
+ `${window.innerWidth} ร ${window.innerHeight}`
+ );
+ };
+
+ update();
+
+ window.addEventListener("resize", update);
+
+ return () => {
+ return window.removeEventListener(
+ "resize",
+ update
+ );
+ };
+ }, [
+ ]);
+
+ // -----------------------------
+ // Route render tracking
+ // -----------------------------
+ useEffect(() => {
+ const start = performance.now();
+
+ let cancelled = false;
+
+ const complete = () => {
+ if (cancelled) return;
+
+ const renderMs = Math.round(
+ performance.now() - start
+ );
+
+ setHistory((prev) => {
+ return [
+ { path: route, renderMs },
+ ...prev.slice(0, 4),
+ ];
+ });
+
+ setNavCount((prev) => {
+ return prev + 1;
+ });
+ };
+
+ const id = requestAnimationFrame(() => {
+ requestAnimationFrame(complete);
+ });
+
+ return () => {
+ cancelled = true;
+ cancelAnimationFrame(id);
+ };
+ }, [
+ route
+ ]);
+
+ const fpsColor =
+ fps >= 55
+ ? "text-green-400"
+ : fps >= 30
+ ? "text-yellow-400"
+ : "text-red-400";
+
+ const memoryColor =
+ memory?.pct && memory.pct > 85
+ ? "bg-red-500"
+ : memory?.pct && memory.pct > 60
+ ? "bg-yellow-500"
+ : "bg-green-500";
+
+ if (collapsed) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ {/* HEADER */}
+
+
+
+
+ PERFORMANCE
+
+
+
+
+
+
+
+
+ {/* NETWORK */}
+
+
+
+ Network
+
+
+
+
+ {/* MEMORY */}
+
+ {memory && (
+
+ )}
+
+ {/* RENDER */}
+
+
+
+ Rendering
+
+
+
+
+ {/* ROUTES */}
+
+
+
+
+ Route History ({navCount})
+
+
+
+ {rootHistory.map((item, index) => {
+ return (
+
+
+ {item.path}
+
+
+
+ {item.renderMs} ms
+
+
+ );
+ })}
+
+
+
+ {/* Header */}
+
+
+ 4. Photos
+
+
+
+
+ {/* Cover Image */}
+
+
+
+
+ Upload Cover Image
+
+
+
+ Recommended: 1280 ร 720 px
+
+
+
+ {/* Gallery Images */}
+
+
+ Additional Photos
+
+
+
+ {[
+ 1,
+ 2,
+ 3,
+ 4,
+ 5,
+ ].map((item) => {
+ return (
+
+
+ );
+ })}
+
+
+
+ {/* Upload Hint */}
+
+ Upload up to 10 high-quality venue photos.
+
+
+
| null>(null);
+ const handleVersionClick = () => {
+
+
+ clickCountRef.current += 1;
+
+ if (clickTimerRef.current) {
+ clearTimeout(clickTimerRef.current);
+ }
+
+ if (clickCountRef.current >= DEV_CLICK_THRESHOLD) {
+ clickCountRef.current = 0;
+ dispatch(enableDevMode());
+ return;
+ }
+
+ clickTimerRef.current = setTimeout(() => {
+ clickCountRef.current = 0;
+ }, DEV_CLICK_TIMEOUT_MS);
+ };
+
+
+ return (
+
+ {/* Decorative Background */}
+
+
+
+
+
+
+
+
+ {/* Left */}
+
+ {/* Avatar */}
+
+
+
+
+
+ {/* Info */}
+
+
+
+ Vishnu V
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Right */}
+
+
+ Edit Profile
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+
+
+ My Venues
+
+
+
+ Venues you have listed
+
+
+
+
+
+ View All Venues โ
+
+
+
+ {/* Venue List */}
+
+ {venues.map((venue) => {
+ return (
+
+
+
+
+
+ {venue.name}
+
+
+
+ {venue.location}
+
+
+
+
+ {venue.status}
+
+
+
+
+ );
+ })}
+
+
+ {/* Header */}
+
+
+
+
+
+
+
+ Revenue Summary
+
+
+
+ Overview of your earnings
+
+
+
+
+
+ This Month
+
+
+
+ {/* Revenue */}
+
+
+ โน1,24,500
+
+
+
+ Total Revenue
+
+
+
+ โ 18% from last month
+
+
+
+ {/* Stats */}
+
+
+
+ โน92,000
+
+
+
+ Completed
+
+
+
+
+
+ โน20,500
+
+
+
+ Upcoming
+
+
+
+
+
+ โน12,000
+
+
+
+ Pending Payout
+
+
+
+
+ {/* Scrollable Content */}
+
+
+ {menuItems.map((item, index) => {
+ const Icon = item.icon;
+
+ return (
+ {
+ naviagateToScreen(item.path);
+ }}
+ className={cn(
+ sideBarStyle.menuItemButton,
+ item.active
+ ? sideBarStyle.menuItemActive
+ : sideBarStyle.menuItemInactive
+ )}
+ >
+
+
+
+ );
+ })}
+
+
+ {/* CTA Card */}
+
+
+
+
+
+
+ List your venue
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/frontend/src/components/global/sidebar/SideBarStyle.ts b/apps/frontend/src/components/global/sidebar/SideBarStyle.ts
new file mode 100644
index 000000000..4dd0803be
--- /dev/null
+++ b/apps/frontend/src/components/global/sidebar/SideBarStyle.ts
@@ -0,0 +1,124 @@
+import clsx from "clsx";
+
+export const sideBarStyle = {
+ aside: clsx(
+ "sticky",
+ "top-[72px]",
+ "hidden",
+ "h-[calc(100vh-72px)]",
+ "w-[240px]",
+ "flex-col",
+ "border-r",
+ "border-sidebar-border",
+ "bg-sidebar",
+ "md:flex"
+ ),
+ scrollableContent: clsx(
+ "flex-1",
+ "overflow-y-auto",
+ "px-3",
+ "py-5"
+ ),
+ nav: clsx("space-y-1"),
+ menuItemButton: clsx(
+ "flex",
+ "w-full",
+ "items-center",
+ "justify-start",
+ "gap-4",
+ "rounded-xl",
+ "px-4",
+ "py-4",
+ "text-left",
+ "transition"
+ ),
+ menuItemActive: clsx(
+ "bg-sidebar-accent",
+ "text-sidebar-accent-foreground"
+ ),
+ menuItemInactive: clsx(
+ "text-sidebar-foreground",
+ "hover:bg-sidebar-accent",
+ "hover:text-sidebar-accent-foreground"
+ ),
+ menuItemIcon: clsx(
+ "h-5",
+ "w-5",
+ "shrink-0"
+ ),
+ menuItemLabel: clsx(
+ "text-[12px]",
+ "font-medium"
+ ),
+ ctaCard: clsx(
+ "mt-5",
+ "overflow-hidden",
+ "rounded-lg",
+ "border",
+ "border-border",
+ "bg-card"
+ ),
+ ctaImageWrapper: clsx(
+ "px-3",
+ "pt-3"
+ ),
+ ctaImage: clsx(
+ "mx-auto",
+ "h-[140px]",
+ "w-auto",
+ "object-contain",
+ "lg:h-[170px]"
+ ),
+ ctaContent: clsx("px-4"),
+ ctaTitle: clsx(
+ "text-sm",
+ "font-semibold",
+ "leading-tight",
+ "text-sidebar-foreground"
+ ),
+ ctaDescription: clsx(
+ "mt-2",
+ "text-xs",
+ "leading-relaxed",
+ "text-muted-foreground"
+ ),
+ ctaButtonWrapper: clsx("p-4"),
+ ctaButton: clsx(
+ "w-full",
+ "rounded-md",
+ "bg-teal-700",
+ "py-2",
+ "text-xs",
+ "font-medium",
+ "text-white",
+ "transition",
+ "hover:bg-teal-800"
+ ),
+ footer: clsx(
+ "border-t",
+ "border-sidebar-border",
+ "p-4"
+ ),
+ footerButton: clsx(
+ "flex",
+ "w-full",
+ "items-center",
+ "justify-center",
+ "gap-2",
+ "rounded-xl",
+ "border",
+ "border-sidebar-border",
+ "px-4",
+ "py-3",
+ "text-sm",
+ "font-medium",
+ "text-sidebar-foreground",
+ "transition",
+ "hover:bg-sidebar-accent",
+ "hover:text-sidebar-accent-foreground"
+ ),
+ footerButtonIcon: clsx(
+ "h-4",
+ "w-4"
+ )
+};
diff --git a/apps/frontend/src/components/global/statcard.tsx b/apps/frontend/src/components/global/statcard.tsx
new file mode 100644
index 000000000..8229fef27
--- /dev/null
+++ b/apps/frontend/src/components/global/statcard.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+interface StatsCardProps {
+ icon: React.ReactNode;
+ title: string;
+ value: string | number;
+ subText: string;
+ subTextColor?: string;
+}
+
+const StatsCard = ({
+ icon,
+ title,
+ value,
+ subText,
+ subTextColor = "text-green-600",
+}: StatsCardProps) => {
+ return (
+
+
+
+ {icon}
+
+
+
+
{title}
+
+
+ {value}
+
+
+
+ {subText}
+
+
+
+
+ {/* Header */}
+
+
+ Recent Bookings
+
+
+
+ View All Bookings
+ โ
+
+
+
+ {/* Table */}
+
+
+
+
+
+ Customer
+
+
+
+ Venue
+
+
+
+ Date
+
+
+
+ Guests
+
+
+
+ Amount
+
+
+
+ Status
+
+
+
+ Action
+
+
+
+
+
+ {bookings.map((booking) => (
+
+ {/* Customer */}
+
+
+
+
+
+
+ {booking.customer}
+
+
+
+ {booking.phone}
+
+
+
+
+ {/* Venue */}
+
+
+ {booking.venue}
+
+
+
+ {booking.location}
+
+
+
+ {/* Date */}
+
+
+ {booking.date}
+
+
+
+ {booking.time}
+
+
+
+ {/* Guests */}
+
+
+ {booking.guests}
+
+
+
+ {/* Amount */}
+
+ {booking.amount}
+
+
+ {/* Status */}
+
+
+ {booking.status}
+
+
+
+ {/* Action */}
+
+
+
+ View Details
+
+
+
+
+
+
+
+ ))}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/frontend/src/components/global/tipcard.tsx b/apps/frontend/src/components/global/tipcard.tsx
new file mode 100644
index 000000000..95342e977
--- /dev/null
+++ b/apps/frontend/src/components/global/tipcard.tsx
@@ -0,0 +1,26 @@
+import { Star } from "lucide-react";
+
+export default function ProTipCard() {
+ return (
+
+
+
+ Pro Tip
+
+
+
+
+ Keep your venue calendar updated to get more
+ bookings.
+
+
+
+ Update Availability โ
+
+
+
+
+
+ {/* Mobile */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Tablet + Desktop */}
+
+
+ {/* Filters Grid */}
+
+
+
+
+
+ {filters.map((filter) => {
+ const Icon = filter.icon;
+
+ return (
+
+
+ {filter.label}
+
+
+
+ );
+ })}
+
+
+ {/* Right Section */}
+
+
+
+
+
+ Sort by:
+
+
+
+ Recommended
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+// "use client";
+
+// import {
+// SlidersHorizontal,
+// IndianRupee,
+// Users,
+// Building2,
+// CalendarDays,
+// MapPin,
+// Star,
+// LayoutGrid,
+// List,
+// ChevronDown,
+// } from "lucide-react";
+
+// export default function VenueFiltersBar() {
+// const filters = [
+// {
+// label: "Price",
+// icon: IndianRupee,
+// },
+// {
+// label: "Capacity",
+// icon: Users,
+// },
+// {
+// label: "Amenities",
+// icon: Building2,
+// },
+// {
+// label: "Availability",
+// icon: CalendarDays,
+// },
+// {
+// label: "Distance",
+// icon: MapPin,
+// },
+// {
+// label: "Rating 4.0+",
+// icon: Star,
+// },
+// ];
+
+// return (
+//
+
+//
+
+// {/* Left Filters */}
+//
+
+// {/* Main Filter Button */}
+//
+//
+
+// {filters.map((filter) => {
+// const Icon = filter.icon;
+
+// return (
+//
+// {filter.label}
+
+//
+// );
+// })}
+//
+
+// {/* Right Side */}
+//
+
+//
+
+//
+// Sort by:
+//
+
+//
+// Recommended
+//
+
+//
+
+//
+
+//
+//
+
+//
+//
+//
+
+//
+
+//
+
+//
+// );
+// }
diff --git a/apps/frontend/src/components/global/venueheader.tsx b/apps/frontend/src/components/global/venueheader.tsx
new file mode 100644
index 000000000..f56f687c2
--- /dev/null
+++ b/apps/frontend/src/components/global/venueheader.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { ArrowLeft } from "lucide-react";
+
+export default function VenueHeader() {
+ return (
+
+ {/* Breadcrumb */}
+
+ Dashboard
+
+ /
+
+
+ Add New Venue
+
+
+
+ {/* Title */}
+
+ Add New Venue
+
+
+ {/* Description */}
+
+ Fill in the details below to list your venue and start receiving
+ bookings.
+
+
+ {/* Header */}
+
+
+
+
+
+
+
+ Venue Statistics
+
+
+
+ Performance of your venues
+
+
+
+
+
+ This Month
+
+
+
+ {/* Stats Grid */}
+
+ {stats.map((stat) => (
+
+
+ {stat.icon}
+
+
+
+ {stat.value}
+
+
+
+ {stat.title}
+
+
+ ))}
+
+
+
+ {/* Header */}
+
+
+
+
+ Explore by Venue Type
+
+
+
+ Discover venues tailored for every occasion
+
+
+
+
+
+
+
+
+ {categories.map((category) => {
+ const Icon = category.icon;
+
+ return (
+
+ {/* Icon */}
+
+
+
+ {/* Content */}
+
+
+
+ {category.title}
+
+
+
+ {category.subtitle}
+
+
+
+ );
+ })}
+
+
+ // Explore by Venue Type
+ //
+
+ //
+ // Discover venues tailored for every occasion
+ //
+ // 
+
+
+
+
+
+
+ 
+ 
+ 
+
+