tr]:last:border-b-0", className)}
+ {...props} />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (
+ |
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props} />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef(({ className, ...props }, ref) => (
+ | [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props} />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/epic-travel-complete/frontend/src/components/ui/tabs.jsx b/epic-travel-complete/frontend/src/components/ui/tabs.jsx
new file mode 100644
index 0000000..b674eb9
--- /dev/null
+++ b/epic-travel-complete/frontend/src/components/ui/tabs.jsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/epic-travel-complete/frontend/src/components/ui/textarea.jsx b/epic-travel-complete/frontend/src/components/ui/textarea.jsx
new file mode 100644
index 0000000..9a3276c
--- /dev/null
+++ b/epic-travel-complete/frontend/src/components/ui/textarea.jsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+ return (
+
+ );
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/epic-travel-complete/frontend/src/components/ui/toast.jsx b/epic-travel-complete/frontend/src/components/ui/toast.jsx
new file mode 100644
index 0000000..f8936f1
--- /dev/null
+++ b/epic-travel-complete/frontend/src/components/ui/toast.jsx
@@ -0,0 +1,85 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+ "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+ {
+ variants: {
+ variant: {
+ default: "border bg-background text-foreground",
+ destructive:
+ "destructive group border-destructive bg-destructive text-destructive-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
+ return (
+
+ );
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef(({ className, ...props }, ref) => (
+
+
+
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (
+
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction };
diff --git a/epic-travel-complete/frontend/src/components/ui/toaster.jsx b/epic-travel-complete/frontend/src/components/ui/toaster.jsx
new file mode 100644
index 0000000..892a53d
--- /dev/null
+++ b/epic-travel-complete/frontend/src/components/ui/toaster.jsx
@@ -0,0 +1,33 @@
+import { useToast } from "@/hooks/use-toast"
+import {
+ Toast,
+ ToastClose,
+ ToastDescription,
+ ToastProvider,
+ ToastTitle,
+ ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+ const { toasts } = useToast()
+
+ return (
+
+ {toasts.map(function ({ id, title, description, action, ...props }) {
+ return (
+
+
+ {title && {title}}
+ {description && (
+ {description}
+ )}
+
+ {action}
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/epic-travel-complete/frontend/src/components/ui/toggle-group.jsx b/epic-travel-complete/frontend/src/components/ui/toggle-group.jsx
new file mode 100644
index 0000000..618c02c
--- /dev/null
+++ b/epic-travel-complete/frontend/src/components/ui/toggle-group.jsx
@@ -0,0 +1,43 @@
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext({
+ size: "default",
+ variant: "default",
+})
+
+const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => (
+
+
+ {children}
+
+
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+ const context = React.useContext(ToggleGroupContext)
+
+ return (
+
+ {children}
+
+ );
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/epic-travel-complete/frontend/src/components/ui/toggle.jsx b/epic-travel-complete/frontend/src/components/ui/toggle.jsx
new file mode 100644
index 0000000..3908703
--- /dev/null
+++ b/epic-travel-complete/frontend/src/components/ui/toggle.jsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+ "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ outline:
+ "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+ },
+ size: {
+ default: "h-9 px-2 min-w-9",
+ sm: "h-8 px-1.5 min-w-8",
+ lg: "h-10 px-2.5 min-w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => (
+
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }
diff --git a/epic-travel-complete/frontend/src/components/ui/tooltip.jsx b/epic-travel-complete/frontend/src/components/ui/tooltip.jsx
new file mode 100644
index 0000000..5bf8828
--- /dev/null
+++ b/epic-travel-complete/frontend/src/components/ui/tooltip.jsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/epic-travel-complete/frontend/src/hooks/use-toast.js b/epic-travel-complete/frontend/src/hooks/use-toast.js
new file mode 100644
index 0000000..03accc0
--- /dev/null
+++ b/epic-travel-complete/frontend/src/hooks/use-toast.js
@@ -0,0 +1,155 @@
+"use client";
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+const actionTypes = {
+ ADD_TOAST: "ADD_TOAST",
+ UPDATE_TOAST: "UPDATE_TOAST",
+ DISMISS_TOAST: "DISMISS_TOAST",
+ REMOVE_TOAST: "REMOVE_TOAST"
+}
+
+let count = 0
+
+function genId() {
+ count = (count + 1) % Number.MAX_SAFE_INTEGER
+ return count.toString();
+}
+
+const toastTimeouts = new Map()
+
+const addToRemoveQueue = (toastId) => {
+ if (toastTimeouts.has(toastId)) {
+ return
+ }
+
+ const timeout = setTimeout(() => {
+ toastTimeouts.delete(toastId)
+ dispatch({
+ type: "REMOVE_TOAST",
+ toastId: toastId,
+ })
+ }, TOAST_REMOVE_DELAY)
+
+ toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state, action) => {
+ switch (action.type) {
+ case "ADD_TOAST":
+ return {
+ ...state,
+ toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+ };
+
+ case "UPDATE_TOAST":
+ return {
+ ...state,
+ toasts: state.toasts.map((t) =>
+ t.id === action.toast.id ? { ...t, ...action.toast } : t),
+ };
+
+ case "DISMISS_TOAST": {
+ const { toastId } = action
+
+ // ! Side effects ! - This could be extracted into a dismissToast() action,
+ // but I'll keep it here for simplicity
+ if (toastId) {
+ addToRemoveQueue(toastId)
+ } else {
+ state.toasts.forEach((toast) => {
+ addToRemoveQueue(toast.id)
+ })
+ }
+
+ return {
+ ...state,
+ toasts: state.toasts.map((t) =>
+ t.id === toastId || toastId === undefined
+ ? {
+ ...t,
+ open: false,
+ }
+ : t),
+ };
+ }
+ case "REMOVE_TOAST":
+ if (action.toastId === undefined) {
+ return {
+ ...state,
+ toasts: [],
+ }
+ }
+ return {
+ ...state,
+ toasts: state.toasts.filter((t) => t.id !== action.toastId),
+ };
+ }
+}
+
+const listeners = []
+
+let memoryState = { toasts: [] }
+
+function dispatch(action) {
+ memoryState = reducer(memoryState, action)
+ listeners.forEach((listener) => {
+ listener(memoryState)
+ })
+}
+
+function toast({
+ ...props
+}) {
+ const id = genId()
+
+ const update = (props) =>
+ dispatch({
+ type: "UPDATE_TOAST",
+ toast: { ...props, id },
+ })
+ const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+ dispatch({
+ type: "ADD_TOAST",
+ toast: {
+ ...props,
+ id,
+ open: true,
+ onOpenChange: (open) => {
+ if (!open) dismiss()
+ },
+ },
+ })
+
+ return {
+ id: id,
+ dismiss,
+ update,
+ }
+}
+
+function useToast() {
+ const [state, setState] = React.useState(memoryState)
+
+ React.useEffect(() => {
+ listeners.push(setState)
+ return () => {
+ const index = listeners.indexOf(setState)
+ if (index > -1) {
+ listeners.splice(index, 1)
+ }
+ };
+ }, [state])
+
+ return {
+ ...state,
+ toast,
+ dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId }),
+ };
+}
+
+export { useToast, toast }
diff --git a/epic-travel-complete/frontend/src/index.css b/epic-travel-complete/frontend/src/index.css
new file mode 100644
index 0000000..e839749
--- /dev/null
+++ b/epic-travel-complete/frontend/src/index.css
@@ -0,0 +1,115 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ margin: 0;
+ font-family:
+ -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family:
+ source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 0 0% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 0 0% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 0 0% 3.9%;
+ --primary: 0 0% 9%;
+ --primary-foreground: 0 0% 98%;
+ --secondary: 0 0% 96.1%;
+ --secondary-foreground: 0 0% 9%;
+ --muted: 0 0% 96.1%;
+ --muted-foreground: 0 0% 45.1%;
+ --accent: 0 0% 96.1%;
+ --accent-foreground: 0 0% 9%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 0 0% 89.8%;
+ --input: 0 0% 89.8%;
+ --ring: 0 0% 3.9%;
+ --chart-1: 12 76% 61%;
+ --chart-2: 173 58% 39%;
+ --chart-3: 197 37% 24%;
+ --chart-4: 43 74% 66%;
+ --chart-5: 27 87% 67%;
+ --radius: 0.5rem;
+ }
+ .dark {
+ --background: 0 0% 3.9%;
+ --foreground: 0 0% 98%;
+ --card: 0 0% 3.9%;
+ --card-foreground: 0 0% 98%;
+ --popover: 0 0% 3.9%;
+ --popover-foreground: 0 0% 98%;
+ --primary: 0 0% 98%;
+ --primary-foreground: 0 0% 9%;
+ --secondary: 0 0% 14.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 0 0% 14.9%;
+ --muted-foreground: 0 0% 63.9%;
+ --accent: 0 0% 14.9%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 0 0% 14.9%;
+ --input: 0 0% 14.9%;
+ --ring: 0 0% 83.1%;
+ --chart-1: 220 70% 50%;
+ --chart-2: 160 60% 45%;
+ --chart-3: 30 80% 55%;
+ --chart-4: 280 65% 60%;
+ --chart-5: 340 75% 55%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
+
+@layer base {
+ [data-debug-wrapper="true"] {
+ display: contents !important;
+ }
+
+ [data-debug-wrapper="true"] > * {
+ margin-left: inherit;
+ margin-right: inherit;
+ margin-top: inherit;
+ margin-bottom: inherit;
+ padding-left: inherit;
+ padding-right: inherit;
+ padding-top: inherit;
+ padding-bottom: inherit;
+ column-gap: inherit;
+ row-gap: inherit;
+ gap: inherit;
+ border-left-width: inherit;
+ border-right-width: inherit;
+ border-top-width: inherit;
+ border-bottom-width: inherit;
+ border-left-style: inherit;
+ border-right-style: inherit;
+ border-top-style: inherit;
+ border-bottom-style: inherit;
+ border-left-color: inherit;
+ border-right-color: inherit;
+ border-top-color: inherit;
+ border-bottom-color: inherit;
+ }
+}
diff --git a/epic-travel-complete/frontend/src/index.js b/epic-travel-complete/frontend/src/index.js
new file mode 100644
index 0000000..a27d249
--- /dev/null
+++ b/epic-travel-complete/frontend/src/index.js
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "@/index.css";
+import App from "@/App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+
+
+ ,
+);
diff --git a/epic-travel-complete/frontend/src/lib/utils.js b/epic-travel-complete/frontend/src/lib/utils.js
new file mode 100644
index 0000000..b20bf01
--- /dev/null
+++ b/epic-travel-complete/frontend/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+ return twMerge(clsx(inputs));
+}
diff --git a/epic-travel-complete/frontend/src/mockData.js b/epic-travel-complete/frontend/src/mockData.js
new file mode 100644
index 0000000..45524b9
--- /dev/null
+++ b/epic-travel-complete/frontend/src/mockData.js
@@ -0,0 +1,194 @@
+// Mock data for Epic Travel & Destinations
+
+export const destinations = [
+ {
+ id: '1',
+ name: 'Paris',
+ location: 'France',
+ description: 'Experience the romance and elegance of the City of Light. Visit iconic landmarks like the Eiffel Tower, Louvre Museum, and stroll along the Champs-Élysées.',
+ image: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=800&q=80',
+ category: 'City',
+ rating: 4.9,
+ price: 1299,
+ currency: 'USD'
+ },
+ {
+ id: '2',
+ name: 'Bali',
+ location: 'Indonesia',
+ description: 'Discover tropical paradise with stunning beaches, ancient temples, lush rice terraces, and vibrant culture in this Indonesian gem.',
+ image: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?w=800&q=80',
+ category: 'Beach',
+ rating: 4.8,
+ price: 899,
+ currency: 'USD'
+ },
+ {
+ id: '3',
+ name: 'Tokyo',
+ location: 'Japan',
+ description: 'Immerse yourself in the perfect blend of ancient tradition and cutting-edge technology in Japan\'s bustling capital city.',
+ image: 'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=800&q=80',
+ category: 'City',
+ rating: 4.9,
+ price: 1499,
+ currency: 'USD'
+ },
+ {
+ id: '4',
+ name: 'Santorini',
+ location: 'Greece',
+ description: 'Marvel at breathtaking sunsets, whitewashed buildings, and crystal-clear waters in this stunning Greek island paradise.',
+ image: 'https://images.unsplash.com/photo-1613395877344-13d4a8e0d49e?w=800&q=80',
+ category: 'Beach',
+ rating: 4.9,
+ price: 1199,
+ currency: 'USD'
+ },
+ {
+ id: '5',
+ name: 'Iceland',
+ location: 'Iceland',
+ description: 'Witness the Northern Lights, explore glaciers, geysers, and volcanic landscapes in this land of fire and ice.',
+ image: 'https://images.unsplash.com/photo-1504829857797-ddff29c27927?w=800&q=80',
+ category: 'Adventure',
+ rating: 4.8,
+ price: 1699,
+ currency: 'USD'
+ },
+ {
+ id: '6',
+ name: 'Dubai',
+ location: 'UAE',
+ description: 'Experience luxury and innovation in the desert with world-class shopping, stunning architecture, and endless entertainment.',
+ image: 'https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=800&q=80',
+ category: 'City',
+ rating: 4.7,
+ price: 1399,
+ currency: 'USD'
+ },
+ {
+ id: '7',
+ name: 'Maldives',
+ location: 'Maldives',
+ description: 'Relax in overwater bungalows, dive in pristine coral reefs, and enjoy the ultimate tropical island getaway.',
+ image: 'https://images.unsplash.com/photo-1514282401047-d79a71a590e8?w=800&q=80',
+ category: 'Beach',
+ rating: 5.0,
+ price: 2199,
+ currency: 'USD'
+ },
+ {
+ id: '8',
+ name: 'New York',
+ location: 'USA',
+ description: 'Explore the city that never sleeps with iconic landmarks, world-class museums, Broadway shows, and diverse neighborhoods.',
+ image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?w=800&q=80',
+ category: 'City',
+ rating: 4.8,
+ price: 1099,
+ currency: 'USD'
+ },
+ {
+ id: '9',
+ name: 'Machu Picchu',
+ location: 'Peru',
+ description: 'Trek to the ancient Incan citadel nestled high in the Andes Mountains, one of the New Seven Wonders of the World.',
+ image: 'https://images.unsplash.com/photo-1587595431973-160d0d94add1?w=800&q=80',
+ category: 'Adventure',
+ rating: 4.9,
+ price: 1299,
+ currency: 'USD'
+ },
+ {
+ id: '10',
+ name: 'Swiss Alps',
+ location: 'Switzerland',
+ description: 'Ski pristine slopes, hike mountain trails, and enjoy charming alpine villages with breathtaking mountain vistas.',
+ image: 'https://images.unsplash.com/photo-1531366936337-7c912a4589a7?w=800&q=80',
+ category: 'Adventure',
+ rating: 4.9,
+ price: 1799,
+ currency: 'USD'
+ },
+ {
+ id: '11',
+ name: 'Venice',
+ location: 'Italy',
+ description: 'Glide through romantic canals, admire Renaissance architecture, and savor authentic Italian cuisine in this unique floating city.',
+ image: 'https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?w=800&q=80',
+ category: 'City',
+ rating: 4.8,
+ price: 1149,
+ currency: 'USD'
+ },
+ {
+ id: '12',
+ name: 'Safari Kenya',
+ location: 'Kenya',
+ description: 'Witness the Great Migration, spot the Big Five, and experience the raw beauty of African wilderness.',
+ image: 'https://images.unsplash.com/photo-1516426122078-c23e76319801?w=800&q=80',
+ category: 'Adventure',
+ rating: 4.9,
+ price: 2499,
+ currency: 'USD'
+ }
+];
+
+export const specials = [
+ {
+ destinationId: '2',
+ discount: 25,
+ endDate: '2025-02-28',
+ highlights: ['Free spa treatment', 'Complimentary airport transfer', 'Sunset dinner cruise']
+ },
+ {
+ destinationId: '4',
+ discount: 30,
+ endDate: '2025-03-15',
+ highlights: ['Wine tasting tour', 'Private yacht excursion', 'Luxury accommodation upgrade']
+ },
+ {
+ destinationId: '7',
+ discount: 20,
+ endDate: '2025-02-20',
+ highlights: ['Snorkeling adventure', 'Couples massage', 'Romantic beach dinner']
+ }
+];
+
+export const testimonials = [
+ {
+ id: '1',
+ name: 'Sarah Johnson',
+ location: 'California, USA',
+ image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&q=80',
+ rating: 5,
+ text: 'Epic Travel made our honeymoon in Santorini absolutely magical! Every detail was perfectly planned, and the sunset views were breathtaking.'
+ },
+ {
+ id: '2',
+ name: 'Michael Chen',
+ location: 'Singapore',
+ image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&q=80',
+ rating: 5,
+ text: 'The Tokyo experience was incredible! From the bustling streets to serene temples, Epic Travel curated the perfect itinerary.'
+ },
+ {
+ id: '3',
+ name: 'Emma Williams',
+ location: 'London, UK',
+ image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&q=80',
+ rating: 5,
+ text: 'Our safari in Kenya was the adventure of a lifetime! Seeing the wildlife up close was surreal. Highly recommend Epic Travel!'
+ },
+ {
+ id: '4',
+ name: 'David Martinez',
+ location: 'Barcelona, Spain',
+ image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&q=80',
+ rating: 5,
+ text: 'The Maldives trip was pure paradise. Crystal clear waters, luxury accommodations, and exceptional service throughout.'
+ }
+];
+
+export const categories = ['All', 'Beach', 'City', 'Adventure'];
diff --git a/epic-travel-complete/frontend/src/pages/AdminDashboard.jsx b/epic-travel-complete/frontend/src/pages/AdminDashboard.jsx
new file mode 100644
index 0000000..968278e
--- /dev/null
+++ b/epic-travel-complete/frontend/src/pages/AdminDashboard.jsx
@@ -0,0 +1,543 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+ Plus, Edit, Trash2, Save, X, LogOut, Image as ImageIcon,
+ MapPin, DollarSign, Star, Tag, Calendar, Home
+} from 'lucide-react';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Textarea } from '../components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
+import { Badge } from '../components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '../components/ui/dialog';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../components/ui/select';
+import { toast } from 'sonner';
+import { destinationsAPI, specialsAPI, uploadAPI } from '../services/api';
+
+const AdminDashboard = () => {
+ const navigate = useNavigate();
+ const [destinations, setDestinations] = useState([]);
+ const [specials, setSpecials] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [isEditMode, setIsEditMode] = useState(false);
+ const [editingDestination, setEditingDestination] = useState(null);
+ const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+ const [newDestination, setNewDestination] = useState({
+ name: '',
+ location: '',
+ description: '',
+ image: '',
+ category: 'City',
+ rating: 4.5,
+ price: 999,
+ currency: 'USD'
+ });
+
+ useEffect(() => {
+ const isAuthenticated = localStorage.getItem('isAdminAuthenticated');
+ if (!isAuthenticated) {
+ navigate('/admin');
+ } else {
+ fetchData();
+ }
+ }, [navigate]);
+
+ const fetchData = async () => {
+ try {
+ setLoading(true);
+ const [destinationsData, specialsData] = await Promise.all([
+ destinationsAPI.getAll(),
+ specialsAPI.getAll()
+ ]);
+ setDestinations(destinationsData);
+ setSpecials(specialsData);
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ toast.error('Failed to load data');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleLogout = () => {
+ localStorage.removeItem('isAdminAuthenticated');
+ localStorage.removeItem('auth_token');
+ toast.success('Logged out successfully');
+ navigate('/admin');
+ };
+
+ const handleAddDestination = async () => {
+ try {
+ const newDest = await destinationsAPI.create({
+ ...newDestination,
+ rating: parseFloat(newDestination.rating),
+ price: parseFloat(newDestination.price)
+ });
+ setDestinations([...destinations, newDest]);
+ setIsAddDialogOpen(false);
+ setNewDestination({
+ name: '',
+ location: '',
+ description: '',
+ image: '',
+ category: 'City',
+ rating: 4.5,
+ price: 999,
+ currency: 'USD'
+ });
+ toast.success('Destination added successfully!');
+ } catch (error) {
+ console.error('Error adding destination:', error);
+ toast.error('Failed to add destination');
+ }
+ };
+
+ const handleEditDestination = (destination) => {
+ setEditingDestination({ ...destination });
+ setIsEditMode(true);
+ };
+
+ const handleSaveEdit = async () => {
+ try {
+ const updated = await destinationsAPI.update(editingDestination.id, editingDestination);
+ setDestinations(destinations.map(dest =>
+ dest.id === updated.id ? updated : dest
+ ));
+ setIsEditMode(false);
+ setEditingDestination(null);
+ toast.success('Destination updated successfully!');
+ } catch (error) {
+ console.error('Error updating destination:', error);
+ toast.error('Failed to update destination');
+ }
+ };
+
+ const handleDeleteDestination = async (id) => {
+ try {
+ await destinationsAPI.delete(id);
+ setDestinations(destinations.filter(dest => dest.id !== id));
+ setSpecials(specials.filter(special => special.destination_id !== id));
+ toast.success('Destination deleted successfully!');
+ } catch (error) {
+ console.error('Error deleting destination:', error);
+ toast.error('Failed to delete destination');
+ }
+ };
+
+ const handleToggleSpecial = async (destinationId) => {
+ const existingSpecial = specials.find(s => s.destination_id === destinationId);
+ try {
+ if (existingSpecial) {
+ await specialsAPI.deleteByDestination(destinationId);
+ setSpecials(specials.filter(s => s.destination_id !== destinationId));
+ toast.success('Removed from specials');
+ } else {
+ const newSpecial = await specialsAPI.create({
+ destination_id: destinationId,
+ discount: 20,
+ end_date: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+ highlights: ['Special offer', 'Limited time', 'Book now']
+ });
+ setSpecials([...specials, newSpecial]);
+ toast.success('Added to specials!');
+ }
+ } catch (error) {
+ console.error('Error toggling special:', error);
+ toast.error('Failed to update special');
+ }
+ };
+
+ const handleUpdateSpecial = async (specialId, field, value) => {
+ try {
+ const updatedSpecial = specials.find(s => s.id === specialId);
+ if (!updatedSpecial) return;
+
+ const updateData = { [field]: field === 'discount' ? parseFloat(value) : value };
+ const updated = await specialsAPI.update(specialId, updateData);
+
+ setSpecials(specials.map(special =>
+ special.id === specialId ? updated : special
+ ));
+ } catch (error) {
+ console.error('Error updating special:', error);
+ toast.error('Failed to update special');
+ }
+ };
+
+ return (
+
+ {/* Admin Header */}
+
+
+
+
+ Admin Dashboard
+ Manage destinations and special offers
+
+
+
+
+
+
+
+
+
+
+
+ Destinations Gallery
+ Weekly Specials
+
+
+ {/* Destinations Management */}
+
+
+
+ Manage Destinations
+ Add, edit, or remove destinations from your gallery
+
+ |