92:I[903690,["/chat-static/_next/static/chunks/266cx9fcqhmpk.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3izupkw-ngr6g.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/2c5ox9lu2rsjl.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/044arc-ub2uux.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/15-iorql742-y.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1b432g4ll318n.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0zm6n3ha2zn20.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0xwmd_irkmviy.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/4323eeikb5rls.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/31lmwdrgjrqmt.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3g6lwkmkf0en3.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0n3hed92pnhfj.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1b65ltu_tg58c.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0okzg1a3oisyc.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0cphijp1xrry-.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0muhwnx2z-96f.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/02-dryx0k80qi.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0ersm4n5p19to.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1331umm3hmqi3.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/07950irnlkt05.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1w2m4qpgkkdqm.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0gtw50bn1e-ba.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/234cyf9_l3x2p.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/298ch5lnquhtd.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/21oyg6k8c6ix4.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/38wsgv6hqkey5.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1lrbh41fyi9se.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/427kwq5m6t1ys.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3oaf6-ndpwq7-.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/34_nfmr9dpmy_.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/32rp3hcf-uvct.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3isvx3-q1f0-g.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3uin2ba-bxp90.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3ml-unn8b0zs9.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0h3rk11-a9wp9.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1yz-91u-qfc8u.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1swt5gpe_h1s3.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/21tn7gwv98qgn.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0pgov3gp1xna4.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0mnfr13kg3x-0.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/41737wdi9bvo0.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1u33ctfi4exzw.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/chunks/266cx9fcqhmpk.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3izupkw-ngr6g.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/2c5ox9lu2rsjl.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/044arc-ub2uux.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/15-iorql742-y.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1b432g4ll318n.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0zm6n3ha2zn20.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0xwmd_irkmviy.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/4323eeikb5rls.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/31lmwdrgjrqmt.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3g6lwkmkf0en3.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0n3hed92pnhfj.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1b65ltu_tg58c.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0okzg1a3oisyc.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0cphijp1xrry-.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0muhwnx2z-96f.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/02-dryx0k80qi.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0ersm4n5p19to.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1331umm3hmqi3.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/07950irnlkt05.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1w2m4qpgkkdqm.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0gtw50bn1e-ba.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/234cyf9_l3x2p.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/298ch5lnquhtd.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/21oyg6k8c6ix4.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/38wsgv6hqkey5.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1lrbh41fyi9se.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/427kwq5m6t1ys.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3oaf6-ndpwq7-.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/34_nfmr9dpmy_.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/32rp3hcf-uvct.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3isvx3-q1f0-g.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3uin2ba-bxp90.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3ml-unn8b0zs9.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0h3rk11-a9wp9.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1yz-91u-qfc8u.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1swt5gpe_h1s3.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/21tn7gwv98qgn.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0pgov3gp1xna4.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0mnfr13kg3x-0.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/41737wdi9bvo0.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1u33ctfi4exzw.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5"],"SWRDataProvider"] 95:[] 96:[["b_eY6XqwEBkdN",null]] 97:[["b_eY6XqwEBkdN",{"templateVersionId":null,"templateCanonId":null}]] 98:[["b_HMeYB6rpcul","$D2025-09-03T05:41:21.384Z"],["b_nZm0hnrOTci","$D2025-09-03T05:42:06.437Z"],["b_zU81RV26PSV","$D2025-09-03T05:43:08.078Z"],["b_Xy9gocgx0XS","$D2025-09-03T05:44:43.797Z"],["b_ISTXMwoUv2p","$D2025-09-03T05:46:19.115Z"],["b_5rZG9LJ98mN","$D2025-09-03T05:48:13.702Z"],["b_6e7wTCSzl3C","$D2025-09-03T05:53:17.348Z"],["b_ESU21Bevsin","$D2025-09-03T05:54:07.327Z"],["b_eY6XqwEBkdN","$D2025-09-03T05:57:42.363Z"]] 99:[["b_eY6XqwEBkdN",false]] 9a:[["b_eY6XqwEBkdN",{"deploymentId":"dpl_5YWhdrXF5E7rSt1698svmmwnufzc"}]] 9b:[["b_eY6XqwEBkdN",null]] 9c:[["b_eY6XqwEBkdN",true]] 9d:[["b_eY6XqwEBkdN",true]] 9e:[] 9f:T24e78,[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color palette to match SOLVITS branding with cyan/teal colors */ --background: oklch(1 0 0); /* Pure white */ --foreground: oklch(0.35 0 0); /* Dark gray #4b5563 */ --card: oklch(0.98 0 0); /* Very light gray #f9fafb */ --card-foreground: oklch(0.35 0 0); /* Dark gray */ --popover: oklch(1 0 0); /* White */ --popover-foreground: oklch(0.35 0 0); /* Dark gray */ --primary: oklch(0.55 0.15 200); /* Cyan #0891b2 */ --primary-foreground: oklch(1 0 0); /* White */ --secondary: oklch(0.98 0 0); /* Light gray */ --secondary-foreground: oklch(0.35 0 0); /* Dark gray */ --muted: oklch(0.98 0 0); /* Very light gray #f9fafb */ --muted-foreground: oklch(0.45 0 0); /* Muted gray */ --accent: oklch(0.6 0.15 200); /* Accent cyan #0ea5e9 */ --accent-foreground: oklch(1 0 0); /* White */ --destructive: oklch(0.55 0.22 25); /* Red for destructive actions */ --destructive-foreground: oklch(1 0 0); /* White */ --border: oklch(0.92 0 0); /* Light border #e5e7eb */ --input: oklch(0.98 0 0); /* Light input background */ --ring: oklch(0.55 0.15 200 / 0.3); /* Primary with opacity */ --chart-1: oklch(0.65 0.15 220); /* Blue chart color */ --chart-2: oklch(0.65 0.15 160); /* Green chart color */ --chart-3: oklch(0.7 0.15 80); /* Yellow chart color */ --chart-4: oklch(0.65 0.15 320); /* Pink chart color */ --chart-5: oklch(0.65 0.15 270); /* Purple chart color */ --radius: 0.75rem; /* Increased border radius for modern look */ --sidebar: oklch(0.98 0 0); /* Light gray */ --sidebar-foreground: oklch(0.35 0 0); /* Dark gray */ --sidebar-primary: oklch(0.55 0.15 200); /* Primary cyan */ --sidebar-primary-foreground: oklch(1 0 0); /* White */ --sidebar-accent: oklch(0.6 0.15 200); /* Accent cyan */ --sidebar-accent-foreground: oklch(1 0 0); /* White */ --sidebar-border: oklch(0.92 0 0); /* Light border */ --sidebar-ring: oklch(0.55 0.15 200 / 0.3); /* Primary with opacity */ } .dark { --background: oklch(0.08 0 0); /* Very dark background */ --foreground: oklch(0.95 0 0); /* Light text */ --card: oklch(0.12 0 0); /* Dark card background */ --card-foreground: oklch(0.95 0 0); /* Light card text */ --popover: oklch(0.08 0 0); /* Dark popover */ --popover-foreground: oklch(0.95 0 0); /* Light popover text */ --primary: oklch(0.6 0.15 200); /* Brighter cyan for dark mode */ --primary-foreground: oklch(0.08 0 0); /* Dark text on primary */ --secondary: oklch(0.15 0 0); /* Dark secondary */ --secondary-foreground: oklch(0.95 0 0); /* Light secondary text */ --muted: oklch(0.15 0 0); /* Dark muted */ --muted-foreground: oklch(0.7 0 0); /* Muted text */ --accent: oklch(0.65 0.15 200); /* Bright accent cyan */ --accent-foreground: oklch(0.08 0 0); /* Dark text on accent */ --destructive: oklch(0.5 0.22 25); /* Destructive red */ --destructive-foreground: oklch(0.95 0 0); /* Light text on destructive */ --border: oklch(0.2 0 0); /* Dark border */ --input: oklch(0.12 0 0); /* Dark input */ --ring: oklch(0.6 0.15 200 / 0.3); /* Primary ring with opacity */ --chart-1: oklch(0.65 0.15 220); /* Chart colors for dark mode */ --chart-2: oklch(0.65 0.15 160); --chart-3: oklch(0.7 0.15 80); --chart-4: oklch(0.65 0.15 320); --chart-5: oklch(0.65 0.15 270); --sidebar: oklch(0.1 0 0); /* Dark sidebar */ --sidebar-foreground: oklch(0.95 0 0); /* Light sidebar text */ --sidebar-primary: oklch(0.6 0.15 200); /* Sidebar primary */ --sidebar-primary-foreground: oklch(0.08 0 0); /* Dark text on sidebar primary */ --sidebar-accent: oklch(0.65 0.15 200); /* Sidebar accent */ --sidebar-accent-foreground: oklch(0.08 0 0); /* Dark text on sidebar accent */ --sidebar-border: oklch(0.2 0 0); /* Dark sidebar border */ --sidebar-ring: oklch(0.6 0.15 200 / 0.3); /* Sidebar ring */ } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground font-sans; } /* Added smooth transitions for modern feel */ .transition-all { transition: all 0.2s ease-in-out; } /* Added glassmorphism utility classes */ .glass { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); } .glass-dark { backdrop-filter: blur(10px); background: rgba(0, 0, 0, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); } } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" export const metadata: Metadata = { title: "VirtualTour Platform", description: "Modern construction virtual tour platform with interactive floor plans and 360° views", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Building2, Home, MapPin, ImageIcon, Users, Plus, BarChart3 } from "lucide-react" import Link from "next/link" interface DashboardStats { buildings: number floors: number apartments: number mapPoints: number } export default function AdminDashboard() { const [stats, setStats] = useState({ buildings: 0, floors: 0, apartments: 0, mapPoints: 0 }) const [isLoading, setIsLoading] = useState(true) const router = useRouter() useEffect(() => { // Check authentication const token = localStorage.getItem("admin_token") if (!token) { router.push("/admin") return } // Fetch dashboard stats fetchStats() }, [router]) const fetchStats = async () => { try { const token = localStorage.getItem("admin_token") const [buildingsRes, floorsRes, apartmentsRes, pointsRes] = await Promise.all([ fetch("/api/buildings", { headers: { Authorization: `Bearer ${token}` } }), fetch("/api/floors", { headers: { Authorization: `Bearer ${token}` } }), fetch("/api/apartments", { headers: { Authorization: `Bearer ${token}` } }), fetch("/api/map-points", { headers: { Authorization: `Bearer ${token}` } }), ]) const buildings = await buildingsRes.json() const floors = await floorsRes.json() const apartments = await apartmentsRes.json() const points = await pointsRes.json() setStats({ buildings: buildings.length || 0, floors: floors.length || 0, apartments: apartments.length || 0, mapPoints: points.length || 0, }) } catch (error) { console.error("Failed to fetch stats:", error) } finally { setIsLoading(false) } } const handleLogout = () => { localStorage.removeItem("admin_token") router.push("/admin") } if (isLoading) { return (

Loading dashboard...

) } return (

{/* Header */}

Admin Dashboard

{/* Stats Overview */}

Buildings

{stats.buildings}

Total buildings managed

Floors

{stats.floors}

Floor plans uploaded

Apartments

{stats.apartments}

Apartment units

Map Points

{stats.mapPoints}

Interactive points

{/* Quick Actions */}

Buildings Manage building information and properties Floor Plans Upload and manage SVG floor plans Interactive Points Create and manage map points with 360° images 360° Images Upload and manage panoramic images Apartments Manage apartment units and details

) } [V0_FILE]typescriptreact:file="app/admin/buildings/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import Link from "next/link" import { AdminLayout } from "@/components/admin-layout" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Plus, Search, Edit, Trash2, Building2, MapPin } from "lucide-react" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" interface Building { id: string name: string address: string description?: string floors_count?: number apartments_count?: number created_at: string } export default function BuildingsPage() { const [buildings, setBuildings] = useState([]) const [searchTerm, setSearchTerm] = useState("") const [isLoading, setIsLoading] = useState(true) useEffect(() => { fetchBuildings() }, []) const fetchBuildings = async () => { try { const token = localStorage.getItem("admin_token") const response = await fetch("/api/buildings", { headers: { Authorization: `Bearer ${token}` }, }) if (response.ok) { const data = await response.json() setBuildings(data) } } catch (error) { console.error("Failed to fetch buildings:", error) } finally { setIsLoading(false) } } const deleteBuilding = async (id: string) => { try { const token = localStorage.getItem("admin_token") const response = await fetch(`/api/buildings/${id}`, { method: "DELETE", headers: { Authorization: `Bearer ${token}` }, }) if (response.ok) { setBuildings(buildings.filter((b) => b.id !== id)) } } catch (error) { console.error("Failed to delete building:", error) } } const filteredBuildings = buildings.filter( (building) => building.name.toLowerCase().includes(searchTerm.toLowerCase()) || building.address.toLowerCase().includes(searchTerm.toLowerCase()), ) return (

Buildings

Manage your building portfolio

setSearchTerm(e.target.value)} className="pl-10" />

{filteredBuildings.length} building{filteredBuildings.length !== 1 ? "s" : ""}

{isLoading ? (

{[...Array(6)].map((_, i) => (

))}

) : (

{filteredBuildings.map((building) => ( {building.name} {building.address} {building.description && (

{building.description}

)}

{building.floors_count || 0} floors {building.apartments_count || 0} units

Delete Building Are you sure you want to delete "{building.name}"? This action cannot be undone and will also delete all associated floors and apartments. Cancel deleteBuilding(building.id)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90" > Delete

))}

)} {!isLoading && filteredBuildings.length === 0 && (

No buildings found

{searchTerm ? "No buildings match your search criteria." : "Get started by adding your first building."}

)}

) } [V0_FILE]typescriptreact:file="app/admin/buildings/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/buildings/new/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { AdminLayout } from "@/components/admin-layout" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Alert, AlertDescription } from "@/components/ui/alert" import { ArrowLeft, Building2, Save } from "lucide-react" import Link from "next/link" export default function NewBuildingPage() { const [formData, setFormData] = useState({ name: "", address: "", description: "", }) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") try { const token = localStorage.getItem("admin_token") const response = await fetch("/api/buildings", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, body: JSON.stringify(formData), }) if (response.ok) { router.push("/admin/buildings") } else { const errorData = await response.json() setError(errorData.message || "Failed to create building") } } catch (err) { setError("Network error. Please try again.") } finally { setIsLoading(false) } } const handleChange = (e: React.ChangeEvent) => { setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value, })) } return (

Add New Building

Create a new building in your portfolio

Building Information Enter the basic information for the new building

Building Name *

Address *

Description

</div>

{error && (
                  <Alert variant="destructive">
                    <AlertDescription>{error}</AlertDescription>
                  </Alert>
                )}

<div className="flex items-center gap-4">
                  <Button type="submit" disabled={isLoading}>
                    <Save className="mr-2 h-4 w-4" />
                    {isLoading ? "Creating..." : "Create Building"}
                  </Button>
                  <Link href="/admin/buildings">
                    <Button variant="outline" type="button">
                      Cancel
                    </Button>
                  </Link>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/floors/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { AdminLayout } from "@/components/admin-layout"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Search, Edit, Trash2, Home, Upload, Building2 } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface Floor {
  id: string
  building_id: string
  building_name: string
  floor_number: number
  name: string
  svg_map_url?: string
  apartments_count?: number
  created_at: string
}

interface Building {
  id: string
  name: string
}

export default function FloorsPage() {
  const [floors, setFloors] = useState<Floor[]>([])
  const [buildings, setBuildings] = useState<Building[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedBuilding, setSelectedBuilding] = useState<string>("all")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    fetchData()
  }, [])

const fetchData = async () => {
    try {
      const token = localStorage.getItem("admin_token")
      const [floorsRes, buildingsRes] = await Promise.all([
        fetch("/api/floors", { headers: { Authorization: `Bearer ${token}` } }),
        fetch("/api/buildings", { headers: { Authorization: `Bearer ${token}` } }),
      ])

if (floorsRes.ok && buildingsRes.ok) {
        const floorsData = await floorsRes.json()
        const buildingsData = await buildingsRes.json()
        setFloors(floorsData)
        setBuildings(buildingsData)
      }
    } catch (error) {
      console.error("Failed to fetch data:", error)
    } finally {
      setIsLoading(false)
    }
  }

const deleteFloor = async (id: string) => {
    try {
      const token = localStorage.getItem("admin_token")
      const response = await fetch(`/api/floors/${id}`, {
        method: "DELETE",
        headers: { Authorization: `Bearer ${token}` },
      })
      if (response.ok) {
        setFloors(floors.filter((f) => f.id !== id))
      }
    } catch (error) {
      console.error("Failed to delete floor:", error)
    }
  }

const filteredFloors = floors.filter((floor) => {
    const matchesSearch =
      floor.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      floor.building_name.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesBuilding = selectedBuilding === "all" || floor.building_id === selectedBuilding
    return matchesSearch && matchesBuilding
  })

return (
    <AdminLayout>
      <div className="p-6">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-3xl font-bold text-foreground">Floor Plans</h1>
            <p className="text-muted-foreground">Manage floor plans and SVG maps</p>
          </div>
          <Link href="/admin/floors/new">
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Add Floor
            </Button>
          </Link>
        </div>

<div className="flex items-center gap-4 mb-6">
          <div className="relative flex-1 max-w-sm">
            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search floors..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>

<Select value={selectedBuilding} onValueChange={setSelectedBuilding}>
            <SelectTrigger className="w-48">
              <SelectValue placeholder="Filter by building" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Buildings</SelectItem>
              {buildings.map((building) => (
                <SelectItem key={building.id} value={building.id}>
                  {building.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

<Badge variant="secondary">
            {filteredFloors.length} floor{filteredFloors.length !== 1 ? "s" : ""}
          </Badge>
        </div>

{isLoading ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[...Array(6)].map((_, i) => (
              <Card key={i} className="animate-pulse">
                <CardHeader>
                  <div className="h-4 bg-muted rounded w-3/4"></div>
                  <div className="h-3 bg-muted rounded w-1/2"></div>
                </CardHeader>
                <CardContent>
                  <div className="h-20 bg-muted rounded mb-4"></div>
                  <div className="h-3 bg-muted rounded w-full mb-2"></div>
                </CardContent>
              </Card>
            ))}
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredFloors.map((floor) => (
              <Card key={floor.id} className="hover:shadow-md transition-shadow">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Home className="h-5 w-5 text-primary" />
                    {floor.name}
                  </CardTitle>
                  <CardDescription className="flex items-center gap-1">
                    <Building2 className="h-3 w-3" />
                    {floor.building_name} - Floor {floor.floor_number}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="mb-4">
                    {floor.svg_map_url ? (
                      <div className="h-20 bg-muted rounded flex items-center justify-center">
                        <Upload className="h-6 w-6 text-muted-foreground" />
                        <span className="ml-2 text-sm text-muted-foreground">SVG Map Available</span>
                      </div>
                    ) : (
                      <div className="h-20 bg-muted/50 rounded flex items-center justify-center border-2 border-dashed border-muted-foreground/25">
                        <span className="text-sm text-muted-foreground">No SVG Map</span>
                      </div>
                    )}
                  </div>

<div className="flex items-center gap-4 mb-4 text-sm">
                    <Badge variant="outline">{floor.apartments_count || 0} apartments</Badge>
                  </div>

<AlertDialog>
                      <AlertDialogTrigger asChild>
                        <Button
                          variant="outline"
                          size="sm"
                          className="text-destructive hover:text-destructive bg-transparent"
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>Delete Floor</AlertDialogTitle>
                          <AlertDialogDescription>
                            Are you sure you want to delete "{floor.name}"? This will also delete all associated
                            apartments and map points.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>Cancel</AlertDialogCancel>
                          <AlertDialogAction
                            onClick={() => deleteFloor(floor.id)}
                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                          >
                            Delete
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}

{!isLoading && filteredFloors.length === 0 && (
          <Card className="text-center py-12">
            <CardContent>
              <Home className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="text-lg font-semibold mb-2">No floors found</h3>
              <p className="text-muted-foreground mb-4">
                {searchTerm || selectedBuilding !== "all"
                  ? "No floors match your search criteria."
                  : "Get started by adding your first floor plan."}
              </p>
              <Link href="/admin/floors/new">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Add Floor
                </Button>
              </Link>
            </CardContent>
          </Card>
        )}
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/floors/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/apartments/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { AdminLayout } from "@/components/admin-layout"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Search, Edit, Trash2, Users, Home, Building2, MapPin } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface Apartment {
  id: string
  floor_id: string
  floor_name: string
  building_name: string
  unit_number: string
  name: string
  type?: string
  area?: number
  map_points_count?: number
  created_at: string
}

interface Floor {
  id: string
  name: string
  building_name: string
}

export default function ApartmentsPage() {
  const [apartments, setApartments] = useState<Apartment[]>([])
  const [floors, setFloors] = useState<Floor[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedFloor, setSelectedFloor] = useState<string>("all")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    fetchData()
  }, [])

const fetchData = async () => {
    try {
      const token = localStorage.getItem("admin_token")
      const [apartmentsRes, floorsRes] = await Promise.all([
        fetch("/api/apartments", { headers: { Authorization: `Bearer ${token}` } }),
        fetch("/api/floors", { headers: { Authorization: `Bearer ${token}` } }),
      ])

if (apartmentsRes.ok && floorsRes.ok) {
        const apartmentsData = await apartmentsRes.json()
        const floorsData = await floorsRes.json()
        setApartments(apartmentsData)
        setFloors(floorsData)
      }
    } catch (error) {
      console.error("Failed to fetch data:", error)
    } finally {
      setIsLoading(false)
    }
  }

const deleteApartment = async (id: string) => {
    try {
      const token = localStorage.getItem("admin_token")
      const response = await fetch(`/api/apartments/${id}`, {
        method: "DELETE",
        headers: { Authorization: `Bearer ${token}` },
      })
      if (response.ok) {
        setApartments(apartments.filter((a) => a.id !== id))
      }
    } catch (error) {
      console.error("Failed to delete apartment:", error)
    }
  }

const filteredApartments = apartments.filter((apartment) => {
    const matchesSearch =
      apartment.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      apartment.unit_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
      apartment.building_name.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesFloor = selectedFloor === "all" || apartment.floor_id === selectedFloor
    return matchesSearch && matchesFloor
  })

return (
    <AdminLayout>
      <div className="p-6">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-3xl font-bold text-foreground">Apartments</h1>
            <p className="text-muted-foreground">Manage apartment units and details</p>
          </div>
          <Link href="/admin/apartments/new">
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Add Apartment
            </Button>
          </Link>
        </div>

<div className="flex items-center gap-4 mb-6">
          <div className="relative flex-1 max-w-sm">
            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search apartments..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>

<Select value={selectedFloor} onValueChange={setSelectedFloor}>
            <SelectTrigger className="w-48">
              <SelectValue placeholder="Filter by floor" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Floors</SelectItem>
              {floors.map((floor) => (
                <SelectItem key={floor.id} value={floor.id}>
                  {floor.building_name} - {floor.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

<Badge variant="secondary">
            {filteredApartments.length} apartment{filteredApartments.length !== 1 ? "s" : ""}
          </Badge>
        </div>

{isLoading ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[...Array(6)].map((_, i) => (
              <Card key={i} className="animate-pulse">
                <CardHeader>
                  <div className="h-4 bg-muted rounded w-3/4"></div>
                  <div className="h-3 bg-muted rounded w-1/2"></div>
                </CardHeader>
                <CardContent>
                  <div className="h-3 bg-muted rounded w-full mb-2"></div>
                  <div className="h-3 bg-muted rounded w-2/3"></div>
                </CardContent>
              </Card>
            ))}
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredApartments.map((apartment) => (
              <Card key={apartment.id} className="hover:shadow-md transition-shadow">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Users className="h-5 w-5 text-primary" />
                    {apartment.name}
                  </CardTitle>
                  <CardDescription className="space-y-1">
                    <div className="flex items-center gap-1">
                      <Building2 className="h-3 w-3" />
                      {apartment.building_name}
                    </div>
                    <div className="flex items-center gap-1">
                      <Home className="h-3 w-3" />
                      {apartment.floor_name} - Unit {apartment.unit_number}
                    </div>
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {apartment.type && (
                      <div className="flex items-center gap-2">
                        <Badge variant="secondary">{apartment.type}</Badge>
                        {apartment.area && <Badge variant="outline">{apartment.area} sq ft</Badge>}
                      </div>
                    )}

<div className="flex items-center gap-2 text-sm">
                      <MapPin className="h-3 w-3 text-muted-foreground" />
                      <span className="text-muted-foreground">{apartment.map_points_count || 0} map points</span>
                    </div>

<AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button
                            variant="outline"
                            size="sm"
                            className="text-destructive hover:text-destructive bg-transparent"
                          >
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete Apartment</AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to delete "{apartment.name}"? This will also delete all associated
                              map points and images.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => deleteApartment(apartment.id)}
                              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                            >
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}

{!isLoading && filteredApartments.length === 0 && (
          <Card className="text-center py-12">
            <CardContent>
              <Users className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="text-lg font-semibold mb-2">No apartments found</h3>
              <p className="text-muted-foreground mb-4">
                {searchTerm || selectedFloor !== "all"
                  ? "No apartments match your search criteria."
                  : "Get started by adding your first apartment unit."}
              </p>
              <Link href="/admin/apartments/new">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Add Apartment
                </Button>
              </Link>
            </CardContent>
          </Card>
        )}
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/apartments/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/map-points/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { AdminLayout } from "@/components/admin-layout"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Search, Edit, Trash2, MapPin, ImageIcon, Building2, Users } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface MapPoint {
  id: string
  apartment_id: string
  apartment_name: string
  building_name: string
  x: number
  y: number
  title: string
  description?: string
  images_count?: number
  created_at: string
}

interface Apartment {
  id: string
  name: string
  building_name: string
}

export default function MapPointsPage() {
  const [mapPoints, setMapPoints] = useState<MapPoint[]>([])
  const [apartments, setApartments] = useState<Apartment[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedApartment, setSelectedApartment] = useState<string>("all")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    fetchData()
  }, [])

const fetchData = async () => {
    try {
      const token = localStorage.getItem("admin_token")
      const [mapPointsRes, apartmentsRes] = await Promise.all([
        fetch("/api/map-points", { headers: { Authorization: `Bearer ${token}` } }),
        fetch("/api/apartments", { headers: { Authorization: `Bearer ${token}` } }),
      ])

if (mapPointsRes.ok && apartmentsRes.ok) {
        const mapPointsData = await mapPointsRes.json()
        const apartmentsData = await apartmentsRes.json()
        setMapPoints(mapPointsData)
        setApartments(apartmentsData)
      }
    } catch (error) {
      console.error("Failed to fetch data:", error)
    } finally {
      setIsLoading(false)
    }
  }

const deleteMapPoint = async (id: string) => {
    try {
      const token = localStorage.getItem("admin_token")
      const response = await fetch(`/api/map-points/${id}`, {
        method: "DELETE",
        headers: { Authorization: `Bearer ${token}` },
      })
      if (response.ok) {
        setMapPoints(mapPoints.filter((p) => p.id !== id))
      }
    } catch (error) {
      console.error("Failed to delete map point:", error)
    }
  }

const filteredMapPoints = mapPoints.filter((point) => {
    const matchesSearch =
      point.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      point.apartment_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      point.building_name.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesApartment = selectedApartment === "all" || point.apartment_id === selectedApartment
    return matchesSearch && matchesApartment
  })

return (
    <AdminLayout>
      <div className="p-6">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-3xl font-bold text-foreground">Map Points</h1>
            <p className="text-muted-foreground">Manage interactive points on floor plans</p>
          </div>
          <Link href="/admin/map-editor">
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Open Map Editor
            </Button>
          </Link>
        </div>

<div className="flex items-center gap-4 mb-6">
          <div className="relative flex-1 max-w-sm">
            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search map points..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>

<Select value={selectedApartment} onValueChange={setSelectedApartment}>
            <SelectTrigger className="w-48">
              <SelectValue placeholder="Filter by apartment" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Apartments</SelectItem>
              {apartments.map((apartment) => (
                <SelectItem key={apartment.id} value={apartment.id}>
                  {apartment.building_name} - {apartment.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

<Badge variant="secondary">
            {filteredMapPoints.length} point{filteredMapPoints.length !== 1 ? "s" : ""}
          </Badge>
        </div>

{isLoading ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[...Array(6)].map((_, i) => (
              <Card key={i} className="animate-pulse">
                <CardHeader>
                  <div className="h-4 bg-muted rounded w-3/4"></div>
                  <div className="h-3 bg-muted rounded w-1/2"></div>
                </CardHeader>
                <CardContent>
                  <div className="h-3 bg-muted rounded w-full mb-2"></div>
                  <div className="h-3 bg-muted rounded w-2/3"></div>
                </CardContent>
              </Card>
            ))}
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredMapPoints.map((point) => (
              <Card key={point.id} className="hover:shadow-md transition-shadow">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MapPin className="h-5 w-5 text-primary" />
                    {point.title}
                  </CardTitle>
                  <CardDescription className="space-y-1">
                    <div className="flex items-center gap-1">
                      <Building2 className="h-3 w-3" />
                      {point.building_name}
                    </div>
                    <div className="flex items-center gap-1">
                      <Users className="h-3 w-3" />
                      {point.apartment_name}
                    </div>
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {point.description && (
                      <p className="text-sm text-muted-foreground line-clamp-2">{point.description}</p>
                    )}

<div className="flex items-center gap-4 text-sm">
                      <span className="text-muted-foreground">
                        Position: ({Math.round(point.x)}, {Math.round(point.y)})
                      </span>
                    </div>

<div className="flex items-center gap-2">
                      <ImageIcon className="h-3 w-3 text-muted-foreground" />
                      <span className="text-sm text-muted-foreground">
                        {point.images_count || 0} image{point.images_count !== 1 ? "s" : ""}
                      </span>
                    </div>

<AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button
                            variant="outline"
                            size="sm"
                            className="text-destructive hover:text-destructive bg-transparent"
                          >
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete Map Point</AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to delete "{point.title}"? This will also delete all associated
                              images.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => deleteMapPoint(point.id)}
                              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                            >
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}

{!isLoading && filteredMapPoints.length === 0 && (
          <Card className="text-center py-12">
            <CardContent>
              <MapPin className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="text-lg font-semibold mb-2">No map points found</h3>
              <p className="text-muted-foreground mb-4">
                {searchTerm || selectedApartment !== "all"
                  ? "No map points match your search criteria."
                  : "Get started by opening the map editor to add interactive points."}
              </p>
              <Link href="/admin/map-editor">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Open Map Editor
                </Button>
              </Link>
            </CardContent>
          </Card>
        )}
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/map-points/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/map-editor/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState, useRef } from "react"
import { AdminLayout } from "@/components/admin-layout"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { MapPin, Upload, Save, ZoomIn, ZoomOut, RotateCcw, Building2, X } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

interface Apartment {
  id: string
  name: string
  building_name: string
  floor_name: string
  svg_map_url?: string
}

interface MapPoint {
  id?: string
  x: number
  y: number
  title: string
  description?: string
  apartment_id: string
}

export default function MapEditorPage() {
  const [apartments, setApartments] = useState<Apartment[]>([])
  const [selectedApartment, setSelectedApartment] = useState<string>("")
  const [currentApartment, setCurrentApartment] = useState<Apartment | null>(null)
  const [mapPoints, setMapPoints] = useState<MapPoint[]>([])
  const [svgContent, setSvgContent] = useState<string>("")
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState("")
  const [zoom, setZoom] = useState(1)
  const [pan, setPan] = useState({ x: 0, y: 0 })
  const [isDragging, setIsDragging] = useState(false)
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })

// Point creation dialog
  const [showPointDialog, setShowPointDialog] = useState(false)
  const [newPoint, setNewPoint] = useState<{ x: number; y: number } | null>(null)
  const [pointForm, setPointForm] = useState({ title: "", description: "" })

const svgRef = useRef<SVGSVGElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    fetchApartments()
  }, [])

useEffect(() => {
    if (selectedApartment) {
      loadApartmentData(selectedApartment)
    }
  }, [selectedApartment])

const fetchApartments = async () => {
    try {
      const token = localStorage.getItem("admin_token")
      const response = await fetch("/api/apartments", {
        headers: { Authorization: `Bearer ${token}` },
      })
      if (response.ok) {
        const data = await response.json()
        setApartments(data)
      }
    } catch (error) {
      console.error("Failed to fetch apartments:", error)
    }
  }

const loadApartmentData = async (apartmentId: string) => {
    setIsLoading(true)
    setError("")

try {
      const token = localStorage.getItem("admin_token")
      const apartment = apartments.find((a) => a.id === apartmentId)
      setCurrentApartment(apartment || null)

// Load SVG map if available
      if (apartment?.svg_map_url) {
        const svgResponse = await fetch(apartment.svg_map_url)
        if (svgResponse.ok) {
          const svgText = await svgResponse.text()
          setSvgContent(svgText)
        }
      } else {
        setSvgContent("")
      }

// Load existing map points
      const pointsResponse = await fetch(`/api/map-points/apartment/${apartmentId}`, {
        headers: { Authorization: `Bearer ${token}` },
      })
      if (pointsResponse.ok) {
        const pointsData = await pointsResponse.json()
        setMapPoints(pointsData)
      }
    } catch (error) {
      setError("Failed to load apartment data")
      console.error("Failed to load apartment data:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleSvgUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file || !selectedApartment) return

setIsLoading(true)
    setError("")

try {
      const formData = new FormData()
      formData.append("svg", file)

const token = localStorage.getItem("admin_token")
      const response = await fetch(`/api/uploads/svg/${selectedApartment}`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` },
        body: formData,
      })

if (response.ok) {
        const data = await response.json()
        setSvgContent(await file.text())
        // Refresh apartment data to get new SVG URL
        loadApartmentData(selectedApartment)
      } else {
        setError("Failed to upload SVG file")
      }
    } catch (error) {
      setError("Upload failed. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

const handleSvgClick = (event: React.MouseEvent<SVGSVGElement>) => {
    if (!svgRef.current || !selectedApartment) return

const rect = svgRef.current.getBoundingClientRect()
    const svgRect = svgRef.current.viewBox.baseVal

// Calculate click position relative to SVG coordinate system
    const x = ((event.clientX - rect.left) / rect.width) * svgRect.width
    const y = ((event.clientY - rect.top) / rect.height) * svgRect.height

setNewPoint({ x, y })
    setPointForm({ title: "", description: "" })
    setShowPointDialog(true)
  }

const handleCreatePoint = async () => {
    if (!newPoint || !selectedApartment || !pointForm.title.trim()) return

try {
      const token = localStorage.getItem("admin_token")
      const response = await fetch("/api/map-points", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          apartment_id: selectedApartment,
          x: newPoint.x,
          y: newPoint.y,
          title: pointForm.title.trim(),
          description: pointForm.description.trim() || undefined,
        }),
      })

if (response.ok) {
        const createdPoint = await response.json()
        setMapPoints([...mapPoints, createdPoint])
        setShowPointDialog(false)
        setNewPoint(null)
        setPointForm({ title: "", description: "" })
      } else {
        setError("Failed to create map point")
      }
    } catch (error) {
      setError("Failed to create map point")
    }
  }

const handleDeletePoint = async (pointId: string) => {
    try {
      const token = localStorage.getItem("admin_token")
      const response = await fetch(`/api/map-points/${pointId}`, {
        method: "DELETE",
        headers: { Authorization: `Bearer ${token}` },
      })

if (response.ok) {
        setMapPoints(mapPoints.filter((p) => p.id !== pointId))
      }
    } catch (error) {
      console.error("Failed to delete point:", error)
    }
  }

const handleZoom = (direction: "in" | "out") => {
    const factor = direction === "in" ? 1.2 : 0.8
    setZoom((prev) => Math.max(0.1, Math.min(5, prev * factor)))
  }

const resetView = () => {
    setZoom(1)
    setPan({ x: 0, y: 0 })
  }

return (
    <AdminLayout>
      <div className="p-6">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-3xl font-bold text-foreground">SVG Map Editor</h1>
            <p className="text-muted-foreground">Create and manage interactive floor plan points</p>
          </div>
        </div>

{/* Apartment Selection */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Building2 className="h-5 w-5" />
              Select Apartment
            </CardTitle>
            <CardDescription>Choose an apartment to edit its floor plan and map points</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-4">
              <Select value={selectedApartment} onValueChange={setSelectedApartment}>
                <SelectTrigger className="w-64">
                  <SelectValue placeholder="Choose apartment..." />
                </SelectTrigger>
                <SelectContent>
                  {apartments.map((apartment) => (
                    <SelectItem key={apartment.id} value={apartment.id}>
                      {apartment.building_name} - {apartment.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

{currentApartment && (
                <div className="flex items-center gap-2">
                  <Badge variant="outline">{currentApartment.floor_name}</Badge>
                  {currentApartment.svg_map_url ? (
                    <Badge variant="secondary">SVG Available</Badge>
                  ) : (
                    <Badge variant="destructive">No SVG</Badge>
                  )}
                </div>
              )}
            </div>
          </CardContent>
        </Card>

{selectedApartment && (
          <>
            {/* SVG Upload */}
            {!svgContent && (
              <Card className="mb-6">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Upload className="h-5 w-5" />
                    Upload Floor Plan
                  </CardTitle>
                  <CardDescription>
                    Upload an SVG file of the floor plan to start adding interactive points
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-4">
                    <Input type="file" accept=".svg" onChange={handleSvgUpload} disabled={isLoading} />
                    {isLoading && <span className="text-sm text-muted-foreground">Uploading...</span>}
                  </div>
                </CardContent>
              </Card>
            )}

{/* Map Editor */}
            {svgContent && (
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle className="flex items-center gap-2">
                        <MapPin className="h-5 w-5" />
                        Interactive Map Editor
                      </CardTitle>
                      <CardDescription>Click on the floor plan to add interactive points</CardDescription>
                    </div>

<div className="flex items-center gap-2">
                      <Button variant="outline" size="sm" onClick={() => handleZoom("out")}>
                        <ZoomOut className="h-4 w-4" />
                      </Button>
                      <Button variant="outline" size="sm" onClick={() => handleZoom("in")}>
                        <ZoomIn className="h-4 w-4" />
                      </Button>
                      <Button variant="outline" size="sm" onClick={resetView}>
                        <RotateCcw className="h-4 w-4" />
                      </Button>
                      <Badge variant="secondary">{mapPoints.length} points</Badge>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div
                    ref={containerRef}
                    className="border border-border rounded-lg overflow-hidden bg-muted/20"
                    style={{ height: "600px" }}
                  >
                    <div
                      className="w-full h-full overflow-auto cursor-crosshair"
                      style={{
                        transform: `scale(${zoom}) translate(${pan.x}px, ${pan.y}px)`,
                        transformOrigin: "top left",
                      }}
                    >
                      <svg
                        ref={svgRef}
                        className="w-full h-full"
                        onClick={handleSvgClick}
                        dangerouslySetInnerHTML={{ __html: svgContent }}
                      />

{/* Render map points */}
                      {mapPoints.map((point) => (
                        <div
                          key={point.id}
                          className="absolute bg-primary text-primary-foreground rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold cursor-pointer hover:bg-primary/80 transition-colors group"
                          style={{
                            left: `${point.x}px`,
                            top: `${point.y}px`,
                            transform: "translate(-50%, -50%)",
                          }}
                          title={point.title}
                        >
                          <MapPin className="h-3 w-3" />
                          <Button
                            variant="destructive"
                            size="sm"
                            className="absolute -top-2 -right-2 w-4 h-4 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
                            onClick={(e) => {
                              e.stopPropagation()
                              if (point.id) handleDeletePoint(point.id)
                            }}
                          >
                            <X className="h-2 w-2" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}
          </>
        )}

{error && (
          <Alert variant="destructive" className="mt-4">
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}

{/* Point Creation Dialog */}
        <Dialog open={showPointDialog} onOpenChange={setShowPointDialog}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Add Map Point</DialogTitle>
              <DialogDescription>Create an interactive point at the selected location</DialogDescription>
            </DialogHeader>

<div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="point-title">Title *</Label>
                <Input
                  id="point-title"
                  placeholder="e.g., Living Room, Kitchen, Bedroom"
                  value={pointForm.title}
                  onChange={(e) => setPointForm((prev) => ({ ...prev, title: e.target.value }))}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="point-description">Description</Label>
                <Textarea
                  id="point-description"
                  placeholder="Optional description of this location..."
                  value={pointForm.description}
                  onChange={(e) => setPointForm((prev) => ({ ...prev, description: e.target.value }))}
                  rows={3}
                />
              </div>

{newPoint && (
                <div className="text-sm text-muted-foreground">
                  Position: ({Math.round(newPoint.x)}, {Math.round(newPoint.y)})
                </div>
              )}
            </div>

<DialogFooter>
              <Button variant="outline" onClick={() => setShowPointDialog(false)}>
                Cancel
              </Button>
              <Button onClick={handleCreatePoint} disabled={!pointForm.title.trim()}>
                <Save className="mr-2 h-4 w-4" />
                Create Point
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/map-editor/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/svg-map-viewer.tsx" isMerged="true"
"use client"

import type React from "react"

import { useRef, useState } from "react"
import { Button } from "@/components/ui/button"
import { ZoomIn, ZoomOut, RotateCcw, MapPin } from "lucide-react"

interface MapPoint {
  id: string
  x: number
  y: number
  title: string
  description?: string
}

interface SvgMapViewerProps {
  svgContent: string
  mapPoints: MapPoint[]
  onPointClick?: (point: MapPoint) => void
  onMapClick?: (x: number, y: number) => void
  interactive?: boolean
  className?: string
}

export function SvgMapViewer({
  svgContent,
  mapPoints,
  onPointClick,
  onMapClick,
  interactive = false,
  className = "",
}: SvgMapViewerProps) {
  const [zoom, setZoom] = useState(1)
  const [pan, setPan] = useState({ x: 0, y: 0 })
  const [isDragging, setIsDragging] = useState(false)
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })

const svgRef = useRef<SVGSVGElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)

const handleSvgClick = (event: React.MouseEvent<SVGSVGElement>) => {
    if (!svgRef.current || !onMapClick) return

const rect = svgRef.current.getBoundingClientRect()
    const svgRect = svgRef.current.viewBox.baseVal

onMapClick(x, y)
  }

const handleZoom = (direction: "in" | "out") => {
    const factor = direction === "in" ? 1.2 : 0.8
    setZoom((prev) => Math.max(0.1, Math.min(5, prev * factor)))
  }

const resetView = () => {
    setZoom(1)
    setPan({ x: 0, y: 0 })
  }

const handleMouseDown = (event: React.MouseEvent) => {
    if (!interactive) return
    setIsDragging(true)
    setDragStart({ x: event.clientX - pan.x, y: event.clientY - pan.y })
  }

const handleMouseMove = (event: React.MouseEvent) => {
    if (!isDragging || !interactive) return
    setPan({
      x: event.clientX - dragStart.x,
      y: event.clientY - dragStart.y,
    })
  }

const handleMouseUp = () => {
    setIsDragging(false)
  }

return (
    <div className={`relative ${className}`}>
      {/* Controls */}
      <div className="absolute top-4 right-4 z-10 flex items-center gap-2 bg-background/80 backdrop-blur-sm rounded-lg p-2 border border-border">
        <Button variant="outline" size="sm" onClick={() => handleZoom("out")}>
          <ZoomOut className="h-4 w-4" />
        </Button>
        <Button variant="outline" size="sm" onClick={() => handleZoom("in")}>
          <ZoomIn className="h-4 w-4" />
        </Button>
        <Button variant="outline" size="sm" onClick={resetView}>
          <RotateCcw className="h-4 w-4" />
        </Button>
        <span className="text-sm text-muted-foreground px-2">{Math.round(zoom * 100)}%</span>
      </div>

{/* SVG Container */}
      <div
        ref={containerRef}
        className="w-full h-full overflow-hidden bg-muted/20 rounded-lg border border-border"
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseUp}
      >
        <div
          className="w-full h-full"
          style={{
            transform: `scale(${zoom}) translate(${pan.x}px, ${pan.y}px)`,
            transformOrigin: "top left",
            cursor: isDragging ? "grabbing" : interactive ? "grab" : "default",
          }}
        >
          <svg
            ref={svgRef}
            className="w-full h-full"
            onClick={handleSvgClick}
            dangerouslySetInnerHTML={{ __html: svgContent }}
          />

{/* Render map points */}
          {mapPoints.map((point) => (
            <div
              key={point.id}
              className="absolute bg-primary text-primary-foreground rounded-full w-8 h-8 flex items-center justify-center cursor-pointer hover:bg-primary/80 transition-colors shadow-lg border-2 border-background"
              style={{
                left: `${point.x}px`,
                top: `${point.y}px`,
                transform: "translate(-50%, -50%)",
              }}
              onClick={(e) => {
                e.stopPropagation()
                onPointClick?.(point)
              }}
              title={point.title}
            >
              <MapPin className="h-4 w-4" />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tours/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/panorama-viewer.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

interface PanoramaViewerProps {
  imageUrl: string
  title?: string
  className?: string
}

export function PanoramaViewer({ imageUrl, title, className = "" }: PanoramaViewerProps) {
  const containerRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    // This is a placeholder for 360° panorama viewer integration
    // In a real implementation, you would integrate with libraries like:
    // - Photo Sphere Viewer (https://photo-sphere-viewer.js.org/)
    // - Pannellum (https://pannellum.org/)
    // - A-Frame (https://aframe.io/)

console.log("Loading panorama:", imageUrl)
  }, [imageUrl])

return (
    <div ref={containerRef} className={`bg-muted rounded-lg overflow-hidden ${className}`}>
      <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/10 to-accent/10">
        <div className="text-center">
          <div className="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
              />
            </svg>
          </div>
          <h3 className="text-lg font-semibold text-foreground mb-2">{title || "360° Panoramic View"}</h3>
          <p className="text-muted-foreground text-sm">360° panorama viewer will be integrated here</p>
          <p className="text-xs text-muted-foreground mt-2">Image: {imageUrl}</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/breadcrumb-nav.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { ChevronRight, Home } from "lucide-react"

interface BreadcrumbItem {
  label: string
  href?: string
}

interface BreadcrumbNavProps {
  items: BreadcrumbItem[]
}

export function BreadcrumbNav({ items }: BreadcrumbNavProps) {
  return (
    <nav className="flex items-center space-x-1 text-sm text-muted-foreground mb-6">
      <Link href="/" className="flex items-center hover:text-foreground transition-colors">
        <Home className="h-4 w-4" />
      </Link>

{items.map((item, index) => (
        <div key={index} className="flex items-center space-x-1">
          <ChevronRight className="h-4 w-4" />
          {item.href ? (
            <Link href={item.href} className="hover:text-foreground transition-colors">
              {item.label}
            </Link>
          ) : (
            <span className="text-foreground font-medium">{item.label}</span>
          )}
        </div>
      ))}
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/loading-spinner.tsx" isMerged="true"
export function LoadingSpinner({ size = "md" }: { size?: "sm" | "md" | "lg" }) {
  const sizeClasses = {
    sm: "h-4 w-4",
    md: "h-8 w-8",
    lg: "h-12 w-12",
  }

return <div className={`${sizeClasses[size]} animate-spin rounded-full border-2 border-muted border-t-primary`} />
}
[V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Building2, Home, Search } from "lucide-react"

export default function NotFound() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <Card className="text-center max-w-md w-full">
        <CardContent className="pt-12 pb-8">
          <div className="mb-8">
            <Building2 className="h-20 w-20 text-muted-foreground mx-auto mb-4" />
            <h1 className="text-6xl font-bold text-primary mb-2">404</h1>
            <h2 className="text-2xl font-semibold text-foreground mb-4">Page Not Found</h2>
            <p className="text-muted-foreground mb-8">The page you're looking for doesn't exist or has been moved.</p>
          </div>

<div className="space-y-4">
            <Link href="/" className="block">
              <Button className="w-full">
                <Home className="mr-2 h-4 w-4" />
                Go Home
              </Button>
            </Link>
            <Link href="/tours" className="block">
              <Button variant="outline" className="w-full bg-transparent">
                <Search className="mr-2 h-4 w-4" />
                Browse Tours
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
import Link from "next/link"
import { Building2, Mail, Phone, MapPin } from "lucide-react"

export function Footer() {
  return (
    <footer className="bg-card border-t border-border">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Brand */}
          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <Building2 className="h-8 w-8 text-primary" />
              <h3 className="text-xl font-bold text-foreground">VirtualTour</h3>
            </div>
            <p className="text-muted-foreground text-sm">
              Experience buildings like never before with our immersive virtual tour platform.
            </p>
          </div>

{/* Navigation */}
          <div className="space-y-4">
            <h4 className="font-semibold text-foreground">Explore</h4>
            <nav className="space-y-2">
              <Link
                href="/tours"
                className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
              >
                Browse Tours
              </Link>
              <Link
                href="/admin"
                className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
              >
                Admin Panel
              </Link>
            </nav>
          </div>

{/* Features */}
          <div className="space-y-4">
            <h4 className="font-semibold text-foreground">Features</h4>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>Interactive Floor Plans</li>
              <li>360° Virtual Tours</li>
              <li>Smart Navigation</li>
              <li>Mobile Responsive</li>
            </ul>
          </div>

{/* Contact */}
          <div className="space-y-4">
            <h4 className="font-semibold text-foreground">Contact</h4>
            <div className="space-y-2 text-sm text-muted-foreground">
              <div className="flex items-center gap-2">
                <Mail className="h-4 w-4" />
                <span>info@virtualtour.com</span>
              </div>
              <div className="flex items-center gap-2">
                <Phone className="h-4 w-4" />
                <span>+1 (555) 123-4567</span>
              </div>
              <div className="flex items-center gap-2">
                <MapPin className="h-4 w-4" />
                <span>123 Tech Street, City</span>
              </div>
            </div>
          </div>
        </div>

<div className="border-t border-border mt-8 pt-8 text-center">
          <p className="text-sm text-muted-foreground">
            © 2024 VirtualTour Platform. Built for modern construction visualization.
          </p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/tours/[buildingId]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useParams } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Building2, MapPin, Home, Users, ArrowLeft, Eye } from "lucide-react"
import { BreadcrumbNav } from "@/components/breadcrumb-nav"
import { LoadingSpinner } from "@/components/loading-spinner"
import { Footer } from "@/components/footer"

interface Building {
  id: string
  name: string
  address: string
  description?: string
}

interface Floor {
  id: string
  building_id: string
  floor_number: number
  name: string
  apartments_count?: number
}

export default function BuildingTourPage() {
  const params = useParams()
  const buildingId = params.buildingId as string

const [building, setBuilding] = useState<Building | null>(null)
  const [floors, setFloors] = useState<Floor[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    if (buildingId) {
      fetchBuildingData()
    }
  }, [buildingId])

const fetchBuildingData = async () => {
    try {
      const [buildingRes, floorsRes] = await Promise.all([
        fetch(`/api/buildings/${buildingId}`),
        fetch(`/api/floors/building/${buildingId}`),
      ])

if (buildingRes.ok && floorsRes.ok) {
        const buildingData = await buildingRes.json()
        const floorsData = await floorsRes.json()
        setBuilding(buildingData)
        setFloors(floorsData.sort((a: Floor, b: Floor) => a.floor_number - b.floor_number))
      }
    } catch (error) {
      console.error("Failed to fetch building data:", error)
    } finally {
      setIsLoading(false)
    }
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <LoadingSpinner size="lg" />
          <p className="text-muted-foreground mt-4">Loading building tour...</p>
        </div>
      </div>
    )
  }

if (!building) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <Card className="text-center p-8">
          <CardContent>
            <Building2 className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-xl font-semibold mb-2">Building not found</h3>
            <p className="text-muted-foreground mb-4">The requested building tour could not be found.</p>
            <Link href="/tours">
              <Button>
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to Tours
              </Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

{/* Building Header */}
        <div className="mb-8">
          <div className="flex items-start gap-4 mb-6">
            <div className="flex-1">
              <h2 className="text-4xl font-bold text-foreground mb-2 text-balance">{building.name}</h2>
              <div className="flex items-center gap-2 text-muted-foreground mb-4">
                <MapPin className="h-5 w-5" />
                <span className="text-lg">{building.address}</span>
              </div>
              {building.description && (
                <p className="text-muted-foreground text-lg text-pretty">{building.description}</p>
              )}
            </div>
          </div>

<div className="flex items-center gap-4">
            <Badge variant="secondary" className="text-base px-4 py-2">
              <Home className="mr-2 h-4 w-4" />
              {floors.length} floor{floors.length !== 1 ? "s" : ""}
            </Badge>
            <Badge variant="secondary" className="text-base px-4 py-2">
              <Users className="mr-2 h-4 w-4" />
              {floors.reduce((sum, floor) => sum + (floor.apartments_count || 0), 0)} apartment
              {floors.reduce((sum, floor) => sum + (floor.apartments_count || 0), 0) !== 1 ? "s" : ""}
            </Badge>
          </div>
        </div>

{/* Floors Grid */}
        <div>
          <h3 className="text-2xl font-semibold text-foreground mb-6">Choose a Floor to Explore</h3>

{floors.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {floors.map((floor) => (
                <Card key={floor.id} className="hover:shadow-lg transition-all duration-300 group cursor-pointer">
                  <Link href={`/tours/${buildingId}/${floor.id}`}>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2 group-hover:text-primary transition-colors">
                        <Home className="h-6 w-6" />
                        {floor.name}
                      </CardTitle>
                      <CardDescription>Floor {floor.floor_number}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      {/* Floor visualization placeholder */}
                      <div className="h-32 bg-gradient-to-br from-primary/10 to-accent/10 rounded-lg mb-4 flex items-center justify-center group-hover:from-primary/20 group-hover:to-accent/20 transition-all">
                        <Home className="h-12 w-12 text-primary/40" />
                      </div>

<div className="flex items-center justify-between mb-4">
                        <div className="flex items-center gap-1 text-sm text-muted-foreground">
                          <Users className="h-4 w-4" />
                          <span>
                            {floor.apartments_count || 0} apartment{floor.apartments_count !== 1 ? "s" : ""}
                          </span>
                        </div>
                      </div>

<Button className="w-full group-hover:bg-primary/90 transition-colors">
                        <Eye className="mr-2 h-4 w-4" />
                        Explore Floor
                      </Button>
                    </CardContent>
                  </Link>
                </Card>
              ))}
            </div>
          ) : (
            <Card className="text-center py-12">
              <CardContent>
                <Home className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                <h3 className="text-lg font-semibold mb-2">No floors available</h3>
                <p className="text-muted-foreground">
                  This building doesn't have any floor plans available for touring yet.
                </p>
              </CardContent>
            </Card>
          )}
        </div>
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tours/[buildingId]/[floorId]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useParams } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Building2, Home, Users, ArrowLeft, Eye, MapPin } from "lucide-react"
import { BreadcrumbNav } from "@/components/breadcrumb-nav"
import { LoadingSpinner } from "@/components/loading-spinner"
import { Footer } from "@/components/footer"

interface Building {
  id: string
  name: string
}

interface Floor {
  id: string
  name: string
  floor_number: number
}

interface Apartment {
  id: string
  floor_id: string
  unit_number: string
  name: string
  type?: string
  area?: number
  map_points_count?: number
}

export default function FloorTourPage() {
  const params = useParams()
  const buildingId = params.buildingId as string
  const floorId = params.floorId as string

const [building, setBuilding] = useState<Building | null>(null)
  const [floor, setFloor] = useState<Floor | null>(null)
  const [apartments, setApartments] = useState<Apartment[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    if (buildingId && floorId) {
      fetchFloorData()
    }
  }, [buildingId, floorId])

const fetchFloorData = async () => {
    try {
      const [buildingRes, floorRes, apartmentsRes] = await Promise.all([
        fetch(`/api/buildings/${buildingId}`),
        fetch(`/api/floors/${floorId}`),
        fetch(`/api/apartments/floor/${floorId}`),
      ])

if (buildingRes.ok && floorRes.ok && apartmentsRes.ok) {
        const buildingData = await buildingRes.json()
        const floorData = await floorRes.json()
        const apartmentsData = await apartmentsRes.json()
        setBuilding(buildingData)
        setFloor(floorData)
        setApartments(apartmentsData)
      }
    } catch (error) {
      console.error("Failed to fetch floor data:", error)
    } finally {
      setIsLoading(false)
    }
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <LoadingSpinner size="lg" />
          <p className="text-muted-foreground mt-4">Loading floor tour...</p>
        </div>
      </div>
    )
  }

if (!building || !floor) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <Card className="text-center p-8">
          <CardContent>
            <Home className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-xl font-semibold mb-2">Floor not found</h3>
            <p className="text-muted-foreground mb-4">The requested floor could not be found.</p>
            <Link href={`/tours/${buildingId}`}>
              <Button>
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to Building
              </Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card sticky top-0 z-50 backdrop-blur-sm bg-card/80">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <Building2 className="h-8 w-8 text-primary" />
              <h1 className="text-2xl font-bold text-foreground">VirtualTour</h1>
            </Link>
            <div className="flex items-center gap-2">
              <Link href="/tours">
                <Button variant="ghost" size="sm">
                  All Tours
                </Button>
              </Link>
              <Link href={`/tours/${buildingId}`}>
                <Button variant="ghost">
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  {building.name}
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </header>

{/* Floor Header */}
        <div className="mb-8">
          <div className="flex items-start gap-4 mb-6">
            <div className="flex-1">
              <h2 className="text-4xl font-bold text-foreground mb-2 text-balance">{floor.name}</h2>
              <p className="text-xl text-muted-foreground mb-4">
                {building.name} - Floor {floor.floor_number}
              </p>
            </div>
          </div>

<div className="flex items-center gap-4">
            <Badge variant="secondary" className="text-base px-4 py-2">
              <Users className="mr-2 h-4 w-4" />
              {apartments.length} apartment{apartments.length !== 1 ? "s" : ""}
            </Badge>
            <Badge variant="secondary" className="text-base px-4 py-2">
              <MapPin className="mr-2 h-4 w-4" />
              {apartments.reduce((sum, apt) => sum + (apt.map_points_count || 0), 0)} tour point
              {apartments.reduce((sum, apt) => sum + (apt.map_points_count || 0), 0) !== 1 ? "s" : ""}
            </Badge>
          </div>
        </div>

{/* Apartments Grid */}
        <div>
          <h3 className="text-2xl font-semibold text-foreground mb-6">Choose an Apartment to Tour</h3>

{apartments.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {apartments.map((apartment) => (
                <Card key={apartment.id} className="hover:shadow-lg transition-all duration-300 group cursor-pointer">
                  <Link href={`/tours/${buildingId}/${floorId}/${apartment.id}`}>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2 group-hover:text-primary transition-colors">
                        <Users className="h-6 w-6" />
                        {apartment.name}
                      </CardTitle>
                      <CardDescription>Unit {apartment.unit_number}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      {/* Apartment visualization placeholder */}
                      <div className="h-32 bg-gradient-to-br from-primary/10 to-accent/10 rounded-lg mb-4 flex items-center justify-center group-hover:from-primary/20 group-hover:to-accent/20 transition-all">
                        <Users className="h-12 w-12 text-primary/40" />
                      </div>

<div className="space-y-3">
                        {apartment.type && (
                          <div className="flex items-center gap-2">
                            <Badge variant="outline">{apartment.type}</Badge>
                            {apartment.area && <Badge variant="outline">{apartment.area} sq ft</Badge>}
                          </div>
                        )}

<div className="flex items-center gap-1 text-sm text-muted-foreground">
                          <MapPin className="h-4 w-4" />
                          <span>
                            {apartment.map_points_count || 0} tour point{apartment.map_points_count !== 1 ? "s" : ""}
                          </span>
                        </div>

<Button className="w-full group-hover:bg-primary/90 transition-colors">
                          <Eye className="mr-2 h-4 w-4" />
                          Start Virtual Tour
                        </Button>
                      </div>
                    </CardContent>
                  </Link>
                </Card>
              ))}
            </div>
          ) : (
            <Card className="text-center py-12">
              <CardContent>
                <Users className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                <h3 className="text-lg font-semibold mb-2">No apartments available</h3>
                <p className="text-muted-foreground">
                  This floor doesn't have any apartments available for touring yet.
                </p>
              </CardContent>
            </Card>
          )}
        </div>
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tours/[buildingId]/[floorId]/[apartmentId]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useParams } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { SvgMapViewer } from "@/components/svg-map-viewer"
import { PanoramaViewer } from "@/components/panorama-viewer"
import { Building2, Home, Users, ArrowLeft, MapPin, ImageIcon } from "lucide-react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { BreadcrumbNav } from "@/components/breadcrumb-nav"
import { LoadingSpinner } from "@/components/loading-spinner"
import { Footer } from "@/components/footer"

interface Building {
  id: string
  name: string
}

interface Floor {
  id: string
  name: string
  floor_number: number
}

interface Apartment {
  id: string
  name: string
  unit_number: string
  type?: string
  area?: number
  svg_map_url?: string
}

interface MapPoint {
  id: string
  x: number
  y: number
  title: string
  description?: string
}

interface Image {
  id: string
  point_id: string
  url: string
  title?: string
  description?: string
}

export default function ApartmentTourPage() {
  const params = useParams()
  const buildingId = params.buildingId as string
  const floorId = params.floorId as string
  const apartmentId = params.apartmentId as string

const [building, setBuilding] = useState<Building | null>(null)
  const [floor, setFloor] = useState<Floor | null>(null)
  const [apartment, setApartment] = useState<Apartment | null>(null)
  const [mapPoints, setMapPoints] = useState<MapPoint[]>([])
  const [svgContent, setSvgContent] = useState<string>("")
  const [selectedPoint, setSelectedPoint] = useState<MapPoint | null>(null)
  const [pointImages, setPointImages] = useState<Image[]>([])
  const [selectedImage, setSelectedImage] = useState<Image | null>(null)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    if (buildingId && floorId && apartmentId) {
      fetchTourData()
    }
  }, [buildingId, floorId, apartmentId])

const fetchTourData = async () => {
    try {
      const [buildingRes, floorRes, apartmentRes, mapPointsRes] = await Promise.all([
        fetch(`/api/buildings/${buildingId}`),
        fetch(`/api/floors/${floorId}`),
        fetch(`/api/apartments/${apartmentId}`),
        fetch(`/api/map-points/apartment/${apartmentId}`),
      ])

if (buildingRes.ok && floorRes.ok && apartmentRes.ok && mapPointsRes.ok) {
        const buildingData = await buildingRes.json()
        const floorData = await floorRes.json()
        const apartmentData = await apartmentRes.json()
        const mapPointsData = await mapPointsRes.json()

setBuilding(buildingData)
        setFloor(floorData)
        setApartment(apartmentData)
        setMapPoints(mapPointsData)

// Load SVG content if available
        if (apartmentData.svg_map_url) {
          const svgResponse = await fetch(apartmentData.svg_map_url)
          if (svgResponse.ok) {
            const svgText = await svgResponse.text()
            setSvgContent(svgText)
          }
        }
      }
    } catch (error) {
      console.error("Failed to fetch tour data:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handlePointClick = async (point: MapPoint) => {
    setSelectedPoint(point)

// Fetch images for this point
    try {
      const response = await fetch(`/api/images/point/${point.id}`)
      if (response.ok) {
        const images = await response.json()
        setPointImages(images)
        if (images.length > 0) {
          setSelectedImage(images[0])
        }
      }
    } catch (error) {
      console.error("Failed to fetch point images:", error)
    }
  }

const closePointDialog = () => {
    setSelectedPoint(null)
    setPointImages([])
    setSelectedImage(null)
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <LoadingSpinner size="lg" />
          <p className="text-muted-foreground mt-4">Loading virtual tour...</p>
        </div>
      </div>
    )
  }

if (!building || !floor || !apartment) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <Card className="text-center p-8">
          <CardContent>
            <Users className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-xl font-semibold mb-2">Tour not found</h3>
            <p className="text-muted-foreground mb-4">The requested virtual tour could not be found.</p>
            <Link href={`/tours/${buildingId}/${floorId}`}>
              <Button>
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to Floor
              </Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card sticky top-0 z-50 backdrop-blur-sm bg-card/80">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <Building2 className="h-8 w-8 text-primary" />
              <h1 className="text-2xl font-bold text-foreground">VirtualTour</h1>
            </Link>
            <div className="flex items-center gap-2">
              <Link href="/tours">
                <Button variant="ghost" size="sm">
                  All Tours
                </Button>
              </Link>
              <Link href={`/tours/${buildingId}`}>
                <Button variant="ghost" size="sm">
                  {building.name}
                </Button>
              </Link>
              <Link href={`/tours/${buildingId}/${floorId}`}>
                <Button variant="ghost">
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  {floor.name}
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </header>

{/* Tour Header */}
        <div className="mb-8">
          <h2 className="text-4xl font-bold text-foreground mb-2 text-balance">{apartment.name}</h2>
          <p className="text-xl text-muted-foreground mb-4">
            {building.name} - {floor.name} - Unit {apartment.unit_number}
          </p>

<div className="flex items-center gap-4">
            {apartment.type && (
              <Badge variant="secondary" className="text-base px-4 py-2">
                {apartment.type}
              </Badge>
            )}
            {apartment.area && (
              <Badge variant="secondary" className="text-base px-4 py-2">
                {apartment.area} sq ft
              </Badge>
            )}
            <Badge variant="secondary" className="text-base px-4 py-2">
              <MapPin className="mr-2 h-4 w-4" />
              {mapPoints.length} tour point{mapPoints.length !== 1 ? "s" : ""}
            </Badge>
          </div>
        </div>

{/* Virtual Tour */}
        {svgContent ? (
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Home className="h-5 w-5" />
                Interactive Floor Plan
              </CardTitle>
              <CardDescription>Click on the highlighted points to view 360° images of different areas</CardDescription>
            </CardHeader>
            <CardContent>
              <div style={{ height: "600px" }}>
                <SvgMapViewer
                  svgContent={svgContent}
                  mapPoints={mapPoints}
                  onPointClick={handlePointClick}
                  interactive={true}
                  className="w-full h-full"
                />
              </div>
            </CardContent>
          </Card>
        ) : (
          <Card className="text-center py-16">
            <CardContent>
              <Home className="h-16 w-16 text-muted-foreground mx-auto mb-6" />
              <h3 className="text-2xl font-semibold mb-4">Floor plan not available</h3>
              <p className="text-muted-foreground mb-6 max-w-md mx-auto">
                The interactive floor plan for this apartment is not yet available. Please check back later or contact
                us for more information.
              </p>
              <Link href={`/tours/${buildingId}/${floorId}`}>
                <Button>
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Back to Floor
                </Button>
              </Link>
            </CardContent>
          </Card>
        )}

{/* Point Details Dialog */}
        <Dialog open={!!selectedPoint} onOpenChange={closePointDialog}>
          <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden">
            <DialogHeader>
              <DialogTitle className="flex items-center gap-2">
                <MapPin className="h-5 w-5" />
                {selectedPoint?.title}
              </DialogTitle>
              {selectedPoint?.description && <DialogDescription>{selectedPoint.description}</DialogDescription>}
            </DialogHeader>

<div className="flex-1 overflow-hidden">
              {selectedImage ? (
                <div className="space-y-4">
                  <div style={{ height: "400px" }}>
                    <PanoramaViewer
                      imageUrl={selectedImage.url}
                      title={selectedImage.title}
                      className="w-full h-full rounded-lg"
                    />
                  </div>

{pointImages.length > 1 && (
                    <div className="flex gap-2 overflow-x-auto pb-2">
                      {pointImages.map((image) => (
                        <Button
                          key={image.id}
                          variant={selectedImage.id === image.id ? "default" : "outline"}
                          size="sm"
                          onClick={() => setSelectedImage(image)}
                          className="flex-shrink-0"
                        >
                          <ImageIcon className="mr-2 h-3 w-3" />
                          {image.title || `View ${pointImages.indexOf(image) + 1}`}
                        </Button>
                      ))}
                    </div>
                  )}
                </div>
              ) : (
                <div className="h-64 flex items-center justify-center text-muted-foreground">
                  <div className="text-center">
                    <ImageIcon className="h-12 w-12 mx-auto mb-4" />
                    <p>No 360° images available for this location</p>
                  </div>
                </div>
              )}
            </div>
          </DialogContent>
        </Dialog>
      </div>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tours/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Building2, MapPin, Home, Users, Search, Eye, ArrowLeft } from "lucide-react"
import { LoadingSpinner } from "@/components/loading-spinner"
import { Footer } from "@/components/footer"

interface Building {
  id: string
  name: string
  address: string
  description?: string
  floors_count?: number
  apartments_count?: number
  created_at: string
}

export default function ToursPage() {
  const [buildings, setBuildings] = useState<Building[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    fetchBuildings()
  }, [])

const fetchBuildings = async () => {
    try {
      const response = await fetch("/api/buildings")
      if (response.ok) {
        const data = await response.json()
        setBuildings(data)
      }
    } catch (error) {
      console.error("Failed to fetch buildings:", error)
    } finally {
      setIsLoading(false)
    }
  }

const filteredBuildings = buildings.filter(
    (building) =>
      building.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      building.address.toLowerCase().includes(searchTerm.toLowerCase()),
  )

<div className="container mx-auto px-4 py-8">
        {/* Hero Section */}
        <div className="text-center mb-12">
          <h2 className="text-4xl font-bold text-foreground mb-4 text-balance">Explore Virtual Tours</h2>
          <p className="text-xl text-muted-foreground mb-8 text-pretty max-w-2xl mx-auto">
            Take immersive virtual tours of buildings and apartments. Navigate through interactive floor plans and
            experience 360° views.
          </p>

<div className="relative max-w-md mx-auto">
            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search buildings..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

{/* Buildings Grid */}
        {isLoading ? (
          <div className="flex justify-center py-16">
            <div className="text-center">
              <LoadingSpinner size="lg" />
              <p className="text-muted-foreground mt-4">Loading tours...</p>
            </div>
          </div>
        ) : (
          <>
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-2xl font-semibold text-foreground">Available Tours</h3>
              <Badge variant="secondary">
                {filteredBuildings.length} building{filteredBuildings.length !== 1 ? "s" : ""}
              </Badge>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {filteredBuildings.map((building) => (
                <Card key={building.id} className="hover:shadow-lg transition-all duration-300 group cursor-pointer">
                  <Link href={`/tours/${building.id}`}>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2 group-hover:text-primary transition-colors">
                        <Building2 className="h-6 w-6" />
                        {building.name}
                      </CardTitle>
                      <CardDescription className="flex items-center gap-1">
                        <MapPin className="h-4 w-4" />
                        {building.address}
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      {/* Placeholder for building image */}
                      <div className="h-48 bg-gradient-to-br from-primary/10 to-accent/10 rounded-lg mb-4 flex items-center justify-center group-hover:from-primary/20 group-hover:to-accent/20 transition-all">
                        <Building2 className="h-16 w-16 text-primary/40" />
                      </div>

{building.description && (
                        <p className="text-muted-foreground mb-4 line-clamp-2">{building.description}</p>
                      )}

<div className="flex items-center justify-between mb-4">
                        <div className="flex items-center gap-4 text-sm">
                          <div className="flex items-center gap-1">
                            <Home className="h-4 w-4 text-muted-foreground" />
                            <span>{building.floors_count || 0} floors</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <Users className="h-4 w-4 text-muted-foreground" />
                            <span>{building.apartments_count || 0} units</span>
                          </div>
                        </div>
                      </div>

<Button className="w-full group-hover:bg-primary/90 transition-colors">
                        <Eye className="mr-2 h-4 w-4" />
                        Start Tour
                      </Button>
                    </CardContent>
                  </Link>
                </Card>
              ))}
            </div>
          </>
        )}

{!isLoading && filteredBuildings.length === 0 && (
          <Card className="text-center py-16">
            <CardContent>
              <Building2 className="h-16 w-16 text-muted-foreground mx-auto mb-6" />
              <h3 className="text-2xl font-semibold mb-4">No tours found</h3>
              <p className="text-muted-foreground mb-6 max-w-md mx-auto">
                {searchTerm
                  ? "No buildings match your search criteria. Try adjusting your search terms."
                  : "No virtual tours are currently available. Check back soon for new content."}
              </p>
              {searchTerm && (
                <Button variant="outline" onClick={() => setSearchTerm("")}>
                  Clear Search
                </Button>
              )}
            </CardContent>
          </Card>
        )}
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin-layout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { useRouter, usePathname } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { LoadingSpinner } from "@/components/loading-spinner"
import { Building2, Home, MapPin, ImageIcon, Users, BarChart3, LogOut, Settings } from "lucide-react"
import { cn } from "@/lib/utils"

interface AdminLayoutProps {
  children: React.ReactNode
}

const navigation = [
  { name: "Dashboard", href: "/admin/dashboard", icon: BarChart3 },
  { name: "Buildings", href: "/admin/buildings", icon: Building2 },
  { name: "Floors", href: "/admin/floors", icon: Home },
  { name: "Apartments", href: "/admin/apartments", icon: Users },
  { name: "Map Points", href: "/admin/map-points", icon: MapPin },
  { name: "Map Editor", href: "/admin/map-editor", icon: Settings },
  { name: "Images", href: "/admin/images", icon: ImageIcon },
]

export function AdminLayout({ children }: AdminLayoutProps) {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()
  const pathname = usePathname()

useEffect(() => {
    const token = localStorage.getItem("admin_token")
    if (!token && pathname !== "/admin") {
      router.push("/admin")
    } else {
      setIsAuthenticated(!!token)
    }
    setIsLoading(false)
  }, [router, pathname])

const handleLogout = () => {
    localStorage.removeItem("admin_token")
    router.push("/admin")
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <LoadingSpinner size="lg" />
          <p className="text-muted-foreground mt-4">Loading admin panel...</p>
        </div>
      </div>
    )
  }

if (!isAuthenticated && pathname !== "/admin") {
    return null
  }

if (pathname === "/admin") {
    return <>{children}</>
  }

return (
    <div className="min-h-screen bg-background flex">
      {/* Sidebar */}
      <div className="w-64 bg-card border-r border-border flex flex-col">
        <div className="p-6 flex-1">
          <Link href="/admin/dashboard" className="flex items-center gap-2 mb-8 hover:opacity-80 transition-opacity">
            <Building2 className="h-8 w-8 text-primary" />
            <h1 className="text-xl font-bold text-foreground">Admin Panel</h1>
          </Link>

<nav className="space-y-2">
            {navigation.map((item) => {
              const Icon = item.icon
              const isActive = pathname.startsWith(item.href)

return (
                <Link key={item.name} href={item.href}>
                  <Button
                    variant={isActive ? "secondary" : "ghost"}
                    className={cn(
                      "w-full justify-start transition-all",
                      isActive && "bg-primary/10 text-primary hover:bg-primary/20",
                    )}
                  >
                    <Icon className="mr-2 h-4 w-4" />
                    {item.name}
                  </Button>
                </Link>
              )
            })}
          </nav>
        </div>

<div className="p-4 border-t border-border">
          <Link href="/" className="block mb-2">
            <Button variant="ghost" className="w-full justify-start">
              <Home className="mr-2 h-4 w-4" />
              View Site
            </Button>
          </Link>
          <Button variant="outline" className="w-full justify-start bg-transparent" onClick={handleLogout}>
            <LogOut className="mr-2 h-4 w-4" />
            Logout
          </Button>
        </div>
      </div>

{/* Main Content */}
      <div className="flex-1 overflow-auto">{children}</div>
    </div>
  )
}
[V0_FILE]png:file="public/images/solvits-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-jhbKBHiQ80K3xDy7DnpiNyPOZZFjCc.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Footer } from "@/components/footer"
import { Building2, Users, BarChart3, Settings, ArrowRight, Zap, Shield, Smartphone, Plus } from "lucide-react"

export default function HomePage() {
  const featuredBuildings = [
    {
      id: 1,
      name: "Skyline Tower",
      location: "Downtown District",
      floors: 25,
      apartments: 180,
      status: "In Progress",
      image: "/modern-office-building-construction.png",
    },
    {
      id: 2,
      name: "Garden Residences",
      location: "Green Valley",
      floors: 8,
      apartments: 64,
      status: "Completed",
      image: "/residential-apartment-building.png",
    },
    {
      id: 3,
      name: "Tech Hub Complex",
      location: "Innovation Park",
      floors: 15,
      apartments: 120,
      status: "Planning",
      image: "/modern-tech-office-complex.jpg",
    },
  ]

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card/80 sticky top-0 z-50 backdrop-blur-md">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Image
                src="/images/solvits-logo.png"
                alt="SOLVITS Solutions"
                width={180}
                height={40}
                className="h-10 w-auto"
              />
            </div>
            <nav className="flex items-center gap-4">
              <Link href="/tours">
                <Button variant="ghost" className="text-foreground hover:text-primary">
                  View Projects
                </Button>
              </Link>
              <Link href="/admin">
                <Button className="bg-primary hover:bg-primary/90">
                  <Settings className="mr-2 h-4 w-4" />
                  Admin Panel
                </Button>
              </Link>
            </nav>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="py-20 px-4 bg-gradient-to-br from-primary/5 via-background to-accent/5">
        <div className="container mx-auto text-center max-w-5xl">
          <h2 className="text-5xl md:text-6xl font-bold text-foreground mb-6 text-balance">
            Modern Property Management
            <span className="text-primary block">for Developers</span>
          </h2>
          <p className="text-xl text-muted-foreground mb-8 text-pretty max-w-3xl mx-auto">
            Streamline your construction projects with our comprehensive platform. Manage buildings, track progress, and
            showcase properties with interactive floor plans and immersive virtual tours.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/admin/buildings">
              <Button size="lg" className="text-lg px-8 bg-primary hover:bg-primary/90">
                <Plus className="mr-2 h-5 w-5" />
                Add New Project
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
            </Link>
            <Link href="/tours">
              <Button
                variant="outline"
                size="lg"
                className="text-lg px-8 border-primary text-primary hover:bg-primary/5 bg-transparent"
              >
                <Building2 className="mr-2 h-5 w-5" />
                View Portfolio
              </Button>
            </Link>
          </div>
        </div>
      </section>

{/* Featured Buildings Section */}
      <section className="py-20 px-4">
        <div className="container mx-auto max-w-7xl">
          <div className="flex items-center justify-between mb-12">
            <div>
              <h3 className="text-3xl md:text-4xl font-bold text-foreground mb-4">Current Projects</h3>
              <p className="text-xl text-muted-foreground">Manage and showcase your property portfolio</p>
            </div>
            <Link href="/admin/buildings">
              <Button className="bg-primary hover:bg-primary/90">
                <Plus className="mr-2 h-4 w-4" />
                Add Building
              </Button>
            </Link>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {featuredBuildings.map((building) => (
              <Card
                key={building.id}
                className="group hover:shadow-xl transition-all duration-300 border-border/50 hover:border-primary/20 overflow-hidden"
              >
                <div className="aspect-video relative overflow-hidden">
                  <Image
                    src={building.image || "/placeholder.svg"}
                    alt={building.name}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div className="absolute top-4 right-4">
                    <span
                      className={`px-3 py-1 rounded-full text-xs font-medium ${
                        building.status === "Completed"
                          ? "bg-green-100 text-green-800"
                          : building.status === "In Progress"
                            ? "bg-blue-100 text-blue-800"
                            : "bg-yellow-100 text-yellow-800"
                      }`}
                    >
                      {building.status}
                    </span>
                  </div>
                </div>
                <CardHeader className="pb-3">
                  <CardTitle className="text-xl group-hover:text-primary transition-colors">{building.name}</CardTitle>
                  <CardDescription className="text-muted-foreground">{building.location}</CardDescription>
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="flex justify-between text-sm text-muted-foreground mb-4">
                    <span>{building.floors} Floors</span>
                    <span>{building.apartments} Units</span>
                  </div>
                  <div className="flex gap-2">
                    <Link href={`/tours/${building.id}`} className="flex-1">
                      <Button
                        variant="outline"
                        size="sm"
                        className="w-full border-primary/20 hover:bg-primary/5 bg-transparent"
                      >
                        View Tour
                      </Button>
                    </Link>
                    <Link href={`/admin/buildings/${building.id}`}>
                      <Button size="sm" className="bg-primary hover:bg-primary/90">
                        Manage
                      </Button>
                    </Link>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Platform Features Section */}
      <section className="py-20 px-4 bg-muted/30">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-16">
            <h3 className="text-3xl md:text-4xl font-bold text-foreground mb-4">Platform Capabilities</h3>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Everything you need to manage construction projects and showcase properties professionally
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <Card className="hover:shadow-lg transition-all duration-300 group border-border/50 hover:border-primary/20">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-4 mx-auto group-hover:bg-primary/20 transition-colors">
                  <Building2 className="h-8 w-8 text-primary" />
                </div>
                <CardTitle className="text-lg">Project Management</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <p className="text-muted-foreground text-sm">
                  Organize buildings, floors, and units with comprehensive project tracking and status management.
                </p>
              </CardContent>
            </Card>

<Card className="hover:shadow-lg transition-all duration-300 group border-border/50 hover:border-primary/20">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-4 mx-auto group-hover:bg-primary/20 transition-colors">
                  <BarChart3 className="h-8 w-8 text-primary" />
                </div>
                <CardTitle className="text-lg">Analytics Dashboard</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <p className="text-muted-foreground text-sm">
                  Track project progress, occupancy rates, and performance metrics with detailed reporting tools.
                </p>
              </CardContent>
            </Card>

<Card className="hover:shadow-lg transition-all duration-300 group border-border/50 hover:border-primary/20">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-4 mx-auto group-hover:bg-primary/20 transition-colors">
                  <Settings className="h-8 w-8 text-primary" />
                </div>
                <CardTitle className="text-lg">Interactive Maps</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <p className="text-muted-foreground text-sm">
                  Create interactive floor plans with clickable points and seamless navigation between spaces.
                </p>
              </CardContent>
            </Card>

<Card className="hover:shadow-lg transition-all duration-300 group border-border/50 hover:border-primary/20">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-4 mx-auto group-hover:bg-primary/20 transition-colors">
                  <Users className="h-8 w-8 text-primary" />
                </div>
                <CardTitle className="text-lg">Client Showcase</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <p className="text-muted-foreground text-sm">
                  Present properties to clients with professional virtual tours and detailed project information.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Benefits Section */}
      <section className="py-20 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h3 className="text-3xl md:text-4xl font-bold text-foreground mb-6">Why Choose SOLVITS?</h3>
              <div className="space-y-6">
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center flex-shrink-0 mt-1">
                    <Zap className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-foreground mb-2 text-lg">Streamlined Workflow</h4>
                    <p className="text-muted-foreground">
                      Optimize your development process with integrated project management and client presentation
                      tools.
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center flex-shrink-0 mt-1">
                    <Shield className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-foreground mb-2 text-lg">Enterprise Security</h4>
                    <p className="text-muted-foreground">
                      Protect sensitive project data with enterprise-grade security and reliable cloud infrastructure.
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center flex-shrink-0 mt-1">
                    <Smartphone className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-foreground mb-2 text-lg">Multi-Device Access</h4>
                    <p className="text-muted-foreground">
                      Access your projects anywhere with responsive design optimized for desktop, tablet, and mobile.
                    </p>
                  </div>
                </div>
              </div>
            </div>

<div className="bg-gradient-to-br from-primary/10 to-accent/10 rounded-2xl p-12 flex items-center justify-center">
              <div className="text-center">
                <div className="relative">
                  <Building2 className="h-32 w-32 text-primary/30 mx-auto mb-6" />
                  <div className="absolute -top-2 -right-2 w-8 h-8 bg-primary rounded-full flex items-center justify-center">
                    <BarChart3 className="h-4 w-4 text-white" />
                  </div>
                </div>
                <p className="text-muted-foreground font-medium">Professional Property Management</p>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20 px-4 bg-gradient-to-r from-primary/5 to-accent/5">
        <div className="container mx-auto text-center max-w-4xl">
          <h3 className="text-3xl md:text-4xl font-bold text-foreground mb-6">Ready to Transform Your Projects?</h3>
          <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
            Join leading developers and construction companies using SOLVITS to manage and showcase their properties
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/admin/buildings">
              <Button size="lg" className="text-lg px-8 bg-primary hover:bg-primary/90">
                <Plus className="mr-2 h-5 w-5" />
                Start Managing Projects
              </Button>
            </Link>
            <Link href="/tours">
              <Button
                variant="outline"
                size="lg"
                className="text-lg px-8 border-primary text-primary hover:bg-primary/5 bg-transparent"
              >
                View Demo Portfolio
              </Button>
            </Link>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]png:file="public/modern-office-building-construction.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-office-building-construction-0kwWXUaMv4BuEas9tm7kqZ9Ds920Ok.png" isMerged="true"
[V0_FILE]png:file="public/residential-apartment-building.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/residential-apartment-building-U94IEwXX6F2jCDR2NOfnT9WjJyQLHI.png" isMerged="true"
[V0_FILE]jpg:file="public/modern-tech-office-complex.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-tech-office-complex-Ris7uqnyiQrNAVz8Wb1MmKzIjFYkqt.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Lock, User, Info } from "lucide-react"
import Image from "next/image"

export default function AdminLoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState("")
  const router = useRouter()

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError("")

// Demo credentials for frontend-only environment
    const demoCredentials = {
      email: "admin@solvits.com",
      password: "demo123",
    }

try {
      // Simulate API call delay
      await new Promise((resolve) => setTimeout(resolve, 1000))

if (email === demoCredentials.email && password === demoCredentials.password) {
        // Store demo token
        localStorage.setItem("admin_token", "demo_token_" + Date.now())
        router.push("/admin/dashboard")
      } else {
        setError("Invalid credentials. Please use the demo credentials shown below.")
      }
    } catch (err) {
      setError("Login failed. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

const fillDemoCredentials = () => {
    setEmail("admin@solvits.com")
    setPassword("demo123")
  }

return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
          <div className="flex items-center justify-center gap-3 mb-4">
            <Image
              src="/images/solvits-logo.png"
              alt="SOLVITS Solutions"
              width={200}
              height={60}
              className="h-12 w-auto"
            />
          </div>
          <p className="text-muted-foreground">Property Management Platform</p>
        </div>

<Card className="mb-4 border-cyan-200 bg-cyan-50/50">
          <CardContent className="pt-4">
            <div className="flex items-start gap-2">
              <Info className="h-4 w-4 text-cyan-600 mt-0.5" />
              <div className="text-sm">
                <p className="font-medium text-cyan-900 mb-1">Demo Credentials:</p>
                <p className="text-cyan-700">Email: admin@solvits.com</p>
                <p className="text-cyan-700">Password: demo123</p>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={fillDemoCredentials}
                  className="mt-2 text-cyan-700 border-cyan-300 hover:bg-cyan-100 bg-transparent"
                >
                  Auto-fill credentials
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Lock className="h-5 w-5" />
              Admin Login
            </CardTitle>
            <CardDescription>Enter your credentials to access the admin dashboard</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleLogin} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <div className="relative">
                  <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                  <Input
                    id="email"
                    type="email"
                    placeholder="admin@solvits.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="pl-10"
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                  <Input
                    id="password"
                    type="password"
                    placeholder="Enter your password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="pl-10"
                    required
                  />
                </div>
              </div>

{error && (
                <Alert variant="destructive">
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

<Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? "Signing in..." : "Sign In"}
              </Button>
            </form>
          </CardContent>
        </Card>

<div className="text-center mt-6">
          <Button variant="ghost" onClick={() => router.push("/")}>
            Back to Home
          </Button>
        </div>
      </div>
    </div>
  )
}a0:T24e78,[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Updated color palette to match SOLVITS branding with cyan/teal colors */
  --background: oklch(1 0 0); /* Pure white */
  --foreground: oklch(0.35 0 0); /* Dark gray #4b5563 */
  --card: oklch(0.98 0 0); /* Very light gray #f9fafb */
  --card-foreground: oklch(0.35 0 0); /* Dark gray */
  --popover: oklch(1 0 0); /* White */
  --popover-foreground: oklch(0.35 0 0); /* Dark gray */
  --primary: oklch(0.55 0.15 200); /* Cyan #0891b2 */
  --primary-foreground: oklch(1 0 0); /* White */
  --secondary: oklch(0.98 0 0); /* Light gray */
  --secondary-foreground: oklch(0.35 0 0); /* Dark gray */
  --muted: oklch(0.98 0 0); /* Very light gray #f9fafb */
  --muted-foreground: oklch(0.45 0 0); /* Muted gray */
  --accent: oklch(0.6 0.15 200); /* Accent cyan #0ea5e9 */
  --accent-foreground: oklch(1 0 0); /* White */
  --destructive: oklch(0.55 0.22 25); /* Red for destructive actions */
  --destructive-foreground: oklch(1 0 0); /* White */
  --border: oklch(0.92 0 0); /* Light border #e5e7eb */
  --input: oklch(0.98 0 0); /* Light input background */
  --ring: oklch(0.55 0.15 200 / 0.3); /* Primary with opacity */
  --chart-1: oklch(0.65 0.15 220); /* Blue chart color */
  --chart-2: oklch(0.65 0.15 160); /* Green chart color */
  --chart-3: oklch(0.7 0.15 80); /* Yellow chart color */
  --chart-4: oklch(0.65 0.15 320); /* Pink chart color */
  --chart-5: oklch(0.65 0.15 270); /* Purple chart color */
  --radius: 0.75rem; /* Increased border radius for modern look */
  --sidebar: oklch(0.98 0 0); /* Light gray */
  --sidebar-foreground: oklch(0.35 0 0); /* Dark gray */
  --sidebar-primary: oklch(0.55 0.15 200); /* Primary cyan */
  --sidebar-primary-foreground: oklch(1 0 0); /* White */
  --sidebar-accent: oklch(0.6 0.15 200); /* Accent cyan */
  --sidebar-accent-foreground: oklch(1 0 0); /* White */
  --sidebar-border: oklch(0.92 0 0); /* Light border */
  --sidebar-ring: oklch(0.55 0.15 200 / 0.3); /* Primary with opacity */
}

.dark {
  --background: oklch(0.08 0 0); /* Very dark background */
  --foreground: oklch(0.95 0 0); /* Light text */
  --card: oklch(0.12 0 0); /* Dark card background */
  --card-foreground: oklch(0.95 0 0); /* Light card text */
  --popover: oklch(0.08 0 0); /* Dark popover */
  --popover-foreground: oklch(0.95 0 0); /* Light popover text */
  --primary: oklch(0.6 0.15 200); /* Brighter cyan for dark mode */
  --primary-foreground: oklch(0.08 0 0); /* Dark text on primary */
  --secondary: oklch(0.15 0 0); /* Dark secondary */
  --secondary-foreground: oklch(0.95 0 0); /* Light secondary text */
  --muted: oklch(0.15 0 0); /* Dark muted */
  --muted-foreground: oklch(0.7 0 0); /* Muted text */
  --accent: oklch(0.65 0.15 200); /* Bright accent cyan */
  --accent-foreground: oklch(0.08 0 0); /* Dark text on accent */
  --destructive: oklch(0.5 0.22 25); /* Destructive red */
  --destructive-foreground: oklch(0.95 0 0); /* Light text on destructive */
  --border: oklch(0.2 0 0); /* Dark border */
  --input: oklch(0.12 0 0); /* Dark input */
  --ring: oklch(0.6 0.15 200 / 0.3); /* Primary ring with opacity */
  --chart-1: oklch(0.65 0.15 220); /* Chart colors for dark mode */
  --chart-2: oklch(0.65 0.15 160);
  --chart-3: oklch(0.7 0.15 80);
  --chart-4: oklch(0.65 0.15 320);
  --chart-5: oklch(0.65 0.15 270);
  --sidebar: oklch(0.1 0 0); /* Dark sidebar */
  --sidebar-foreground: oklch(0.95 0 0); /* Light sidebar text */
  --sidebar-primary: oklch(0.6 0.15 200); /* Sidebar primary */
  --sidebar-primary-foreground: oklch(0.08 0 0); /* Dark text on sidebar primary */
  --sidebar-accent: oklch(0.65 0.15 200); /* Sidebar accent */
  --sidebar-accent-foreground: oklch(0.08 0 0); /* Dark text on sidebar accent */
  --sidebar-border: oklch(0.2 0 0); /* Dark sidebar border */
  --sidebar-ring: oklch(0.6 0.15 200 / 0.3); /* Sidebar ring */
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }

/* Added smooth transitions for modern feel */
  .transition-all {
    transition: all 0.2s ease-in-out;
  }

/* Added glassmorphism utility classes */
  .glass {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

.glass-dark {
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import { Suspense } from "react"
import "./globals.css"

export const metadata: Metadata = {
  title: "VirtualTour Platform",
  description: "Modern construction virtual tour platform with interactive floor plans and 360° views",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable} antialiased`}>
        <Suspense fallback={null}>{children}</Suspense>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Building2, Home, MapPin, ImageIcon, Users, Plus, BarChart3 } from "lucide-react"
import Link from "next/link"

interface DashboardStats {
  buildings: number
  floors: number
  apartments: number
  mapPoints: number
}

export default function AdminDashboard() {
  const [stats, setStats] = useState<DashboardStats>({ buildings: 0, floors: 0, apartments: 0, mapPoints: 0 })
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()

useEffect(() => {
    // Check authentication
    const token = localStorage.getItem("admin_token")
    if (!token) {
      router.push("/admin")
      return
    }

// Fetch dashboard stats
    fetchStats()
  }, [router])

const fetchStats = async () => {
    try {
      const token = localStorage.getItem("admin_token")
      const [buildingsRes, floorsRes, apartmentsRes, pointsRes] = await Promise.all([
        fetch("/api/buildings", { headers: { Authorization: `Bearer ${token}` } }),
        fetch("/api/floors", { headers: { Authorization: `Bearer ${token}` } }),
        fetch("/api/apartments", { headers: { Authorization: `Bearer ${token}` } }),
        fetch("/api/map-points", { headers: { Authorization: `Bearer ${token}` } }),
      ])

const buildings = await buildingsRes.json()
      const floors = await floorsRes.json()
      const apartments = await apartmentsRes.json()
      const points = await pointsRes.json()

setStats({
        buildings: buildings.length || 0,
        floors: floors.length || 0,
        apartments: apartments.length || 0,
        mapPoints: points.length || 0,
      })
    } catch (error) {
      console.error("Failed to fetch stats:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleLogout = () => {
    localStorage.removeItem("admin_token")
    router.push("/admin")
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <Building2 className="h-12 w-12 text-primary mx-auto mb-4 animate-pulse" />
          <p className="text-muted-foreground">Loading dashboard...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Building2 className="h-8 w-8 text-primary" />
              <h1 className="text-2xl font-bold text-foreground">Admin Dashboard</h1>
            </div>
            <div className="flex items-center gap-4">
              <Link href="/">
                <Button variant="ghost">View Site</Button>
              </Link>
              <Button variant="outline" onClick={handleLogout}>
                Logout
              </Button>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Stats Overview */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Buildings</CardTitle>
              <Building2 className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.buildings}</div>
              <p className="text-xs text-muted-foreground">Total buildings managed</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Floors</CardTitle>
              <Home className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.floors}</div>
              <p className="text-xs text-muted-foreground">Floor plans uploaded</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Apartments</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.apartments}</div>
              <p className="text-xs text-muted-foreground">Apartment units</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Map Points</CardTitle>
              <MapPin className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.mapPoints}</div>
              <p className="text-xs text-muted-foreground">Interactive points</p>
            </CardContent>
          </Card>
        </div>

{/* Quick Actions */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Building2 className="h-5 w-5" />
                Buildings
              </CardTitle>
              <CardDescription>Manage building information and properties</CardDescription>
            </CardHeader>
            <CardContent className="space-y-2">
              <Link href="/admin/buildings">
                <Button className="w-full">
                  <BarChart3 className="mr-2 h-4 w-4" />
                  Manage Buildings
                </Button>
              </Link>
              <Link href="/admin/buildings/new">
                <Button variant="outline" className="w-full bg-transparent">
                  <Plus className="mr-2 h-4 w-4" />
                  Add New Building
                </Button>
              </Link>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Home className="h-5 w-5" />
                Floor Plans
              </CardTitle>
              <CardDescription>Upload and manage SVG floor plans</CardDescription>
            </CardHeader>
            <CardContent className="space-y-2">
              <Link href="/admin/floors">
                <Button className="w-full">
                  <BarChart3 className="mr-2 h-4 w-4" />
                  Manage Floors
                </Button>
              </Link>
              <Link href="/admin/floors/new">
                <Button variant="outline" className="w-full bg-transparent">
                  <Plus className="mr-2 h-4 w-4" />
                  Upload Floor Plan
                </Button>
              </Link>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <MapPin className="h-5 w-5" />
                Interactive Points
              </CardTitle>
              <CardDescription>Create and manage map points with 360° images</CardDescription>
            </CardHeader>
            <CardContent className="space-y-2">
              <Link href="/admin/map-points">
                <Button className="w-full">
                  <BarChart3 className="mr-2 h-4 w-4" />
                  Manage Points
                </Button>
              </Link>
              <Link href="/admin/map-points/new">
                <Button variant="outline" className="w-full bg-transparent">
                  <Plus className="mr-2 h-4 w-4" />
                  Add Map Point
                </Button>
              </Link>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <ImageIcon className="h-5 w-5" />
                360° Images
              </CardTitle>
              <CardDescription>Upload and manage panoramic images</CardDescription>
            </CardHeader>
            <CardContent className="space-y-2">
              <Link href="/admin/images">
                <Button className="w-full">
                  <BarChart3 className="mr-2 h-4 w-4" />
                  Manage Images
                </Button>
              </Link>
              <Link href="/admin/images/upload">
                <Button variant="outline" className="w-full bg-transparent">
                  <Plus className="mr-2 h-4 w-4" />
                  Upload Images
                </Button>
              </Link>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Users className="h-5 w-5" />
                Apartments
              </CardTitle>
              <CardDescription>Manage apartment units and details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-2">
              <Link href="/admin/apartments">
                <Button className="w-full">
                  <BarChart3 className="mr-2 h-4 w-4" />
                  Manage Apartments
                </Button>
              </Link>
              <Link href="/admin/apartments/new">
                <Button variant="outline" className="w-full bg-transparent">
                  <Plus className="mr-2 h-4 w-4" />
                  Add Apartment
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/buildings/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { AdminLayout } from "@/components/admin-layout"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Plus, Search, Edit, Trash2, Building2, MapPin } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface Building {
  id: string
  name: string
  address: string
  description?: string
  floors_count?: number
  apartments_count?: number
  created_at: string
}

export default function BuildingsPage() {
  const [buildings, setBuildings] = useState<Building[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    fetchBuildings()
  }, [])

const fetchBuildings = async () => {
    try {
      const token = localStorage.getItem("admin_token")
      const response = await fetch("/api/buildings", {
        headers: { Authorization: `Bearer ${token}` },
      })
      if (response.ok) {
        const data = await response.json()
        setBuildings(data)
      }
    } catch (error) {
      console.error("Failed to fetch buildings:", error)
    } finally {
      setIsLoading(false)
    }
  }

const deleteBuilding = async (id: string) => {
    try {
      const token = localStorage.getItem("admin_token")
      const response = await fetch(`/api/buildings/${id}`, {
        method: "DELETE",
        headers: { Authorization: `Bearer ${token}` },
      })
      if (response.ok) {
        setBuildings(buildings.filter((b) => b.id !== id))
      }
    } catch (error) {
      console.error("Failed to delete building:", error)
    }
  }

return (
    <AdminLayout>
      <div className="p-6">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-3xl font-bold text-foreground">Buildings</h1>
            <p className="text-muted-foreground">Manage your building portfolio</p>
          </div>
          <Link href="/admin/buildings/new">
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Add Building
            </Button>
          </Link>
        </div>

<div className="flex items-center gap-4 mb-6">
          <div className="relative flex-1 max-w-sm">
            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search buildings..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
          <Badge variant="secondary">
            {filteredBuildings.length} building{filteredBuildings.length !== 1 ? "s" : ""}
          </Badge>
        </div>

{isLoading ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[...Array(6)].map((_, i) => (
              <Card key={i} className="animate-pulse">
                <CardHeader>
                  <div className="h-4 bg-muted rounded w-3/4"></div>
                  <div className="h-3 bg-muted rounded w-1/2"></div>
                </CardHeader>
                <CardContent>
                  <div className="h-3 bg-muted rounded w-full mb-2"></div>
                  <div className="h-3 bg-muted rounded w-2/3"></div>
                </CardContent>
              </Card>
            ))}
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredBuildings.map((building) => (
              <Card key={building.id} className="hover:shadow-md transition-shadow">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Building2 className="h-5 w-5 text-primary" />
                    {building.name}
                  </CardTitle>
                  <CardDescription className="flex items-center gap-1">
                    <MapPin className="h-3 w-3" />
                    {building.address}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  {building.description && (
                    <p className="text-sm text-muted-foreground mb-4 line-clamp-2">{building.description}</p>
                  )}

<div className="flex items-center gap-4 mb-4 text-sm">
                    <span className="flex items-center gap-1">
                      <Badge variant="outline">{building.floors_count || 0} floors</Badge>
                    </span>
                    <span className="flex items-center gap-1">
                      <Badge variant="outline">{building.apartments_count || 0} units</Badge>
                    </span>
                  </div>

<AlertDialog>
                      <AlertDialogTrigger asChild>
                        <Button
                          variant="outline"
                          size="sm"
                          className="text-destructive hover:text-destructive bg-transparent"
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>Delete Building</AlertDialogTitle>
                          <AlertDialogDescription>
                            Are you sure you want to delete "{building.name}"? This action cannot be undone and will
                            also delete all associated floors and apartments.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>Cancel</AlertDialogCancel>
                          <AlertDialogAction
                            onClick={() => deleteBuilding(building.id)}
                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                          >
                            Delete
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}

{!isLoading && filteredBuildings.length === 0 && (
          <Card className="text-center py-12">
            <CardContent>
              <Building2 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="text-lg font-semibold mb-2">No buildings found</h3>
              <p className="text-muted-foreground mb-4">
                {searchTerm ? "No buildings match your search criteria." : "Get started by adding your first building."}
              </p>
              <Link href="/admin/buildings/new">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Add Building
                </Button>
              </Link>
            </CardContent>
          </Card>
        )}
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/buildings/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/buildings/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { AdminLayout } from "@/components/admin-layout"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { ArrowLeft, Building2, Save } from "lucide-react"
import Link from "next/link"

export default function NewBuildingPage() {
  const [formData, setFormData] = useState({
    name: "",
    address: "",
    description: "",
  })
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState("")
  const router = useRouter()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError("")

try {
      const token = localStorage.getItem("admin_token")
      const response = await fetch("/api/buildings", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify(formData),
      })

if (response.ok) {
        router.push("/admin/buildings")
      } else {
        const errorData = await response.json()
        setError(errorData.message || "Failed to create building")
      }
    } catch (err) {
      setError("Network error. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }))
  }

return (
    <AdminLayout>
      <div className="p-6">
        <div className="flex items-center gap-4 mb-6">
          <Link href="/admin/buildings">
            <Button variant="outline" size="sm">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-foreground">Add New Building</h1>
            <p className="text-muted-foreground">Create a new building in your portfolio</p>
          </div>
        </div>

<div className="max-w-2xl">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Building2 className="h-5 w-5" />
                Building Information
              </CardTitle>
              <CardDescription>Enter the basic information for the new building</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="name">Building Name *</Label>
                  <Input
                    id="name"
                    name="name"
                    placeholder="e.g., Sunset Towers, Downtown Complex"
                    value={formData.name}
                    onChange={handleChange}
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="address">Address *</Label>
                  <Input
                    id="address"
                    name="address"
                    placeholder="e.g., 123 Main Street, City, State 12345"
                    value={formData.address}
                    onChange={handleChange}
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="description">Description</Label>
                  <Textarea
                    id="description"
                    name="description"
                    placeholder="Optional description of the building..."
                    value={formData.description}
                    onChange={handleChange}
                    rows={4}
                  />
                </div>