9c:I[903690,["/chat-static/_next/static/immutable/chunks/3ylj5670h8zr_.js","/chat-static/_next/static/immutable/chunks/39zn_d0r3svko.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/015t3ef19py76.js","/chat-static/_next/static/immutable/chunks/1nwzd05fjwfah.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/1spqqj78e1ykn.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/3ldgj5vn7sd9j.js","/chat-static/_next/static/immutable/chunks/3hyzknxyslfo7.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/2kv6vo--6ni6k.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/25nk5m2byvzk9.js","/chat-static/_next/static/immutable/chunks/2yzca_tnqvjec.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/09itepgh-7q9f.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/1-csp0uzup6br.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/3q-6iwjlz2gxz.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/108tnhrfmf7_s.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/3shh0szxbjg6u.js","/chat-static/_next/static/immutable/chunks/3td7qvfvwc48b.js","/chat-static/_next/static/immutable/chunks/0nspmgdomfjot.js","/chat-static/_next/static/immutable/chunks/14v-97l02mop-.js","/chat-static/_next/static/immutable/chunks/2skhep3am2s2b.js","/chat-static/_next/static/immutable/chunks/3qwiuo483fqp3.js","/chat-static/_next/static/immutable/chunks/1cs_9ye6hwibc.js","/chat-static/_next/static/immutable/chunks/2pihljatcwp4l.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1ic9sg7ne_wl1.js","/chat-static/_next/static/immutable/chunks/32vosllo2ucle.js","/chat-static/_next/static/immutable/chunks/2_8w13-3-h0_i.js","/chat-static/_next/static/immutable/chunks/1b5nwafbofavh.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0bijv4dye7ol8.js","/chat-static/_next/static/immutable/chunks/3g6blyiije1j5.js","/chat-static/_next/static/immutable/chunks/1f4ltuflby37j.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/0zbio1k8sn41_.js","/chat-static/_next/static/immutable/chunks/41cw45suxcze7.js"],"ExplicitChatIdProvider"] 9d:I[838238,["/chat-static/_next/static/immutable/chunks/3ylj5670h8zr_.js","/chat-static/_next/static/immutable/chunks/39zn_d0r3svko.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/015t3ef19py76.js","/chat-static/_next/static/immutable/chunks/1nwzd05fjwfah.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/1spqqj78e1ykn.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/3ldgj5vn7sd9j.js","/chat-static/_next/static/immutable/chunks/3hyzknxyslfo7.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/2kv6vo--6ni6k.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/25nk5m2byvzk9.js","/chat-static/_next/static/immutable/chunks/2yzca_tnqvjec.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/09itepgh-7q9f.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/1-csp0uzup6br.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/3q-6iwjlz2gxz.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/108tnhrfmf7_s.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/3shh0szxbjg6u.js","/chat-static/_next/static/immutable/chunks/3td7qvfvwc48b.js","/chat-static/_next/static/immutable/chunks/0nspmgdomfjot.js","/chat-static/_next/static/immutable/chunks/14v-97l02mop-.js","/chat-static/_next/static/immutable/chunks/2skhep3am2s2b.js","/chat-static/_next/static/immutable/chunks/3qwiuo483fqp3.js","/chat-static/_next/static/immutable/chunks/1cs_9ye6hwibc.js","/chat-static/_next/static/immutable/chunks/2pihljatcwp4l.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1ic9sg7ne_wl1.js","/chat-static/_next/static/immutable/chunks/32vosllo2ucle.js","/chat-static/_next/static/immutable/chunks/2_8w13-3-h0_i.js","/chat-static/_next/static/immutable/chunks/1b5nwafbofavh.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0bijv4dye7ol8.js","/chat-static/_next/static/immutable/chunks/3g6blyiije1j5.js","/chat-static/_next/static/immutable/chunks/1f4ltuflby37j.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/0zbio1k8sn41_.js","/chat-static/_next/static/immutable/chunks/41cw45suxcze7.js"],"SWRDataProvider"] 9f:[] a0:[["b_Czu7Yw2goXS",null],["b_JxebSijuKRP",null],["b_bVWVgTAlulb",null],["b_cQTPiGKtmfH",null],["b_fuXpp9y18sb",null],["b_8ksscHUwFFQ",null],["b_49mTekfBDHL",null]] a1:[["b_Czu7Yw2goXS",{"templateVersionId":null,"templateCanonId":null}],["b_JxebSijuKRP",{"templateVersionId":null,"templateCanonId":null}],["b_bVWVgTAlulb",{"templateVersionId":null,"templateCanonId":null}],["b_cQTPiGKtmfH",{"templateVersionId":null,"templateCanonId":null}],["b_fuXpp9y18sb",{"templateVersionId":null,"templateCanonId":null}],["b_8ksscHUwFFQ",{"templateVersionId":null,"templateCanonId":null}],["b_49mTekfBDHL",{"templateVersionId":null,"templateCanonId":null}]] a2:[["b_h0MR3UuhnJZ","$D2025-01-06T13:32:01.142Z"],["b_dD4xcaOTYgs","$D2025-01-06T13:36:40.092Z"],["b_vBSogYL1f2G","$D2025-01-06T13:41:11.075Z"],["b_RXCFEEuC1Sd","$D2025-01-06T13:48:24.743Z"],["b_jlJx5X05VkE","$D2025-01-06T14:15:37.482Z"],["b_q50OWz2OCgC","$D2025-01-06T14:20:11.761Z"],["b_PWlGa2jk3Bn","$D2025-01-06T16:24:54.179Z"],["b_FJg55RHHIYn","$D2025-01-07T10:58:21.545Z"],["b_u6vffWjFh4P","$D2025-01-08T14:06:49.210Z"],["b_nFkfGIgAZXW","$D2025-01-08T14:13:54.866Z"],["b_Bdfilbosx2z","$D2025-01-08T14:23:04.649Z"],["b_VcYDFTZJhgT","$D2025-01-08T14:48:14.584Z"],["b_4i560R7pY87","$D2025-01-08T14:54:34.483Z"],["b_i52upobW5cy","$D2025-01-08T15:31:51.226Z"],["b_mywpKVmO7Mn","$D2025-01-08T15:45:03.310Z"],["b_e2x3Gornn7h","$D2025-01-08T15:48:59.447Z"],["b_Wcg4Tdw7z83","$D2025-01-08T16:17:32.461Z"],["b_rMwSv52mbaK","$D2025-01-08T16:21:20.347Z"],["b_M1pILdikHhd","$D2025-01-09T01:11:35.327Z"],["b_fUwzmeItq9H","$D2025-01-09T01:12:52.823Z"],["b_rQDMbxsgTw2","$D2025-01-09T01:21:34.330Z"],["b_fuR4XXhbDwJ","$D2025-01-09T01:25:27.704Z"],["b_ZjJw6kH7tFH","$D2025-01-09T01:32:51.903Z"],["b_KRn92bCGz7I","$D2025-01-09T01:45:51.365Z"],["b_cYHSsmd8ocL","$D2025-01-09T01:48:33.532Z"],["b_qDX5UX5nWSN","$D2025-01-09T01:53:54.546Z"],["b_KiMmcSIT3Kx","$D2025-01-09T02:01:31.644Z"],["b_Y4TTQH854fa","$D2025-01-24T14:50:35.787Z"],["b_jZDoQuiZCqJ","$D2025-01-24T14:59:05.943Z"],["b_hN1jnGtexAH","$D2025-01-24T15:16:47.555Z"],["b_fZ19BbhaDfp","$D2025-01-24T15:24:06.066Z"],["b_lnINZyIIVvl","$D2025-01-24T15:31:10.788Z"],["b_hkntxM9VuAW","$D2025-01-24T15:35:42.936Z"],["b_UDEx3ejUw7X","$D2025-01-24T15:40:19.427Z"],["b_XCIkDJ7gE1S","$D2025-01-24T15:44:16.563Z"],["b_EHRzIWjINK3","$D2025-01-25T12:10:23.573Z"],["b_Z31MlKp9Wuv","$D2025-01-25T12:15:43.913Z"],["b_jUIWfHt02Y7","$D2025-01-25T12:27:31.376Z"],["b_5RraByQjAWP","$D2025-01-25T12:29:44.416Z"],["b_wuuEnHUhxiu","$D2025-01-25T12:32:23.108Z"],["b_YR3Fpl1yzSA","$D2025-01-25T13:46:35.136Z"],["b_I2Uzy34JcfJ","$D2025-01-25T13:56:03.018Z"],["b_b3Zq26BD87f","$D2025-01-28T13:31:48.753Z"],["b_1i2673934ls","$D2025-01-28T13:48:50.886Z"],["b_ZcZERk10Heu","$D2025-02-13T13:32:22.909Z"],["b_Yce0uVUOZqX","$D2025-02-13T13:39:38.781Z"],["b_x6a5aUgrnU0","$D2025-06-08T22:09:09.147Z"],["b_pgxxJLzHsmh","$D2025-06-08T22:36:22.302Z"],["b_s8YXNA0OyBm","$D2025-06-09T09:18:17.441Z"],["b_ODfRBjEeFn3","$D2025-06-09T09:51:23.955Z"],["b_UcmvDxNa4jH","$D2025-06-09T10:12:23.913Z"],["b_ERMcEqLRNXd","$D2025-06-09T11:40:03.869Z"],["b_h8hlZWEGOgy","$D2025-06-09T11:53:25.576Z"],["b_rytM0wd33Gr","$D2025-06-09T13:05:06.657Z"],["b_dDbHQfImuCZ","$D2025-06-17T10:32:11.260Z"],["b_DVsIx3UmDRE","$D2025-06-17T10:43:58.568Z"],["b_ijv9XqfOeyu","$D2025-06-17T11:27:06.203Z"],["b_Iy79HS9UcOt","$D2025-06-17T16:41:36.771Z"],["b_fbGW4jvMXEt","$D2025-06-17T18:41:18.190Z"],["b_Os6G6LV06Su","$D2025-06-17T18:59:03.568Z"],["b_q3soWFDLcY8","$D2025-06-17T19:04:11.850Z"],["b_6qDI0qyZxWU","$D2025-06-17T19:11:45.163Z"],["b_2QFB7RYHmHF","$D2025-06-17T19:24:37.626Z"],["b_XXKv9VFXbLd","$D2025-06-17T19:37:03.881Z"],["b_nou4OyFmaOy","$D2025-06-17T20:17:43.535Z"],["b_NSKhQEDoa50","$D2025-06-18T09:45:46.043Z"],["b_sQRO8NJ7lW3","$D2025-06-18T09:57:50.254Z"],["b_1VZu5EEqCOh","$D2025-06-18T09:58:46.529Z"],["b_AioCxQel2on","$D2025-06-18T10:17:42.550Z"],["b_1ZmP1q8xSg4","$D2025-06-18T11:36:10.996Z"],["b_K8q5hOElGzG","$D2025-06-18T11:39:44.139Z"],["b_UAFSQRaOG7a","$D2025-06-18T12:42:51.981Z"],["b_m5nEzvK6HVw","$D2025-06-18T12:53:31.818Z"],["b_UU3Ld7a3320","$D2025-06-19T11:45:23.366Z"],["b_728lpp7pTJB","$D2025-06-19T12:43:53.434Z"],["b_H1soEPWx6pP","$D2025-06-19T17:59:16.444Z"],["b_1GYfXe3sDY7","$D2025-06-19T18:04:31.705Z"],["b_j5pkUBphHS9","$D2025-06-19T18:45:57.411Z"],["b_eJFx2EaHPt5","$D2025-06-24T11:18:00.851Z"],["b_SLTu7yYvl16","$D2025-06-24T11:56:07.317Z"],["b_aqb9uPXl3UP","$D2025-06-24T12:28:10.417Z"],["b_GfTHquHle3J","$D2025-06-24T14:47:40.099Z"],["b_BmX1ak66oiS","$D2025-06-24T18:09:25.127Z"],["b_aioKyrJTGd1","$D2025-06-24T18:45:13.140Z"],["b_rnVyehryWS6","$D2025-06-30T11:32:20.997Z"],["b_gpLUUxoIaSO","$D2025-06-30T12:25:46.917Z"],["b_Czu7Yw2goXS","$D2025-08-29T12:28:50.188Z"],["b_JxebSijuKRP","$D2025-08-29T12:36:56.751Z"],["b_bVWVgTAlulb","$D2026-06-09T11:39:37.989Z"],["b_cQTPiGKtmfH","$D2026-06-09T11:39:44.816Z"],["b_fuXpp9y18sb","$D2026-06-09T11:39:58.651Z"],["b_8ksscHUwFFQ","$D2026-06-09T11:40:17.656Z"],["b_49mTekfBDHL","$D2026-06-09T11:40:23.958Z"]] a3:[["b_Czu7Yw2goXS",false],["b_JxebSijuKRP",false],["b_bVWVgTAlulb",false],["b_cQTPiGKtmfH",false],["b_fuXpp9y18sb",false],["b_8ksscHUwFFQ",false],["b_49mTekfBDHL",false]] a4:[["b_Czu7Yw2goXS","$undefined"],["b_JxebSijuKRP",{"deploymentId":"dpl_HT9R2p1cuQVJAUgDF3ErochvFCEq"}],["b_bVWVgTAlulb","$undefined"],["b_cQTPiGKtmfH","$undefined"],["b_fuXpp9y18sb","$undefined"],["b_8ksscHUwFFQ","$undefined"],["b_49mTekfBDHL",{"deploymentId":"dpl_78K6yADDD3DGsyoCNWrhgrapWWZw","showV0Button":true}]] a5:[["b_Czu7Yw2goXS",null],["b_JxebSijuKRP",null],["b_bVWVgTAlulb",null],["b_cQTPiGKtmfH",null],["b_fuXpp9y18sb",null],["b_8ksscHUwFFQ",null],["b_49mTekfBDHL",null]] a6:[["b_Czu7Yw2goXS",true],["b_JxebSijuKRP",true],["b_bVWVgTAlulb",true],["b_cQTPiGKtmfH",true],["b_fuXpp9y18sb",true],["b_8ksscHUwFFQ",true],["b_49mTekfBDHL",true]] a7:[["b_Czu7Yw2goXS",true],["b_JxebSijuKRP",true],["b_bVWVgTAlulb",true],["b_cQTPiGKtmfH",true],["b_fuXpp9y18sb",true],["b_8ksscHUwFFQ",true],["b_49mTekfBDHL",true]] a8:[] a9:T7c596,[V0_FILE]typescriptreact:file="lib/auth.ts" isMerged="true" import { redirect } from "next/navigation" import { cookies } from "next/headers" export interface User { id: string email: string name: string } export interface AuthSession { user: User token: string } // Mock function to get current session - replace with your actual auth implementation async function getCurrentSession(): Promise { const cookieStore = await cookies() const token = cookieStore.get("auth-token") if (!token) { return null } // Replace this with your actual session validation logic // This is a mock implementation try { // In a real app, you'd validate the token with your auth provider return { user: { id: "1", email: "user@example.com", name: "User", }, token: token.value, } } catch (error) { return null } } export async function requireAuth(): Promise { const session = await getCurrentSession() if (!session) { redirect("/login") } return session } export interface ActivityLog { userId: string action: string details?: Record timestamp: Date ip?: string userAgent?: string } export async function logActivity(userId: string, action: string, details?: Record): Promise { const activity: ActivityLog = { userId, action, details, timestamp: new Date(), } try { // In a real application, you would save this to your database // For now, we'll just log to console console.log("Activity logged:", activity) // Example database save (replace with your actual implementation): // await db.activityLog.create({ data: activity }) } catch (error) { console.error("Failed to log activity:", error) // Don't throw error to avoid breaking the main flow } } // Helper function to get user from session export async function getCurrentUser(): Promise { const session = await getCurrentSession() return session?.user || null } // Helper function to check if user is authenticated without redirecting export async function isAuthenticated(): Promise { const session = await getCurrentSession() return !!session } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } // Word lists for generating random words const adjectives = [ "amazing", "brilliant", "creative", "dynamic", "elegant", "fantastic", "gorgeous", "incredible", "magnificent", "outstanding", "spectacular", "wonderful", "excellent", "marvelous", "superb", "remarkable", "stunning", "beautiful", "awesome", "impressive", "extraordinary", "phenomenal", "exceptional", "splendid", "fabulous", "terrific", "incredible", ] const nouns = [ "adventure", "journey", "discovery", "innovation", "creation", "solution", "project", "idea", "concept", "vision", "dream", "goal", "mission", "purpose", "strategy", "plan", "design", "system", "platform", "service", "experience", "opportunity", "challenge", "achievement", "success", "breakthrough", "revolution", "transformation", "evolution", "progress", ] const verbs = [ "create", "build", "develop", "design", "innovate", "transform", "improve", "enhance", "optimize", "streamline", "simplify", "accelerate", "achieve", "accomplish", "deliver", "execute", "implement", "launch", "discover", "explore", "navigate", "connect", "collaborate", "communicate", "inspire", "motivate", "empower", "enable", "facilitate", "support", ] export interface RandomWordsOptions { count?: number type?: "mixed" | "adjectives" | "nouns" | "verbs" separator?: string capitalize?: boolean } export function generateRandomWords(options: RandomWordsOptions = {}): string { const { count = 2, type = "mixed", separator = " ", capitalize = false } = options let wordList: string[] switch (type) { case "adjectives": wordList = adjectives break case "nouns": wordList = nouns break case "verbs": wordList = verbs break case "mixed": default: wordList = [...adjectives, ...nouns, ...verbs] break } const selectedWords: string[] = [] for (let i = 0; i < count; i++) { const randomIndex = Math.floor(Math.random() * wordList.length) selectedWords.push(wordList[randomIndex]) } let result = selectedWords.join(separator) if (capitalize) { result = result .split(" ") .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(" ") } return result } // Additional utility functions that might be useful export function generateRandomId(length = 8): string { const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" let result = "" for (let i = 0; i < length; i++) { result += chars.charAt(Math.floor(Math.random() * chars.length)) } return result } export function formatDate(date: Date): string { return new Intl.DateTimeFormat("en-US", { year: "numeric", month: "long", day: "numeric", }).format(date) } export function formatDateTime(date: Date): string { return new Intl.DateTimeFormat("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }).format(date) } export function truncateText(text: string, maxLength: number): string { if (text.length <= maxLength) return text return text.slice(0, maxLength) + "..." } export function slugify(text: string): string { return text .toLowerCase() .replace(/[^\w\s-]/g, "") .replace(/[\s_-]+/g, "-") .replace(/^-+|-+$/g, "") } export function debounce any>(func: T, wait: number): (...args: Parameters) => void { let timeout: NodeJS.Timeout return (...args: Parameters) => { clearTimeout(timeout) timeout = setTimeout(() => func(...args), wait) } } [V0_FILE]typescriptreact:file="components/word-generator.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { generateRandomWords } from "@/lib/utils" interface WordGeneratorProps { userId: string } export function WordGenerator({ userId }: WordGeneratorProps) { const [generatedWords, setGeneratedWords] = useState("") const [wordCount, setWordCount] = useState(3) const [wordType, setWordType] = useState<"mixed" | "adjectives" | "nouns" | "verbs">("mixed") const [capitalize, setCapitalize] = useState(false) const handleGenerate = async () => { const words = generateRandomWords({ count: wordCount, type: wordType, capitalize, separator: " ", }) setGeneratedWords(words) // Log the activity await fetch("/api/log-activity", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId, action: "generate_words", details: { wordCount, wordType, capitalize, result: words }, }), }) } return (

Word Count setWordCount(Number.parseInt(e.target.value) || 1)} />

Word Type

setCapitalize(e.target.checked)} className="rounded" /> Capitalize words

{generatedWords && (

{generatedWords}

)}

) } [V0_FILE]typescriptreact:file="components/activity-logger.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" interface ActivityLoggerProps { userId: string } export function ActivityLogger({ userId }: ActivityLoggerProps) { const [action, setAction] = useState("") const [details, setDetails] = useState("") const [isLogging, setIsLogging] = useState(false) const [lastLogged, setLastLogged] = useState(null) const handleLogActivity = async () => { if (!action.trim()) return setIsLogging(true) try { const response = await fetch("/api/log-activity", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId, action: action.trim(), details: details.trim() ? { note: details.trim() } : undefined, }), }) if (response.ok) { setLastLogged(`${action} - ${new Date().toLocaleTimeString()}`) setAction("") setDetails("") } } catch (error) { console.error("Failed to log activity:", error) } finally { setIsLogging(false) } } const quickActions = ["button_click", "form_submit", "page_scroll", "file_download", "search_query"] return (

Action setAction(e.target.value)} />

Details (optional)

setDetails(e.target.value)}
          rows={3}
        />
      </div>

<Button onClick={handleLogActivity} disabled={!action.trim() || isLogging} className="w-full">
        {isLogging ? "Logging..." : "Log Activity"}
      </Button>

<div>
        <Label>Quick Actions</Label>
        <div className="flex flex-wrap gap-2 mt-2">
          {quickActions.map((quickAction) => (
            <Button key={quickAction} variant="outline" size="sm" onClick={() => setAction(quickAction)}>
              {quickAction}
            </Button>
          ))}
        </div>
      </div>

{lastLogged && (
        <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
          <p className="text-sm text-green-800">✅ Last logged: {lastLogged}</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user-profile.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import type { User } from "@/lib/auth"

interface UserProfileProps {
  user: User
}

export function UserProfile({ user }: UserProfileProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>👤 User Profile</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <p className="text-sm text-gray-600">Name</p>
          <p className="font-semibold">{user.name}</p>
        </div>

<div>
          <p className="text-sm text-gray-600">Email</p>
          <p className="font-semibold">{user.email}</p>
        </div>

<Button variant="outline" className="w-full" asChild>
          <a href="/api/auth/logout">Sign Out</a>
        </Button>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/api/log-activity/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { logActivity } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const { userId, action, details } = await request.json()

if (!userId || !action) {
      return NextResponse.json({ error: "userId and action are required" }, { status: 400 })
    }

await logActivity(userId, action, details)

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Failed to log activity:", error)
    return NextResponse.json({ error: "Failed to log activity" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/auth/logout/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"

export async function GET() {
  const cookieStore = await cookies()

// Clear the auth token
  cookieStore.delete("auth-token")

// Redirect to login page
  return NextResponse.redirect(new URL("/login", process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"))
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"
import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter, usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Menu, X, Home, FileText, Activity, Settings, LogOut } from "lucide-react"

export function Navigation() {
  const [isOpen, setIsOpen] = useState(false)
  const [user, setUser] = useState<{ name: string; email: string } | null>(null)
  const router = useRouter()
  const pathname = usePathname()

useEffect(() => {
    // Check if user is logged in
    const token = document.cookie.includes("auth-token")
    if (token) {
      setUser({ name: "Demo User", email: "user@example.com" })
    }
  }, [])

const handleLogout = async () => {
    document.cookie = "auth-token=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT"
    setUser(null)
    router.push("/login")
  }

if (pathname === "/login") {
    return null
  }

const navItems = [
    { href: "/", label: "Dashboard", icon: Home },
    { href: "/documents", label: "Documents", icon: FileText },
    { href: "/activity", label: "Activity", icon: Activity },
    { href: "/settings", label: "Settings", icon: Settings },
  ]

return (
    <nav className="bg-white shadow-sm border-b">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center space-x-8">
            <Link href="/" className="text-xl font-bold text-indigo-600">
              eDAS Access
            </Link>

{/* Desktop Navigation */}
            <div className="hidden md:flex space-x-6">
              {navItems.map((item) => {
                const Icon = item.icon
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                      pathname === item.href
                        ? "bg-indigo-100 text-indigo-700"
                        : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
                    }`}
                  >
                    <Icon className="w-4 h-4" />
                    <span>{item.label}</span>
                  </Link>
                )
              })}
            </div>
          </div>

{/* User Menu */}
          {user && (
            <div className="hidden md:flex items-center space-x-4">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                    <Avatar className="h-8 w-8">
                      <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
                    </Avatar>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56" align="end" forceMount>
                  <div className="flex flex-col space-y-1 p-2">
                    <p className="text-sm font-medium">{user.name}</p>
                    <p className="text-xs text-gray-500">{user.email}</p>
                  </div>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem asChild>
                    <Link href="/settings">Settings</Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={handleLogout}>
                    <LogOut className="mr-2 h-4 w-4" />
                    Sign out
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          )}

{/* Mobile menu button */}
          <div className="md:hidden">
            <Button variant="ghost" size="sm" onClick={() => setIsOpen(!isOpen)}>
              {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </Button>
          </div>
        </div>

{/* Mobile Navigation */}
        {isOpen && (
          <div className="md:hidden py-4 border-t">
            <div className="space-y-2">
              {navItems.map((item) => {
                const Icon = item.icon
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium ${
                      pathname === item.href
                        ? "bg-indigo-100 text-indigo-700"
                        : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
                    }`}
                    onClick={() => setIsOpen(false)}
                  >
                    <Icon className="w-4 h-4" />
                    <span>{item.label}</span>
                  </Link>
                )
              })}
              {user && (
                <Button
                  variant="ghost"
                  className="w-full justify-start text-red-600 hover:text-red-700 hover:bg-red-50"
                  onClick={handleLogout}
                >
                  <LogOut className="mr-2 h-4 w-4" />
                  Sign out
                </Button>
              )}
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="app/documents/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { DocumentManager } from "@/components/document-manager"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default async function DocumentsPage() {
  const session = await requireAuth()

await logActivity(session.user.id, "page_visit", { page: "documents" })

return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">Document Management</h1>
        <p className="text-gray-600">Manage and access your documents securely</p>
      </div>

<div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Quick Stats</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex justify-between">
                <span className="text-sm text-gray-600">Total Documents</span>
                <span className="font-semibold">24</span>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-gray-600">Recent Uploads</span>
                <span className="font-semibold">3</span>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-gray-600">Shared</span>
                <span className="font-semibold">8</span>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">Storage Usage</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span>Used</span>
                  <span>2.4 GB / 10 GB</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2">
                  <div className="bg-indigo-600 h-2 rounded-full" style={{ width: "24%" }}></div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-manager.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { FileText, Upload, Search, Download, Share2, Eye, Calendar } from "lucide-react"
import { generateRandomWords } from "@/lib/utils"

interface DocumentManagerProps {
  userId: string
}

interface Document {
  id: string
  name: string
  type: string
  size: string
  uploadDate: string
  status: "active" | "archived" | "shared"
  tags: string[]
}

export function DocumentManager({ userId }: DocumentManagerProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedFilter, setSelectedFilter] = useState("all")

// Mock documents with random names
  const [documents] = useState<Document[]>([
    {
      id: "1",
      name: `${generateRandomWords({ count: 2, type: "adjectives", capitalize: true, separator: " " })} Report.pdf`,
      type: "PDF",
      size: "2.4 MB",
      uploadDate: "2024-01-15",
      status: "active",
      tags: ["report", "quarterly"],
    },
    {
      id: "2",
      name: `${generateRandomWords({ count: 3, type: "mixed", capitalize: true, separator: " " })} Document.docx`,
      type: "DOCX",
      size: "1.2 MB",
      uploadDate: "2024-01-14",
      status: "shared",
      tags: ["draft", "proposal"],
    },
    {
      id: "3",
      name: `${generateRandomWords({ count: 2, type: "nouns", capitalize: true, separator: " " })} Analysis.xlsx`,
      type: "XLSX",
      size: "856 KB",
      uploadDate: "2024-01-13",
      status: "active",
      tags: ["data", "analysis"],
    },
    {
      id: "4",
      name: `${generateRandomWords({ count: 2, type: "verbs", capitalize: true, separator: " " })} Presentation.pptx`,
      type: "PPTX",
      size: "4.1 MB",
      uploadDate: "2024-01-12",
      status: "archived",
      tags: ["presentation", "meeting"],
    },
  ])

const handleDocumentAction = async (action: string, documentId: string, documentName: string) => {
    await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: `document_${action}`,
        details: { documentId, documentName, action },
      }),
    })
  }

const filteredDocuments = documents.filter((doc) => {
    const matchesSearch =
      doc.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      doc.tags.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase()))
    const matchesFilter = selectedFilter === "all" || doc.status === selectedFilter
    return matchesSearch && matchesFilter
  })

const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "bg-green-100 text-green-800"
      case "shared":
        return "bg-blue-100 text-blue-800"
      case "archived":
        return "bg-gray-100 text-gray-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getFileIcon = (type: string) => {
    return <FileText className="w-8 h-8 text-indigo-600" />
  }

return (
    <div className="space-y-6">
      {/* Header Actions */}
      <div className="flex flex-col sm:flex-row gap-4 justify-between">
        <div className="flex flex-1 gap-4">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
            <Input
              placeholder="Search documents..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>

<select
            value={selectedFilter}
            onChange={(e) => setSelectedFilter(e.target.value)}
            className="px-3 py-2 border border-gray-300 rounded-md text-sm"
          >
            <option value="all">All Documents</option>
            <option value="active">Active</option>
            <option value="shared">Shared</option>
            <option value="archived">Archived</option>
          </select>
        </div>

<Button className="flex items-center gap-2">
          <Upload className="w-4 h-4" />
          Upload Document
        </Button>
      </div>

{/* Documents Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredDocuments.map((doc) => (
          <Card key={doc.id} className="hover:shadow-md transition-shadow">
            <CardHeader className="pb-3">
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  {getFileIcon(doc.type)}
                  <div className="flex-1 min-w-0">
                    <h3 className="font-semibold text-sm truncate" title={doc.name}>
                      {doc.name}
                    </h3>
                    <p className="text-xs text-gray-500">
                      {doc.type} • {doc.size}
                    </p>
                  </div>
                </div>
                <Badge className={getStatusColor(doc.status)}>{doc.status}</Badge>
              </div>
            </CardHeader>

<CardContent className="pt-0">
              <div className="space-y-3">
                <div className="flex items-center gap-2 text-xs text-gray-500">
                  <Calendar className="w-3 h-3" />
                  {new Date(doc.uploadDate).toLocaleDateString()}
                </div>

<div className="flex gap-2 pt-2">
                  <Button
                    size="sm"
                    variant="outline"
                    className="flex-1"
                    onClick={() => handleDocumentAction("view", doc.id, doc.name)}
                  >
                    <Eye className="w-3 h-3 mr-1" />
                    View
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => handleDocumentAction("download", doc.id, doc.name)}
                  >
                    <Download className="w-3 h-3" />
                  </Button>
                  <Button size="sm" variant="outline" onClick={() => handleDocumentAction("share", doc.id, doc.name)}>
                    <Share2 className="w-3 h-3" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{filteredDocuments.length === 0 && (
        <div className="text-center py-12">
          <FileText className="w-12 h-12 text-gray-400 mx-auto mb-4" />
          <h3 className="text-lg font-semibold text-gray-900 mb-2">No documents found</h3>
          <p className="text-gray-600">Try adjusting your search or filter criteria</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/activity/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { ActivityDashboard } from "@/components/activity-dashboard"

export default async function ActivityPage() {
  const session = await requireAuth()

await logActivity(session.user.id, "page_visit", { page: "activity" })

return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">Activity Dashboard</h1>
        <p className="text-gray-600">Monitor and track all system activities</p>
      </div>

<ActivityDashboard userId={session.user.id} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/activity-dashboard.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Activity, Eye, Download, Upload, Share2, Clock, Calendar } from "lucide-react"

interface ActivityDashboardProps {
  userId: string
}

interface ActivityItem {
  id: string
  action: string
  details: any
  timestamp: string
  type: "page_visit" | "document_view" | "document_download" | "generate_words" | "other"
}

export function ActivityDashboard({ userId }: ActivityDashboardProps) {
  const [activities, setActivities] = useState<ActivityItem[]>([])
  const [stats, setStats] = useState({
    totalActivities: 0,
    todayActivities: 0,
    documentActions: 0,
    pageViews: 0,
  })

useEffect(() => {
    // Mock activity data - in a real app, this would come from your database
    const mockActivities: ActivityItem[] = [
      {
        id: "1",
        action: "page_visit",
        details: { page: "dashboard" },
        timestamp: new Date().toISOString(),
        type: "page_visit",
      },
      {
        id: "2",
        action: "document_view",
        details: { documentId: "doc-123", documentName: "Annual Report.pdf" },
        timestamp: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
        type: "document_view",
      },
      {
        id: "3",
        action: "generate_words",
        details: { wordCount: 3, wordType: "mixed", result: "creative brilliant solution" },
        timestamp: new Date(Date.now() - 1000 * 60 * 60).toISOString(),
        type: "other",
      },
      {
        id: "4",
        action: "document_download",
        details: { documentId: "doc-456", documentName: "Project Proposal.docx" },
        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
        type: "document_download",
      },
      {
        id: "5",
        action: "page_visit",
        details: { page: "documents" },
        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 3).toISOString(),
        type: "page_visit",
      },
    ]

setActivities(mockActivities)

// Calculate stats
    const today = new Date().toDateString()
    const todayCount = mockActivities.filter((a) => new Date(a.timestamp).toDateString() === today).length

const documentCount = mockActivities.filter(
      (a) => a.type === "document_view" || a.type === "document_download",
    ).length

const pageViewCount = mockActivities.filter((a) => a.type === "page_visit").length

setStats({
      totalActivities: mockActivities.length,
      todayActivities: todayCount,
      documentActions: documentCount,
      pageViews: pageViewCount,
    })
  }, [])

const getActivityIcon = (type: string) => {
    switch (type) {
      case "page_visit":
        return <Eye className="w-4 h-4" />
      case "document_view":
        return <Eye className="w-4 h-4" />
      case "document_download":
        return <Download className="w-4 h-4" />
      case "document_upload":
        return <Upload className="w-4 h-4" />
      case "document_share":
        return <Share2 className="w-4 h-4" />
      default:
        return <Activity className="w-4 h-4" />
    }
  }

const getActivityColor = (type: string) => {
    switch (type) {
      case "page_visit":
        return "bg-blue-100 text-blue-800"
      case "document_view":
        return "bg-green-100 text-green-800"
      case "document_download":
        return "bg-purple-100 text-purple-800"
      case "document_upload":
        return "bg-orange-100 text-orange-800"
      case "document_share":
        return "bg-pink-100 text-pink-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const formatTimestamp = (timestamp: string) => {
    const date = new Date(timestamp)
    const now = new Date()
    const diffMs = now.getTime() - date.getTime()
    const diffMins = Math.floor(diffMs / (1000 * 60))
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60))

if (diffMins < 1) return "Just now"
    if (diffMins < 60) return `${diffMins}m ago`
    if (diffHours < 24) return `${diffHours}h ago`
    return date.toLocaleDateString()
  }

return (
    <div className="space-y-6">
      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Activities</CardTitle>
            <Activity className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.totalActivities}</div>
            <p className="text-xs text-muted-foreground">All time</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Today's Activities</CardTitle>
            <Calendar className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.todayActivities}</div>
            <p className="text-xs text-muted-foreground">Since midnight</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Document Actions</CardTitle>
            <Download className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.documentActions}</div>
            <p className="text-xs text-muted-foreground">Views & downloads</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Page Views</CardTitle>
            <Eye className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.pageViews}</div>
            <p className="text-xs text-muted-foreground">Navigation events</p>
          </CardContent>
        </Card>
      </div>

{/* Activity Feed */}
      <Card>
        <CardHeader>
          <CardTitle>Recent Activity</CardTitle>
          <CardDescription>Latest system activities and user interactions</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {activities.map((activity) => (
              <div key={activity.id} className="flex items-start space-x-4 p-4 border rounded-lg">
                <div className={`p-2 rounded-full ${getActivityColor(activity.type)}`}>
                  {getActivityIcon(activity.type)}
                </div>

<div className="flex-1 space-y-1">
                  <div className="flex items-center justify-between">
                    <p className="text-sm font-medium">
                      {activity.action.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())}
                    </p>
                    <div className="flex items-center text-xs text-gray-500">
                      <Clock className="w-3 h-3 mr-1" />
                      {formatTimestamp(activity.timestamp)}
                    </div>
                  </div>

{activity.details && (
                    <div className="text-xs text-gray-600">
                      {activity.details.page && `Page: ${activity.details.page}`}
                      {activity.details.documentName && `Document: ${activity.details.documentName}`}
                      {activity.details.result && `Generated: "${activity.details.result}"`}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>

{activities.length === 0 && (
            <div className="text-center py-8">
              <Activity className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-gray-900 mb-2">No activities yet</h3>
              <p className="text-gray-600">Start using the platform to see your activity history</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { SettingsForm } from "@/components/settings-form"

export default async function SettingsPage() {
  const session = await requireAuth()

await logActivity(session.user.id, "page_visit", { page: "settings" })

return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">Settings</h1>
        <p className="text-gray-600">Manage your account preferences and security settings</p>
      </div>

<SettingsForm user={session.user} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/settings-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
import { useToast } from "@/hooks/use-toast"
import type { User } from "@/lib/auth"

interface SettingsFormProps {
  user: User
}

export function SettingsForm({ user }: SettingsFormProps) {
  const [isLoading, setIsLoading] = useState(false)
  const [settings, setSettings] = useState({
    name: user.name,
    email: user.email,
    notifications: true,
    activityLogging: true,
    autoSave: false,
    darkMode: false,
  })
  const { toast } = useToast()

const handleSave = async () => {
    setIsLoading(true)

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

// Log the settings update
    await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId: user.id,
        action: "settings_update",
        details: { updatedFields: Object.keys(settings) },
      }),
    })

setIsLoading(false)
    toast({
      title: "Settings saved",
      description: "Your preferences have been updated successfully.",
    })
  }

return (
    <div className="max-w-2xl space-y-6">
      {/* Profile Settings */}
      <Card>
        <CardHeader>
          <CardTitle>Profile Information</CardTitle>
          <CardDescription>Update your personal information and contact details</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label htmlFor="name">Full Name</Label>
              <Input
                id="name"
                value={settings.name}
                onChange={(e) => setSettings({ ...settings, name: e.target.value })}
              />
            </div>
            <div>
              <Label htmlFor="email">Email Address</Label>
              <Input
                id="email"
                type="email"
                value={settings.email}
                onChange={(e) => setSettings({ ...settings, email: e.target.value })}
              />
            </div>
          </div>
        </CardContent>
      </Card>

{/* Notification Settings */}
      <Card>
        <CardHeader>
          <CardTitle>Notifications</CardTitle>
          <CardDescription>Configure how you receive notifications and updates</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Email Notifications</Label>
              <p className="text-sm text-gray-500">Receive email updates about your account activity</p>
            </div>
            <Switch
              checked={settings.notifications}
              onCheckedChange={(checked) => setSettings({ ...settings, notifications: checked })}
            />
          </div>

<div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Activity Logging</Label>
              <p className="text-sm text-gray-500">Track and log your system activities</p>
            </div>
            <Switch
              checked={settings.activityLogging}
              onCheckedChange={(checked) => setSettings({ ...settings, activityLogging: checked })}
            />
          </div>
        </CardContent>
      </Card>

{/* Application Settings */}
      <Card>
        <CardHeader>
          <CardTitle>Application Preferences</CardTitle>
          <CardDescription>Customize your application experience</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Auto-save Documents</Label>
              <p className="text-sm text-gray-500">Automatically save changes to documents</p>
            </div>
            <Switch
              checked={settings.autoSave}
              onCheckedChange={(checked) => setSettings({ ...settings, autoSave: checked })}
            />
          </div>

<div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label>Dark Mode</Label>
              <p className="text-sm text-gray-500">Use dark theme for the interface</p>
            </div>
            <Switch
              checked={settings.darkMode}
              onCheckedChange={(checked) => setSettings({ ...settings, darkMode: checked })}
            />
          </div>
        </CardContent>
      </Card>

{/* Security Settings */}
      <Card>
        <CardHeader>
          <CardTitle>Security</CardTitle>
          <CardDescription>Manage your account security and privacy</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <Button variant="outline" className="w-full">
            Change Password
          </Button>
          <Button variant="outline" className="w-full">
            Two-Factor Authentication
          </Button>
          <Button variant="outline" className="w-full">
            Download Account Data
          </Button>
        </CardContent>
      </Card>

{/* Save Button */}
      <div className="flex justify-end">
        <Button onClick={handleSave} disabled={isLoading}>
          {isLoading ? "Saving..." : "Save Changes"}
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true"
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative={decorative}
    orientation={orientation}
    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
    {...props}
  />
))
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true"
import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"
import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true"
"use client"

import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
import { useToast } from "@/hooks/use-toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(({ id, title, description, action, ...props }) => (
        <Toast key={id} {...props}>
          <div className="grid gap-1">
            {title && <ToastTitle>{title}</ToastTitle>}
            {description && <ToastDescription>{description}</ToastDescription>}
          </div>
          {action}
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true"
import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive: "destructive border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="hooks/use-toast.ts" isMerged="true"
"use client"

import * as React from "react"

import type { ToastActionElement, ToastProps } from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]png:file="public/images/dashboard-screenshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-10%20120202-nywE6AIiXskMaFzRqDXsQjDFpWyEbY.png" isMerged="true"
[V0_FILE]png:file="public/images/quick-actions-screenshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-10%20120254-WyTcZv1FTmO0bMrZ1bNPvHhk6oIFZ9.png" isMerged="true"
[V0_FILE]png:file="public/images/sidebar-menu-screenshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-10%20120417-wDE14hGCdNNuGK9Q5Guiu9mThSP5JD.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/visitor-management/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { VisitorAccessGenerator } from "@/components/visitor-access-generator"

export default async function VisitorManagementPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "visitor_management" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white shadow-sm p-6">
        <h1 className="text-2xl font-bold text-teal-800">Visitor Management</h1>
        <p className="text-teal-600">Generate access codes for your visitors</p>
      </div>

<div className="p-6">
        <VisitorAccessGenerator userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/maintenance/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { MaintenanceRequests } from "@/components/maintenance-requests"

export default async function MaintenancePage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "maintenance" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white shadow-sm p-6">
        <h1 className="text-2xl font-bold text-teal-800">Maintenance</h1>
        <p className="text-teal-600">Submit and track maintenance requests</p>
      </div>

<div className="p-6">
        <MaintenanceRequests userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/maintenance-requests.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Wrench, AlertCircle, CheckCircle, Clock, Plus } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface MaintenanceRequestsProps {
  userId: string
}

interface MaintenanceRequest {
  id: string
  title: string
  description: string
  category: string
  priority: "low" | "medium" | "high" | "urgent"
  status: "pending" | "in_progress" | "completed" | "cancelled"
  submittedAt: string
  completedAt?: string
}

export function MaintenanceRequests({ userId }: MaintenanceRequestsProps) {
  const [showForm, setShowForm] = useState(false)
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [category, setCategory] = useState("")
  const [priority, setPriority] = useState<"low" | "medium" | "high" | "urgent">("medium")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

// Mock data for existing requests
  const [requests] = useState<MaintenanceRequest[]>([
    {
      id: "1",
      title: "Leaking Faucet in Kitchen",
      description: "The kitchen faucet has been dripping constantly for the past week",
      category: "Plumbing",
      priority: "medium",
      status: "in_progress",
      submittedAt: "2024-01-15T10:30:00Z",
    },
    {
      id: "2",
      title: "Air Conditioning Not Working",
      description: "AC unit in living room stopped working yesterday",
      category: "HVAC",
      priority: "high",
      status: "pending",
      submittedAt: "2024-01-14T14:20:00Z",
    },
    {
      id: "3",
      title: "Broken Light Switch",
      description: "Light switch in bedroom is not functioning properly",
      category: "Electrical",
      priority: "low",
      status: "completed",
      submittedAt: "2024-01-10T09:15:00Z",
      completedAt: "2024-01-12T16:45:00Z",
    },
  ])

const submitRequest = async () => {
    if (!title.trim() || !description.trim() || !category) {
      toast({
        title: "Missing Information",
        description: "Please fill in all required fields",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

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

// Log the activity
    await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: "maintenance_request_submitted",
        details: {
          title: title.trim(),
          category,
          priority,
        },
      }),
    })

setIsSubmitting(false)
    setShowForm(false)

toast({
      title: "Request Submitted",
      description: "Your maintenance request has been submitted successfully",
    })

// Clear form
    setTitle("")
    setDescription("")
    setCategory("")
    setPriority("medium")
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "pending":
        return <Clock className="w-4 h-4" />
      case "in_progress":
        return <AlertCircle className="w-4 h-4" />
      case "completed":
        return <CheckCircle className="w-4 h-4" />
      default:
        return <Clock className="w-4 h-4" />
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "in_progress":
        return "bg-blue-100 text-blue-800"
      case "completed":
        return "bg-green-100 text-green-800"
      case "cancelled":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "low":
        return "bg-gray-100 text-gray-800"
      case "medium":
        return "bg-blue-100 text-blue-800"
      case "high":
        return "bg-orange-100 text-orange-800"
      case "urgent":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="space-y-6">
      {/* Submit New Request Button */}
      {!showForm && (
        <Button onClick={() => setShowForm(true)} className="w-full bg-teal-600 hover:bg-teal-700">
          <Plus className="w-4 h-4 mr-2" />
          Submit New Maintenance Request
        </Button>
      )}

{/* New Request Form */}
      {showForm && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Wrench className="w-5 h-5" />
              New Maintenance Request
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="title">Issue Title *</Label>
              <Input
                id="title"
                placeholder="Brief description of the issue"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
              />
            </div>

<div>
              <Label htmlFor="description">Detailed Description *</Label>
              <Textarea
                id="description"
                placeholder="Provide detailed information about the issue"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                rows={4}
              />
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="category">Category *</Label>
                <Select value={category} onValueChange={setCategory}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select category" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Plumbing">Plumbing</SelectItem>
                    <SelectItem value="Electrical">Electrical</SelectItem>
                    <SelectItem value="HVAC">HVAC</SelectItem>
                    <SelectItem value="Appliances">Appliances</SelectItem>
                    <SelectItem value="Structural">Structural</SelectItem>
                    <SelectItem value="Other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label htmlFor="priority">Priority</Label>
                <Select value={priority} onValueChange={(value: any) => setPriority(value)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="low">Low</SelectItem>
                    <SelectItem value="medium">Medium</SelectItem>
                    <SelectItem value="high">High</SelectItem>
                    <SelectItem value="urgent">Urgent</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="flex gap-2">
              <Button onClick={submitRequest} disabled={isSubmitting} className="flex-1 bg-teal-600 hover:bg-teal-700">
                {isSubmitting ? "Submitting..." : "Submit Request"}
              </Button>
              <Button variant="outline" onClick={() => setShowForm(false)} className="flex-1">
                Cancel
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

{/* Existing Requests */}
      <Card>
        <CardHeader>
          <CardTitle>Your Maintenance Requests</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {requests.map((request) => (
              <div key={request.id} className="border rounded-lg p-4 space-y-3">
                <div className="flex justify-between items-start">
                  <div className="flex-1">
                    <h3 className="font-semibold text-lg">{request.title}</h3>
                    <p className="text-gray-600 text-sm mt-1">{request.description}</p>
                  </div>
                  <div className="flex items-center gap-2 ml-4">
                    {getStatusIcon(request.status)}
                    <Badge className={getStatusColor(request.status)}>{request.status.replace("_", " ")}</Badge>
                  </div>
                </div>

<div className="flex flex-wrap gap-2">
                  <Badge variant="outline">{request.category}</Badge>
                  <Badge className={getPriorityColor(request.priority)}>{request.priority} priority</Badge>
                </div>

<div className="text-xs text-gray-500">
                  Submitted: {new Date(request.submittedAt).toLocaleDateString()}
                  {request.completedAt && (
                    <span className="ml-4">Completed: {new Date(request.completedAt).toLocaleDateString()}</span>
                  )}
                </div>
              </div>
            ))}

{requests.length === 0 && (
              <div className="text-center py-8">
                <Wrench className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                <h3 className="text-lg font-semibold text-gray-900 mb-2">No maintenance requests</h3>
                <p className="text-gray-600">Submit your first maintenance request to get started</p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { DashboardHome } from "@/components/dashboard-home"

export default async function HomePage() {
  // This will redirect to /login if user is not authenticated
  const session = await requireAuth()

// Log that user visited the homepage
  await logActivity(session.user.id, "dashboard_visit", { page: "home" })

return <DashboardHome user={session.user} />
}
[V0_FILE]typescriptreact:file="middleware.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
  const token = request.cookies.get("auth-token")
  const { pathname } = request.nextUrl

// Public routes that don't require authentication
  const publicRoutes = ["/login", "/api/auth/login", "/api/auth/logout"]
  const isPublicRoute = publicRoutes.some((route) => pathname.startsWith(route))

// If trying to access protected route without token, redirect to login
  if (!token && !isPublicRoute) {
    return NextResponse.redirect(new URL("/login", request.url))
  }

// If logged in and trying to access login page, redirect to home
  if (token && pathname === "/login") {
    return NextResponse.redirect(new URL("/", request.url))
  }

return NextResponse.next()
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|public/).*)"],
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isMerged="true"
import { LoginForm } from "@/components/login-form"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { QrCode } from "lucide-react"

export default function LoginPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-700 via-slate-800 to-slate-900 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        {/* App Logo and Branding */}
        <div className="text-center mb-8">
          <div className="w-20 h-20 bg-white rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
            <QrCode className="w-10 h-10 text-slate-700" />
          </div>
          <h1 className="text-3xl font-bold text-white mb-2">eDAS Access</h1>
          <p className="text-slate-300">Estate Management Platform</p>
        </div>

{/* Login Card */}
        <Card className="shadow-2xl border-0 bg-white/95 backdrop-blur-sm">
          <CardHeader className="text-center pb-4">
            <CardTitle className="text-2xl font-bold text-slate-800">Welcome Back</CardTitle>
            <CardDescription className="text-slate-600">Sign in to access your estate dashboard</CardDescription>
          </CardHeader>
          <CardContent>
            <LoginForm />
          </CardContent>
        </Card>

{/* Demo Instructions */}
        <div className="mt-6 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg">
          <p className="text-sm text-white text-center">
            <strong>Demo Access:</strong> Use any email and password to sign in
          </p>
          <p className="text-xs text-slate-300 text-center mt-2">
            This is a demonstration of the eDAS Access estate management platform
          </p>
        </div>

{/* Footer */}
        <div className="text-center mt-8">
          <p className="text-slate-400 text-sm">© 2024 eDAS Access. All rights reserved.</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/login-form.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Eye, EyeOff, Mail, Lock, LogIn } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export function LoginForm() {
  const [email, setEmail] = useState("demo@edas.com")
  const [password, setPassword] = useState("password123")
  const [showPassword, setShowPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!email.trim() || !password.trim()) {
      toast({
        title: "Missing Information",
        description: "Please enter both email and password",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)

// Simulate authentication process
    await new Promise((resolve) => setTimeout(resolve, 1500))

// Set demo authentication cookie
    document.cookie = "auth-token=demo-token; path=/; max-age=86400"

toast({
      title: "Welcome Back!",
      description: "Successfully signed in to eDAS Access",
    })

setIsLoading(false)
    router.push("/")
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Email Field */}
      <div className="space-y-2">
        <Label htmlFor="email" className="text-sm font-medium text-slate-700">
          Email Address
        </Label>
        <div className="relative">
          <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
          <Input
            id="email"
            type="email"
            placeholder="Enter your email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="pl-10 h-12 border-slate-300 focus:border-slate-500 focus:ring-slate-500"
            required
          />
        </div>
      </div>

{/* Password Field */}
      <div className="space-y-2">
        <Label htmlFor="password" className="text-sm font-medium text-slate-700">
          Password
        </Label>
        <div className="relative">
          <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
          <Input
            id="password"
            type={showPassword ? "text" : "password"}
            placeholder="Enter your password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="pl-10 pr-10 h-12 border-slate-300 focus:border-slate-500 focus:ring-slate-500"
            required
          />
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-slate-600"
          >
            {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
          </button>
        </div>
      </div>

{/* Remember Me & Forgot Password */}
      <div className="flex items-center justify-between">
        <div className="flex items-center">
          <input
            id="remember-me"
            name="remember-me"
            type="checkbox"
            className="h-4 w-4 text-slate-600 focus:ring-slate-500 border-slate-300 rounded"
          />
          <label htmlFor="remember-me" className="ml-2 block text-sm text-slate-700">
            Remember me
          </label>
        </div>
        <button type="button" className="text-sm text-slate-600 hover:text-slate-500 font-medium">
          Forgot password?
        </button>
      </div>

{/* Sign In Button */}
      <Button
        type="submit"
        disabled={isLoading}
        className="w-full h-12 bg-gradient-to-r from-slate-700 to-slate-800 hover:from-slate-800 hover:to-slate-900 text-white font-semibold rounded-lg shadow-lg transition-all duration-200"
      >
        {isLoading ? (
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
            Signing in...
          </div>
        ) : (
          <div className="flex items-center gap-2">
            <LogIn className="w-5 h-5" />
            Sign In
          </div>
        )}
      </Button>

{/* Divider */}
      <div className="relative">
        <div className="absolute inset-0 flex items-center">
          <div className="w-full border-t border-slate-300" />
        </div>
        <div className="relative flex justify-center text-sm">
          <span className="px-2 bg-white text-slate-500">Or continue with</span>
        </div>
      </div>

{/* Social Login Options */}
      <div className="grid grid-cols-2 gap-3">
        <Button
          type="button"
          variant="outline"
          className="h-12 border-slate-300 hover:bg-slate-50"
          disabled={isLoading}
        >
          <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
            <path
              fill="currentColor"
              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
            />
            <path
              fill="currentColor"
              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
            />
            <path
              fill="currentColor"
              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
            />
            <path
              fill="currentColor"
              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
            />
          </svg>
          Google
        </Button>
        <Button
          type="button"
          variant="outline"
          className="h-12 border-slate-300 hover:bg-slate-50"
          disabled={isLoading}
        >
          <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
          </svg>
          Facebook
        </Button>
      </div>

{/* Demo Credentials */}
      <div className="text-center p-3 bg-slate-50 rounded-lg border">
        <p className="text-xs text-slate-600 font-medium mb-1">Demo Credentials (Pre-filled)</p>
        <p className="text-xs text-slate-500">Email: demo@edas.com</p>
        <p className="text-xs text-slate-500">Password: password123</p>
      </div>

{/* Sign Up Link */}
      <div className="text-center">
        <p className="text-sm text-slate-600">
          Don't have an account?{" "}
          <button type="button" className="text-slate-700 hover:text-slate-600 font-medium">
            Sign up here
          </button>
        </p>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="app/announcements/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { AnnouncementsManager } from "@/components/announcements-manager"

export default async function AnnouncementsPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "announcements" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Announcements</h1>
        <p className="text-slate-300">Stay updated with estate news and announcements</p>
      </div>

<div className="p-6">
        <AnnouncementsManager userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/announcements-manager.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Bell, Calendar, AlertCircle, Info, CheckCircle, Pin } from "lucide-react"

interface AnnouncementsManagerProps {
  userId: string
}

interface Announcement {
  id: string
  title: string
  content: string
  type: "general" | "urgent" | "maintenance" | "event"
  priority: "low" | "medium" | "high"
  date: string
  author: string
  pinned: boolean
  read: boolean
}

export function AnnouncementsManager({ userId }: AnnouncementsManagerProps) {
  const [announcements] = useState<Announcement[]>([
    {
      id: "1",
      title: "Water Supply Maintenance",
      content:
        "Water supply will be temporarily interrupted on Saturday, January 20th from 9:00 AM to 2:00 PM for routine maintenance.",
      type: "maintenance",
      priority: "high",
      date: "2024-01-18T10:00:00Z",
      author: "Estate Management",
      pinned: true,
      read: false,
    },
    {
      id: "2",
      title: "New Year Community Event",
      content:
        "Join us for our New Year celebration at the community center on January 31st at 7:00 PM. Food and entertainment provided!",
      type: "event",
      priority: "medium",
      date: "2024-01-15T14:30:00Z",
      author: "Community Committee",
      pinned: false,
      read: true,
    },
    {
      id: "3",
      title: "Parking Policy Update",
      content:
        "New parking regulations will take effect from February 1st. Please review the updated guidelines in your resident handbook.",
      type: "general",
      priority: "medium",
      date: "2024-01-12T09:15:00Z",
      author: "Estate Management",
      pinned: false,
      read: true,
    },
    {
      id: "4",
      title: "Security Alert",
      content:
        "Please ensure all visitors are properly registered. Recent unauthorized access attempts have been reported.",
      type: "urgent",
      priority: "high",
      date: "2024-01-10T16:45:00Z",
      author: "Security Team",
      pinned: true,
      read: false,
    },
  ])

const getTypeIcon = (type: string) => {
    switch (type) {
      case "urgent":
        return <AlertCircle className="w-5 h-5" />
      case "maintenance":
        return <AlertCircle className="w-5 h-5" />
      case "event":
        return <Calendar className="w-5 h-5" />
      default:
        return <Info className="w-5 h-5" />
    }
  }

const getTypeColor = (type: string) => {
    switch (type) {
      case "urgent":
        return "bg-red-100 text-red-800"
      case "maintenance":
        return "bg-orange-100 text-orange-800"
      case "event":
        return "bg-blue-100 text-blue-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "high":
        return "bg-red-100 text-red-800"
      case "medium":
        return "bg-yellow-100 text-yellow-800"
      default:
        return "bg-green-100 text-green-800"
    }
  }

const markAsRead = async (announcementId: string) => {
    await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: "announcement_read",
        details: { announcementId },
      }),
    })
  }

return (
    <div className="space-y-6">
      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4 text-center">
            <Bell className="w-8 h-8 text-blue-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{announcements.length}</div>
            <p className="text-sm text-slate-600">Total Announcements</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <AlertCircle className="w-8 h-8 text-red-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{announcements.filter((a) => !a.read).length}</div>
            <p className="text-sm text-slate-600">Unread</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <Pin className="w-8 h-8 text-purple-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{announcements.filter((a) => a.pinned).length}</div>
            <p className="text-sm text-slate-600">Pinned</p>
          </CardContent>
        </Card>
      </div>

{/* Announcements List */}
      <div className="space-y-4">
        {announcements.map((announcement) => (
          <Card key={announcement.id} className={`${!announcement.read ? "border-l-4 border-l-blue-500" : ""}`}>
            <CardHeader>
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  {announcement.pinned && <Pin className="w-4 h-4 text-purple-500" />}
                  <div className={getTypeColor(announcement.type)}>{getTypeIcon(announcement.type)}</div>
                  <div>
                    <CardTitle className="text-lg">{announcement.title}</CardTitle>
                    <p className="text-sm text-slate-600">
                      By {announcement.author} • {new Date(announcement.date).toLocaleDateString()}
                    </p>
                  </div>
                </div>
                <div className="flex gap-2">
                  <Badge className={getTypeColor(announcement.type)}>{announcement.type}</Badge>
                  <Badge className={getPriorityColor(announcement.priority)}>{announcement.priority}</Badge>
                  {!announcement.read && <Badge className="bg-blue-100 text-blue-800">New</Badge>}
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-slate-700 mb-4">{announcement.content}</p>
              {!announcement.read && (
                <Button
                  size="sm"
                  onClick={() => markAsRead(announcement.id)}
                  className="bg-slate-600 hover:bg-slate-700"
                >
                  <CheckCircle className="w-4 h-4 mr-2" />
                  Mark as Read
                </Button>
              )}
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/messages/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { MessagesManager } from "@/components/messages-manager"

export default async function MessagesPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "messages" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Messages</h1>
        <p className="text-slate-300">Communicate with estate management and neighbors</p>
      </div>

<div className="p-6">
        <MessagesManager userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/messages-manager.tsx" isMerged="true"
"use client"

interface MessagesManagerProps {
  userId: string
}

interface Message {
  id: string
  subject: string
  content: string
  sender: string
  recipient: string
  timestamp: string
  read: boolean
  type: "received" | "sent"
  priority: "normal" | "high"
}

export function MessagesManager({ userId }: MessagesManagerProps) {
  const [showCompose, setShowCompose] = useState(false)
  const [selectedMessage, setSelectedMessage] = useState<Message | null>(null)
  const [newMessage, setNewMessage] = useState({ recipient: "", subject: "", content: "" })

const [messages] = useState<Message[]>([
    {
      id: "1",
      subject: "Maintenance Request Update",
      content: "Your maintenance request for the leaking faucet has been scheduled for tomorrow at 2 PM.",
      sender: "Estate Management",
      recipient: "You",
      timestamp: "2024-01-18T14:30:00Z",
      read: false,
      type: "received",
      priority: "high",
    },
    {
      id: "2",
      subject: "Community Event Invitation",
      content: "You're invited to our monthly community meeting this Saturday at 10 AM in the community hall.",
      sender: "Community Committee",
      recipient: "You",
      timestamp: "2024-01-17T09:15:00Z",
      read: true,
      type: "received",
      priority: "normal",
    },
    {
      id: "3",
      subject: "Parking Space Inquiry",
      content:
        "Thank you for your inquiry about additional parking spaces. We'll review your request and get back to you within 3 business days.",
      sender: "You",
      recipient: "Estate Management",
      timestamp: "2024-01-16T16:45:00Z",
      read: true,
      type: "sent",
      priority: "normal",
    },
  ])

const sendMessage = async () => {
    if (!newMessage.recipient || !newMessage.subject || !newMessage.content) return

await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: "message_sent",
        details: { recipient: newMessage.recipient, subject: newMessage.subject },
      }),
    })

setNewMessage({ recipient: "", subject: "", content: "" })
    setShowCompose(false)
  }

return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      {/* Messages List */}
      <div className="lg:col-span-1 space-y-4">
        <div className="flex justify-between items-center">
          <h2 className="text-xl font-bold text-slate-800">Messages</h2>
          <Button onClick={() => setShowCompose(true)} className="bg-slate-600 hover:bg-slate-700">
            <Plus className="w-4 h-4 mr-2" />
            Compose
          </Button>
        </div>

<div className="space-y-2">
          {messages.map((message) => (
            <Card
              key={message.id}
              className={`cursor-pointer transition-colors ${
                selectedMessage?.id === message.id ? "bg-slate-50 border-slate-300" : "hover:bg-gray-50"
              } ${!message.read && message.type === "received" ? "border-l-4 border-l-blue-500" : ""}`}
              onClick={() => setSelectedMessage(message)}
            >
              <CardContent className="p-4">
                <div className="flex items-start justify-between mb-2">
                  <div className="flex items-center gap-2">
                    <User className="w-4 h-4 text-slate-500" />
                    <span className="font-medium text-sm">
                      {message.type === "received" ? message.sender : `To: ${message.recipient}`}
                    </span>
                  </div>
                  <div className="flex gap-1">
                    {message.priority === "high" && <Badge className="bg-red-100 text-red-800 text-xs">High</Badge>}
                    {!message.read && message.type === "received" && (
                      <Badge className="bg-blue-100 text-blue-800 text-xs">New</Badge>
                    )}
                  </div>
                </div>
                <h3 className="font-semibold text-sm mb-1 truncate">{message.subject}</h3>
                <p className="text-xs text-slate-600 truncate">{message.content}</p>
                <div className="flex items-center gap-1 mt-2">
                  <Clock className="w-3 h-3 text-slate-400" />
                  <span className="text-xs text-slate-400">{new Date(message.timestamp).toLocaleDateString()}</span>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

{/* Message Content / Compose */}
      <div className="lg:col-span-2">
        {showCompose ? (
          <Card>
            <CardHeader>
              <CardTitle>Compose Message</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-1">To:</label>
                <Input
                  placeholder="Recipient"
                  value={newMessage.recipient}
                  onChange={(e) => setNewMessage({ ...newMessage, recipient: e.target.value })}
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-1">Subject:</label>
                <Input
                  placeholder="Message subject"
                  value={newMessage.subject}
                  onChange={(e) => setNewMessage({ ...newMessage, subject: e.target.value })}
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-1">Message:</label>
                <Textarea
                  placeholder="Type your message here..."
                  rows={6}
                  value={newMessage.content}
                  onChange={(e) => setNewMessage({ ...newMessage, content: e.target.value })}
                />
              </div>
              <div className="flex gap-2">
                <Button onClick={sendMessage} className="bg-slate-600 hover:bg-slate-700">
                  <Send className="w-4 h-4 mr-2" />
                  Send Message
                </Button>
                <Button variant="outline" onClick={() => setShowCompose(false)}>
                  Cancel
                </Button>
              </div>
            </CardContent>
          </Card>
        ) : selectedMessage ? (
          <Card>
            <CardHeader>
              <div className="flex items-start justify-between">
                <div>
                  <CardTitle>{selectedMessage.subject}</CardTitle>
                  <p className="text-sm text-slate-600 mt-1">
                    {selectedMessage.type === "received"
                      ? `From: ${selectedMessage.sender}`
                      : `To: ${selectedMessage.recipient}`}
                  </p>
                  <p className="text-xs text-slate-500">{new Date(selectedMessage.timestamp).toLocaleString()}</p>
                </div>
                <div className="flex gap-2">
                  {selectedMessage.priority === "high" && (
                    <Badge className="bg-red-100 text-red-800">High Priority</Badge>
                  )}
                  <Badge
                    className={
                      selectedMessage.type === "received" ? "bg-green-100 text-green-800" : "bg-blue-100 text-blue-800"
                    }
                  >
                    {selectedMessage.type === "received" ? "Received" : "Sent"}
                  </Badge>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-slate-700 whitespace-pre-wrap mb-4">{selectedMessage.content}</p>
              {selectedMessage.type === "received" && (
                <Button className="bg-slate-600 hover:bg-slate-700">
                  <Reply className="w-4 h-4 mr-2" />
                  Reply
                </Button>
              )}
            </CardContent>
          </Card>
        ) : (
          <Card>
            <CardContent className="p-12 text-center">
              <MessageSquare className="w-16 h-16 text-slate-400 mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-slate-800 mb-2">Select a message</h3>
              <p className="text-slate-600">Choose a message from the list to view its content</p>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/security/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { SecurityDashboard } from "@/components/security-dashboard"

export default async function SecurityPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "security" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Security</h1>
        <p className="text-slate-300">Monitor estate security and access controls</p>
      </div>

<div className="p-6">
        <SecurityDashboard userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/security-dashboard.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Shield, Camera, AlertTriangle, CheckCircle, Clock, Eye, Users, Lock } from "lucide-react"

interface SecurityDashboardProps {
  userId: string
}

interface SecurityEvent {
  id: string
  type: "access_granted" | "access_denied" | "visitor_entry" | "alarm_triggered"
  description: string
  location: string
  timestamp: string
  status: "resolved" | "pending" | "investigating"
  severity: "low" | "medium" | "high"
}

export function SecurityDashboard({ userId }: SecurityDashboardProps) {
  const [securityEvents] = useState<SecurityEvent[]>([
    {
      id: "1",
      type: "visitor_entry",
      description: "Visitor John Doe entered via main gate",
      location: "Main Entrance",
      timestamp: "2024-01-18T14:30:00Z",
      status: "resolved",
      severity: "low",
    },
    {
      id: "2",
      type: "access_denied",
      description: "Unauthorized access attempt at Block B entrance",
      location: "Block B Entrance",
      timestamp: "2024-01-18T12:15:00Z",
      status: "investigating",
      severity: "high",
    },
    {
      id: "3",
      type: "access_granted",
      description: "Resident access granted - Unit 12A",
      location: "Block A Entrance",
      timestamp: "2024-01-18T11:45:00Z",
      status: "resolved",
      severity: "low",
    },
    {
      id: "4",
      type: "alarm_triggered",
      description: "Motion sensor activated in parking area",
      location: "Parking Level B1",
      timestamp: "2024-01-18T02:30:00Z",
      status: "resolved",
      severity: "medium",
    },
  ])

const getEventIcon = (type: string) => {
    switch (type) {
      case "access_granted":
        return <CheckCircle className="w-4 h-4" />
      case "access_denied":
        return <Lock className="w-4 h-4" />
      case "visitor_entry":
        return <Users className="w-4 h-4" />
      case "alarm_triggered":
        return <AlertTriangle className="w-4 h-4" />
      default:
        return <Shield className="w-4 h-4" />
    }
  }

const getEventColor = (type: string) => {
    switch (type) {
      case "access_granted":
        return "bg-green-100 text-green-800"
      case "access_denied":
        return "bg-red-100 text-red-800"
      case "visitor_entry":
        return "bg-blue-100 text-blue-800"
      case "alarm_triggered":
        return "bg-orange-100 text-orange-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getSeverityColor = (severity: string) => {
    switch (severity) {
      case "high":
        return "bg-red-100 text-red-800"
      case "medium":
        return "bg-yellow-100 text-yellow-800"
      default:
        return "bg-green-100 text-green-800"
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "resolved":
        return "bg-green-100 text-green-800"
      case "investigating":
        return "bg-orange-100 text-orange-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="space-y-6">
      {/* Security Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4 text-center">
            <Shield className="w-8 h-8 text-green-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">Active</div>
            <p className="text-sm text-slate-600">Security Status</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <Camera className="w-8 h-8 text-blue-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">24</div>
            <p className="text-sm text-slate-600">Active Cameras</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <Users className="w-8 h-8 text-purple-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">12</div>
            <p className="text-sm text-slate-600">Active Visitors</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <AlertTriangle className="w-8 h-8 text-orange-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">1</div>
            <p className="text-sm text-slate-600">Pending Alerts</p>
          </CardContent>
        </Card>
      </div>

{/* Quick Actions */}
      <Card>
        <CardHeader>
          <CardTitle>Security Controls</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Button className="h-16 bg-slate-600 hover:bg-slate-700">
              <Camera className="w-6 h-6 mr-3" />
              View Live Cameras
            </Button>
            <Button className="h-16 bg-blue-600 hover:bg-blue-700">
              <Eye className="w-6 h-6 mr-3" />
              Access Logs
            </Button>
            <Button className="h-16 bg-purple-600 hover:bg-purple-700">
              <AlertTriangle className="w-6 h-6 mr-3" />
              Emergency Alert
            </Button>
          </div>
        </CardContent>
      </Card>

{/* Recent Security Events */}
      <Card>
        <CardHeader>
          <CardTitle>Recent Security Events</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {securityEvents.map((event) => (
              <div key={event.id} className="border rounded-lg p-4">
                <div className="flex items-start justify-between mb-3">
                  <div className="flex items-center gap-3">
                    <div className={`p-2 rounded-full ${getEventColor(event.type)}`}>{getEventIcon(event.type)}</div>
                    <div>
                      <h3 className="font-semibold">{event.description}</h3>
                      <p className="text-sm text-slate-600">{event.location}</p>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Badge className={getSeverityColor(event.severity)}>{event.severity}</Badge>
                    <Badge className={getStatusColor(event.status)}>{event.status}</Badge>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2 text-sm text-slate-500">
                    <Clock className="w-4 h-4" />
                    {new Date(event.timestamp).toLocaleString()}
                  </div>
                  {event.status === "investigating" && (
                    <Button size="sm" variant="outline">
                      View Details
                    </Button>
                  )}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/estate-management-dashboard.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Users, Wrench, MessageSquare, AlertTriangle, CheckCircle, Clock, TrendingUp, Home } from "lucide-react"

interface EstateManagementDashboardProps {
  userId: string
}

interface ResidentRequest {
  id: string
  type: "maintenance" | "visitor" | "complaint" | "inquiry"
  title: string
  resident: string
  unit: string
  priority: "low" | "medium" | "high" | "urgent"
  status: "pending" | "in_progress" | "completed" | "cancelled"
  submittedAt: string
  description: string
}

export function EstateManagementDashboard({ userId }: EstateManagementDashboardProps) {
  const [requests] = useState<ResidentRequest[]>([
    {
      id: "1",
      type: "maintenance",
      title: "Leaking Faucet in Kitchen",
      resident: "John Smith",
      unit: "A-12",
      priority: "medium",
      status: "in_progress",
      submittedAt: "2024-01-18T10:30:00Z",
      description: "Kitchen faucet has been dripping for 3 days",
    },
    {
      id: "2",
      type: "visitor",
      title: "Visitor Access Request",
      resident: "Sarah Johnson",
      unit: "B-05",
      priority: "low",
      status: "completed",
      submittedAt: "2024-01-18T09:15:00Z",
      description: "Request for visitor access code for delivery",
    },
    {
      id: "3",
      type: "complaint",
      title: "Noise Complaint",
      resident: "Mike Wilson",
      unit: "C-08",
      priority: "high",
      status: "pending",
      submittedAt: "2024-01-17T22:45:00Z",
      description: "Loud music from neighboring unit after 11 PM",
    },
    {
      id: "4",
      type: "inquiry",
      title: "Parking Space Availability",
      resident: "Lisa Chen",
      unit: "A-03",
      priority: "low",
      status: "pending",
      submittedAt: "2024-01-17T14:20:00Z",
      description: "Inquiry about additional parking space rental",
    },
  ])

const stats = {
    totalResidents: 156,
    activeRequests: requests.filter((r) => r.status !== "completed" && r.status !== "cancelled").length,
    completedToday: requests.filter((r) => r.status === "completed").length,
    urgentRequests: requests.filter((r) => r.priority === "urgent").length,
    maintenanceRequests: requests.filter((r) => r.type === "maintenance").length,
    visitorRequests: requests.filter((r) => r.type === "visitor").length,
  }

const getTypeIcon = (type: string) => {
    switch (type) {
      case "maintenance":
        return <Wrench className="w-4 h-4" />
      case "visitor":
        return <Users className="w-4 h-4" />
      case "complaint":
        return <AlertTriangle className="w-4 h-4" />
      case "inquiry":
        return <MessageSquare className="w-4 h-4" />
      default:
        return <MessageSquare className="w-4 h-4" />
    }
  }

const getTypeColor = (type: string) => {
    switch (type) {
      case "maintenance":
        return "bg-orange-100 text-orange-800"
      case "visitor":
        return "bg-blue-100 text-blue-800"
      case "complaint":
        return "bg-red-100 text-red-800"
      case "inquiry":
        return "bg-purple-100 text-purple-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "urgent":
        return "bg-red-100 text-red-800"
      case "high":
        return "bg-orange-100 text-orange-800"
      case "medium":
        return "bg-yellow-100 text-yellow-800"
      default:
        return "bg-green-100 text-green-800"
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "completed":
        return "bg-green-100 text-green-800"
      case "in_progress":
        return "bg-blue-100 text-blue-800"
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "cancelled":
        return "bg-gray-100 text-gray-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const updateRequestStatus = async (requestId: string, newStatus: string) => {
    await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: "request_status_updated",
        details: { requestId, newStatus },
      }),
    })
  }

return (
    <div className="space-y-6">
      {/* Overview Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4 text-center">
            <Home className="w-8 h-8 text-blue-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{stats.totalResidents}</div>
            <p className="text-sm text-slate-600">Total Residents</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <Clock className="w-8 h-8 text-orange-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{stats.activeRequests}</div>
            <p className="text-sm text-slate-600">Active Requests</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <CheckCircle className="w-8 h-8 text-green-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{stats.completedToday}</div>
            <p className="text-sm text-slate-600">Completed Today</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <AlertTriangle className="w-8 h-8 text-red-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{stats.urgentRequests}</div>
            <p className="text-sm text-slate-600">Urgent Requests</p>
          </CardContent>
        </Card>
      </div>

{/* Management Tabs */}
      <Tabs defaultValue="requests" className="space-y-4">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="requests">All Requests</TabsTrigger>
          <TabsTrigger value="maintenance">Maintenance</TabsTrigger>
          <TabsTrigger value="communications">Communications</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
        </TabsList>

<TabsContent value="requests" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Recent Resident Requests</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {requests.map((request) => (
                  <div key={request.id} className="border rounded-lg p-4">
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex items-center gap-3">
                        <div className={`p-2 rounded-full ${getTypeColor(request.type)}`}>
                          {getTypeIcon(request.type)}
                        </div>
                        <div>
                          <h3 className="font-semibold">{request.title}</h3>
                          <p className="text-sm text-slate-600">
                            {request.resident} • Unit {request.unit}
                          </p>
                          <p className="text-sm text-slate-500 mt-1">{request.description}</p>
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <Badge className={getTypeColor(request.type)}>{request.type}</Badge>
                        <Badge className={getPriorityColor(request.priority)}>{request.priority}</Badge>
                        <Badge className={getStatusColor(request.status)}>{request.status.replace("_", " ")}</Badge>
                      </div>
                    </div>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2 text-sm text-slate-500">
                        <Clock className="w-4 h-4" />
                        {new Date(request.submittedAt).toLocaleString()}
                      </div>
                      <div className="flex gap-2">
                        {request.status === "pending" && (
                          <Button
                            size="sm"
                            onClick={() => updateRequestStatus(request.id, "in_progress")}
                            className="bg-blue-600 hover:bg-blue-700"
                          >
                            Start Work
                          </Button>
                        )}
                        {request.status === "in_progress" && (
                          <Button
                            size="sm"
                            onClick={() => updateRequestStatus(request.id, "completed")}
                            className="bg-green-600 hover:bg-green-700"
                          >
                            Mark Complete
                          </Button>
                        )}
                        <Button size="sm" variant="outline">
                          View Details
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="maintenance" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardContent className="p-4 text-center">
                <Wrench className="w-8 h-8 text-orange-500 mx-auto mb-2" />
                <div className="text-2xl font-bold text-slate-800">{stats.maintenanceRequests}</div>
                <p className="text-sm text-slate-600">Maintenance Requests</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <TrendingUp className="w-8 h-8 text-green-500 mx-auto mb-2" />
                <div className="text-2xl font-bold text-slate-800">85%</div>
                <p className="text-sm text-slate-600">Resolution Rate</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <Clock className="w-8 h-8 text-blue-500 mx-auto mb-2" />
                <div className="text-2xl font-bold text-slate-800">2.5</div>
                <p className="text-sm text-slate-600">Avg Response Days</p>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="communications" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Broadcast Announcement</CardTitle>
              </CardHeader>
              <CardContent>
                <Button className="w-full bg-slate-600 hover:bg-slate-700">
                  <MessageSquare className="w-4 h-4 mr-2" />
                  Send Estate-wide Announcement
                </Button>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>Emergency Alert</CardTitle>
              </CardHeader>
              <CardContent>
                <Button className="w-full bg-red-600 hover:bg-red-700">
                  <AlertTriangle className="w-4 h-4 mr-2" />
                  Send Emergency Alert
                </Button>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="analytics" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Request Types Distribution</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-sm">Maintenance</span>
                    <span className="text-sm font-semibold">45%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div className="bg-orange-500 h-2 rounded-full" style={{ width: "45%" }}></div>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">Visitor Requests</span>
                    <span className="text-sm font-semibold">30%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div className="bg-blue-500 h-2 rounded-full" style={{ width: "30%" }}></div>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">Complaints</span>
                    <span className="text-sm font-semibold">15%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div className="bg-red-500 h-2 rounded-full" style={{ width: "15%" }}></div>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">General Inquiries</span>
                    <span className="text-sm font-semibold">10%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div className="bg-purple-500 h-2 rounded-full" style={{ width: "10%" }}></div>
                  </div>
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>Monthly Performance</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between">
                    <span className="text-sm text-slate-600">Requests Resolved</span>
                    <span className="font-semibold">124</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-slate-600">Average Response Time</span>
                    <span className="font-semibold">2.5 days</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-slate-600">Resident Satisfaction</span>
                    <span className="font-semibold">4.2/5</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-slate-600">Active Visitors</span>
                    <span className="font-semibold">18</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"
import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="app/car-registration/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { CarRegistrationManager } from "@/components/car-registration-manager"

export default async function CarRegistrationPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "car_registration" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Car Registration</h1>
        <p className="text-slate-300">Register and manage your vehicles</p>
      </div>

<div className="p-6">
        <CarRegistrationManager userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/car-registration-manager.tsx" isMerged="true"
"use client"

import type React from "react"

interface CarRegistrationManagerProps {
  userId: string
}

interface Vehicle {
  id: string
  make: string
  model: string
  year: string
  color: string
  licensePlate: string
  status: "active" | "pending" | "expired"
  registeredAt: string
}

export function CarRegistrationManager({ userId }: CarRegistrationManagerProps) {
  const [showForm, setShowForm] = useState(false)
  const [editingVehicle, setEditingVehicle] = useState<Vehicle | null>(null)
  const [formData, setFormData] = useState({
    make: "",
    model: "",
    year: "",
    color: "",
    licensePlate: "",
  })
  const { toast } = useToast()

const [vehicles] = useState<Vehicle[]>([
    {
      id: "1",
      make: "Toyota",
      model: "Camry",
      year: "2022",
      color: "Silver",
      licensePlate: "ABC-1234",
      status: "active",
      registeredAt: "2024-01-15T10:00:00Z",
    },
    {
      id: "2",
      make: "Honda",
      model: "Civic",
      year: "2021",
      color: "Blue",
      licensePlate: "XYZ-5678",
      status: "active",
      registeredAt: "2024-01-10T14:30:00Z",
    },
  ])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!formData.make || !formData.model || !formData.licensePlate) {
      toast({
        title: "Missing Information",
        description: "Please fill in all required fields",
        variant: "destructive",
      })
      return
    }

await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: editingVehicle ? "vehicle_updated" : "vehicle_registered",
        details: { licensePlate: formData.licensePlate, make: formData.make, model: formData.model },
      }),
    })

toast({
      title: editingVehicle ? "Vehicle Updated" : "Vehicle Registered",
      description: `${formData.make} ${formData.model} has been ${editingVehicle ? "updated" : "registered"} successfully`,
    })

setFormData({ make: "", model: "", year: "", color: "", licensePlate: "" })
    setShowForm(false)
    setEditingVehicle(null)
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "bg-green-100 text-green-800"
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "expired":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-xl font-bold text-slate-800">Your Registered Vehicles</h2>
          <p className="text-slate-600">Manage your vehicle registrations</p>
        </div>
        <Button onClick={() => setShowForm(true)} className="bg-slate-600 hover:bg-slate-700">
          <Plus className="w-4 h-4 mr-2" />
          Register Vehicle
        </Button>
      </div>

{/* Registration Form */}
      {showForm && (
        <Card>
          <CardHeader>
            <CardTitle>{editingVehicle ? "Edit Vehicle" : "Register New Vehicle"}</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="make">Make *</Label>
                  <Input
                    id="make"
                    placeholder="e.g., Toyota, Honda"
                    value={formData.make}
                    onChange={(e) => setFormData({ ...formData, make: e.target.value })}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="model">Model *</Label>
                  <Input
                    id="model"
                    placeholder="e.g., Camry, Civic"
                    value={formData.model}
                    onChange={(e) => setFormData({ ...formData, model: e.target.value })}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="year">Year</Label>
                  <Input
                    id="year"
                    placeholder="e.g., 2022"
                    value={formData.year}
                    onChange={(e) => setFormData({ ...formData, year: e.target.value })}
                  />
                </div>
                <div>
                  <Label htmlFor="color">Color</Label>
                  <Input
                    id="color"
                    placeholder="e.g., Silver, Blue"
                    value={formData.color}
                    onChange={(e) => setFormData({ ...formData, color: e.target.value })}
                  />
                </div>
                <div className="md:col-span-2">
                  <Label htmlFor="licensePlate">License Plate *</Label>
                  <Input
                    id="licensePlate"
                    placeholder="e.g., ABC-1234"
                    value={formData.licensePlate}
                    onChange={(e) => setFormData({ ...formData, licensePlate: e.target.value })}
                    required
                  />
                </div>
              </div>
              <div className="flex gap-2">
                <Button type="submit" className="bg-slate-600 hover:bg-slate-700">
                  {editingVehicle ? "Update Vehicle" : "Register Vehicle"}
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => {
                    setShowForm(false)
                    setEditingVehicle(null)
                    setFormData({ make: "", model: "", year: "", color: "", licensePlate: "" })
                  }}
                >
                  Cancel
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

{/* Vehicles List */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {vehicles.map((vehicle) => (
          <Card key={vehicle.id}>
            <CardContent className="p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center">
                    <Car className="w-6 h-6 text-slate-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg">
                      {vehicle.year} {vehicle.make} {vehicle.model}
                    </h3>
                    <p className="text-slate-600">{vehicle.color}</p>
                  </div>
                </div>
                <Badge className={getStatusColor(vehicle.status)}>{vehicle.status}</Badge>
              </div>

<div className="space-y-2 mb-4">
                <div className="flex justify-between">
                  <span className="text-sm text-slate-600">License Plate:</span>
                  <span className="font-mono font-semibold">{vehicle.licensePlate}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-slate-600">Registered:</span>
                  <span className="text-sm">{new Date(vehicle.registeredAt).toLocaleDateString()}</span>
                </div>
              </div>

{vehicles.length === 0 && (
        <Card>
          <CardContent className="p-12 text-center">
            <Car className="w-16 h-16 text-slate-400 mx-auto mb-4" />
            <h3 className="text-lg font-semibold text-slate-800 mb-2">No vehicles registered</h3>
            <p className="text-slate-600 mb-4">Register your first vehicle to get started</p>
            <Button onClick={() => setShowForm(true)} className="bg-slate-600 hover:bg-slate-700">
              <Plus className="w-4 h-4 mr-2" />
              Register Vehicle
            </Button>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/visitor-codes/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getCurrentUser } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const user = await getCurrentUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const body = await request.json()
    const { visitor_name, visitor_phone, purpose, valid_hours } = body

if (!visitor_name || !visitor_phone) {
      return NextResponse.json({ error: "Visitor name and phone are required" }, { status: 400 })
    }

// Generate unique access code
    const codeWords = Math.random().toString(36).substring(2, 8).toUpperCase()
    const codeNumbers = Math.floor(Math.random() * 9000) + 1000
    const code = `${codeWords}${codeNumbers}`

// Calculate expiry time
    const validUntil = new Date()
    validUntil.setHours(validUntil.getHours() + (valid_hours || 2))

const visitorCode = await DatabaseService.createVisitorCode({
      code,
      visitor_name,
      visitor_phone,
      resident_id: user.id,
      purpose: purpose || "General Visit",
      valid_until: validUntil.toISOString(),
      status: "active",
    })

// Log the activity
    await DatabaseService.logActivity({
      user_id: user.id,
      action: "visitor_code_generated",
      details: {
        visitor_name,
        code,
        valid_until: validUntil.toISOString(),
      },
    })

return NextResponse.json(visitorCode)
  } catch (error) {
    console.error("Error creating visitor code:", error)
    return NextResponse.json({ error: "Failed to create visitor code" }, { status: 500 })
  }
}

export async function GET(request: NextRequest) {
  try {
    const user = await getCurrentUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const codes = await DatabaseService.getActiveVisitorCodes(user.id)
    return NextResponse.json(codes)
  } catch (error) {
    console.error("Error fetching visitor codes:", error)
    return NextResponse.json({ error: "Failed to fetch visitor codes" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/visitor-codes/validate/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { code } = body

if (!code) {
      return NextResponse.json({ error: "Access code is required" }, { status: 400 })
    }

const visitorCode = await DatabaseService.validateVisitorCode(code)

if (!visitorCode) {
      return NextResponse.json({ error: "Invalid or expired access code" }, { status: 404 })
    }

// Mark code as used
    // Log security event
    await DatabaseService.createSecurityEvent({
      type: "visitor_entry",
      description: `Visitor ${visitorCode.visitor_name} entered using access code`,
      location: "Main Entrance",
      severity: "low",
      status: "resolved",
    })

await DatabaseService.useVisitorCode(visitorCode.id)

return NextResponse.json({
      valid: true,
      visitor_name: visitorCode.visitor_name,
      purpose: visitorCode.purpose,
    })
  } catch (error) {
    console.error("Error validating visitor code:", error)
    return NextResponse.json({ error: "Failed to validate access code" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/maintenance-requests/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getCurrentUser } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const user = await getCurrentUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const body = await request.json()
    const { title, description, category, priority } = body

if (!title || !description || !category) {
      return NextResponse.json({ error: "Title, description, and category are required" }, { status: 400 })
    }

const maintenanceRequest = await DatabaseService.createMaintenanceRequest({
      resident_id: user.id,
      title,
      description,
      category,
      priority: priority || "medium",
      status: "pending",
    })

// Log the activity
    await DatabaseService.logActivity({
      user_id: user.id,
      action: "maintenance_request_created",
      details: {
        request_id: maintenanceRequest.id,
        title,
        category,
        priority,
      },
    })

return NextResponse.json(maintenanceRequest)
  } catch (error) {
    console.error("Error creating maintenance request:", error)
    return NextResponse.json({ error: "Failed to create maintenance request" }, { status: 500 })
  }
}

export async function GET(request: NextRequest) {
  try {
    const user = await getCurrentUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { searchParams } = new URL(request.url)
    const includeAll = searchParams.get("all") === "true"

// If user is admin, they can see all requests
    const residentId = user.role === "admin" && includeAll ? undefined : user.id

const requests = await DatabaseService.getMaintenanceRequests(residentId)
    return NextResponse.json(requests)
  } catch (error) {
    console.error("Error fetching maintenance requests:", error)
    return NextResponse.json({ error: "Failed to fetch maintenance requests" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/maintenance-requests/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getCurrentUser } from "@/lib/auth"

export async function PATCH(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const user = await getCurrentUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const body = await request.json()
    const { status, assigned_to, priority } = body

const updates: any = {}
    if (status) updates.status = status
    if (assigned_to) updates.assigned_to = assigned_to
    if (priority) updates.priority = priority

if (status === "completed") {
      updates.completed_at = new Date().toISOString()
    }

const updatedRequest = await DatabaseService.updateMaintenanceRequest(params.id, updates)

// Log the activity
    await DatabaseService.logActivity({
      user_id: user.id,
      action: "maintenance_request_updated",
      details: {
        request_id: params.id,
        updates,
      },
    })

return NextResponse.json(updatedRequest)
  } catch (error) {
    console.error("Error updating maintenance request:", error)
    return NextResponse.json({ error: "Failed to update maintenance request" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/announcements/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getCurrentUser } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const user = await getCurrentUser()
    if (!user || user.role !== "admin") {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const body = await request.json()
    const { title, content, type, priority, pinned, expires_at } = body

if (!title || !content) {
      return NextResponse.json({ error: "Title and content are required" }, { status: 400 })
    }

const announcement = await DatabaseService.createAnnouncement({
      title,
      content,
      type: type || "general",
      priority: priority || "medium",
      author_id: user.id,
      pinned: pinned || false,
      expires_at,
    })

// Log the activity
    await DatabaseService.logActivity({
      user_id: user.id,
      action: "announcement_created",
      details: {
        announcement_id: announcement.id,
        title,
        type,
        priority,
      },
    })

return NextResponse.json(announcement)
  } catch (error) {
    console.error("Error creating announcement:", error)
    return NextResponse.json({ error: "Failed to create announcement" }, { status: 500 })
  }
}

export async function GET() {
  try {
    const announcements = await DatabaseService.getAnnouncements()
    return NextResponse.json(announcements)
  } catch (error) {
    console.error("Error fetching announcements:", error)
    return NextResponse.json({ error: "Failed to fetch announcements" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/messages/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getCurrentUser } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const user = await getCurrentUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const body = await request.json()
    const { recipient_id, subject, content, priority } = body

if (!recipient_id || !subject || !content) {
      return NextResponse.json({ error: "Recipient, subject, and content are required" }, { status: 400 })
    }

const message = await DatabaseService.createMessage({
      sender_id: user.id,
      recipient_id,
      subject,
      content,
      priority: priority || "normal",
      read: false,
    })

// Log the activity
    await DatabaseService.logActivity({
      user_id: user.id,
      action: "message_sent",
      details: {
        message_id: message.id,
        recipient_id,
        subject,
      },
    })

return NextResponse.json(message)
  } catch (error) {
    console.error("Error sending message:", error)
    return NextResponse.json({ error: "Failed to send message" }, { status: 500 })
  }
}

export async function GET(request: NextRequest) {
  try {
    const user = await getCurrentUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const messages = await DatabaseService.getMessages(user.id)
    return NextResponse.json(messages)
  } catch (error) {
    console.error("Error fetching messages:", error)
    return NextResponse.json({ error: "Failed to fetch messages" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/vehicles/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getCurrentUser } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const user = await getCurrentUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const body = await request.json()
    const { make, model, year, color, license_plate } = body

if (!make || !model || !license_plate) {
      return NextResponse.json({ error: "Make, model, and license plate are required" }, { status: 400 })
    }

const vehicle = await DatabaseService.createVehicle({
      resident_id: user.id,
      make,
      model,
      year,
      color,
      license_plate,
      status: "pending", // Requires admin approval
    })

// Log the activity
    await DatabaseService.logActivity({
      user_id: user.id,
      action: "vehicle_registered",
      details: {
        vehicle_id: vehicle.id,
        make,
        model,
        license_plate,
      },
    })

return NextResponse.json(vehicle)
  } catch (error) {
    console.error("Error registering vehicle:", error)
    return NextResponse.json({ error: "Failed to register vehicle" }, { status: 500 })
  }
}

export async function GET(request: NextRequest) {
  try {
    const user = await getCurrentUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const vehicles = await DatabaseService.getVehicles(user.id)
    return NextResponse.json(vehicles)
  } catch (error) {
    console.error("Error fetching vehicles:", error)
    return NextResponse.json({ error: "Failed to fetch vehicles" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/database-schema.sql" isMerged="true"
-- eDAS Access Database Schema
-- Run this script to create all necessary tables

-- Enable UUID extension
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

-- Users table
CREATE TABLE users (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    email VARCHAR(255) UNIQUE NOT NULL,
    name VARCHAR(255) NOT NULL,
    unit VARCHAR(50) NOT NULL,
    phone VARCHAR(20),
    role VARCHAR(20) DEFAULT 'resident' CHECK (role IN ('resident', 'admin', 'security', 'maintenance')),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Visitor access codes table
CREATE TABLE visitor_access_codes (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    code VARCHAR(20) UNIQUE NOT NULL,
    visitor_name VARCHAR(255) NOT NULL,
    visitor_phone VARCHAR(20) NOT NULL,
    resident_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    purpose TEXT,
    valid_until TIMESTAMP WITH TIME ZONE NOT NULL,
    status VARCHAR(20) DEFAULT 'active' CHECK (status IN ('active', 'used', 'expired')),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    used_at TIMESTAMP WITH TIME ZONE
);

-- Maintenance requests table
CREATE TABLE maintenance_requests (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    resident_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    title VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    category VARCHAR(100) NOT NULL,
    priority VARCHAR(20) DEFAULT 'medium' CHECK (priority IN ('low', 'medium', 'high', 'urgent')),
    status VARCHAR(20) DEFAULT 'pending' CHECK (status IN ('pending', 'in_progress', 'completed', 'cancelled')),
    assigned_to UUID REFERENCES users(id),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    completed_at TIMESTAMP WITH TIME ZONE
);

-- Announcements table
CREATE TABLE announcements (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    type VARCHAR(20) DEFAULT 'general' CHECK (type IN ('general', 'urgent', 'maintenance', 'event')),
    priority VARCHAR(20) DEFAULT 'medium' CHECK (priority IN ('low', 'medium', 'high')),
    author_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    pinned BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    expires_at TIMESTAMP WITH TIME ZONE
);

-- Messages table
CREATE TABLE messages (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    sender_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    recipient_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    subject VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    read BOOLEAN DEFAULT FALSE,
    priority VARCHAR(20) DEFAULT 'normal' CHECK (priority IN ('normal', 'high')),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    read_at TIMESTAMP WITH TIME ZONE
);

-- Vehicles table
CREATE TABLE vehicles (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    resident_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    make VARCHAR(100) NOT NULL,
    model VARCHAR(100) NOT NULL,
    year VARCHAR(4),
    color VARCHAR(50),
    license_plate VARCHAR(20) UNIQUE NOT NULL,
    status VARCHAR(20) DEFAULT 'pending' CHECK (status IN ('active', 'pending', 'expired')),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Security events table
CREATE TABLE security_events (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    type VARCHAR(50) NOT NULL CHECK (type IN ('access_granted', 'access_denied', 'visitor_entry', 'alarm_triggered')),
    description TEXT NOT NULL,
    location VARCHAR(255) NOT NULL,
    severity VARCHAR(20) DEFAULT 'low' CHECK (severity IN ('low', 'medium', 'high')),
    status VARCHAR(20) DEFAULT 'pending' CHECK (status IN ('resolved', 'pending', 'investigating')),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    resolved_at TIMESTAMP WITH TIME ZONE
);

-- Activity logs table
CREATE TABLE activity_logs (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    action VARCHAR(100) NOT NULL,
    details JSONB,
    ip_address INET,
    user_agent TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create indexes for better performance
CREATE INDEX idx_visitor_codes_resident ON visitor_access_codes(resident_id);
CREATE INDEX idx_visitor_codes_status ON visitor_access_codes(status);
CREATE INDEX idx_visitor_codes_valid_until ON visitor_access_codes(valid_until);
CREATE INDEX idx_maintenance_requests_resident ON maintenance_requests(resident_id);
CREATE INDEX idx_maintenance_requests_status ON maintenance_requests(status);
CREATE INDEX idx_messages_sender ON messages(sender_id);
CREATE INDEX idx_messages_recipient ON messages(recipient_id);
CREATE INDEX idx_vehicles_resident ON vehicles(resident_id);
CREATE INDEX idx_security_events_created ON security_events(created_at);
CREATE INDEX idx_activity_logs_user ON activity_logs(user_id);
CREATE INDEX idx_activity_logs_created ON activity_logs(created_at);

-- Insert sample admin user
INSERT INTO users (email, name, unit, role) VALUES 
('admin@edas.com', 'Estate Administrator', 'ADMIN', 'admin'),
('demo@edas.com', 'Demo User', 'A-12', 'resident'),
('security@edas.com', 'Security Guard', 'SECURITY', 'security'),
('maintenance@edas.com', 'Maintenance Team', 'MAINT', 'maintenance');

-- Insert sample announcements
INSERT INTO announcements (title, content, type, priority, author_id, pinned) VALUES 
(
    'Welcome to eDAS Access',
    'Welcome to the new estate management system. You can now manage visitor access, submit maintenance requests, and stay updated with estate announcements.',
    'general',
    'medium',
    (SELECT id FROM users WHERE email = 'admin@edas.com'),
    true
),
(
    'Water Supply Maintenance',
    'Water supply will be temporarily interrupted on Saturday, January 20th from 9:00 AM to 2:00 PM for routine maintenance.',
    'maintenance',
    'high',
    (SELECT id FROM users WHERE email = 'admin@edas.com'),
    true
);
[V0_FILE]typescriptreact:file="app/security-scanner/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { SecurityScanner } from "@/components/security-scanner"

export default async function SecurityScannerPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "security_scanner" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Security Scanner</h1>
        <p className="text-slate-300">Scan QR codes and validate visitor access</p>
      </div>

<div className="p-6">
        <SecurityScanner userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/events/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { EventsManager } from "@/components/events-manager"

export default async function EventsPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "events" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Events</h1>
        <p className="text-slate-300">Discover and book estate events and activities</p>
      </div>

<div className="p-6">
        <EventsManager userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/events-manager.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Calendar, Clock, MapPin, Users, Ticket } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface EventsManagerProps {
  userId: string
}

interface Event {
  id: string
  title: string
  description: string
  date: string
  time: string
  location: string
  category: "social" | "fitness" | "educational" | "maintenance" | "meeting"
  capacity: number
  registered: number
  price: number
  status: "upcoming" | "ongoing" | "completed" | "cancelled"
  organizer: string
  image?: string
}

export function EventsManager({ userId }: EventsManagerProps) {
  const [selectedCategory, setSelectedCategory] = useState<string>("all")
  const { toast } = useToast()

const [events] = useState<Event[]>([
    {
      id: "1",
      title: "Community BBQ Night",
      description: "Join us for a fun evening with neighbors, great food, and live music at the community center.",
      date: "2024-01-25",
      time: "18:00",
      location: "Community Center",
      category: "social",
      capacity: 100,
      registered: 45,
      price: 0,
      status: "upcoming",
      organizer: "Community Committee",
    },
    {
      id: "2",
      title: "Yoga in the Park",
      description: "Start your morning with a relaxing yoga session in our beautiful garden area.",
      date: "2024-01-22",
      time: "07:00",
      location: "Garden Area",
      category: "fitness",
      capacity: 20,
      registered: 12,
      price: 10,
      status: "upcoming",
      organizer: "Wellness Club",
    },
    {
      id: "3",
      title: "Estate Safety Workshop",
      description: "Learn about fire safety, emergency procedures, and security protocols.",
      date: "2024-01-28",
      time: "14:00",
      location: "Meeting Room A",
      category: "educational",
      capacity: 50,
      registered: 23,
      price: 0,
      status: "upcoming",
      organizer: "Estate Management",
    },
    {
      id: "4",
      title: "Monthly Residents Meeting",
      description: "Discuss estate matters, upcoming projects, and community feedback.",
      date: "2024-01-30",
      time: "19:00",
      location: "Community Hall",
      category: "meeting",
      capacity: 200,
      registered: 67,
      price: 0,
      status: "upcoming",
      organizer: "Estate Management",
    },
  ])

const categories = [
    { value: "all", label: "All Events" },
    { value: "social", label: "Social" },
    { value: "fitness", label: "Fitness" },
    { value: "educational", label: "Educational" },
    { value: "meeting", label: "Meetings" },
  ]

const filteredEvents = events.filter((event) => selectedCategory === "all" || event.category === selectedCategory)

const getCategoryColor = (category: string) => {
    switch (category) {
      case "social":
        return "bg-purple-100 text-purple-800"
      case "fitness":
        return "bg-green-100 text-green-800"
      case "educational":
        return "bg-blue-100 text-blue-800"
      case "meeting":
        return "bg-orange-100 text-orange-800"
      case "maintenance":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "upcoming":
        return "bg-blue-100 text-blue-800"
      case "ongoing":
        return "bg-green-100 text-green-800"
      case "completed":
        return "bg-gray-100 text-gray-800"
      case "cancelled":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const registerForEvent = async (eventId: string, eventTitle: string) => {
    await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: "event_registration",
        details: { eventId, eventTitle },
      }),
    })

toast({
      title: "Registration Successful",
      description: `You've been registered for ${eventTitle}`,
    })
  }

return (
    <div className="space-y-6">
      {/* Category Filter */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-wrap gap-2">
            {categories.map((category) => (
              <Button
                key={category.value}
                variant={selectedCategory === category.value ? "default" : "outline"}
                size="sm"
                onClick={() => setSelectedCategory(category.value)}
                className={selectedCategory === category.value ? "bg-slate-600 hover:bg-slate-700" : ""}
              >
                {category.label}
              </Button>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Events Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {filteredEvents.map((event) => (
          <Card key={event.id} className="overflow-hidden">
            <div className="h-32 bg-gradient-to-r from-slate-600 to-slate-700 flex items-center justify-center">
              <Calendar className="w-12 h-12 text-white" />
            </div>
            <CardHeader>
              <div className="flex items-start justify-between">
                <div>
                  <CardTitle className="text-lg">{event.title}</CardTitle>
                  <p className="text-sm text-slate-600">by {event.organizer}</p>
                </div>
                <div className="flex gap-2">
                  <Badge className={getCategoryColor(event.category)}>{event.category}</Badge>
                  <Badge className={getStatusColor(event.status)}>{event.status}</Badge>
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-slate-700">{event.description}</p>

<div className="space-y-2">
                <div className="flex items-center gap-2 text-sm">
                  <Calendar className="w-4 h-4 text-slate-500" />
                  <span>{new Date(event.date).toLocaleDateString()}</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <Clock className="w-4 h-4 text-slate-500" />
                  <span>{event.time}</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <MapPin className="w-4 h-4 text-slate-500" />
                  <span>{event.location}</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <Users className="w-4 h-4 text-slate-500" />
                  <span>
                    {event.registered}/{event.capacity} registered
                  </span>
                </div>
                {event.price > 0 && (
                  <div className="flex items-center gap-2 text-sm">
                    <Ticket className="w-4 h-4 text-slate-500" />
                    <span>${event.price}</span>
                  </div>
                )}
              </div>

<div className="flex gap-2">
                <Button
                  className="flex-1 bg-slate-600 hover:bg-slate-700"
                  onClick={() => registerForEvent(event.id, event.title)}
                  disabled={event.registered >= event.capacity || event.status !== "upcoming"}
                >
                  {event.registered >= event.capacity ? "Full" : "Register"}
                </Button>
                <Button variant="outline">Details</Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{filteredEvents.length === 0 && (
        <Card>
          <CardContent className="p-12 text-center">
            <Calendar className="w-16 h-16 text-slate-400 mx-auto mb-4" />
            <h3 className="text-lg font-semibold text-slate-800 mb-2">No events found</h3>
            <p className="text-slate-600">Check back later for upcoming events</p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/estate-map/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { EstateMap } from "@/components/estate-map"

export default async function EstateMapPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "estate_map" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Estate Map</h1>
        <p className="text-slate-300">Navigate the estate and find facilities</p>
      </div>

<div className="p-6">
        <EstateMap userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/estate-map.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { MapPin, Navigation, Building, Car, Dumbbell, ShoppingBag } from "lucide-react"

interface EstateMapProps {
  userId: string
}

interface MapLocation {
  id: string
  name: string
  type: "building" | "facility" | "parking" | "amenity" | "service"
  description: string
  coordinates: { x: number; y: number }
  status: "open" | "closed" | "maintenance"
  hours?: string
}

export function EstateMap({ userId }: EstateMapProps) {
  const [selectedLocation, setSelectedLocation] = useState<MapLocation | null>(null)
  const [selectedFilter, setSelectedFilter] = useState<string>("all")

const locations: MapLocation[] = [
    {
      id: "1",
      name: "Block A",
      type: "building",
      description: "Residential units A1-A20",
      coordinates: { x: 20, y: 30 },
      status: "open",
    },
    {
      id: "2",
      name: "Block B",
      type: "building",
      description: "Residential units B1-B20",
      coordinates: { x: 60, y: 30 },
      status: "open",
    },
    {
      id: "3",
      name: "Community Center",
      type: "facility",
      description: "Events, meetings, and social activities",
      coordinates: { x: 40, y: 60 },
      status: "open",
      hours: "6:00 AM - 10:00 PM",
    },
    {
      id: "4",
      name: "Swimming Pool",
      type: "amenity",
      description: "Olympic-size swimming pool with lifeguard",
      coordinates: { x: 70, y: 70 },
      status: "open",
      hours: "6:00 AM - 9:00 PM",
    },
    {
      id: "5",
      name: "Gym & Fitness Center",
      type: "amenity",
      description: "Fully equipped fitness center",
      coordinates: { x: 25, y: 70 },
      status: "open",
      hours: "5:00 AM - 11:00 PM",
    },
    {
      id: "6",
      name: "Parking Area A",
      type: "parking",
      description: "Covered parking for residents",
      coordinates: { x: 15, y: 50 },
      status: "open",
    },
    {
      id: "7",
      name: "Parking Area B",
      type: "parking",
      description: "Open parking for visitors",
      coordinates: { x: 75, y: 50 },
      status: "open",
    },
    {
      id: "8",
      name: "Garden & Park",
      type: "amenity",
      description: "Beautiful landscaped garden area",
      coordinates: { x: 40, y: 20 },
      status: "open",
      hours: "24 hours",
    },
    {
      id: "9",
      name: "Mini Mart",
      type: "service",
      description: "Convenience store for daily needs",
      coordinates: { x: 80, y: 35 },
      status: "open",
      hours: "7:00 AM - 10:00 PM",
    },
  ]

const filters = [
    { value: "all", label: "All Locations" },
    { value: "building", label: "Buildings" },
    { value: "facility", label: "Facilities" },
    { value: "amenity", label: "Amenities" },
    { value: "parking", label: "Parking" },
    { value: "service", label: "Services" },
  ]

const filteredLocations =
    selectedFilter === "all" ? locations : locations.filter((loc) => loc.type === selectedFilter)

const getLocationIcon = (type: string) => {
    switch (type) {
      case "building":
        return <Building className="w-4 h-4" />
      case "facility":
        return <Building className="w-4 h-4" />
      case "parking":
        return <Car className="w-4 h-4" />
      case "amenity":
        return <Dumbbell className="w-4 h-4" />
      case "service":
        return <ShoppingBag className="w-4 h-4" />
      default:
        return <MapPin className="w-4 h-4" />
    }
  }

const getLocationColor = (type: string) => {
    switch (type) {
      case "building":
        return "bg-blue-500"
      case "facility":
        return "bg-purple-500"
      case "parking":
        return "bg-gray-500"
      case "amenity":
        return "bg-green-500"
      case "service":
        return "bg-orange-500"
      default:
        return "bg-slate-500"
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "open":
        return "bg-green-100 text-green-800"
      case "closed":
        return "bg-red-100 text-red-800"
      case "maintenance":
        return "bg-yellow-100 text-yellow-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      {/* Map View */}
      <div className="lg:col-span-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <MapPin className="w-5 h-5" />
              Estate Layout
            </CardTitle>
          </CardHeader>
          <CardContent>
            {/* Interactive Map */}
            <div className="relative w-full h-96 bg-green-100 rounded-lg border-2 border-green-200 overflow-hidden">
              {/* Map Background */}
              <div className="absolute inset-0 bg-gradient-to-br from-green-200 to-green-300">
                {/* Roads */}
                <div className="absolute top-1/2 left-0 right-0 h-4 bg-gray-400 transform -translate-y-1/2"></div>
                <div className="absolute top-0 bottom-0 left-1/2 w-4 bg-gray-400 transform -translate-x-1/2"></div>

{/* Location Markers */}
                {filteredLocations.map((location) => (
                  <button
                    key={location.id}
                    className={`absolute w-6 h-6 ${getLocationColor(
                      location.type,
                    )} rounded-full border-2 border-white shadow-lg hover:scale-110 transition-transform flex items-center justify-center`}
                    style={{
                      left: `${location.coordinates.x}%`,
                      top: `${location.coordinates.y}%`,
                      transform: "translate(-50%, -50%)",
                    }}
                    onClick={() => setSelectedLocation(location)}
                  >
                    <div className="text-white text-xs">{getLocationIcon(location.type)}</div>
                  </button>
                ))}
              </div>

{/* Legend */}
              <div className="absolute bottom-4 left-4 bg-white p-3 rounded-lg shadow-lg">
                <h4 className="font-semibold text-sm mb-2">Legend</h4>
                <div className="space-y-1">
                  {filters.slice(1).map((filter) => (
                    <div key={filter.value} className="flex items-center gap-2 text-xs">
                      <div className={`w-3 h-3 ${getLocationColor(filter.value)} rounded-full`}></div>
                      <span>{filter.label}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

{/* Filter Buttons */}
            <div className="flex flex-wrap gap-2 mt-4">
              {filters.map((filter) => (
                <Button
                  key={filter.value}
                  variant={selectedFilter === filter.value ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedFilter(filter.value)}
                  className={selectedFilter === filter.value ? "bg-slate-600 hover:bg-slate-700" : ""}
                >
                  {filter.label}
                </Button>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Location Details */}
      <div className="space-y-4">
        {selectedLocation ? (
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                {getLocationIcon(selectedLocation.type)}
                {selectedLocation.name}
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-slate-700">{selectedLocation.description}</p>

<div className="space-y-2">
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium">Type:</span>
                  <Badge variant="outline">{selectedLocation.type}</Badge>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium">Status:</span>
                  <Badge className={getStatusColor(selectedLocation.status)}>{selectedLocation.status}</Badge>
                </div>
                {selectedLocation.hours && (
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium">Hours:</span>
                    <span className="text-sm">{selectedLocation.hours}</span>
                  </div>
                )}
              </div>

<Button className="w-full bg-slate-600 hover:bg-slate-700">
                <Navigation className="w-4 h-4 mr-2" />
                Get Directions
              </Button>
            </CardContent>
          </Card>
        ) : (
          <Card>
            <CardContent className="p-8 text-center">
              <MapPin className="w-12 h-12 text-slate-400 mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-slate-800 mb-2">Select a Location</h3>
              <p className="text-slate-600">Click on any marker on the map to view details</p>
            </CardContent>
          </Card>
        )}

{/* Quick Access */}
        <Card>
          <CardHeader>
            <CardTitle>Quick Access</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {locations.slice(0, 5).map((location) => (
              <button
                key={location.id}
                className="w-full text-left p-2 rounded-lg hover:bg-slate-50 transition-colors"
                onClick={() => setSelectedLocation(location)}
              >
                <div className="flex items-center gap-3">
                  <div className={`w-3 h-3 ${getLocationColor(location.type)} rounded-full`}></div>
                  <span className="text-sm font-medium">{location.name}</span>
                </div>
              </button>
            ))}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resident-directory/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { ResidentDirectory } from "@/components/resident-directory"

export default async function ResidentDirectoryPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "resident_directory" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Resident Directory</h1>
        <p className="text-slate-300">Connect with your neighbors</p>
      </div>

<div className="p-6">
        <ResidentDirectory userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/resident-directory.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { User, Search, MessageSquare, Phone, Mail, Home } from "lucide-react"

interface ResidentDirectoryProps {
  userId: string
}

interface Resident {
  id: string
  name: string
  unit: string
  email: string
  phone?: string
  role: "resident" | "admin" | "committee"
  joinedDate: string
  interests?: string[]
  publicProfile: boolean
}

export function ResidentDirectory({ userId }: ResidentDirectoryProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedFilter, setSelectedFilter] = useState("all")

const [residents] = useState<Resident[]>([
    {
      id: "1",
      name: "John Smith",
      unit: "A-12",
      email: "john.smith@email.com",
      phone: "+1234567890",
      role: "resident",
      joinedDate: "2023-06-15",
      interests: ["fitness", "gardening"],
      publicProfile: true,
    },
    {
      id: "2",
      name: "Sarah Johnson",
      unit: "B-05",
      email: "sarah.j@email.com",
      role: "committee",
      joinedDate: "2022-03-20",
      interests: ["events", "community"],
      publicProfile: true,
    },
    {
      id: "3",
      name: "Mike Wilson",
      unit: "C-08",
      email: "mike.wilson@email.com",
      phone: "+1234567891",
      role: "resident",
      joinedDate: "2023-01-10",
      interests: ["sports", "technology"],
      publicProfile: true,
    },
    {
      id: "4",
      name: "Estate Administrator",
      unit: "ADMIN",
      email: "admin@edas.com",
      role: "admin",
      joinedDate: "2022-01-01",
      publicProfile: true,
    },
    {
      id: "5",
      name: "Lisa Chen",
      unit: "A-03",
      email: "lisa.chen@email.com",
      role: "resident",
      joinedDate: "2023-08-22",
      interests: ["cooking", "reading"],
      publicProfile: true,
    },
  ])

const filteredResidents = residents.filter((resident) => {
    const matchesSearch =
      resident.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      resident.unit.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesFilter = selectedFilter === "all" || resident.role === selectedFilter
    return matchesSearch && matchesFilter && resident.publicProfile
  })

const getRoleColor = (role: string) => {
    switch (role) {
      case "admin":
        return "bg-red-100 text-red-800"
      case "committee":
        return "bg-blue-100 text-blue-800"
      case "resident":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const sendMessage = async (residentId: string, residentName: string) => {
    await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: "resident_contacted",
        details: { contactedResident: residentId, residentName },
      }),
    })
  }

return (
    <div className="space-y-6">
      {/* Search and Filter */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
              <Input
                placeholder="Search by name or unit..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
            <select
              value={selectedFilter}
              onChange={(e) => setSelectedFilter(e.target.value)}
              className="px-3 py-2 border border-gray-300 rounded-md text-sm"
            >
              <option value="all">All Residents</option>
              <option value="resident">Residents</option>
              <option value="committee">Committee</option>
              <option value="admin">Administration</option>
            </select>
          </div>
        </CardContent>
      </Card>

{/* Directory Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4 text-center">
            <User className="w-8 h-8 text-blue-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{residents.length}</div>
            <p className="text-sm text-slate-600">Total Residents</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <Home className="w-8 h-8 text-green-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">
              {new Set(residents.map((r) => r.unit.charAt(0))).size}
            </div>
            <p className="text-sm text-slate-600">Blocks</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <MessageSquare className="w-8 h-8 text-purple-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{residents.filter((r) => r.publicProfile).length}</div>
            <p className="text-sm text-slate-600">Public Profiles</p>
          </CardContent>
        </Card>
      </div>

{/* Residents Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredResidents.map((resident) => (
          <Card key={resident.id}>
            <CardContent className="p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center">
                    <User className="w-6 h-6 text-slate-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold">{resident.name}</h3>
                    <p className="text-sm text-slate-600">Unit {resident.unit}</p>
                  </div>
                </div>
                <Badge className={getRoleColor(resident.role)}>{resident.role}</Badge>
              </div>

<div className="space-y-2 mb-4">
                <div className="flex items-center gap-2 text-sm">
                  <Mail className="w-4 h-4 text-slate-500" />
                  <span className="truncate">{resident.email}</span>
                </div>
                {resident.phone && (
                  <div className="flex items-center gap-2 text-sm">
                    <Phone className="w-4 h-4 text-slate-500" />
                    <span>{resident.phone}</span>
                  </div>
                )}
                <div className="flex items-center gap-2 text-sm">
                  <Home className="w-4 h-4 text-slate-500" />
                  <span>Joined {new Date(resident.joinedDate).toLocaleDateString()}</span>
                </div>
              </div>

{resident.interests && resident.interests.length > 0 && (
                <div className="mb-4">
                  <p className="text-xs text-slate-500 mb-2">Interests:</p>
                  <div className="flex flex-wrap gap-1">
                    {resident.interests.map((interest) => (
                      <Badge key={interest} variant="outline" className="text-xs">
                        {interest}
                      </Badge>
                    ))}
                  </div>
                </div>
              )}

<div className="flex gap-2">
                <Button
                  size="sm"
                  className="flex-1 bg-slate-600 hover:bg-slate-700"
                  onClick={() => sendMessage(resident.id, resident.name)}
                >
                  <MessageSquare className="w-4 h-4 mr-2" />
                  Message
                </Button>
                {resident.phone && (
                  <Button size="sm" variant="outline">
                    <Phone className="w-4 h-4" />
                  </Button>
                )}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{filteredResidents.length === 0 && (
        <Card>
          <CardContent className="p-12 text-center">
            <User className="w-16 h-16 text-slate-400 mx-auto mb-4" />
            <h3 className="text-lg font-semibold text-slate-800 mb-2">No residents found</h3>
            <p className="text-slate-600">Try adjusting your search or filter criteria</p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/household-members/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { HouseholdMembers } from "@/components/household-members"

export default async function HouseholdMembersPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "household_members" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Household Members</h1>
        <p className="text-slate-300">Manage your family and household members</p>
      </div>

<div className="p-6">
        <HouseholdMembers userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/household-members.tsx" isMerged="true"
"use client"

import type React from "react"

interface HouseholdMembersProps {
  userId: string
}

interface HouseholdMember {
  id: string
  name: string
  relationship: string
  age?: number
  phone?: string
  email?: string
  emergencyContact: boolean
  accessLevel: "full" | "limited" | "visitor"
  addedDate: string
}

export function HouseholdMembers({ userId }: HouseholdMembersProps) {
  const [showForm, setShowForm] = useState(false)
  const [editingMember, setEditingMember] = useState<HouseholdMember | null>(null)
  const [formData, setFormData] = useState({
    name: "",
    relationship: "",
    age: "",
    phone: "",
    email: "",
    emergencyContact: false,
    accessLevel: "limited" as "full" | "limited" | "visitor",
  })
  const { toast } = useToast()

const [members, setMembers] = useState<HouseholdMember[]>([
    {
      id: "1",
      name: "Jane Smith",
      relationship: "Spouse",
      age: 35,
      phone: "+1234567890",
      email: "jane.smith@email.com",
      emergencyContact: true,
      accessLevel: "full",
      addedDate: "2024-01-15T10:00:00Z",
    },
    {
      id: "2",
      name: "Tommy Smith",
      relationship: "Child",
      age: 12,
      emergencyContact: false,
      accessLevel: "limited",
      addedDate: "2024-01-15T10:00:00Z",
    },
    {
      id: "3",
      name: "Mary Johnson",
      relationship: "Mother-in-law",
      age: 65,
      phone: "+1234567891",
      emergencyContact: true,
      accessLevel: "visitor",
      addedDate: "2024-01-10T14:30:00Z",
    },
  ])

const relationships = [
    "Spouse",
    "Child",
    "Parent",
    "Sibling",
    "Grandparent",
    "Grandchild",
    "Other Family",
    "Domestic Helper",
    "Caregiver",
    "Other",
  ]

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!formData.name || !formData.relationship) {
      toast({
        title: "Missing Information",
        description: "Please fill in name and relationship",
        variant: "destructive",
      })
      return
    }

const memberData: HouseholdMember = {
      id: editingMember?.id || Date.now().toString(),
      name: formData.name,
      relationship: formData.relationship,
      age: formData.age ? Number.parseInt(formData.age) : undefined,
      phone: formData.phone || undefined,
      email: formData.email || undefined,
      emergencyContact: formData.emergencyContact,
      accessLevel: formData.accessLevel,
      addedDate: editingMember?.addedDate || new Date().toISOString(),
    }

if (editingMember) {
      setMembers(members.map((m) => (m.id === editingMember.id ? memberData : m)))
    } else {
      setMembers([memberData, ...members])
    }

await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: editingMember ? "household_member_updated" : "household_member_added",
        details: { memberName: formData.name, relationship: formData.relationship },
      }),
    })

toast({
      title: editingMember ? "Member Updated" : "Member Added",
      description: `${formData.name} has been ${editingMember ? "updated" : "added"} successfully`,
    })

resetForm()
  }

const resetForm = () => {
    setFormData({
      name: "",
      relationship: "",
      age: "",
      phone: "",
      email: "",
      emergencyContact: false,
      accessLevel: "limited",
    })
    setShowForm(false)
    setEditingMember(null)
  }

const editMember = (member: HouseholdMember) => {
    setFormData({
      name: member.name,
      relationship: member.relationship,
      age: member.age?.toString() || "",
      phone: member.phone || "",
      email: member.email || "",
      emergencyContact: member.emergencyContact,
      accessLevel: member.accessLevel,
    })
    setEditingMember(member)
    setShowForm(true)
  }

const deleteMember = async (memberId: string, memberName: string) => {
    setMembers(members.filter((m) => m.id !== memberId))

await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: "household_member_removed",
        details: { memberName },
      }),
    })

toast({
      title: "Member Removed",
      description: `${memberName} has been removed from household`,
    })
  }

const getAccessLevelColor = (level: string) => {
    switch (level) {
      case "full":
        return "bg-green-100 text-green-800"
      case "limited":
        return "bg-yellow-100 text-yellow-800"
      case "visitor":
        return "bg-blue-100 text-blue-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-xl font-bold text-slate-800">Household Members</h2>
          <p className="text-slate-600">{members.length} members registered</p>
        </div>
        <Button onClick={() => setShowForm(true)} className="bg-slate-600 hover:bg-slate-700">
          <Plus className="w-4 h-4 mr-2" />
          Add Member
        </Button>
      </div>

{/* Add/Edit Form */}
      {showForm && (
        <Card>
          <CardHeader>
            <CardTitle>{editingMember ? "Edit Member" : "Add Household Member"}</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="name">Full Name *</Label>
                  <Input
                    id="name"
                    placeholder="Enter full name"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="relationship">Relationship *</Label>
                  <select
                    id="relationship"
                    value={formData.relationship}
                    onChange={(e) => setFormData({ ...formData, relationship: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
                    required
                  >
                    <option value="">Select relationship</option>
                    {relationships.map((rel) => (
                      <option key={rel} value={rel}>
                        {rel}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <Label htmlFor="age">Age</Label>
                  <Input
                    id="age"
                    type="number"
                    placeholder="Enter age"
                    value={formData.age}
                    onChange={(e) => setFormData({ ...formData, age: e.target.value })}
                  />
                </div>
                <div>
                  <Label htmlFor="accessLevel">Access Level</Label>
                  <select
                    id="accessLevel"
                    value={formData.accessLevel}
                    onChange={(e) =>
                      setFormData({ ...formData, accessLevel: e.target.value as "full" | "limited" | "visitor" })
                    }
                    className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
                  >
                    <option value="limited">Limited Access</option>
                    <option value="full">Full Access</option>
                    <option value="visitor">Visitor Access</option>
                  </select>
                </div>
                <div>
                  <Label htmlFor="phone">Phone Number</Label>
                  <Input
                    id="phone"
                    placeholder="Enter phone number"
                    value={formData.phone}
                    onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                  />
                </div>
                <div>
                  <Label htmlFor="email">Email Address</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="Enter email address"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  />
                </div>
              </div>

<div className="flex items-center space-x-2">
                <input
                  type="checkbox"
                  id="emergencyContact"
                  checked={formData.emergencyContact}
                  onChange={(e) => setFormData({ ...formData, emergencyContact: e.target.checked })}
                  className="rounded"
                />
                <Label htmlFor="emergencyContact">Emergency Contact</Label>
              </div>

<div className="flex gap-2">
                <Button type="submit" className="bg-slate-600 hover:bg-slate-700">
                  {editingMember ? "Update Member" : "Add Member"}
                </Button>
                <Button type="button" variant="outline" onClick={resetForm}>
                  Cancel
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

{/* Members List */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {members.map((member) => (
          <Card key={member.id}>
            <CardContent className="p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center">
                    <User className="w-6 h-6 text-slate-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg">{member.name}</h3>
                    <p className="text-slate-600">{member.relationship}</p>
                  </div>
                </div>
                <div className="flex gap-2">
                  <Badge className={getAccessLevelColor(member.accessLevel)}>{member.accessLevel}</Badge>
                  {member.emergencyContact && <Badge className="bg-red-100 text-red-800">Emergency</Badge>}
                </div>
              </div>

<div className="space-y-2 mb-4">
                {member.age && (
                  <div className="flex justify-between text-sm">
                    <span className="text-slate-600">Age:</span>
                    <span>{member.age} years old</span>
                  </div>
                )}
                {member.phone && (
                  <div className="flex justify-between text-sm">
                    <span className="text-slate-600">Phone:</span>
                    <span>{member.phone}</span>
                  </div>
                )}
                {member.email && (
                  <div className="flex justify-between text-sm">
                    <span className="text-slate-600">Email:</span>
                    <span className="truncate">{member.email}</span>
                  </div>
                )}
                <div className="flex justify-between text-sm">
                  <span className="text-slate-600">Added:</span>
                  <span>{new Date(member.addedDate).toLocaleDateString()}</span>
                </div>
              </div>

<div className="flex gap-2">
                <Button size="sm" variant="outline" className="flex-1" onClick={() => editMember(member)}>
                  <Edit className="w-4 h-4 mr-2" />
                  Edit
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  className="text-red-600 hover:text-red-700"
                  onClick={() => deleteMember(member.id, member.name)}
                >
                  <Trash2 className="w-4 h-4" />
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{members.length === 0 && (
        <Card>
          <CardContent className="p-12 text-center">
            <User className="w-16 h-16 text-slate-400 mx-auto mb-4" />
            <h3 className="text-lg font-semibold text-slate-800 mb-2">No household members</h3>
            <p className="text-slate-600 mb-4">Add your family members and household contacts</p>
            <Button onClick={() => setShowForm(true)} className="bg-slate-600 hover:bg-slate-700">
              <Plus className="w-4 h-4 mr-2" />
              Add First Member
            </Button>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/marketplace/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { Marketplace } from "@/components/marketplace"

export default async function MarketplacePage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "marketplace" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Marketplace</h1>
        <p className="text-slate-300">Buy, sell, and trade with your neighbors</p>
      </div>

<div className="p-6">
        <Marketplace userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/marketplace.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { ShoppingBag, Plus, Search, Heart, MessageSquare } from "lucide-react"

interface MarketplaceProps {
  userId: string
}

interface MarketplaceItem {
  id: string
  title: string
  description: string
  price: number
  category: string
  condition: "new" | "like-new" | "good" | "fair"
  seller: string
  sellerUnit: string
  postedDate: string
  images: string[]
  status: "available" | "sold" | "reserved"
}

export function Marketplace({ userId }: MarketplaceProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")

const [items] = useState<MarketplaceItem[]>([
    {
      id: "1",
      title: "Dining Table Set",
      description: "Beautiful wooden dining table with 6 chairs. Perfect for family dinners.",
      price: 450,
      category: "furniture",
      condition: "good",
      seller: "Sarah Johnson",
      sellerUnit: "B-05",
      postedDate: "2024-01-18T10:00:00Z",
      images: ["/placeholder.svg?height=200&width=300"],
      status: "available",
    },
    {
      id: "2",
      title: "Children's Bicycle",
      description: "Red bicycle for kids aged 5-8. Includes training wheels and helmet.",
      price: 85,
      category: "sports",
      condition: "like-new",
      seller: "Mike Wilson",
      sellerUnit: "C-08",
      postedDate: "2024-01-17T14:30:00Z",
      images: ["/placeholder.svg?height=200&width=300"],
      status: "available",
    },
    {
      id: "3",
      title: "Coffee Machine",
      description: "Barely used espresso machine. Makes perfect coffee every time.",
      price: 120,
      category: "appliances",
      condition: "like-new",
      seller: "Lisa Chen",
      sellerUnit: "A-03",
      postedDate: "2024-01-16T09:15:00Z",
      images: ["/placeholder.svg?height=200&width=300"],
      status: "available",
    },
    {
      id: "4",
      title: "Yoga Mat & Blocks",
      description: "Complete yoga set including mat, blocks, and strap. Great for home workouts.",
      price: 35,
      category: "sports",
      condition: "good",
      seller: "John Smith",
      sellerUnit: "A-12",
      postedDate: "2024-01-15T16:45:00Z",
      images: ["/placeholder.svg?height=200&width=300"],
      status: "sold",
    },
  ])

const categories = [
    { value: "all", label: "All Items" },
    { value: "furniture", label: "Furniture" },
    { value: "appliances", label: "Appliances" },
    { value: "sports", label: "Sports & Fitness" },
    { value: "electronics", label: "Electronics" },
    { value: "books", label: "Books" },
    { value: "clothing", label: "Clothing" },
    { value: "other", label: "Other" },
  ]

const filteredItems = items.filter((item) => {
    const matchesSearch =
      item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.description.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = selectedCategory === "all" || item.category === selectedCategory
    return matchesSearch && matchesCategory
  })

const getConditionColor = (condition: string) => {
    switch (condition) {
      case "new":
        return "bg-green-100 text-green-800"
      case "like-new":
        return "bg-blue-100 text-blue-800"
      case "good":
        return "bg-yellow-100 text-yellow-800"
      case "fair":
        return "bg-orange-100 text-orange-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "available":
        return "bg-green-100 text-green-800"
      case "reserved":
        return "bg-yellow-100 text-yellow-800"
      case "sold":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-xl font-bold text-slate-800">Community Marketplace</h2>
          <p className="text-slate-600">{filteredItems.length} items available</p>
        </div>
        <Button className="bg-slate-600 hover:bg-slate-700">
          <Plus className="w-4 h-4 mr-2" />
          List Item
        </Button>
      </div>

{/* Search and Filter */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
              <Input
                placeholder="Search items..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
            <select
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value)}
              className="px-3 py-2 border border-gray-300 rounded-md text-sm"
            >
              {categories.map((category) => (
                <option key={category.value} value={category.value}>
                  {category.label}
                </option>
              ))}
            </select>
          </div>
        </CardContent>
      </Card>

{/* Items Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredItems.map((item) => (
          <Card key={item.id} className="overflow-hidden">
            <div className="h-48 bg-gray-200 flex items-center justify-center">
              <ShoppingBag className="w-12 h-12 text-gray-400" />
            </div>
            <CardContent className="p-4">
              <div className="flex items-start justify-between mb-2">
                <h3 className="font-semibold text-lg truncate">{item.title}</h3>
                <div className="flex gap-1">
                  <Badge className={getConditionColor(item.condition)}>{item.condition}</Badge>
                  <Badge className={getStatusColor(item.status)}>{item.status}</Badge>
                </div>
              </div>

<p className="text-slate-600 text-sm mb-3 line-clamp-2">{item.description}</p>

<div className="flex items-center justify-between mb-3">
                <div className="text-2xl font-bold text-slate-800">${item.price}</div>
                <div className="text-sm text-slate-500">
                  {item.seller} • {item.sellerUnit}
                </div>
              </div>

<div className="text-xs text-slate-500 mb-3">Posted {new Date(item.postedDate).toLocaleDateString()}</div>

<div className="flex gap-2">
                <Button
                  size="sm"
                  className="flex-1 bg-slate-600 hover:bg-slate-700"
                  disabled={item.status !== "available"}
                >
                  <MessageSquare className="w-4 h-4 mr-2" />
                  Contact
                </Button>
                <Button size="sm" variant="outline">
                  <Heart className="w-4 h-4" />
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{filteredItems.length === 0 && (
        <Card>
          <CardContent className="p-12 text-center">
            <ShoppingBag className="w-16 h-16 text-slate-400 mx-auto mb-4" />
            <h3 className="text-lg font-semibold text-slate-800 mb-2">No items found</h3>
            <p className="text-slate-600">Try adjusting your search or browse different categories</p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/bills-payments/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { BillsPayments } from "@/components/bills-payments"

export default async function BillsPaymentsPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "bills_payments" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Bills & Payments</h1>
        <p className="text-slate-300">Manage your estate bills and payment history</p>
      </div>

<div className="p-6">
        <BillsPayments userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/bills-payments.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CreditCard, Calendar, DollarSign, Clock, CheckCircle, AlertTriangle } from "lucide-react"

interface BillsPaymentsProps {
  userId: string
}

interface Bill {
  id: string
  type: "maintenance" | "utilities" | "parking" | "amenities" | "other"
  description: string
  amount: number
  dueDate: string
  status: "pending" | "paid" | "overdue" | "partial"
  issueDate: string
  paidDate?: string
  paidAmount?: number
}

export function BillsPayments({ userId }: BillsPaymentsProps) {
  const [bills] = useState<Bill[]>([
    {
      id: "1",
      type: "maintenance",
      description: "Monthly Maintenance Fee - January 2024",
      amount: 250.0,
      dueDate: "2024-01-31",
      status: "pending",
      issueDate: "2024-01-01",
    },
    {
      id: "2",
      type: "utilities",
      description: "Water & Sewerage - December 2023",
      amount: 45.5,
      dueDate: "2024-01-15",
      status: "paid",
      issueDate: "2023-12-31",
      paidDate: "2024-01-10",
      paidAmount: 45.5,
    },
    {
      id: "3",
      type: "parking",
      description: "Additional Parking Space - January 2024",
      amount: 50.0,
      dueDate: "2024-01-31",
      status: "pending",
      issueDate: "2024-01-01",
    },
    {
      id: "4",
      type: "maintenance",
      description: "Monthly Maintenance Fee - December 2023",
      amount: 250.0,
      dueDate: "2023-12-31",
      status: "paid",
      issueDate: "2023-12-01",
      paidDate: "2023-12-28",
      paidAmount: 250.0,
    },
    {
      id: "5",
      type: "amenities",
      description: "Gym Membership - Q1 2024",
      amount: 75.0,
      dueDate: "2024-01-20",
      status: "overdue",
      issueDate: "2023-12-15",
    },
  ])

const pendingBills = bills.filter((bill) => bill.status === "pending")
  const overdueBills = bills.filter((bill) => bill.status === "overdue")
  const totalPending = pendingBills.reduce((sum, bill) => sum + bill.amount, 0)
  const totalOverdue = overdueBills.reduce((sum, bill) => sum + bill.amount, 0)

const getStatusColor = (status: string) => {
    switch (status) {
      case "paid":
        return "bg-green-100 text-green-800"
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "overdue":
        return "bg-red-100 text-red-800"
      case "partial":
        return "bg-orange-100 text-orange-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "paid":
        return <CheckCircle className="w-4 h-4" />
      case "pending":
        return <Clock className="w-4 h-4" />
      case "overdue":
        return <AlertTriangle className="w-4 h-4" />
      default:
        return <Clock className="w-4 h-4" />
    }
  }

const getTypeColor = (type: string) => {
    switch (type) {
      case "maintenance":
        return "bg-blue-100 text-blue-800"
      case "utilities":
        return "bg-green-100 text-green-800"
      case "parking":
        return "bg-purple-100 text-purple-800"
      case "amenities":
        return "bg-orange-100 text-orange-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const payBill = async (billId: string, amount: number) => {
    await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: "bill_payment",
        details: { billId, amount },
      }),
    })
  }

return (
    <div className="space-y-6">
      {/* Summary Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4 text-center">
            <DollarSign className="w-8 h-8 text-blue-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">${totalPending.toFixed(2)}</div>
            <p className="text-sm text-slate-600">Pending Bills</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <AlertTriangle className="w-8 h-8 text-red-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">${totalOverdue.toFixed(2)}</div>
            <p className="text-sm text-slate-600">Overdue Bills</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <CheckCircle className="w-8 h-8 text-green-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{bills.filter((b) => b.status === "paid").length}</div>
            <p className="text-sm text-slate-600">Paid This Month</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <Calendar className="w-8 h-8 text-purple-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{pendingBills.length}</div>
            <p className="text-sm text-slate-600">Due Soon</p>
          </CardContent>
        </Card>
      </div>

{/* Bills Management */}
      <Tabs defaultValue="pending" className="space-y-4">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="pending">Pending Bills</TabsTrigger>
          <TabsTrigger value="history">Payment History</TabsTrigger>
          <TabsTrigger value="settings">Payment Settings</TabsTrigger>
        </TabsList>

<TabsContent value="pending" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Outstanding Bills</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {bills
                  .filter((bill) => bill.status !== "paid")
                  .map((bill) => (
                    <div key={bill.id} className="border rounded-lg p-4">
                      <div className="flex items-start justify-between mb-3">
                        <div>
                          <h3 className="font-semibold">{bill.description}</h3>
                          <p className="text-sm text-slate-600">Due: {new Date(bill.dueDate).toLocaleDateString()}</p>
                        </div>
                        <div className="flex gap-2">
                          <Badge className={getTypeColor(bill.type)}>{bill.type}</Badge>
                          <Badge className={getStatusColor(bill.status)}>
                            {getStatusIcon(bill.status)}
                            <span className="ml-1">{bill.status}</span>
                          </Badge>
                        </div>
                      </div>

<div className="flex items-center justify-between">
                        <div className="text-2xl font-bold text-slate-800">${bill.amount.toFixed(2)}</div>
                        <div className="flex gap-2">
                          <Button
                            size="sm"
                            className="bg-slate-600 hover:bg-slate-700"
                            onClick={() => payBill(bill.id, bill.amount)}
                          >
                            <CreditCard className="w-4 h-4 mr-2" />
                            Pay Now
                          </Button>
                          <Button size="sm" variant="outline">
                            View Details
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="history" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Payment History</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {bills
                  .filter((bill) => bill.status === "paid")
                  .map((bill) => (
                    <div key={bill.id} className="border rounded-lg p-4">
                      <div className="flex items-start justify-between mb-3">
                        <div>
                          <h3 className="font-semibold">{bill.description}</h3>
                          <p className="text-sm text-slate-600">
                            Paid: {bill.paidDate ? new Date(bill.paidDate).toLocaleDateString() : "N/A"}
                          </p>
                        </div>
                        <div className="flex gap-2">
                          <Badge className={getTypeColor(bill.type)}>{bill.type}</Badge>
                          <Badge className={getStatusColor(bill.status)}>
                            <CheckCircle className="w-4 h-4 mr-1" />
                            Paid
                          </Badge>
                        </div>
                      </div>

<div className="flex items-center justify-between">
                        <div className="text-xl font-bold text-green-600">${bill.paidAmount?.toFixed(2)}</div>
                        <Button size="sm" variant="outline">
                          Download Receipt
                        </Button>
                      </div>
                    </div>
                  ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="settings" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Auto-Pay Settings</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span>Maintenance Fees</span>
                    <Button size="sm" variant="outline">
                      Enable
                    </Button>
                  </div>
                  <div className="flex items-center justify-between">
                    <span>Utility Bills</span>
                    <Button size="sm" variant="outline">
                      Enable
                    </Button>
                  </div>
                  <div className="flex items-center justify-between">
                    <span>Parking Fees</span>
                    <Button size="sm" variant="outline">
                      Enable
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Payment Methods</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="border rounded-lg p-3">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <CreditCard className="w-5 h-5" />
                        <span>**** **** **** 1234</span>
                      </div>
                      <Badge>Primary</Badge>
                    </div>
                  </div>
                  <Button className="w-full bg-slate-600 hover:bg-slate-700">Add Payment Method</Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/electricity/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { ElectricityManager } from "@/components/electricity-manager"

export default async function ElectricityPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "electricity" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Electricity Management</h1>
        <p className="text-slate-300">Monitor usage, pay bills, and report issues</p>
      </div>

<div className="p-6">
        <ElectricityManager userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/electricity-manager.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Zap, TrendingUp, TrendingDown, AlertTriangle, CreditCard, BarChart3, Lightbulb } from "lucide-react"

interface ElectricityManagerProps {
  userId: string
}

export function ElectricityManager({ userId }: ElectricityManagerProps) {
  const [currentUsage] = useState({
    thisMonth: 245.6,
    lastMonth: 198.3,
    dailyAverage: 8.2,
    cost: 89.45,
    status: "normal",
  })

const [bills] = useState([
    {
      id: "1",
      month: "January 2024",
      usage: 245.6,
      amount: 89.45,
      dueDate: "2024-02-15",
      status: "pending",
      units: "kWh",
    },
    {
      id: "2",
      month: "December 2023",
      usage: 198.3,
      amount: 72.15,
      dueDate: "2024-01-15",
      status: "paid",
      units: "kWh",
    },
    {
      id: "3",
      month: "November 2023",
      usage: 223.8,
      amount: 81.25,
      dueDate: "2023-12-15",
      status: "paid",
      units: "kWh",
    },
  ])

const getUsageTrend = () => {
    const change = ((currentUsage.thisMonth - currentUsage.lastMonth) / currentUsage.lastMonth) * 100
    return {
      percentage: Math.abs(change).toFixed(1),
      direction: change > 0 ? "up" : "down",
      icon: change > 0 ? TrendingUp : TrendingDown,
      color: change > 0 ? "text-red-600" : "text-green-600",
    }
  }

const trend = getUsageTrend()
  const TrendIcon = trend.icon

return (
    <div className="space-y-6">
      {/* Current Usage Overview */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-slate-600">This Month</p>
                <p className="text-2xl font-bold">{currentUsage.thisMonth} kWh</p>
              </div>
              <Zap className="w-8 h-8 text-yellow-500" />
            </div>
            <div className={`flex items-center mt-2 text-sm ${trend.color}`}>
              <TrendIcon className="w-4 h-4 mr-1" />
              {trend.percentage}% from last month
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-slate-600">Daily Average</p>
                <p className="text-2xl font-bold">{currentUsage.dailyAverage} kWh</p>
              </div>
              <BarChart3 className="w-8 h-8 text-blue-500" />
            </div>
            <p className="text-sm text-slate-500 mt-2">Based on current month</p>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-slate-600">Current Bill</p>
                <p className="text-2xl font-bold">${currentUsage.cost}</p>
              </div>
              <CreditCard className="w-8 h-8 text-green-500" />
            </div>
            <p className="text-sm text-slate-500 mt-2">Due Feb 15, 2024</p>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-slate-600">Status</p>
                <Badge className="bg-green-100 text-green-800 mt-1">Normal</Badge>
              </div>
              <Lightbulb className="w-8 h-8 text-orange-500" />
            </div>
            <p className="text-sm text-slate-500 mt-2">No issues detected</p>
          </CardContent>
        </Card>
      </div>

<Tabs defaultValue="bills" className="space-y-6">
        <TabsList>
          <TabsTrigger value="bills">Bills & Payments</TabsTrigger>
          <TabsTrigger value="usage">Usage History</TabsTrigger>
          <TabsTrigger value="issues">Report Issues</TabsTrigger>
        </TabsList>

<TabsContent value="bills">
          <Card>
            <CardHeader>
              <CardTitle>Electricity Bills</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {bills.map((bill) => (
                  <div key={bill.id} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex-1">
                      <div className="flex items-center gap-3">
                        <h3 className="font-semibold">{bill.month}</h3>
                        <Badge
                          className={
                            bill.status === "paid" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"
                          }
                        >
                          {bill.status}
                        </Badge>
                      </div>
                      <p className="text-sm text-slate-600 mt-1">
                        {bill.usage} {bill.units} • Due: {new Date(bill.dueDate).toLocaleDateString()}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="text-lg font-bold">${bill.amount}</p>
                      {bill.status === "pending" && (
                        <Button size="sm" className="mt-2 bg-slate-600 hover:bg-slate-700">
                          Pay Now
                        </Button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="usage">
          <Card>
            <CardHeader>
              <CardTitle>Usage History</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-64 flex items-center justify-center bg-slate-50 rounded-lg">
                <div className="text-center">
                  <BarChart3 className="w-12 h-12 text-slate-400 mx-auto mb-2" />
                  <p className="text-slate-600">Usage chart would be displayed here</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="issues">
          <Card>
            <CardHeader>
              <CardTitle>Report Electrical Issues</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <Button className="w-full justify-start bg-red-600 hover:bg-red-700">
                  <AlertTriangle className="w-4 h-4 mr-2" />
                  Report Power Outage
                </Button>
                <Button variant="outline" className="w-full justify-start">
                  <Zap className="w-4 h-4 mr-2" />
                  Report Meter Issue
                </Button>
                <Button variant="outline" className="w-full justify-start">
                  <Lightbulb className="w-4 h-4 mr-2" />
                  Report Street Light Issue
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/estate-dues/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { EstateDuesManager } from "@/components/estate-dues-manager"

export default async function EstateDuesPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "estate_dues" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Estate Dues</h1>
        <p className="text-slate-300">Manage your estate fees and payments</p>
      </div>

<div className="p-6">
        <EstateDuesManager userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/estate-dues-manager.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Building, CreditCard, AlertCircle, CheckCircle, Clock, Receipt } from "lucide-react"

interface EstateDuesManagerProps {
  userId: string
}

export function EstateDuesManager({ userId }: EstateDuesManagerProps) {
  const [currentDues] = useState({
    monthlyFee: 150.0,
    maintenanceFee: 75.0,
    securityFee: 50.0,
    total: 275.0,
    dueDate: "2024-02-01",
    status: "pending",
  })

const [paymentHistory] = useState([
    {
      id: "1",
      month: "January 2024",
      amount: 275.0,
      dueDate: "2024-02-01",
      paidDate: null,
      status: "pending",
      breakdown: {
        monthly: 150.0,
        maintenance: 75.0,
        security: 50.0,
      },
    },
    {
      id: "2",
      month: "December 2023",
      amount: 275.0,
      dueDate: "2024-01-01",
      paidDate: "2023-12-28",
      status: "paid",
      breakdown: {
        monthly: 150.0,
        maintenance: 75.0,
        security: 50.0,
      },
    },
    {
      id: "3",
      month: "November 2023",
      amount: 275.0,
      dueDate: "2023-12-01",
      paidDate: "2023-11-25",
      status: "paid",
      breakdown: {
        monthly: 150.0,
        maintenance: 75.0,
        security: 50.0,
      },
    },
  ])

const getStatusIcon = (status: string) => {
    switch (status) {
      case "paid":
        return <CheckCircle className="w-4 h-4 text-green-600" />
      case "pending":
        return <Clock className="w-4 h-4 text-yellow-600" />
      case "overdue":
        return <AlertCircle className="w-4 h-4 text-red-600" />
      default:
        return <Clock className="w-4 h-4 text-gray-600" />
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "paid":
        return "bg-green-100 text-green-800"
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "overdue":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="space-y-6">
      {/* Current Dues Overview */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-slate-600">Monthly Fee</p>
                <p className="text-2xl font-bold">${currentDues.monthlyFee}</p>
              </div>
              <Building className="w-8 h-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-slate-600">Maintenance</p>
                <p className="text-2xl font-bold">${currentDues.maintenanceFee}</p>
              </div>
              <Receipt className="w-8 h-8 text-green-500" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-slate-600">Security</p>
                <p className="text-2xl font-bold">${currentDues.securityFee}</p>
              </div>
              <AlertCircle className="w-8 h-8 text-orange-500" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-slate-600">Total Due</p>
                <p className="text-2xl font-bold">${currentDues.total}</p>
              </div>
              <CreditCard className="w-8 h-8 text-red-500" />
            </div>
            <p className="text-sm text-slate-500 mt-2">Due: {new Date(currentDues.dueDate).toLocaleDateString()}</p>
          </CardContent>
        </Card>
      </div>

{/* Current Payment Due */}
      <Card className="border-l-4 border-l-yellow-500">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <AlertCircle className="w-5 h-5 text-yellow-600" />
            Payment Due
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-semibold">January 2024 Estate Dues</h3>
              <p className="text-slate-600">Due: {new Date(currentDues.dueDate).toLocaleDateString()}</p>
              <div className="mt-2 space-y-1 text-sm">
                <div className="flex justify-between">
                  <span>Monthly Fee:</span>
                  <span>${currentDues.monthlyFee}</span>
                </div>
                <div className="flex justify-between">
                  <span>Maintenance Fee:</span>
                  <span>${currentDues.maintenanceFee}</span>
                </div>
                <div className="flex justify-between">
                  <span>Security Fee:</span>
                  <span>${currentDues.securityFee}</span>
                </div>
                <div className="flex justify-between font-semibold border-t pt-1">
                  <span>Total:</span>
                  <span>${currentDues.total}</span>
                </div>
              </div>
            </div>
            <div className="text-right">
              <p className="text-2xl font-bold text-slate-800">${currentDues.total}</p>
              <Button className="mt-3 bg-slate-600 hover:bg-slate-700">
                <CreditCard className="w-4 h-4 mr-2" />
                Pay Now
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

<Tabs defaultValue="history" className="space-y-6">
        <TabsList>
          <TabsTrigger value="history">Payment History</TabsTrigger>
          <TabsTrigger value="breakdown">Fee Breakdown</TabsTrigger>
          <TabsTrigger value="receipts">Receipts</TabsTrigger>
        </TabsList>

<TabsContent value="history">
          <Card>
            <CardHeader>
              <CardTitle>Payment History</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {paymentHistory.map((payment) => (
                  <div key={payment.id} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex items-center gap-3">
                      {getStatusIcon(payment.status)}
                      <div>
                        <h3 className="font-semibold">{payment.month}</h3>
                        <p className="text-sm text-slate-600">
                          Due: {new Date(payment.dueDate).toLocaleDateString()}
                          {payment.paidDate && ` • Paid: ${new Date(payment.paidDate).toLocaleDateString()}`}
                        </p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="text-lg font-bold">${payment.amount}</p>
                      <Badge className={getStatusColor(payment.status)}>{payment.status}</Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="breakdown">
          <Card>
            <CardHeader>
              <CardTitle>Monthly Fee Breakdown</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="p-4 bg-slate-50 rounded-lg">
                  <h3 className="font-semibold mb-3">What your fees cover:</h3>
                  <div className="space-y-3">
                    <div className="flex justify-between">
                      <span>Estate Maintenance & Upkeep</span>
                      <span className="font-semibold">${currentDues.monthlyFee}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Common Area Maintenance</span>
                      <span className="font-semibold">${currentDues.maintenanceFee}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>24/7 Security Services</span>
                      <span className="font-semibold">${currentDues.securityFee}</span>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="receipts">
          <Card>
            <CardHeader>
              <CardTitle>Download Receipts</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {paymentHistory
                  .filter((p) => p.status === "paid")
                  .map((payment) => (
                    <div key={payment.id} className="flex items-center justify-between p-3 border rounded">
                      <span>{payment.month}</span>
                      <Button variant="outline" size="sm">
                        <Receipt className="w-4 h-4 mr-2" />
                        Download
                      </Button>
                    </div>
                  ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/facilities/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { FacilitiesManager } from "@/components/facilities-manager"

export default async function FacilitiesPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "facilities" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Estate Facilities</h1>
        <p className="text-slate-300">Book and manage community facilities</p>
      </div>

<div className="p-6">
        <FacilitiesManager userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/facilities-manager.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Building, Calendar, Clock, Users, Car, Waves, Dumbbell, TreePine, Coffee, MapPin } from "lucide-react"

interface FacilitiesManagerProps {
  userId: string
}

export function FacilitiesManager({ userId }: FacilitiesManagerProps) {
  const [facilities] = useState([
    {
      id: "1",
      name: "Swimming Pool",
      description: "Olympic-sized swimming pool with lifeguard on duty",
      icon: Waves,
      capacity: 50,
      hourlyRate: 0,
      availability: "available",
      hours: "6:00 AM - 10:00 PM",
      amenities: ["Lifeguard", "Pool Equipment", "Changing Rooms"],
    },
    {
      id: "2",
      name: "Gym & Fitness Center",
      description: "Fully equipped gym with modern fitness equipment",
      icon: Dumbbell,
      capacity: 25,
      hourlyRate: 0,
      availability: "available",
      hours: "5:00 AM - 11:00 PM",
      amenities: ["Cardio Equipment", "Weight Training", "Personal Trainer"],
    },
    {
      id: "3",
      name: "Community Hall",
      description: "Large hall perfect for events and gatherings",
      icon: Building,
      capacity: 200,
      hourlyRate: 50,
      availability: "bookable",
      hours: "8:00 AM - 12:00 AM",
      amenities: ["Sound System", "Projector", "Kitchen Access", "Tables & Chairs"],
    },
    {
      id: "4",
      name: "BBQ Area",
      description: "Outdoor BBQ area with grills and seating",
      icon: Coffee,
      capacity: 30,
      hourlyRate: 25,
      availability: "bookable",
      hours: "10:00 AM - 10:00 PM",
      amenities: ["Gas Grills", "Picnic Tables", "Sink", "Storage"],
    },
    {
      id: "5",
      name: "Children's Playground",
      description: "Safe and fun playground for children",
      icon: TreePine,
      capacity: 20,
      hourlyRate: 0,
      availability: "available",
      hours: "6:00 AM - 8:00 PM",
      amenities: ["Play Equipment", "Safety Surfacing", "Benches"],
    },
    {
      id: "6",
      name: "Parking Garage",
      description: "Covered parking for residents and guests",
      icon: Car,
      capacity: 100,
      hourlyRate: 5,
      availability: "available",
      hours: "24/7",
      amenities: ["Security Cameras", "Card Access", "EV Charging"],
    },
  ])

const [bookings] = useState([
    {
      id: "1",
      facilityName: "Community Hall",
      date: "2024-02-15",
      time: "6:00 PM - 11:00 PM",
      purpose: "Birthday Party",
      status: "confirmed",
      cost: 250,
    },
    {
      id: "2",
      facilityName: "BBQ Area",
      date: "2024-02-10",
      time: "12:00 PM - 4:00 PM",
      purpose: "Family Gathering",
      status: "confirmed",
      cost: 100,
    },
  ])

const getAvailabilityColor = (availability: string) => {
    switch (availability) {
      case "available":
        return "bg-green-100 text-green-800"
      case "bookable":
        return "bg-blue-100 text-blue-800"
      case "maintenance":
        return "bg-yellow-100 text-yellow-800"
      case "unavailable":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "confirmed":
        return "bg-green-100 text-green-800"
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "cancelled":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="space-y-6">
      <Tabs defaultValue="facilities" className="space-y-6">
        <TabsList>
          <TabsTrigger value="facilities">All Facilities</TabsTrigger>
          <TabsTrigger value="bookings">My Bookings</TabsTrigger>
          <TabsTrigger value="schedule">Schedule</TabsTrigger>
        </TabsList>

<TabsContent value="facilities">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {facilities.map((facility) => {
              const Icon = facility.icon
              return (
                <Card key={facility.id} className="overflow-hidden">
                  <CardHeader className="pb-3">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="p-2 bg-slate-100 rounded-lg">
                          <Icon className="w-6 h-6 text-slate-600" />
                        </div>
                        <div>
                          <CardTitle className="text-lg">{facility.name}</CardTitle>
                          <Badge className={getAvailabilityColor(facility.availability)}>{facility.availability}</Badge>
                        </div>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <p className="text-sm text-slate-600">{facility.description}</p>

<div className="space-y-2 text-sm">
                      <div className="flex items-center gap-2">
                        <Users className="w-4 h-4 text-slate-500" />
                        <span>Capacity: {facility.capacity} people</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Clock className="w-4 h-4 text-slate-500" />
                        <span>{facility.hours}</span>
                      </div>
                      {facility.hourlyRate > 0 && (
                        <div className="flex items-center gap-2">
                          <span className="text-lg font-bold text-slate-800">${facility.hourlyRate}/hour</span>
                        </div>
                      )}
                    </div>

<div>
                      <h4 className="font-semibold text-sm mb-2">Amenities:</h4>
                      <div className="flex flex-wrap gap-1">
                        {facility.amenities.map((amenity, index) => (
                          <Badge key={index} variant="outline" className="text-xs">
                            {amenity}
                          </Badge>
                        ))}
                      </div>
                    </div>

<div className="flex gap-2 pt-2">
                      {facility.availability === "bookable" ? (
                        <Button className="flex-1 bg-slate-600 hover:bg-slate-700">
                          <Calendar className="w-4 h-4 mr-2" />
                          Book Now
                        </Button>
                      ) : (
                        <Button variant="outline" className="flex-1">
                          <MapPin className="w-4 h-4 mr-2" />
                          View Details
                        </Button>
                      )}
                    </div>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </TabsContent>

<TabsContent value="bookings">
          <Card>
            <CardHeader>
              <CardTitle>My Facility Bookings</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {bookings.map((booking) => (
                  <div key={booking.id} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <h3 className="font-semibold">{booking.facilityName}</h3>
                        <Badge className={getStatusColor(booking.status)}>{booking.status}</Badge>
                      </div>
                      <div className="text-sm text-slate-600 space-y-1">
                        <div className="flex items-center gap-2">
                          <Calendar className="w-4 h-4" />
                          <span>{new Date(booking.date).toLocaleDateString()}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Clock className="w-4 h-4" />
                          <span>{booking.time}</span>
                        </div>
                        <p>Purpose: {booking.purpose}</p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="text-lg font-bold">${booking.cost}</p>
                      <div className="flex gap-2 mt-2">
                        <Button size="sm" variant="outline">
                          Modify
                        </Button>
                        <Button size="sm" variant="outline" className="text-red-600 hover:text-red-700">
                          Cancel
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="schedule">
          <Card>
            <CardHeader>
              <CardTitle>Facility Schedule</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-64 flex items-center justify-center bg-slate-50 rounded-lg">
                <div className="text-center">
                  <Calendar className="w-12 h-12 text-slate-400 mx-auto mb-2" />
                  <p className="text-slate-600">Facility schedule calendar would be displayed here</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/emergency/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { EmergencyManager } from "@/components/emergency-manager"

export default async function EmergencyPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "emergency" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-red-600 to-red-700 text-white p-6">
        <h1 className="text-2xl font-bold">Emergency Services</h1>
        <p className="text-red-100">Quick access to emergency contacts and services</p>
      </div>

<div className="p-6">
        <EmergencyManager userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/emergency-manager.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Phone, AlertTriangle, Shield, Flame, Heart, Zap, Wrench, Car, MapPin, Clock } from "lucide-react"

interface EmergencyManagerProps {
  userId: string
}

export function EmergencyManager({ userId }: EmergencyManagerProps) {
  const [emergencyContacts] = useState([
    {
      id: "1",
      name: "Police Emergency",
      number: "911",
      description: "For immediate police assistance",
      icon: Shield,
      color: "bg-blue-600 hover:bg-blue-700",
      priority: "critical",
    },
    {
      id: "2",
      name: "Fire Department",
      number: "911",
      description: "Fire emergencies and rescue services",
      icon: Flame,
      color: "bg-red-600 hover:bg-red-700",
      priority: "critical",
    },
    {
      id: "3",
      name: "Medical Emergency",
      number: "911",
      description: "Ambulance and medical emergencies",
      icon: Heart,
      color: "bg-red-600 hover:bg-red-700",
      priority: "critical",
    },
    {
      id: "4",
      name: "Estate Security",
      number: "(555) 123-4567",
      description: "24/7 estate security hotline",
      icon: Shield,
      color: "bg-slate-600 hover:bg-slate-700",
      priority: "high",
    },
    {
      id: "5",
      name: "Maintenance Emergency",
      number: "(555) 123-4568",
      description: "Urgent maintenance issues",
      icon: Wrench,
      color: "bg-orange-600 hover:bg-orange-700",
      priority: "medium",
    },
    {
      id: "6",
      name: "Power Outage",
      number: "(555) 123-4569",
      description: "Electrical emergencies and outages",
      icon: Zap,
      color: "bg-yellow-600 hover:bg-yellow-700",
      priority: "medium",
    },
  ])

const [recentIncidents] = useState([
    {
      id: "1",
      type: "Power Outage",
      location: "Block A",
      time: "2024-01-18T14:30:00Z",
      status: "resolved",
      description: "Brief power outage affecting Block A units",
    },
    {
      id: "2",
      type: "Security Alert",
      location: "Main Gate",
      time: "2024-01-17T22:15:00Z",
      status: "resolved",
      description: "Unauthorized vehicle attempted entry",
    },
    {
      id: "3",
      type: "Maintenance",
      location: "Swimming Pool",
      time: "2024-01-16T09:00:00Z",
      status: "in-progress",
      description: "Pool filtration system maintenance",
    },
  ])

const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "critical":
        return "bg-red-100 text-red-800"
      case "high":
        return "bg-orange-100 text-orange-800"
      case "medium":
        return "bg-yellow-100 text-yellow-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "resolved":
        return "bg-green-100 text-green-800"
      case "in-progress":
        return "bg-blue-100 text-blue-800"
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const handleEmergencyCall = (number: string, name: string) => {
    if (confirm(`Call ${name} at ${number}?`)) {
      window.location.href = `tel:${number}`
    }
  }

return (
    <div className="space-y-6">
      {/* Emergency Alert */}
      <Card className="border-l-4 border-l-red-500 bg-red-50">
        <CardContent className="p-4">
          <div className="flex items-center gap-3">
            <AlertTriangle className="w-6 h-6 text-red-600" />
            <div>
              <h3 className="font-semibold text-red-800">Emergency Hotline</h3>
              <p className="text-red-700">For life-threatening emergencies, always call 911 first</p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Emergency Contacts */}
      <div>
        <h2 className="text-xl font-bold text-slate-800 mb-4">Emergency Contacts</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {emergencyContacts.map((contact) => {
            const Icon = contact.icon
            return (
              <Card key={contact.id} className="overflow-hidden">
                <CardContent className="p-4">
                  <div className="flex items-center gap-3 mb-3">
                    <div
                      className={`p-2 rounded-lg ${contact.color.replace("hover:", "").replace("bg-", "bg-").replace("-600", "-100")}`}
                    >
                      <Icon
                        className={`w-6 h-6 ${contact.color.replace("hover:", "").replace("bg-", "text-").replace("-600", "-600")}`}
                      />
                    </div>
                    <div className="flex-1">
                      <h3 className="font-semibold">{contact.name}</h3>
                      <Badge className={getPriorityColor(contact.priority)}>{contact.priority}</Badge>
                    </div>
                  </div>

<p className="text-sm text-slate-600 mb-3">{contact.description}</p>

<Button
                    onClick={() => handleEmergencyCall(contact.number, contact.name)}
                    className={`w-full ${contact.color}`}
                  >
                    <Phone className="w-4 h-4 mr-2" />
                    Call {contact.number}
                  </Button>
                </CardContent>
              </Card>
            )
          })}
        </div>
      </div>

{/* Quick Actions */}
      <Card>
        <CardHeader>
          <CardTitle>Quick Emergency Actions</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Button variant="outline" className="justify-start h-auto p-4">
              <MapPin className="w-5 h-5 mr-3" />
              <div className="text-left">
                <div className="font-semibold">Report Incident</div>
                <div className="text-sm text-slate-600">Report a non-emergency incident</div>
              </div>
            </Button>

<Button variant="outline" className="justify-start h-auto p-4">
              <Car className="w-5 h-5 mr-3" />
              <div className="text-left">
                <div className="font-semibold">Request Escort</div>
                <div className="text-sm text-slate-600">Security escort service</div>
              </div>
            </Button>
          </div>
        </CardContent>
      </Card>

{/* Recent Incidents */}
      <Card>
        <CardHeader>
          <CardTitle>Recent Incidents & Alerts</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {recentIncidents.map((incident) => (
              <div key={incident.id} className="flex items-center justify-between p-3 border rounded-lg">
                <div className="flex items-center gap-3">
                  <AlertTriangle className="w-5 h-5 text-slate-500" />
                  <div>
                    <div className="flex items-center gap-2">
                      <h3 className="font-semibold">{incident.type}</h3>
                      <Badge className={getStatusColor(incident.status)}>{incident.status}</Badge>
                    </div>
                    <p className="text-sm text-slate-600">{incident.description}</p>
                    <div className="flex items-center gap-4 text-xs text-slate-500 mt-1">
                      <span className="flex items-center gap-1">
                        <MapPin className="w-3 h-3" />
                        {incident.location}
                      </span>
                      <span className="flex items-center gap-1">
                        <Clock className="w-3 h-3" />
                        {new Date(incident.time).toLocaleString()}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/registration/page.tsx" isMerged="true"
import { requireAuth, logActivity } from "@/lib/auth"
import { RegistrationManager } from "@/components/registration-manager"

export default async function RegistrationPage() {
  const session = await requireAuth()
  await logActivity(session.user.id, "page_visit", { page: "registration" })

return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <h1 className="text-2xl font-bold">Registration Services</h1>
        <p className="text-slate-300">Register new residents and manage applications</p>
      </div>

<div className="p-6">
        <RegistrationManager userId={session.user.id} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/health/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { supabase } from "@/lib/database"

export async function GET() {
  try {
    // Test database connection
    const { data, error } = await supabase.from("users").select("count").limit(1)

if (error) {
      return NextResponse.json(
        {
          status: "error",
          message: "Database connection failed",
          error: error.message,
        },
        { status: 500 },
      )
    }

// Test environment variables
    const envCheck = {
      supabaseUrl: !!process.env.NEXT_PUBLIC_SUPABASE_URL,
      supabaseKey: !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
      serviceRoleKey: !!process.env.SUPABASE_SERVICE_ROLE_KEY,
    }

return NextResponse.json({
      status: "ok",
      database: "connected",
      environment: envCheck,
      timestamp: new Date().toISOString(),
    })
  } catch (error) {
    return NextResponse.json(
      {
        status: "error",
        message: "Health check failed",
        error: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/system-status.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { CheckCircle, XCircle, RefreshCw } from "lucide-react"

interface HealthStatus {
  status: string
  database: string
  environment: {
    supabaseUrl: boolean
    supabaseKey: boolean
    serviceRoleKey: boolean
  }
  timestamp: string
}

export function SystemStatus() {
  const [status, setStatus] = useState<HealthStatus | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

const checkHealth = async () => {
    setLoading(true)
    setError(null)

try {
      const response = await fetch("/api/health")
      const data = await response.json()

if (response.ok) {
        setStatus(data)
      } else {
        setError(data.message || "Health check failed")
      }
    } catch (err) {
      setError("Failed to connect to health check endpoint")
    } finally {
      setLoading(false)
    }
  }

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

return (
    <Card className="w-full max-w-2xl">
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          System Status
          <Button variant="outline" size="sm" onClick={checkHealth} disabled={loading}>
            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />
            Refresh
          </Button>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {error && (
          <div className="flex items-center space-x-2 text-red-600">
            <XCircle className="h-5 w-5" />
            <span>{error}</span>
          </div>
        )}

{status && (
          <>
            <div className="flex items-center justify-between">
              <span>Overall Status</span>
              <Badge variant={status.status === "ok" ? "default" : "destructive"}>
                {status.status === "ok" ? (
                  <CheckCircle className="h-4 w-4 mr-1" />
                ) : (
                  <XCircle className="h-4 w-4 mr-1" />
                )}
                {status.status.toUpperCase()}
              </Badge>
            </div>

<div className="flex items-center justify-between">
              <span>Database Connection</span>
              <Badge variant={status.database === "connected" ? "default" : "destructive"}>
                {status.database === "connected" ? (
                  <CheckCircle className="h-4 w-4 mr-1" />
                ) : (
                  <XCircle className="h-4 w-4 mr-1" />
                )}
                {status.database.toUpperCase()}
              </Badge>
            </div>

<div className="space-y-2">
              <h4 className="font-medium">Environment Variables</h4>
              <div className="grid grid-cols-1 gap-2 text-sm">
                <div className="flex items-center justify-between">
                  <span>Supabase URL</span>
                  <Badge variant={status.environment.supabaseUrl ? "default" : "destructive"}>
                    {status.environment.supabaseUrl ? "SET" : "MISSING"}
                  </Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span>Supabase Anon Key</span>
                  <Badge variant={status.environment.supabaseKey ? "default" : "destructive"}>
                    {status.environment.supabaseKey ? "SET" : "MISSING"}
                  </Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span>Service Role Key</span>
                  <Badge variant={status.environment.serviceRoleKey ? "default" : "destructive"}>
                    {status.environment.serviceRoleKey ? "SET" : "MISSING"}
                  </Badge>
                </div>
              </div>
            </div>

<div className="text-xs text-gray-500">Last checked: {new Date(status.timestamp).toLocaleString()}</div>
          </>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/system-status/page.tsx" isMerged="true"
import { SystemStatus } from "@/components/system-status"

export default function SystemStatusPage() {
  return (
    <div className="container mx-auto py-8">
      <div className="flex flex-col items-center space-y-6">
        <div className="text-center">
          <h1 className="text-3xl font-bold">System Status</h1>
          <p className="text-gray-600 mt-2">Check the health and configuration of your eDAS system</p>
        </div>
        <SystemStatus />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/verify-setup/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { supabase } from "@/lib/database"

export async function GET() {
  const results = {
    environmentVariables: {},
    databaseTables: {},
    sampleData: {},
    overall: "checking",
  }

try {
    // 1. Check Environment Variables
    results.environmentVariables = {
      NEXT_PUBLIC_SUPABASE_URL: {
        exists: !!process.env.NEXT_PUBLIC_SUPABASE_URL,
        value: process.env.NEXT_PUBLIC_SUPABASE_URL
          ? `${process.env.NEXT_PUBLIC_SUPABASE_URL.substring(0, 20)}...`
          : "NOT SET",
        valid: process.env.NEXT_PUBLIC_SUPABASE_URL?.includes("supabase.co") || false,
      },
      NEXT_PUBLIC_SUPABASE_ANON_KEY: {
        exists: !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
        value: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
          ? `${process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.substring(0, 20)}...`
          : "NOT SET",
        valid: (process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY?.length || 0) > 50,
      },
      SUPABASE_SERVICE_ROLE_KEY: {
        exists: !!process.env.SUPABASE_SERVICE_ROLE_KEY,
        value: process.env.SUPABASE_SERVICE_ROLE_KEY
          ? `${process.env.SUPABASE_SERVICE_ROLE_KEY.substring(0, 20)}...`
          : "NOT SET",
        valid: (process.env.SUPABASE_SERVICE_ROLE_KEY?.length || 0) > 50,
      },
    }

// 2. Check Database Tables
    const requiredTables = [
      "users",
      "visitor_access_codes",
      "maintenance_requests",
      "announcements",
      "messages",
      "vehicles",
      "security_events",
      "activity_logs",
    ]

for (const table of requiredTables) {
      try {
        const { data, error } = await supabase.from(table).select("*").limit(1)

results.databaseTables[table] = {
          exists: !error,
          error: error?.message || null,
          hasData: data && data.length > 0,
        }
      } catch (err) {
        results.databaseTables[table] = {
          exists: false,
          error: err instanceof Error ? err.message : "Unknown error",
          hasData: false,
        }
      }
    }

// 3. Check Sample Data
    try {
      const { data: users, error: usersError } = await supabase.from("users").select("email, role").limit(5)

results.sampleData.users = {
        count: users?.length || 0,
        hasAdmin: users?.some((u) => u.role === "admin") || false,
        error: usersError?.message || null,
      }

const { data: announcements, error: announcementsError } = await supabase
        .from("announcements")
        .select("title")
        .limit(3)

results.sampleData.announcements = {
        count: announcements?.length || 0,
        error: announcementsError?.message || null,
      }
    } catch (err) {
      results.sampleData.error = err instanceof Error ? err.message : "Unknown error"
    }

// 4. Overall Status
    const envValid = Object.values(results.environmentVariables).every((env) => env.exists && env.valid)
    const tablesValid = Object.values(results.databaseTables).every((table) => table.exists)
    const hasUsers = results.sampleData.users?.count > 0

if (envValid && tablesValid && hasUsers) {
      results.overall = "✅ FULLY CONFIGURED"
    } else if (envValid && tablesValid) {
      results.overall = "⚠️ NEEDS SAMPLE DATA"
    } else if (envValid) {
      results.overall = "❌ DATABASE SCHEMA MISSING"
    } else {
      results.overall = "❌ ENVIRONMENT VARIABLES MISSING"
    }

return NextResponse.json(results)
  } catch (error) {
    return NextResponse.json(
      {
        ...results,
        overall: "❌ CONNECTION FAILED",
        error: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/setup-verification.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, XCircle, AlertCircle, RefreshCw } from "lucide-react"

interface VerificationResult {
  environmentVariables: Record<
    string,
    {
      exists: boolean
      value: string
      valid: boolean
    }
  >
  databaseTables: Record<
    string,
    {
      exists: boolean
      error: string | null
      hasData: boolean
    }
  >
  sampleData: {
    users?: {
      count: number
      hasAdmin: boolean
      error: string | null
    }
    announcements?: {
      count: number
      error: string | null
    }
    error?: string
  }
  overall: string
  error?: string
}

export default function SetupVerification() {
  const [results, setResults] = useState<VerificationResult | null>(null)
  const [loading, setLoading] = useState(false)

const runVerification = async () => {
    setLoading(true)
    try {
      const response = await fetch("/api/verify-setup")
      const data = await response.json()
      setResults(data)
    } catch (error) {
      console.error("Verification failed:", error)
      setResults({
        environmentVariables: {},
        databaseTables: {},
        sampleData: {},
        overall: "❌ VERIFICATION FAILED",
        error: error instanceof Error ? error.message : "Unknown error",
      })
    } finally {
      setLoading(false)
    }
  }

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

const getStatusIcon = (status: boolean | null) => {
    if (status === true) return <CheckCircle className="h-4 w-4 text-green-500" />
    if (status === false) return <XCircle className="h-4 w-4 text-red-500" />
    return <AlertCircle className="h-4 w-4 text-yellow-500" />
  }

const getStatusBadge = (status: string) => {
    if (status.includes("✅"))
      return (
        <Badge variant="default" className="bg-green-500">
          {status}
        </Badge>
      )
    if (status.includes("⚠️"))
      return (
        <Badge variant="secondary" className="bg-yellow-500">
          {status}
        </Badge>
      )
    if (status.includes("❌")) return <Badge variant="destructive">{status}</Badge>
    return <Badge variant="outline">{status}</Badge>
  }

if (loading) {
    return (
      <div className="flex items-center justify-center p-8">
        <RefreshCw className="h-8 w-8 animate-spin" />
        <span className="ml-2">Verifying setup...</span>
      </div>
    )
  }

if (!results) {
    return (
      <Card>
        <CardContent className="p-6">
          <p>Failed to load verification results.</p>
          <Button onClick={runVerification} className="mt-4">
            Retry Verification
          </Button>
        </CardContent>
      </Card>
    )
  }

return (
    <div className="space-y-6">
      {/* Overall Status */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            System Setup Status
            <Button onClick={runVerification} variant="outline" size="sm">
              <RefreshCw className="h-4 w-4 mr-2" />
              Refresh
            </Button>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center">
            {getStatusBadge(results.overall)}
            {results.error && <p className="text-red-500 mt-2 text-sm">{results.error}</p>}
          </div>
        </CardContent>
      </Card>

{/* Environment Variables */}
      <Card>
        <CardHeader>
          <CardTitle>Environment Variables</CardTitle>
          <CardDescription>Required Supabase configuration</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {Object.entries(results.environmentVariables).map(([key, value]) => (
              <div key={key} className="flex items-center justify-between p-3 border rounded">
                <div>
                  <code className="text-sm font-mono">{key}</code>
                  <p className="text-xs text-gray-500 mt-1">{value.value}</p>
                </div>
                <div className="flex items-center space-x-2">
                  {getStatusIcon(value.exists && value.valid)}
                  <Badge variant={value.exists && value.valid ? "default" : "destructive"}>
                    {value.exists && value.valid ? "Valid" : "Invalid"}
                  </Badge>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Database Tables */}
      <Card>
        <CardHeader>
          <CardTitle>Database Schema</CardTitle>
          <CardDescription>Required database tables</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {Object.entries(results.databaseTables).map(([table, status]) => (
              <div key={table} className="flex items-center justify-between p-3 border rounded">
                <div>
                  <code className="text-sm font-mono">{table}</code>
                  {status.error && <p className="text-xs text-red-500 mt-1">{status.error}</p>}
                </div>
                <div className="flex items-center space-x-2">
                  {getStatusIcon(status.exists)}
                  <Badge variant={status.exists ? "default" : "destructive"}>
                    {status.exists ? "Exists" : "Missing"}
                  </Badge>
                  {status.hasData && (
                    <Badge variant="secondary" className="text-xs">
                      Has Data
                    </Badge>
                  )}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Sample Data */}
      <Card>
        <CardHeader>
          <CardTitle>Sample Data</CardTitle>
          <CardDescription>Initial data for testing</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {results.sampleData.users && (
              <div className="flex items-center justify-between p-3 border rounded">
                <div>
                  <span className="font-medium">Users</span>
                  <p className="text-sm text-gray-500">
                    {results.sampleData.users.count} users found
                    {results.sampleData.users.hasAdmin && " (includes admin)"}
                  </p>
                </div>
                {getStatusIcon(results.sampleData.users.count > 0)}
              </div>
            )}
            {results.sampleData.announcements && (
              <div className="flex items-center justify-between p-3 border rounded">
                <div>
                  <span className="font-medium">Announcements</span>
                  <p className="text-sm text-gray-500">{results.sampleData.announcements.count} announcements found</p>
                </div>
                {getStatusIcon(results.sampleData.announcements.count > 0)}
              </div>
            )}
          </div>
        </CardContent>
      </Card>

{/* Setup Instructions */}
      {results.overall.includes("❌") && (
        <Card>
          <CardHeader>
            <CardTitle>Setup Instructions</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {!Object.values(results.environmentVariables).every((env) => env.exists && env.valid) && (
                <div>
                  <h4 className="font-medium text-red-600">Missing Environment Variables</h4>
                  <p className="text-sm text-gray-600 mt-1">
                    Add the missing Supabase environment variables to your project settings.
                  </p>
                </div>
              )}
              {!Object.values(results.databaseTables).every((table) => table.exists) && (
                <div>
                  <h4 className="font-medium text-red-600">Missing Database Tables</h4>
                  <p className="text-sm text-gray-600 mt-1">
                    Run the database schema script in your Supabase SQL editor.
                  </p>
                </div>
              )}
              {results.sampleData.users?.count === 0 && (
                <div>
                  <h4 className="font-medium text-yellow-600">No Sample Data</h4>
                  <p className="text-sm text-gray-600 mt-1">
                    The database schema includes sample users and announcements.
                  </p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/verify-setup/page.tsx" isMerged="true"
import type { Metadata } from "next"
import SetupVerification from "@/components/setup-verification"

export const metadata: Metadata = {
  title: "Setup Verification - eDAS Access",
  description: "Verify system configuration and database setup",
}

export default function VerifySetupPage() {
  return (
    <div className="container mx-auto py-6 space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Setup Verification</h1>
        <p className="text-gray-600 mt-2">
          Verify that your environment variables and database schema are properly configured.
        </p>
      </div>

<SetupVerification />
    </div>
  )
}
[V0_FILE]sql:file="scripts/enhanced-database-schema.sql" isMerged="true"
-- Enhanced database schema with app profiles and guest images

-- Create app_profiles table for unique app installations
CREATE TABLE IF NOT EXISTS app_profiles (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    app_id VARCHAR(20) UNIQUE NOT NULL, -- Format: EDAS-XXXX-YYYY
    property_address TEXT NOT NULL,
    resident_id UUID REFERENCES users(id),
    device_info JSONB,
    installation_date TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    status VARCHAR(20) DEFAULT 'active' CHECK (status IN ('active', 'suspended', 'revoked')),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Add constraint to limit 2 apps per property
CREATE UNIQUE INDEX IF NOT EXISTS idx_property_app_limit 
ON app_profiles (property_address, (CASE WHEN status = 'active' THEN 1 END));

-- Add guest image support to visitor access codes
ALTER TABLE visitor_access_codes 
ADD COLUMN IF NOT EXISTS guest_image_url TEXT,
ADD COLUMN IF NOT EXISTS app_profile_id UUID REFERENCES app_profiles(id);

-- Create property_limits table to track app installations per address
CREATE TABLE IF NOT EXISTS property_app_limits (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    property_address TEXT UNIQUE NOT NULL,
    active_apps_count INTEGER DEFAULT 0,
    max_apps_allowed INTEGER DEFAULT 2,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Function to generate unique app ID
CREATE OR REPLACE FUNCTION generate_app_id()
RETURNS TEXT AS $$
DECLARE
    new_id TEXT;
    exists_check INTEGER;
BEGIN
    LOOP
        -- Generate format: EDAS-XXXX-YYYY where X and Y are random alphanumeric
        new_id := 'EDAS-' || 
                  upper(substring(md5(random()::text) from 1 for 4)) || '-' ||
                  upper(substring(md5(random()::text) from 1 for 4));
        
        -- Check if ID already exists
        SELECT COUNT(*) INTO exists_check FROM app_profiles WHERE app_id = new_id;
        
        -- Exit loop if unique
        IF exists_check = 0 THEN
            EXIT;
        END IF;
    END LOOP;
    
    RETURN new_id;
END;
$$ LANGUAGE plpgsql;

-- Trigger to auto-generate app ID
CREATE OR REPLACE FUNCTION set_app_id()
RETURNS TRIGGER AS $$
BEGIN
    IF NEW.app_id IS NULL THEN
        NEW.app_id := generate_app_id();
    END IF;
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER trigger_set_app_id
    BEFORE INSERT ON app_profiles
    FOR EACH ROW
    EXECUTE FUNCTION set_app_id();

-- Insert sample app profiles
INSERT INTO app_profiles (property_address, resident_id, device_info, status) VALUES
('Block A, Unit 12', (SELECT id FROM users WHERE email = 'demo@edas.com' LIMIT 1), 
 '{"device": "iPhone 14", "os": "iOS 17.1", "version": "1.0.0"}', 'active'),
('Block B, Unit 05', (SELECT id FROM users WHERE email = 'admin@edas.com' LIMIT 1), 
 '{"device": "Samsung Galaxy S23", "os": "Android 13", "version": "1.0.0"}', 'active');

-- Update property limits
INSERT INTO property_app_limits (property_address, active_apps_count) VALUES
('Block A, Unit 12', 1),
('Block B, Unit 05', 1)
ON CONFLICT (property_address) DO UPDATE SET
    active_apps_count = EXCLUDED.active_apps_count;
[V0_FILE]typescriptreact:file="components/dashboard-home.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { QrCode, AlertTriangle, Calendar, Cloud, Clock, Bell, TrendingUp } from "lucide-react"
import { useRouter } from "next/navigation"
import type { User } from "@/lib/auth"

interface DashboardHomeProps {
  user: User
}

export function DashboardHome({ user }: DashboardHomeProps) {
  const router = useRouter()
  const [currentTime, setCurrentTime] = useState("")
  const [greeting, setGreeting] = useState("")

useEffect(() => {
    const updateTime = () => {
      const now = new Date()
      setCurrentTime(
        now.toLocaleTimeString("en-US", {
          hour12: true,
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
        }),
      )

const hour = now.getHours()
      if (hour < 12) setGreeting("Good morning")
      else if (hour < 17) setGreeting("Good afternoon")
      else setGreeting("Good evening")
    }

updateTime()
    const interval = setInterval(updateTime, 1000)
    return () => clearInterval(interval)
  }, [])

const handleQuickAction = async (action: string, route: string) => {
    // Log the activity
    await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId: user.id,
        action: `quick_action_${action}`,
        details: { action, timestamp: new Date().toISOString() },
      }),
    })

// Navigate to the specific page
    router.push(route)
  }

return (
    <div className="min-h-screen bg-gray-50 pb-20">
      {/* Header - Matching the dark slate theme */}
      <div className="bg-gradient-to-r from-slate-700 to-slate-800 text-white p-6">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h1 className="text-2xl font-bold">{greeting}</h1>
            <p className="text-slate-300">Welcome to eDAS Access</p>
          </div>
          <div className="relative">
            <Bell className="w-6 h-6" />
            <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></div>
          </div>
        </div>

{/* User Info */}
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
            <span className="text-lg font-bold">{user.name.charAt(0)}</span>
          </div>
          <div>
            <p className="font-semibold">{user.name}</p>
            <p className="text-slate-300 text-sm">Resident • Block A, Unit 12</p>
          </div>
        </div>
      </div>

{/* Main Content */}
      <div className="p-6 space-y-6">
        {/* Current Time Widget */}
        <Card className="bg-white shadow-sm">
          <CardContent className="p-6">
            <div className="flex items-center gap-3 mb-2">
              <Clock className="w-5 h-5 text-slate-600" />
              <h2 className="text-lg font-semibold text-slate-800">Current Time</h2>
            </div>
            <div className="text-3xl font-bold text-slate-700 mb-2">{currentTime}</div>
            <p className="text-sm text-gray-500">
              {new Date().toLocaleDateString("en-US", {
                weekday: "long",
                year: "numeric",
                month: "long",
                day: "numeric",
              })}
            </p>
          </CardContent>
        </Card>

{/* Weather Widget */}
        <Card className="bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-lg">
          <CardContent className="p-6">
            <div className="flex items-center gap-3 mb-4">
              <Cloud className="w-6 h-6" />
              <h2 className="text-lg font-semibold">Weather</h2>
            </div>
            <div className="flex items-center justify-between">
              <div>
                <div className="text-4xl font-bold mb-1">25°C</div>
                <div className="text-blue-100">Cloudy</div>
              </div>
              <div className="text-right">
                <p className="text-blue-100 text-sm">Feels like 27°C</p>
                <p className="text-blue-100 text-sm">Humidity 65%</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Quick Actions - Now Fully Functional */}
        <div className="space-y-4">
          <h2 className="text-xl font-bold text-slate-800">Quick Actions</h2>

<Button
            className="w-full h-16 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white text-lg font-semibold rounded-xl shadow-lg"
            onClick={() => handleQuickAction("generate_access_pass", "/visitor-management")}
          >
            <QrCode className="w-6 h-6 mr-3" />
            Generate Access Pass
          </Button>

<Button
            className="w-full h-16 bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white text-lg font-semibold rounded-xl shadow-lg"
            onClick={() => handleQuickAction("report_issue", "/maintenance")}
          >
            <AlertTriangle className="w-6 h-6 mr-3" />
            Report Issue
          </Button>

<Button
            className="w-full h-16 bg-gradient-to-r from-pink-500 to-red-500 hover:from-pink-600 hover:to-red-600 text-white text-lg font-semibold rounded-xl shadow-lg"
            onClick={() => handleQuickAction("book_amenity", "/facilities")}
          >
            <Calendar className="w-6 h-6 mr-3" />
            Book Amenity
          </Button>
        </div>

{/* Estate Stats */}
        <div className="grid grid-cols-2 gap-4">
          <Card className="bg-white shadow-sm">
            <CardContent className="p-4 text-center">
              <TrendingUp className="w-8 h-8 text-green-500 mx-auto mb-2" />
              <div className="text-2xl font-bold text-slate-800">24</div>
              <p className="text-sm text-slate-600">Active Visitors</p>
            </CardContent>
          </Card>

<Card className="bg-white shadow-sm">
            <CardContent className="p-4 text-center">
              <Bell className="w-8 h-8 text-blue-500 mx-auto mb-2" />
              <div className="text-2xl font-bold text-slate-800">3</div>
              <p className="text-sm text-slate-600">New Announcements</p>
            </CardContent>
          </Card>
        </div>

{/* Recent Activity */}
        <Card className="bg-white shadow-sm">
          <CardContent className="p-6">
            <h3 className="text-lg font-semibold text-slate-800 mb-4">Recent Activity</h3>
            <div className="space-y-3">
              <div className="flex justify-between items-center py-2 border-b border-gray-100">
                <div className="flex items-center gap-3">
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                  <span className="text-sm text-slate-600">Access code generated for John Doe</span>
                </div>
                <span className="text-xs text-slate-400">2h ago</span>
              </div>
              <div className="flex justify-between items-center py-2 border-b border-gray-100">
                <div className="flex items-center gap-3">
                  <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                  <span className="text-sm text-slate-600">Maintenance request submitted</span>
                </div>
                <span className="text-xs text-slate-400">1d ago</span>
              </div>
              <div className="flex justify-between items-center py-2">
                <div className="flex items-center gap-3">
                  <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                  <span className="text-sm text-slate-600">Amenity booking confirmed</span>
                </div>
                <span className="text-xs text-slate-400">3d ago</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/app-profile-manager.tsx" isMerged="true"
"use client"

interface AppProfile {
  id: string
  app_id: string
  property_address: string
  device_info: {
    device: string
    os: string
    version: string
  }
  installation_date: string
  status: "active" | "suspended" | "revoked"
}

interface AppProfileManagerProps {
  userId: string
  propertyAddress: string
}

export function AppProfileManager({ userId, propertyAddress }: AppProfileManagerProps) {
  const [appProfiles, setAppProfiles] = useState<AppProfile[]>([])
  const [canInstallMore, setCanInstallMore] = useState(true)
  const [isGenerating, setIsGenerating] = useState(false)
  const { toast } = useToast()

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

const fetchAppProfiles = async () => {
    try {
      const response = await fetch(`/api/app-profiles?property=${encodeURIComponent(propertyAddress)}`)
      const data = await response.json()

if (response.ok) {
        setAppProfiles(data.profiles)
        setCanInstallMore(data.profiles.filter((p: AppProfile) => p.status === "active").length < 2)
      }
    } catch (error) {
      console.error("Error fetching app profiles:", error)
    }
  }

const generateNewAppProfile = async () => {
    if (!canInstallMore) {
      toast({
        title: "Installation Limit Reached",
        description: "Maximum 2 active apps allowed per property",
        variant: "destructive",
      })
      return
    }

setIsGenerating(true)

try {
      const response = await fetch("/api/app-profiles", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          property_address: propertyAddress,
          resident_id: userId,
          device_info: {
            device: navigator.userAgent.includes("iPhone") ? "iPhone" : "Android Device",
            os: navigator.userAgent.includes("iPhone") ? "iOS" : "Android",
            version: "1.0.0",
          },
        }),
      })

const newProfile = await response.json()

if (response.ok) {
        setAppProfiles([newProfile, ...appProfiles])
        setCanInstallMore(appProfiles.filter((p) => p.status === "active").length + 1 < 2)

toast({
          title: "App Profile Created",
          description: `New App ID: ${newProfile.app_id}`,
        })
      } else {
        throw new Error(newProfile.error)
      }
    } catch (error) {
      toast({
        title: "Generation Failed",
        description: error instanceof Error ? error.message : "Failed to create app profile",
        variant: "destructive",
      })
    } finally {
      setIsGenerating(false)
    }
  }

const revokeAppProfile = async (profileId: string) => {
    try {
      const response = await fetch(`/api/app-profiles/${profileId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: "revoked" }),
      })

if (response.ok) {
        fetchAppProfiles()
        toast({
          title: "App Revoked",
          description: "App profile has been deactivated",
        })
      }
    } catch (error) {
      toast({
        title: "Revocation Failed",
        description: "Failed to revoke app profile",
        variant: "destructive",
      })
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "bg-green-100 text-green-800"
      case "suspended":
        return "bg-yellow-100 text-yellow-800"
      case "revoked":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "active":
        return <CheckCircle className="w-4 h-4" />
      case "suspended":
        return <AlertCircle className="w-4 h-4" />
      case "revoked":
        return <AlertCircle className="w-4 h-4" />
      default:
        return <Smartphone className="w-4 h-4" />
    }
  }

return (
    <div className="space-y-6">
      {/* App Installation Header */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Download className="w-5 h-5" />
            eDAS Access App Installation
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="bg-blue-50 p-4 rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <Shield className="w-5 h-5 text-blue-600" />
              <h3 className="font-semibold text-blue-800">App Installation Policy</h3>
            </div>
            <p className="text-sm text-blue-700">
              Each property address is limited to <strong>2 active app installations</strong> for security purposes.
              Each app gets a unique App Profile ID for identification.
            </p>
          </div>

<div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">
                Active Apps: {appProfiles.filter((p) => p.status === "active").length}/2
              </p>
              <p className="text-sm text-gray-600">Property: {propertyAddress}</p>
            </div>
            <Button
              onClick={generateNewAppProfile}
              disabled={!canInstallMore || isGenerating}
              className="bg-blue-600 hover:bg-blue-700"
            >
              <Download className="w-4 h-4 mr-2" />
              {isGenerating ? "Generating..." : "Install New App"}
            </Button>
          </div>
        </CardContent>
      </Card>

{/* App Profiles List */}
      <Card>
        <CardHeader>
          <CardTitle>Your App Installations</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {appProfiles.length === 0 ? (
              <div className="text-center py-8 text-gray-500">
                <Smartphone className="w-12 h-12 mx-auto mb-4 text-gray-300" />
                <p>No app installations found</p>
                <p className="text-sm">Generate your first app profile to get started</p>
              </div>
            ) : (
              appProfiles.map((profile) => (
                <div key={profile.id} className="border rounded-lg p-4">
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-3">
                      <Smartphone className="w-8 h-8 text-slate-600" />
                      <div>
                        <p className="font-bold text-lg font-mono">{profile.app_id}</p>
                        <p className="text-sm text-gray-600">App Profile ID</p>
                      </div>
                    </div>
                    <Badge className={getStatusColor(profile.status)}>
                      {getStatusIcon(profile.status)}
                      <span className="ml-1 capitalize">{profile.status}</span>
                    </Badge>
                  </div>

<div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <p className="text-gray-600">Device:</p>
                      <p className="font-medium">{profile.device_info.device}</p>
                    </div>
                    <div>
                      <p className="text-gray-600">OS:</p>
                      <p className="font-medium">{profile.device_info.os}</p>
                    </div>
                    <div>
                      <p className="text-gray-600">Installed:</p>
                      <p className="font-medium">{new Date(profile.installation_date).toLocaleDateString()}</p>
                    </div>
                    <div>
                      <p className="text-gray-600">Version:</p>
                      <p className="font-medium">{profile.device_info.version}</p>
                    </div>
                  </div>

{profile.status === "active" && (
                    <div className="mt-4 pt-4 border-t">
                      <Button variant="destructive" size="sm" onClick={() => revokeAppProfile(profile.id)}>
                        Revoke Access
                      </Button>
                    </div>
                  )}
                </div>
              ))
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/security-scanner.tsx" isEdit="true" isMerged="true"
"use client"

interface SecurityScannerProps {
  userId: string
}

interface ScanResult {
  valid: boolean
  visitor_name?: string
  purpose?: string
  resident_name?: string
  app_profile_id?: string
  guest_image_url?: string
  valid_until?: string
  error?: string
}

interface ScanHistory {
  id: string
  code: string
  visitor_name: string
  resident_name: string
  result: "valid" | "invalid" | "expired"
  timestamp: string
  app_profile_id?: string
}

export function SecurityScanner({ userId }: SecurityScannerProps) {
  const [scanCode, setScanCode] = useState("")
  const [isScanning, setIsScanning] = useState(false)
  const [lastScanResult, setLastScanResult] = useState<ScanResult | null>(null)
  const [scanHistory, setScanHistory] = useState<ScanHistory[]>([
    {
      id: "1",
      code: "VISIT1234",
      visitor_name: "John Doe",
      resident_name: "Alice Johnson",
      result: "valid",
      timestamp: "2024-01-18T14:30:00Z",
      app_profile_id: "EDAS-A1B2-C3D4",
    },
    {
      id: "2",
      code: "GUEST5678",
      visitor_name: "Sarah Wilson",
      resident_name: "Bob Smith",
      result: "valid",
      timestamp: "2024-01-18T13:15:00Z",
      app_profile_id: "EDAS-E5F6-G7H8",
    },
    {
      id: "3",
      code: "EXPIRED123",
      visitor_name: "Mike Johnson",
      resident_name: "Carol Davis",
      result: "expired",
      timestamp: "2024-01-18T12:00:00Z",
      app_profile_id: "EDAS-I9J0-K1L2",
    },
  ])
  const { toast } = useToast()

const validateCode = async () => {
    if (!scanCode.trim()) {
      toast({
        title: "Missing Code",
        description: "Please enter an access code to validate",
        variant: "destructive",
      })
      return
    }

setIsScanning(true)

try {
      const response = await fetch("/api/visitor-codes/validate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code: scanCode.trim() }),
      })

const result = await response.json()

if (response.ok) {
        setLastScanResult({
          valid: true,
          visitor_name: result.visitor_name,
          purpose: result.purpose,
          resident_name: result.resident_name,
          app_profile_id: result.app_profile_id,
          guest_image_url: result.guest_image_url,
          valid_until: result.valid_until,
        })

// Add to scan history
        const newScan: ScanHistory = {
          id: Date.now().toString(),
          code: scanCode.trim(),
          visitor_name: result.visitor_name,
          resident_name: result.resident_name,
          result: "valid",
          timestamp: new Date().toISOString(),
          app_profile_id: result.app_profile_id,
        }
        setScanHistory([newScan, ...scanHistory])

toast({
          title: "Access Granted",
          description: `Welcome ${result.visitor_name}`,
        })
      } else {
        setLastScanResult({
          valid: false,
          error: result.error || "Invalid access code",
        })

toast({
          title: "Access Denied",
          description: result.error || "Invalid access code",
          variant: "destructive",
        })
      }

// Log the scan activity
      await fetch("/api/log-activity", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          userId,
          action: "access_code_scanned",
          details: {
            code: scanCode.trim(),
            result: response.ok ? "valid" : "invalid",
            scanner_id: userId,
          },
        }),
      })
    } catch (error) {
      setLastScanResult({
        valid: false,
        error: "Failed to validate code",
      })

toast({
        title: "Scan Error",
        description: "Failed to validate access code",
        variant: "destructive",
      })
    } finally {
      setIsScanning(false)
      setScanCode("")
    }
  }

const getResultColor = (result: string) => {
    switch (result) {
      case "valid":
        return "bg-green-100 text-green-800"
      case "expired":
        return "bg-orange-100 text-orange-800"
      case "invalid":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getResultIcon = (result: string) => {
    switch (result) {
      case "valid":
        return <CheckCircle className="w-4 h-4" />
      case "expired":
        return <Clock className="w-4 h-4" />
      case "invalid":
        return <XCircle className="w-4 h-4" />
      default:
        return <QrCode className="w-4 h-4" />
    }
  }

return (
    <div className="space-y-6">
      {/* Scanner Interface */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <QrCode className="w-5 h-5" />
            Access Code Scanner
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex gap-4">
            <Input
              placeholder="Enter or scan access code"
              value={scanCode}
              onChange={(e) => setScanCode(e.target.value.toUpperCase())}
              className="flex-1 font-mono text-lg"
              onKeyPress={(e) => e.key === "Enter" && validateCode()}
            />
            <Button onClick={validateCode} disabled={isScanning} className="bg-slate-600 hover:bg-slate-700">
              <Scan className="w-4 h-4 mr-2" />
              {isScanning ? "Validating..." : "Validate"}
            </Button>
          </div>

<div className="text-center">
            <Button variant="outline" className="w-full">
              <QrCode className="w-4 h-4 mr-2" />
              Open Camera Scanner
            </Button>
          </div>
        </CardContent>
      </Card>

{/* Enhanced Scan Result with Resident Info and Guest Image */}
      {lastScanResult && (
        <Card className={lastScanResult.valid ? "border-green-200 bg-green-50" : "border-red-200 bg-red-50"}>
          <CardContent className="p-6">
            <div className="flex items-center gap-3 mb-4">
              {lastScanResult.valid ? (
                <CheckCircle className="w-8 h-8 text-green-600" />
              ) : (
                <XCircle className="w-8 h-8 text-red-600" />
              )}
              <div>
                <h3 className={`text-lg font-bold ${lastScanResult.valid ? "text-green-800" : "text-red-800"}`}>
                  {lastScanResult.valid ? "Access Granted" : "Access Denied"}
                </h3>
                <p className={lastScanResult.valid ? "text-green-600" : "text-red-600"}>
                  {lastScanResult.valid ? "Visitor may enter" : lastScanResult.error}
                </p>
              </div>
            </div>

{lastScanResult.valid && (
              <div className="space-y-4">
                {/* Guest Image Display */}
                {lastScanResult.guest_image_url && (
                  <div className="flex items-center gap-4 p-4 bg-white rounded-lg border">
                    <div className="w-20 h-20 rounded-lg overflow-hidden border-2 border-green-200">
                      <img
                        src={lastScanResult.guest_image_url || "/placeholder.svg"}
                        alt="Expected guest"
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <div>
                      <p className="font-semibold text-green-800">Expected Guest Photo</p>
                      <p className="text-sm text-green-600">Verify this matches the visitor</p>
                    </div>
                  </div>
                )}

{/* Visitor and Resident Information */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-white p-4 rounded-lg border">
                    <div className="flex items-center gap-2 mb-2">
                      <User className="w-5 h-5 text-green-600" />
                      <span className="font-semibold text-green-800">Visitor Information</span>
                    </div>
                    <div className="space-y-1 text-sm">
                      <p>
                        <strong>Name:</strong> {lastScanResult.visitor_name}
                      </p>
                      <p>
                        <strong>Purpose:</strong> {lastScanResult.purpose}
                      </p>
                      <p>
                        <strong>Valid Until:</strong> {lastScanResult.valid_until}
                      </p>
                    </div>
                  </div>

<div className="bg-white p-4 rounded-lg border">
                    <div className="flex items-center gap-2 mb-2">
                      <Smartphone className="w-5 h-5 text-blue-600" />
                      <span className="font-semibold text-blue-800">Resident Information</span>
                    </div>
                    <div className="space-y-1 text-sm">
                      <p>
                        <strong>Resident:</strong> {lastScanResult.resident_name}
                      </p>
                      {lastScanResult.app_profile_id && (
                        <p>
                          <strong>App ID:</strong> <span className="font-mono">{lastScanResult.app_profile_id}</span>
                        </p>
                      )}
                      <p>
                        <strong>Generated:</strong> {new Date().toLocaleTimeString()}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      )}

{/* Enhanced Scan History */}
      <Card>
        <CardHeader>
          <CardTitle>Recent Scans</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {scanHistory.map((scan) => (
              <div key={scan.id} className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex items-center gap-3">
                  <div className={`p-2 rounded-full ${getResultColor(scan.result)}`}>{getResultIcon(scan.result)}</div>
                  <div>
                    <p className="font-semibold">{scan.visitor_name}</p>
                    <p className="text-sm text-slate-600">Visiting: {scan.resident_name}</p>
                    <p className="text-xs text-slate-500 font-mono">{scan.code}</p>
                    {scan.app_profile_id && (
                      <p className="text-xs text-blue-600 font-mono">App: {scan.app_profile_id}</p>
                    )}
                  </div>
                </div>
                <div className="text-right">
                  <Badge className={getResultColor(scan.result)}>{scan.result}</Badge>
                  <p className="text-xs text-slate-500 mt-1">{new Date(scan.timestamp).toLocaleTimeString()}</p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]json:file="public/manifest.json" isMerged="true"
{
  "name": "eDAS Access - Estate Management",
  "short_name": "eDAS Access",
  "description": "Residential estate visitor access code generator and management platform",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#1e293b",
  "theme_color": "#0f766e",
  "orientation": "portrait",
  "scope": "/",
  "lang": "en",
  "categories": ["productivity", "utilities", "lifestyle"],
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ],
  "shortcuts": [
    {
      "name": "Generate Access Code",
      "short_name": "Access Code",
      "description": "Quickly generate visitor access code",
      "url": "/visitor-management",
      "icons": [{ "src": "/icons/shortcut-qr.png", "sizes": "96x96" }]
    },
    {
      "name": "Security Scanner",
      "short_name": "Scanner",
      "description": "Scan visitor access codes",
      "url": "/security-scanner",
      "icons": [{ "src": "/icons/shortcut-scan.png", "sizes": "96x96" }]
    },
    {
      "name": "Maintenance Request",
      "short_name": "Maintenance",
      "description": "Submit maintenance request",
      "url": "/maintenance",
      "icons": [{ "src": "/icons/shortcut-wrench.png", "sizes": "96x96" }]
    }
  ],
  "screenshots": [
    {
      "src": "/screenshots/dashboard-mobile.png",
      "sizes": "390x844",
      "type": "image/png",
      "form_factor": "narrow"
    },
    {
      "src": "/screenshots/visitor-mobile.png",
      "sizes": "390x844",
      "type": "image/png",
      "form_factor": "narrow"
    },
    {
      "src": "/screenshots/dashboard-desktop.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    }
  ]
}
[V0_FILE]typescriptreact:file="components/app-download.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Download, Monitor, Apple, Play, Globe, QrCode } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export function AppDownload() {
  const [isInstalling, setIsInstalling] = useState(false)
  const { toast } = useToast()

const installPWA = async () => {
    setIsInstalling(true)

// Check if PWA can be installed
    if ("serviceWorker" in navigator) {
      try {
        await navigator.serviceWorker.register("/sw.js")
        toast({
          title: "App Ready to Install",
          description: "eDAS Access can now be installed on your device",
        })
      } catch (error) {
        console.error("Service worker registration failed:", error)
      }
    }

// Simulate installation process
    setTimeout(() => {
      setIsInstalling(false)
      toast({
        title: "Installation Complete",
        description: "eDAS Access has been added to your home screen",
      })
    }, 2000)
  }

const downloadLinks = [
    {
      platform: "Web App (PWA)",
      icon: Globe,
      description: "Install directly from your browser",
      action: "Install Now",
      available: true,
      onClick: installPWA,
    },
    {
      platform: "iOS App Store",
      icon: Apple,
      description: "Download for iPhone and iPad",
      action: "Download",
      available: false,
      comingSoon: true,
    },
    {
      platform: "Google Play Store",
      icon: Play,
      description: "Download for Android devices",
      action: "Download",
      available: false,
      comingSoon: true,
    },
    {
      platform: "Desktop App",
      icon: Monitor,
      description: "Windows, Mac, and Linux",
      action: "Download",
      available: false,
      comingSoon: true,
    },
  ]

return (
    <div className="space-y-6">
      {/* App Download Header */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Download className="w-5 h-5" />
            Download eDAS Access App
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="bg-teal-50 p-4 rounded-lg mb-4">
            <div className="flex items-center gap-2 mb-2">
              <QrCode className="w-5 h-5 text-teal-600" />
              <h3 className="font-semibold text-teal-800">Estate Management Made Easy</h3>
            </div>
            <p className="text-sm text-teal-700">
              Get the eDAS Access app on all your devices for seamless estate management, visitor access control, and
              community features.
            </p>
          </div>

<div className="grid gap-4">
            {downloadLinks.map((link) => {
              const Icon = link.icon
              return (
                <div key={link.platform} className="flex items-center justify-between p-4 border rounded-lg">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center">
                      <Icon className="w-6 h-6 text-slate-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold">{link.platform}</h3>
                      <p className="text-sm text-gray-600">{link.description}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    {link.comingSoon && <Badge variant="secondary">Coming Soon</Badge>}
                    <Button
                      onClick={link.onClick}
                      disabled={!link.available || isInstalling}
                      className={link.available ? "bg-teal-600 hover:bg-teal-700" : ""}
                      variant={link.available ? "default" : "outline"}
                    >
                      <Download className="w-4 h-4 mr-2" />
                      {isInstalling && link.available ? "Installing..." : link.action}
                    </Button>
                  </div>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>

{/* App Features */}
      <Card>
        <CardHeader>
          <CardTitle>App Features</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-3">
              <h4 className="font-semibold">Core Features</h4>
              <ul className="space-y-2 text-sm">
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-teal-600 rounded-full"></div>
                  Visitor Access Code Generation
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-teal-600 rounded-full"></div>
                  Security Scanner & Verification
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-teal-600 rounded-full"></div>
                  Maintenance Request Management
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-teal-600 rounded-full"></div>
                  Community Announcements
                </li>
              </ul>
            </div>
            <div className="space-y-3">
              <h4 className="font-semibold">Advanced Features</h4>
              <ul className="space-y-2 text-sm">
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                  Estate Management Dashboard
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                  Resident Directory & Messaging
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                  Facility Booking System
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                  Bills & Payment Management
                </li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Installation Instructions */}
      <Card>
        <CardHeader>
          <CardTitle>Installation Instructions</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div>
              <h4 className="font-semibold mb-2">Web App (Recommended)</h4>
              <ol className="list-decimal list-inside space-y-1 text-sm text-gray-600">
                <li>Click "Install Now" above</li>
                <li>Follow your browser's installation prompts</li>
                <li>The app will be added to your home screen</li>
                <li>Launch like any other app on your device</li>
              </ol>
            </div>
            <div>
              <h4 className="font-semibold mb-2">Mobile Browsers</h4>
              <p className="text-sm text-gray-600">
                On mobile browsers, look for the "Add to Home Screen" option in your browser menu to install the app
                directly on your device.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/download/page.tsx" isMerged="true"
import { AppDownload } from "@/components/app-download"

export default function DownloadPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-4">Download eDAS Access App</h1>
          <p className="text-lg text-gray-600">Get the complete estate management solution on all your devices</p>
        </div>

<AppDownload />
      </div>
    </div>
  )
}
[V0_FILE]javascript:file="public/sw.js" isMerged="true"
const CACHE_NAME = "edas-access-v1"
const urlsToCache = ["/", "/manifest.json", "/icons/icon-192x192.png", "/icons/icon-512x512.png"]

self.addEventListener("install", (event) => {
  event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(urlsToCache)))
})

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        return response
      }
      return fetch(event.request)
    }),
  )
})
[V0_FILE]typescriptreact:file="next.config.mjs" isFixed="true" isQuickEdit="true" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    domains: ['your-supabase-project.supabase.co'],
    unoptimized: true,
  },
  // PWA Configuration
  async headers() {
    return [
      {
        source: '/manifest.json',
        headers: [
          {
            key: 'Content-Type',
            value: 'application/manifest+json',
          },
        ],
      },
      {
        source: '/sw.js',
        headers: [
          {
            key: 'Content-Type',
            value: 'application/javascript',
          },
          {
            key: 'Service-Worker-Allowed',
            value: '/',
          },
        ],
      },
    ]
  },
}

export default nextConfig
[V0_FILE]sql:file="scripts/management-schema.sql" isMerged="true"
-- Add management access codes and admin features
CREATE TABLE IF NOT EXISTS management_access_codes (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    code VARCHAR(4) NOT NULL UNIQUE,
    description TEXT,
    created_by UUID REFERENCES users(id),
    is_active BOOLEAN DEFAULT true,
    expires_at TIMESTAMP WITH TIME ZONE,
    last_used_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Add admin actions log
CREATE TABLE IF NOT EXISTS admin_actions (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    admin_id UUID REFERENCES users(id),
    action_type VARCHAR(50) NOT NULL,
    target_type VARCHAR(50), -- 'visitor_code', 'marketplace_post', 'user', etc.
    target_id UUID,
    details JSONB,
    ip_address INET,
    user_agent TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Add marketplace post moderation
ALTER TABLE marketplace_posts ADD COLUMN IF NOT EXISTS is_approved BOOLEAN DEFAULT true;
ALTER TABLE marketplace_posts ADD COLUMN IF NOT EXISTS moderated_by UUID REFERENCES users(id);
ALTER TABLE marketplace_posts ADD COLUMN IF NOT EXISTS moderated_at TIMESTAMP WITH TIME ZONE;
ALTER TABLE marketplace_posts ADD COLUMN IF NOT EXISTS moderation_notes TEXT;

-- Insert default management access codes
INSERT INTO management_access_codes (code, description, is_active) VALUES 
('1234', 'Default Security Access Code', true),
('9999', 'Estate Manager Access Code', true),
('0000', 'Emergency Access Code', true)
ON CONFLICT (code) DO NOTHING;

-- Create indexes for performance
CREATE INDEX IF NOT EXISTS idx_admin_actions_admin_id ON admin_actions(admin_id);
CREATE INDEX IF NOT EXISTS idx_admin_actions_created_at ON admin_actions(created_at);
CREATE INDEX IF NOT EXISTS idx_management_codes_active ON management_access_codes(is_active) WHERE is_active = true;
[V0_FILE]typescriptreact:file="components/estate-search-input.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { MapPin, ChevronDown } from "lucide-react"

const estates = [
  "1004 Estate",
  "Amen Estate",
  "Banana Island Estate",
  "Bourdillon Court Estate",
  "Carlton Gate Estate",
  "Chevy View Estate",
  "Crown Estate",
  "Dolphin Estate",
  "Friends Colony Estate",
  "Grenadines Homes",
  "Ikoyi Golf Course Estate",
  "Lekki Gardens Estate Phase 2",
  "Lekki Gardens Estate Phase 4",
  "Mayfair Gardens Estate",
  "Nicon Town Estate",
  "Northern Foreshore Estate",
  "Ocean Bay Estate",
  "Parkview Estate",
  "Pinnock Beach Estate",
  "Victoria Garden City (VGC)",
]

interface EstateSearchInputProps {
  onSelectEstate: (estate: string) => void
  value?: string
  placeholder?: string
}

export function EstateSearchInput({
  onSelectEstate,
  value = "",
  placeholder = "Enter estate name",
}: EstateSearchInputProps) {
  const [query, setQuery] = useState(value)
  const [filteredEstates, setFilteredEstates] = useState<string[]>([])
  const [isOpen, setIsOpen] = useState(false)
  const containerRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    setQuery(value)
  }, [value])

useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

const handleSearch = (text: string) => {
    setQuery(text)
    setIsOpen(true)

if (text.length === 0) {
      setFilteredEstates([])
    } else {
      const matches = estates.filter((estate) => estate.toLowerCase().includes(text.toLowerCase()))
      setFilteredEstates(matches)
    }
  }

const handleSelect = (estate: string) => {
    setQuery(estate)
    setFilteredEstates([])
    setIsOpen(false)
    onSelectEstate(estate)
  }

return (
    <div ref={containerRef} className="relative w-full">
      <div className="relative">
        <Input
          value={query}
          onChange={(e) => handleSearch(e.target.value)}
          placeholder={placeholder}
          className="pr-10"
          onFocus={() => setIsOpen(true)}
        />
        <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
      </div>

{isOpen && filteredEstates.length > 0 && (
        <Card className="absolute z-50 w-full mt-1 max-h-48 overflow-y-auto bg-white border shadow-lg">
          {filteredEstates.map((estate, index) => (
            <div
              key={index}
              className="px-4 py-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0 flex items-center gap-2"
              onClick={() => handleSelect(estate)}
            >
              <MapPin className="w-4 h-4 text-gray-400" />
              <span className="text-sm">{estate}</span>
            </div>
          ))}
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/management/verify-access/route.ts" isMerged="true"
import { NextResponse } from "next/server"

// In a real application, these would be stored securely in a database
// with proper hashing. This is a simplified example.
const VALID_ACCESS_CODES = ["1234", "9999", "0000", "5678"]

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { code } = body

if (!code) {
      return NextResponse.json({ success: false, message: "Access code is required" }, { status: 400 })
    }

// Check if the provided code is valid
    const isValid = VALID_ACCESS_CODES.includes(code)

if (isValid) {
      // Log successful access attempt (in a real app, store this in the database)
      console.log(`Management access granted at ${new Date().toISOString()}`)

return NextResponse.json({
        success: true,
        message: "Access granted",
      })
    } else {
      // Log failed attempt (in a real app, store this in the database)
      console.log(`Failed management access attempt at ${new Date().toISOString()}`)

return NextResponse.json({ success: false, message: "Invalid access code" }, { status: 401 })
    }
  } catch (error) {
    console.error("Error verifying management access:", error)
    return NextResponse.json({ success: false, message: "An error occurred while verifying access" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/management-access.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Shield, Lock, AlertTriangle } from "lucide-react"

interface ManagementAccessProps {
  onAccessGranted: () => void
}

export function ManagementAccess({ onAccessGranted }: ManagementAccessProps) {
  const [accessCode, setAccessCode] = useState("")
  const [isVerifying, setIsVerifying] = useState(false)
  const [error, setError] = useState("")
  const [attempts, setAttempts] = useState(0)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (accessCode.length !== 4) {
      setError("Access code must be 4 digits")
      return
    }

if (attempts >= 3) {
      setError("Too many failed attempts. Please contact system administrator.")
      return
    }

setIsVerifying(true)
    setError("")

try {
      const response = await fetch("/api/management/verify-access", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code: accessCode }),
      })

const data = await response.json()

if (data.success) {
        // Store management session
        sessionStorage.setItem("management_access", "granted")
        sessionStorage.setItem("management_session", Date.now().toString())
        onAccessGranted()
      } else {
        setAttempts((prev) => prev + 1)
        setError(data.message || "Invalid access code")
        setAccessCode("")
      }
    } catch (error) {
      console.error("Verification error:", error)
      setError("Failed to verify access code. Please try again.")
    } finally {
      setIsVerifying(false)
    }
  }

const handleCodeChange = (value: string) => {
    // Only allow digits and limit to 4 characters
    const digits = value.replace(/\D/g, "").slice(0, 4)
    setAccessCode(digits)
  }

console.log("Current attempts:", attempts, "Current code:", accessCode)

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-700 flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
            <Shield className="w-8 h-8 text-red-600" />
          </div>
          <CardTitle className="text-2xl font-bold text-slate-800">Management Access</CardTitle>
          <p className="text-slate-600">Enter 4-digit security code to access management functions</p>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="accessCode" className="text-sm font-medium text-slate-700">
                Access Code
              </label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400" />
                <Input
                  id="accessCode"
                  type="password"
                  value={accessCode}
                  onChange={(e) => handleCodeChange(e.target.value)}
                  placeholder="••••"
                  className="pl-10 text-center text-2xl tracking-widest"
                  maxLength={4}
                  disabled={isVerifying || attempts >= 3}
                />
              </div>
            </div>

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

<Button
              type="submit"
              className="w-full bg-red-600 hover:bg-red-700"
              disabled={accessCode.length !== 4 || isVerifying || attempts >= 3}
            >
              {isVerifying ? "Verifying..." : "Access Management"}
            </Button>

<div className="text-center text-sm text-slate-500">
              <p>Attempts: {attempts}/3</p>
              <p className="mt-2">
                <AlertTriangle className="inline w-4 h-4 mr-1" />
                Authorized personnel only
              </p>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/management/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ManagementAccess } from "@/components/management-access"
import { ManagementDashboard } from "@/components/management-dashboard"

export default function ManagementPage() {
  const [hasAccess, setHasAccess] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Check if user already has management access in this session
    const managementAccess = sessionStorage.getItem("management_access")
    const sessionTime = sessionStorage.getItem("management_session")

console.log("Session check:", { managementAccess, sessionTime })

if (managementAccess === "granted" && sessionTime) {
      const sessionAge = Date.now() - Number(sessionTime)
      // Session expires after 2 hours
      if (sessionAge < 2 * 60 * 60 * 1000) {
        setHasAccess(true)
      } else {
        // Clear expired session
        sessionStorage.removeItem("management_access")
        sessionStorage.removeItem("management_session")
      }
    }

setIsLoading(false)
  }, [])

const handleAccessGranted = () => {
    setHasAccess(true)
  }

const handleLogout = () => {
    sessionStorage.removeItem("management_access")
    sessionStorage.removeItem("management_session")
    setHasAccess(false)
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-slate-900 flex items-center justify-center">
        <div className="text-white">Loading...</div>
      </div>
    )
  }

console.log("Access state:", { hasAccess, isLoading })

if (!hasAccess) {
    return <ManagementAccess onAccessGranted={handleAccessGranted} />
  }

return <ManagementDashboard onLogout={handleLogout} />
}
[V0_FILE]typescriptreact:file="app/test-management-access/page.tsx" isMerged="true"
"use client"

export default function TestManagementAccess() {
  const [accessCode, setAccessCode] = useState("")
  const [result, setResult] = useState<{ success?: boolean; message?: string } | null>(null)
  const [isLoading, setIsLoading] = useState(false)

const handleTest = async () => {
    setIsLoading(true)
    setResult(null)

const data = await response.json()
      setResult(data)
    } catch (error) {
      console.error("Test error:", error)
      setResult({ success: false, message: "Error testing code" })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Test Management Access Code</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <label htmlFor="accessCode" className="block text-sm font-medium text-gray-700">
              Access Code
            </label>
            <Input
              id="accessCode"
              value={accessCode}
              onChange={(e) => setAccessCode(e.target.value)}
              placeholder="Enter 4-digit code"
              className="mt-1"
            />
          </div>

<Button onClick={handleTest} disabled={isLoading} className="w-full">
            {isLoading ? "Testing..." : "Test Code"}
          </Button>

{result && (
            <div
              className={`mt-4 p-3 rounded ${
                result.success ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
              }`}
            >
              <p className="font-medium">{result.success ? "Success!" : "Failed!"}</p>
              <p>{result.message}</p>
            </div>
          )}

<div className="mt-4 border-t pt-4">
            <p className="text-sm text-gray-500">Valid test codes: 1234, 9999, 0000, 5678</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/registration-manager.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  UserPlus,
  CheckCircle,
  Clock,
  AlertCircle,
  Upload,
  User,
  Home,
  MapPin,
  Building,
  LogIn,
  UserCheck,
} from "lucide-react"
import { EstateSearchInput } from "./estate-search-input"
import { AuthForms } from "./auth-forms"
import { useToast } from "@/hooks/use-toast"

interface RegistrationManagerProps {
  userId: string
}

export function RegistrationManager({ userId }: RegistrationManagerProps) {
  const { toast } = useToast()
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [userProfile, setUserProfile] = useState<any>(null)

const [applications] = useState([
    {
      id: "1",
      applicantName: "John Smith",
      unitNumber: "A-15",
      estateName: "Lekki Gardens Estate Phase 2",
      applicationType: "New Resident",
      submissionDate: "2024-01-15",
      status: "pending",
      documents: ["ID Copy", "Lease Agreement", "References"],
    },
    {
      id: "2",
      applicantName: "Sarah Johnson",
      unitNumber: "B-08",
      estateName: "Victoria Garden City (VGC)",
      applicationType: "Tenant Registration",
      submissionDate: "2024-01-12",
      status: "approved",
      documents: ["ID Copy", "Rental Agreement"],
    },
    {
      id: "3",
      applicantName: "Mike Wilson",
      unitNumber: "C-03",
      estateName: "Crown Estate",
      applicationType: "Family Member",
      submissionDate: "2024-01-10",
      status: "under_review",
      documents: ["ID Copy", "Relationship Proof"],
    },
  ])

const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    phone: "",
    estateName: "",
    unitNumber: "",
    streetAddress: "",
    city: "",
    state: "",
    postalCode: "",
    country: "Nigeria",
    applicationType: "new_resident",
    moveInDate: "",
    emergencyContact: "",
    emergencyPhone: "",
    additionalInfo: "",
  })

const getStatusColor = (status: string) => {
    switch (status) {
      case "approved":
        return "bg-green-100 text-green-800"
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "under_review":
        return "bg-blue-100 text-blue-800"
      case "rejected":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "approved":
        return <CheckCircle className="w-4 h-4 text-green-600" />
      case "pending":
        return <Clock className="w-4 h-4 text-yellow-600" />
      case "under_review":
        return <AlertCircle className="w-4 h-4 text-blue-600" />
      case "rejected":
        return <AlertCircle className="w-4 h-4 text-red-600" />
      default:
        return <Clock className="w-4 h-4 text-gray-600" />
    }
  }

const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const handleEstateSelect = (estate: string) => {
    setFormData((prev) => ({ ...prev, estateName: estate }))
  }

const handleAuthSuccess = (user: any) => {
    setIsAuthenticated(true)
    setUserProfile(user)
    setFormData((prev) => ({
      ...prev,
      fullName: user.name || "",
      email: user.email || "",
    }))
    toast({
      title: "Authentication Successful!",
      description: `Welcome ${user.name}! You can now proceed with registration.`,
    })
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!isAuthenticated) {
      toast({
        title: "Authentication Required",
        description: "Please sign in before submitting your registration.",
        variant: "destructive",
      })
      return
    }

try {
      const response = await fetch("/api/registration/submit", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ...formData,
          userId: userProfile?.id,
          authProvider: userProfile?.provider,
        }),
      })

if (response.ok) {
        toast({
          title: "Registration Submitted!",
          description: "Your application has been submitted for review.",
        })
        // Reset form or redirect
      } else {
        throw new Error("Registration failed")
      }
    } catch (error) {
      toast({
        title: "Registration Failed",
        description: "Please try again or contact support.",
        variant: "destructive",
      })
    }
  }

// If not authenticated, show authentication forms
  if (!isAuthenticated) {
    return (
      <div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <LogIn className="w-5 h-5" />
              Sign In to Continue Registration
            </CardTitle>
            <p className="text-sm text-slate-600">
              Please authenticate your account before proceeding with estate registration
            </p>
          </CardHeader>
          <CardContent>
            <AuthForms onAuthSuccess={handleAuthSuccess} />
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* User Profile Header */}
      <Card className="bg-gradient-to-r from-green-50 to-blue-50 border-green-200">
        <CardContent className="p-4">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
              <UserCheck className="w-6 h-6 text-green-600" />
            </div>
            <div>
              <h3 className="font-semibold text-green-800">Authenticated as {userProfile?.name}</h3>
              <p className="text-sm text-green-600">{userProfile?.email}</p>
              <p className="text-xs text-green-500">Signed in via {userProfile?.provider || "Email"}</p>
            </div>
          </div>
        </CardContent>
      </Card>

<Tabs defaultValue="new-application" className="space-y-6">
        <TabsList>
          <TabsTrigger value="new-application">New Application</TabsTrigger>
          <TabsTrigger value="applications">My Applications</TabsTrigger>
          <TabsTrigger value="requirements">Requirements</TabsTrigger>
        </TabsList>

<TabsContent value="new-application">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <UserPlus className="w-5 h-5" />
                New Registration Application
              </CardTitle>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-6">
                {/* Personal Information Section */}
                <div className="space-y-4">
                  <h3 className="text-lg font-semibold flex items-center gap-2">
                    <User className="w-5 h-5" />
                    Personal Information
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="fullName">Full Name *</Label>
                      <Input
                        id="fullName"
                        value={formData.fullName}
                        onChange={(e) => handleInputChange("fullName", e.target.value)}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="email">Email Address *</Label>
                      <Input
                        id="email"
                        type="email"
                        value={formData.email}
                        onChange={(e) => handleInputChange("email", e.target.value)}
                        required
                        disabled
                        className="bg-gray-50"
                      />
                      <p className="text-xs text-gray-500 mt-1">Email from authenticated account</p>
                    </div>
                    <div>
                      <Label htmlFor="phone">Phone Number *</Label>
                      <Input
                        id="phone"
                        value={formData.phone}
                        onChange={(e) => handleInputChange("phone", e.target.value)}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="applicationType">Application Type *</Label>
                      <select
                        id="applicationType"
                        value={formData.applicationType}
                        onChange={(e) => handleInputChange("applicationType", e.target.value)}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md"
                        required
                      >
                        <option value="new_resident">New Resident</option>
                        <option value="tenant_registration">Tenant Registration</option>
                        <option value="family_member">Family Member</option>
                        <option value="domestic_helper">Domestic Helper</option>
                      </select>
                    </div>
                  </div>
                </div>

{/* Estate and Address Information Section */}
                <div className="space-y-4">
                  <h3 className="text-lg font-semibold flex items-center gap-2">
                    <Building className="w-5 h-5" />
                    Estate & Address Information
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="md:col-span-2">
                      <Label htmlFor="estateName">Estate Name *</Label>
                      <EstateSearchInput
                        onSelectEstate={handleEstateSelect}
                        value={formData.estateName}
                        placeholder="Search and select your estate..."
                      />
                    </div>
                    <div>
                      <Label htmlFor="unitNumber">Unit/Apartment Number *</Label>
                      <Input
                        id="unitNumber"
                        value={formData.unitNumber}
                        onChange={(e) => handleInputChange("unitNumber", e.target.value)}
                        placeholder="e.g., A-15, Block 5 Flat 3"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="streetAddress">Street Address *</Label>
                      <Input
                        id="streetAddress"
                        value={formData.streetAddress}
                        onChange={(e) => handleInputChange("streetAddress", e.target.value)}
                        placeholder="Street name and number"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="city">City *</Label>
                      <Input
                        id="city"
                        value={formData.city}
                        onChange={(e) => handleInputChange("city", e.target.value)}
                        placeholder="e.g., Lagos, Abuja"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="state">State *</Label>
                      <Input
                        id="state"
                        value={formData.state}
                        onChange={(e) => handleInputChange("state", e.target.value)}
                        placeholder="e.g., Lagos State"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="postalCode">Postal Code</Label>
                      <Input
                        id="postalCode"
                        value={formData.postalCode}
                        onChange={(e) => handleInputChange("postalCode", e.target.value)}
                        placeholder="e.g., 101001"
                      />
                    </div>
                    <div>
                      <Label htmlFor="country">Country *</Label>
                      <Input
                        id="country"
                        value={formData.country}
                        onChange={(e) => handleInputChange("country", e.target.value)}
                        required
                      />
                    </div>
                  </div>
                </div>

{/* Additional Information Section */}
                <div className="space-y-4">
                  <h3 className="text-lg font-semibold flex items-center gap-2">
                    <MapPin className="w-5 h-5" />
                    Additional Information
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="moveInDate">Move-in Date</Label>
                      <Input
                        id="moveInDate"
                        type="date"
                        value={formData.moveInDate}
                        onChange={(e) => handleInputChange("moveInDate", e.target.value)}
                      />
                    </div>
                    <div>
                      <Label htmlFor="emergencyContact">Emergency Contact Name *</Label>
                      <Input
                        id="emergencyContact"
                        value={formData.emergencyContact}
                        onChange={(e) => handleInputChange("emergencyContact", e.target.value)}
                        required
                      />
                    </div>
                    <div className="md:col-span-2">
                      <Label htmlFor="emergencyPhone">Emergency Contact Phone *</Label>
                      <Input
                        id="emergencyPhone"
                        value={formData.emergencyPhone}
                        onChange={(e) => handleInputChange("emergencyPhone", e.target.value)}
                        required
                      />
                    </div>
                  </div>
                </div>

<div>
                  <Label htmlFor="additionalInfo">Additional Information</Label>
                  <Textarea
                    id="additionalInfo"
                    value={formData.additionalInfo}
                    onChange={(e) => handleInputChange("additionalInfo", e.target.value)}
                    placeholder="Any additional information or special requirements..."
                    rows={3}
                  />
                </div>

<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                  <Upload className="w-8 h-8 text-gray-400 mx-auto mb-2" />
                  <p className="text-sm text-gray-600 mb-2">Upload Required Documents</p>
                  <p className="text-xs text-gray-500">ID Copy, Lease/Rental Agreement, References (PDF, JPG, PNG)</p>
                  <Button type="button" variant="outline" className="mt-2">
                    Choose Files
                  </Button>
                </div>

<Button type="submit" className="w-full bg-slate-600 hover:bg-slate-700">
                  Submit Registration Application
                </Button>
              </form>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="applications">
          <Card>
            <CardHeader>
              <CardTitle>My Registration Applications</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {applications.map((application) => (
                  <div key={application.id} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex items-center gap-3">
                      {getStatusIcon(application.status)}
                      <div>
                        <div className="flex items-center gap-2">
                          <h3 className="font-semibold">{application.applicantName}</h3>
                          <Badge className={getStatusColor(application.status)}>
                            {application.status.replace("_", " ")}
                          </Badge>
                        </div>
                        <p className="text-sm text-slate-600">
                          {application.applicationType} • Unit {application.unitNumber}
                        </p>
                        <p className="text-xs text-slate-500 flex items-center gap-1">
                          <MapPin className="w-3 h-3" />
                          {application.estateName}
                        </p>
                        <p className="text-xs text-slate-500">
                          Submitted: {new Date(application.submissionDate).toLocaleDateString()}
                        </p>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm text-slate-600 mb-2">Documents: {application.documents.length}</div>
                      <Button size="sm" variant="outline">
                        View Details
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="requirements">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <User className="w-5 h-5" />
                  New Resident Requirements
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Valid government-issued ID
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Signed lease agreement
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Character references (2)
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Emergency contact information
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Complete address verification
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Authenticated email account
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Security deposit payment
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Home className="w-5 h-5" />
                  Tenant Registration
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Valid government-issued ID
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Rental agreement with owner
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Owner's consent letter
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Emergency contact information
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Complete address details
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    Verified social media account
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>

<Card className="mt-6">
            <CardHeader>
              <CardTitle>Processing Timeline</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                    <span className="text-sm font-semibold text-blue-600">1</span>
                  </div>
                  <div>
                    <h4 className="font-semibold">Account Authentication</h4>
                    <p className="text-sm text-slate-600">Sign in with Google, Facebook, or email to verify identity</p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                    <span className="text-sm font-semibold text-purple-600">2</span>
                  </div>
                  <div>
                    <h4 className="font-semibold">Application Submission</h4>
                    <p className="text-sm text-slate-600">
                      Submit completed form with estate selection and complete address
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
                    <span className="text-sm font-semibold text-yellow-600">3</span>
                  </div>
                  <div>
                    <h4 className="font-semibold">Address Verification (2-3 business days)</h4>
                    <p className="text-sm text-slate-600">Estate management verifies address and unit availability</p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
                    <span className="text-sm font-semibold text-orange-600">4</span>
                  </div>
                  <div>
                    <h4 className="font-semibold">Document Review (3-5 business days)</h4>
                    <p className="text-sm text-slate-600">Management reviews application and documents</p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                    <span className="text-sm font-semibold text-green-600">5</span>
                  </div>
                  <div>
                    <h4 className="font-semibold">Approval & Access Setup</h4>
                    <p className="text-sm text-slate-600">Access cards issued and system registration completed</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/management-dashboard.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/hooks/use-toast"
import { ResidentManagement } from "./resident-management"
import {
  QrCode,
  Users,
  ShoppingBag,
  MessageSquare,
  Shield,
  CheckCircle,
  XCircle,
  Eye,
  Trash2,
  Edit,
  AlertTriangle,
  Clock,
  LogOut,
  RefreshCw,
} from "lucide-react"

interface ManagementDashboardProps {
  onLogout: () => void
}

export function ManagementDashboard({ onLogout }: ManagementDashboardProps) {
  const [activeTab, setActiveTab] = useState("overview")
  const [visitorCodes, setVisitorCodes] = useState([])
  const [marketplacePosts, setMarketplacePosts] = useState([])
  const [pendingRequests, setPendingRequests] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const { toast } = useToast()

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

const loadDashboardData = async () => {
    setIsLoading(true)
    setError(null)

try {
      // Load visitor codes with error handling
      try {
        const codesResponse = await fetch("/api/management/visitor-codes")
        if (codesResponse.ok) {
          const codesData = await codesResponse.json()
          setVisitorCodes(codesData.codes || [])
        } else {
          console.warn("Failed to load visitor codes")
          setVisitorCodes([])
        }
      } catch (err) {
        console.warn("Visitor codes API not available:", err)
        setVisitorCodes([])
      }

// Load marketplace posts with error handling
      try {
        const postsResponse = await fetch("/api/management/marketplace")
        if (postsResponse.ok) {
          const postsData = await postsResponse.json()
          setMarketplacePosts(postsData.posts || [])
        } else {
          console.warn("Failed to load marketplace posts")
          setMarketplacePosts([])
        }
      } catch (err) {
        console.warn("Marketplace API not available:", err)
        setMarketplacePosts([])
      }

// Load pending requests with error handling
      try {
        const requestsResponse = await fetch("/api/management/pending-requests")
        if (requestsResponse.ok) {
          const requestsData = await requestsResponse.json()
          setPendingRequests(requestsData.requests || [])
        } else {
          console.warn("Failed to load pending requests")
          setPendingRequests([])
        }
      } catch (err) {
        console.warn("Pending requests API not available:", err)
        setPendingRequests([])
      }
    } catch (error) {
      console.error("Failed to load dashboard data:", error)
      setError("Failed to load dashboard data. Please try again.")
      toast({
        title: "Error",
        description: "Failed to load dashboard data. Please refresh the page.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleValidateCode = async (codeId: string, isValid: boolean) => {
    try {
      const response = await fetch(`/api/management/visitor-codes/${codeId}/validate`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ isValid }),
      })

if (response.ok) {
        toast({
          title: "Success",
          description: `Code ${isValid ? "activated" : "deactivated"} successfully`,
        })
        loadDashboardData()
      } else {
        throw new Error("Failed to validate code")
      }
    } catch (error) {
      console.error("Failed to validate code:", error)
      toast({
        title: "Error",
        description: "Failed to validate code. Please try again.",
        variant: "destructive",
      })
    }
  }

const handleModeratePost = async (postId: string, action: "approve" | "reject", notes?: string) => {
    try {
      const response = await fetch(`/api/management/marketplace/${postId}/moderate`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action, notes }),
      })

if (response.ok) {
        toast({
          title: "Success",
          description: `Post ${action}d successfully`,
        })
        loadDashboardData()
      } else {
        throw new Error("Failed to moderate post")
      }
    } catch (error) {
      console.error("Failed to moderate post:", error)
      toast({
        title: "Error",
        description: "Failed to moderate post. Please try again.",
        variant: "destructive",
      })
    }
  }

const handleDeletePost = async (postId: string) => {
    if (!confirm("Are you sure you want to delete this post?")) return

try {
      const response = await fetch(`/api/management/marketplace/${postId}`, {
        method: "DELETE",
      })

if (response.ok) {
        toast({
          title: "Success",
          description: "Post deleted successfully",
        })
        loadDashboardData()
      } else {
        throw new Error("Failed to delete post")
      }
    } catch (error) {
      console.error("Failed to delete post:", error)
      toast({
        title: "Error",
        description: "Failed to delete post. Please try again.",
        variant: "destructive",
      })
    }
  }

const stats = {
    activeVisitorCodes: visitorCodes.filter((code: any) => code.is_active).length,
    pendingMarketplace: marketplacePosts.filter((post: any) => !post.is_approved).length,
    totalRequests: pendingRequests.length,
    todayScans: visitorCodes.filter(
      (code: any) =>
        code.last_scanned_at && new Date(code.last_scanned_at).toDateString() === new Date().toDateString(),
    ).length,
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <RefreshCw className="w-8 h-8 animate-spin mx-auto mb-4 text-red-600" />
          <p className="text-lg font-medium">Loading Management Dashboard...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-red-600 to-red-700 text-white p-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold">Management Dashboard</h1>
            <p className="text-red-100">Security & Estate Management Control Panel</p>
          </div>
          <div className="flex gap-2">
            <Button
              onClick={loadDashboardData}
              variant="outline"
              className="text-red-600 border-white hover:bg-white"
              disabled={isLoading}
            >
              <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
              Refresh
            </Button>
            <Button onClick={onLogout} variant="outline" className="text-red-600 border-white hover:bg-white">
              <LogOut className="w-4 h-4 mr-2" />
              Logout
            </Button>
          </div>
        </div>
      </div>

<div className="p-6">
        {error && (
          <Card className="mb-6 border-red-200 bg-red-50">
            <CardContent className="p-4">
              <div className="flex items-center gap-2 text-red-800">
                <AlertTriangle className="w-5 h-5" />
                <p>{error}</p>
                <Button onClick={loadDashboardData} size="sm" variant="outline" className="ml-auto">
                  Retry
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

{/* Overview Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
          <Card>
            <CardContent className="p-4 text-center">
              <QrCode className="w-8 h-8 text-blue-500 mx-auto mb-2" />
              <div className="text-2xl font-bold text-slate-800">{stats.activeVisitorCodes}</div>
              <p className="text-sm text-slate-600">Active Visitor Codes</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4 text-center">
              <ShoppingBag className="w-8 h-8 text-orange-500 mx-auto mb-2" />
              <div className="text-2xl font-bold text-slate-800">{stats.pendingMarketplace}</div>
              <p className="text-sm text-slate-600">Pending Marketplace</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4 text-center">
              <MessageSquare className="w-8 h-8 text-green-500 mx-auto mb-2" />
              <div className="text-2xl font-bold text-slate-800">{stats.totalRequests}</div>
              <p className="text-sm text-slate-600">Pending Requests</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4 text-center">
              <Shield className="w-8 h-8 text-purple-500 mx-auto mb-2" />
              <div className="text-2xl font-bold text-slate-800">{stats.todayScans}</div>
              <p className="text-sm text-slate-600">Today's Scans</p>
            </CardContent>
          </Card>
        </div>

{/* Management Tabs */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
          <TabsList className="grid w-full grid-cols-6">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="residents">Residents</TabsTrigger>
            <TabsTrigger value="visitor-codes">Visitor Codes</TabsTrigger>
            <TabsTrigger value="marketplace">Marketplace</TabsTrigger>
            <TabsTrigger value="requests">Requests</TabsTrigger>
            <TabsTrigger value="security">Security</TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <Card>
                <CardHeader>
                  <CardTitle>System Status</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Management Dashboard</span>
                      <Badge className="bg-green-100 text-green-800">Online</Badge>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Visitor Code System</span>
                      <Badge className="bg-green-100 text-green-800">Active</Badge>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Marketplace</span>
                      <Badge className="bg-green-100 text-green-800">Operational</Badge>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Request System</span>
                      <Badge className="bg-green-100 text-green-800">Ready</Badge>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Quick Actions</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <Button className="w-full justify-start" variant="outline">
                    <MessageSquare className="w-4 h-4 mr-2" />
                    Send Estate-wide Announcement
                  </Button>
                  <Button className="w-full justify-start" variant="outline">
                    <AlertTriangle className="w-4 h-4 mr-2" />
                    Emergency Alert System
                  </Button>
                  <Button className="w-full justify-start" variant="outline">
                    <Users className="w-4 h-4 mr-2" />
                    Resident Directory Management
                  </Button>
                  <Button className="w-full justify-start" variant="outline">
                    <Shield className="w-4 h-4 mr-2" />
                    Security System Control
                  </Button>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="visitor-codes" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Visitor Access Codes Management</CardTitle>
              </CardHeader>
              <CardContent>
                {visitorCodes.length === 0 ? (
                  <div className="text-center py-8">
                    <QrCode className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                    <p className="text-gray-500">No visitor codes found</p>
                    <p className="text-sm text-gray-400">Visitor codes will appear here when residents generate them</p>
                  </div>
                ) : (
                  <div className="space-y-4">
                    {visitorCodes.map((code: any) => (
                      <div key={code.id} className="border rounded-lg p-4">
                        <div className="flex items-start justify-between mb-3">
                          <div>
                            <h3 className="font-semibold">{code.guest_name || "Guest"}</h3>
                            <p className="text-sm text-slate-600">
                              Resident: {code.resident_name || "Unknown"} • Unit: {code.unit_number || "N/A"}
                            </p>
                            <p className="text-sm text-slate-500">
                              Valid: {code.valid_from ? new Date(code.valid_from).toLocaleString() : "N/A"} -{" "}
                              {code.valid_until ? new Date(code.valid_until).toLocaleString() : "N/A"}
                            </p>
                            {code.guest_image_url && (
                              <div className="mt-2">
                                <img
                                  src={code.guest_image_url || "/placeholder.svg"}
                                  alt="Guest"
                                  className="w-16 h-16 rounded-lg object-cover"
                                />
                              </div>
                            )}
                          </div>
                          <div className="flex gap-2">
                            <Badge
                              className={code.is_active ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}
                            >
                              {code.is_active ? "Active" : "Inactive"}
                            </Badge>
                            <Badge className="bg-blue-100 text-blue-800">Scans: {code.scan_count || 0}</Badge>
                          </div>
                        </div>
                        <div className="flex gap-2">
                          <Button
                            size="sm"
                            onClick={() => handleValidateCode(code.id, !code.is_active)}
                            className={
                              code.is_active ? "bg-red-600 hover:bg-red-700" : "bg-green-600 hover:bg-green-700"
                            }
                          >
                            {code.is_active ? (
                              <>
                                <XCircle className="w-4 h-4 mr-1" />
                                Deactivate
                              </>
                            ) : (
                              <>
                                <CheckCircle className="w-4 h-4 mr-1" />
                                Activate
                              </>
                            )}
                          </Button>
                          <Button size="sm" variant="outline">
                            <Eye className="w-4 h-4 mr-1" />
                            View Details
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="marketplace" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Marketplace Posts Management</CardTitle>
              </CardHeader>
              <CardContent>
                {marketplacePosts.length === 0 ? (
                  <div className="text-center py-8">
                    <ShoppingBag className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                    <p className="text-gray-500">No marketplace posts found</p>
                    <p className="text-sm text-gray-400">
                      Marketplace posts will appear here when residents create them
                    </p>
                  </div>
                ) : (
                  <div className="space-y-4">
                    {marketplacePosts.map((post: any) => (
                      <div key={post.id} className="border rounded-lg p-4">
                        <div className="flex items-start justify-between mb-3">
                          <div className="flex gap-4">
                            {post.image_url && (
                              <img
                                src={post.image_url || "/placeholder.svg"}
                                alt={post.title}
                                className="w-20 h-20 rounded-lg object-cover"
                              />
                            )}
                            <div>
                              <h3 className="font-semibold">{post.title || "Untitled"}</h3>
                              <p className="text-sm text-slate-600">
                                By: {post.seller_name || "Unknown"} • Unit: {post.unit_number || "N/A"}
                              </p>
                              <p className="text-sm text-slate-500 mt-1">{post.description || "No description"}</p>
                              <p className="text-lg font-bold text-green-600 mt-2">${post.price || "0"}</p>
                            </div>
                          </div>
                          <div className="flex gap-2">
                            <Badge
                              className={
                                post.is_approved ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"
                              }
                            >
                              {post.is_approved ? "Approved" : "Pending"}
                            </Badge>
                            <Badge className="bg-blue-100 text-blue-800">{post.category || "General"}</Badge>
                          </div>
                        </div>
                        <div className="flex gap-2">
                          {!post.is_approved && (
                            <>
                              <Button
                                size="sm"
                                onClick={() => handleModeratePost(post.id, "approve")}
                                className="bg-green-600 hover:bg-green-700"
                              >
                                <CheckCircle className="w-4 h-4 mr-1" />
                                Approve
                              </Button>
                              <Button
                                size="sm"
                                onClick={() => handleModeratePost(post.id, "reject")}
                                className="bg-red-600 hover:bg-red-700"
                              >
                                <XCircle className="w-4 h-4 mr-1" />
                                Reject
                              </Button>
                            </>
                          )}
                          <Button size="sm" variant="outline" onClick={() => handleDeletePost(post.id)}>
                            <Trash2 className="w-4 h-4 mr-1" />
                            Delete
                          </Button>
                          <Button size="sm" variant="outline">
                            <Edit className="w-4 h-4 mr-1" />
                            Edit
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="requests" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Pending Requests Management</CardTitle>
              </CardHeader>
              <CardContent>
                {pendingRequests.length === 0 ? (
                  <div className="text-center py-8">
                    <MessageSquare className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                    <p className="text-gray-500">No pending requests found</p>
                    <p className="text-sm text-gray-400">Maintenance and other requests will appear here</p>
                  </div>
                ) : (
                  <div className="space-y-4">
                    {pendingRequests.map((request: any) => (
                      <div key={request.id} className="border rounded-lg p-4">
                        <div className="flex items-start justify-between mb-3">
                          <div>
                            <h3 className="font-semibold">{request.title || "Untitled Request"}</h3>
                            <p className="text-sm text-slate-600">
                              {request.resident_name || "Unknown"} • Unit: {request.unit_number || "N/A"}
                            </p>
                            <p className="text-sm text-slate-500 mt-1">{request.description || "No description"}</p>
                          </div>
                          <div className="flex gap-2">
                            <Badge className="bg-orange-100 text-orange-800">{request.type || "General"}</Badge>
                            <Badge className="bg-red-100 text-red-800">{request.priority || "Normal"}</Badge>
                          </div>
                        </div>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2 text-sm text-slate-500">
                            <Clock className="w-4 h-4" />
                            {request.created_at ? new Date(request.created_at).toLocaleString() : "Unknown date"}
                          </div>
                          <div className="flex gap-2">
                            <Button size="sm" className="bg-blue-600 hover:bg-blue-700">
                              Respond
                            </Button>
                            <Button size="sm" className="bg-green-600 hover:bg-green-700">
                              Resolve
                            </Button>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="security" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <Card>
                <CardHeader>
                  <CardTitle>Security Controls</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <Button className="w-full justify-start bg-red-600 hover:bg-red-700">
                    <AlertTriangle className="w-4 h-4 mr-2" />
                    Emergency Lockdown
                  </Button>
                  <Button className="w-full justify-start" variant="outline">
                    <Shield className="w-4 h-4 mr-2" />
                    Access Control System
                  </Button>
                  <Button className="w-full justify-start" variant="outline">
                    <Eye className="w-4 h-4 mr-2" />
                    Security Camera Access
                  </Button>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>System Status</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Gate System</span>
                      <Badge className="bg-green-100 text-green-800">Online</Badge>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Security Cameras</span>
                      <Badge className="bg-green-100 text-green-800">Active</Badge>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Access Control</span>
                      <Badge className="bg-green-100 text-green-800">Operational</Badge>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Emergency System</span>
                      <Badge className="bg-green-100 text-green-800">Ready</Badge>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/resident-management-schema.sql" isMerged="true"
-- Add resident tracking tables
CREATE TABLE IF NOT EXISTS resident_monthly_stats (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    resident_id UUID REFERENCES users(id),
    month INTEGER NOT NULL,
    year INTEGER NOT NULL,
    access_codes_generated INTEGER DEFAULT 0,
    complaints_submitted INTEGER DEFAULT 0,
    maintenance_requests INTEGER DEFAULT 0,
    marketplace_posts INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(resident_id, month, year)
);

-- Add complaint tracking
CREATE TABLE IF NOT EXISTS complaints (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    resident_id UUID REFERENCES users(id),
    title VARCHAR(255) NOT NULL,
    description TEXT,
    category VARCHAR(100),
    priority VARCHAR(20) DEFAULT 'medium',
    status VARCHAR(50) DEFAULT 'pending',
    assigned_to UUID REFERENCES users(id),
    resolved_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create indexes for performance
CREATE INDEX IF NOT EXISTS idx_resident_monthly_stats_resident ON resident_monthly_stats(resident_id);
CREATE INDEX IF NOT EXISTS idx_resident_monthly_stats_date ON resident_monthly_stats(year, month);
CREATE INDEX IF NOT EXISTS idx_complaints_resident ON complaints(resident_id);
CREATE INDEX IF NOT EXISTS idx_complaints_status ON complaints(status);

-- Create function to update monthly stats
CREATE OR REPLACE FUNCTION update_resident_monthly_stats()
RETURNS TRIGGER AS $$
BEGIN
    -- Update stats based on the table being modified
    IF TG_TABLE_NAME = 'visitor_access_codes' THEN
        INSERT INTO resident_monthly_stats (resident_id, month, year, access_codes_generated)
        VALUES (NEW.resident_id, EXTRACT(MONTH FROM NOW()), EXTRACT(YEAR FROM NOW()), 1)
        ON CONFLICT (resident_id, month, year)
        DO UPDATE SET 
            access_codes_generated = resident_monthly_stats.access_codes_generated + 1,
            updated_at = NOW();
    ELSIF TG_TABLE_NAME = 'complaints' THEN
        INSERT INTO resident_monthly_stats (resident_id, month, year, complaints_submitted)
        VALUES (NEW.resident_id, EXTRACT(MONTH FROM NOW()), EXTRACT(YEAR FROM NOW()), 1)
        ON CONFLICT (resident_id, month, year)
        DO UPDATE SET 
            complaints_submitted = resident_monthly_stats.complaints_submitted + 1,
            updated_at = NOW();
    ELSIF TG_TABLE_NAME = 'maintenance_requests' THEN
        INSERT INTO resident_monthly_stats (resident_id, month, year, maintenance_requests)
        VALUES (NEW.resident_id, EXTRACT(MONTH FROM NOW()), EXTRACT(YEAR FROM NOW()), 1)
        ON CONFLICT (resident_id, month, year)
        DO UPDATE SET 
            maintenance_requests = resident_monthly_stats.maintenance_requests + 1,
            updated_at = NOW();
    END IF;
    
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create triggers to automatically update stats
DROP TRIGGER IF EXISTS trigger_update_visitor_code_stats ON visitor_access_codes;
CREATE TRIGGER trigger_update_visitor_code_stats
    AFTER INSERT ON visitor_access_codes
    FOR EACH ROW EXECUTE FUNCTION update_resident_monthly_stats();

DROP TRIGGER IF EXISTS trigger_update_complaint_stats ON complaints;
CREATE TRIGGER trigger_update_complaint_stats
    AFTER INSERT ON complaints
    FOR EACH ROW EXECUTE FUNCTION update_resident_monthly_stats();

DROP TRIGGER IF EXISTS trigger_update_maintenance_stats ON maintenance_requests;
CREATE TRIGGER trigger_update_maintenance_stats
    AFTER INSERT ON maintenance_requests
    FOR EACH ROW EXECUTE FUNCTION update_resident_monthly_stats();

-- Insert sample data for testing
INSERT INTO complaints (resident_id, title, description, category, priority, status) 
SELECT 
    u.id,
    'Noise complaint from Unit ' || u.unit,
    'Excessive noise during late hours',
    'Noise',
    'medium',
    'pending'
FROM users u 
WHERE u.role = 'resident' 
LIMIT 3
ON CONFLICT DO NOTHING;
[V0_FILE]typescriptreact:file="components/resident-management.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { useToast } from "@/hooks/use-toast"
import {
  Users,
  Home,
  QrCode,
  MessageSquare,
  Search,
  Eye,
  Phone,
  Mail,
  MapPin,
  Calendar,
  TrendingUp,
  AlertCircle,
} from "lucide-react"

interface Resident {
  id: string
  name: string
  email: string
  phone: string
  unit_number: string
  estate_name: string
  address: string
  registration_date: string
  monthly_access_codes: number
  total_complaints: number
  maintenance_requests: number
  marketplace_posts: number
  last_activity: string
}

export function ResidentManagement() {
  const [residents, setResidents] = useState<Resident[]>([])
  const [filteredResidents, setFilteredResidents] = useState<Resident[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedEstate, setSelectedEstate] = useState("all")
  const [isLoading, setIsLoading] = useState(true)
  const [selectedResident, setSelectedResident] = useState<Resident | null>(null)
  const { toast } = useToast()

// Sample data - replace with actual API call
  const sampleResidents: Resident[] = [
    {
      id: "1",
      name: "John Adebayo",
      email: "john.adebayo@email.com",
      phone: "+234 801 234 5678",
      unit_number: "A-15",
      estate_name: "Victoria Garden City (VGC)",
      address: "Block A, Unit 15, VGC Estate, Lekki, Lagos",
      registration_date: "2024-01-15",
      monthly_access_codes: 12,
      total_complaints: 2,
      maintenance_requests: 1,
      marketplace_posts: 3,
      last_activity: "2024-01-18T10:30:00Z",
    },
    {
      id: "2",
      name: "Sarah Okafor",
      email: "sarah.okafor@email.com",
      phone: "+234 802 345 6789",
      unit_number: "B-22",
      estate_name: "Lekki Gardens Estate Phase 2",
      address: "Block B, Unit 22, Lekki Gardens Phase 2, Lekki, Lagos",
      registration_date: "2024-01-10",
      monthly_access_codes: 8,
      total_complaints: 0,
      maintenance_requests: 3,
      marketplace_posts: 1,
      last_activity: "2024-01-17T14:20:00Z",
    },
    {
      id: "3",
      name: "Michael Emeka",
      email: "michael.emeka@email.com",
      phone: "+234 803 456 7890",
      unit_number: "House 45",
      estate_name: "Crown Estate",
      address: "House 45, Crown Estate, Sangotedo, Lagos",
      registration_date: "2024-01-05",
      monthly_access_codes: 15,
      total_complaints: 1,
      maintenance_requests: 0,
      marketplace_posts: 5,
      last_activity: "2024-01-19T09:15:00Z",
    },
    {
      id: "4",
      name: "Fatima Ibrahim",
      email: "fatima.ibrahim@email.com",
      phone: "+234 804 567 8901",
      unit_number: "C-08",
      estate_name: "Parkview Estate",
      address: "Block C, Unit 08, Parkview Estate, Ikoyi, Lagos",
      registration_date: "2024-01-20",
      monthly_access_codes: 6,
      total_complaints: 3,
      maintenance_requests: 2,
      marketplace_posts: 0,
      last_activity: "2024-01-19T16:45:00Z",
    },
    {
      id: "5",
      name: "David Ogundimu",
      email: "david.ogundimu@email.com",
      phone: "+234 805 678 9012",
      unit_number: "D-31",
      estate_name: "Banana Island Estate",
      address: "Block D, Unit 31, Banana Island Estate, Ikoyi, Lagos",
      registration_date: "2024-01-12",
      monthly_access_codes: 20,
      total_complaints: 0,
      maintenance_requests: 1,
      marketplace_posts: 2,
      last_activity: "2024-01-18T11:30:00Z",
    },
  ]

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

useEffect(() => {
    filterResidents()
  }, [searchTerm, selectedEstate, residents])

const loadResidents = async () => {
    setIsLoading(true)
    try {
      // Simulate API call - replace with actual API
      await new Promise((resolve) => setTimeout(resolve, 1000))
      setResidents(sampleResidents)
    } catch (error) {
      console.error("Failed to load residents:", error)
      toast({
        title: "Error",
        description: "Failed to load resident data. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const filterResidents = () => {
    let filtered = residents

// Filter by search term
    if (searchTerm) {
      filtered = filtered.filter(
        (resident) =>
          resident.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          resident.unit_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
          resident.estate_name.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

// Filter by estate
    if (selectedEstate !== "all") {
      filtered = filtered.filter((resident) => resident.estate_name === selectedEstate)
    }

setFilteredResidents(filtered)
  }

const getUniqueEstates = () => {
    const estates = residents.map((resident) => resident.estate_name)
    return [...new Set(estates)]
  }

const getTotalStats = () => {
    return {
      totalResidents: residents.length,
      totalAccessCodes: residents.reduce((sum, resident) => sum + resident.monthly_access_codes, 0),
      totalComplaints: residents.reduce((sum, resident) => sum + resident.total_complaints, 0),
      totalMaintenanceRequests: residents.reduce((sum, resident) => sum + resident.maintenance_requests, 0),
    }
  }

const stats = getTotalStats()

if (isLoading) {
    return (
      <div className="flex items-center justify-center py-8">
        <div className="text-center">
          <Users className="w-8 h-8 animate-pulse mx-auto mb-4 text-slate-400" />
          <p className="text-slate-600">Loading resident data...</p>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Stats Overview */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4 text-center">
            <Users className="w-8 h-8 text-blue-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{stats.totalResidents}</div>
            <p className="text-sm text-slate-600">Total Residents</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <QrCode className="w-8 h-8 text-green-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{stats.totalAccessCodes}</div>
            <p className="text-sm text-slate-600">Access Codes This Month</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <AlertCircle className="w-8 h-8 text-orange-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{stats.totalComplaints}</div>
            <p className="text-sm text-slate-600">Total Complaints</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <MessageSquare className="w-8 h-8 text-purple-500 mx-auto mb-2" />
            <div className="text-2xl font-bold text-slate-800">{stats.totalMaintenanceRequests}</div>
            <p className="text-sm text-slate-600">Maintenance Requests</p>
          </CardContent>
        </Card>
      </div>

{/* Search and Filter */}
      <Card>
        <CardHeader>
          <CardTitle>Resident Directory</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col md:flex-row gap-4 mb-6">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-4 h-4" />
                <Input
                  placeholder="Search by name, unit, or estate..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div className="md:w-64">
              <select
                value={selectedEstate}
                onChange={(e) => setSelectedEstate(e.target.value)}
                className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="all">All Estates</option>
                {getUniqueEstates().map((estate) => (
                  <option key={estate} value={estate}>
                    {estate}
                  </option>
                ))}
              </select>
            </div>
          </div>

{/* Residents List */}
          <div className="space-y-4">
            {filteredResidents.length === 0 ? (
              <div className="text-center py-8">
                <Users className="w-12 h-12 text-slate-400 mx-auto mb-4" />
                <p className="text-slate-500">No residents found</p>
                <p className="text-sm text-slate-400">Try adjusting your search or filter criteria</p>
              </div>
            ) : (
              filteredResidents.map((resident) => (
                <div key={resident.id} className="border rounded-lg p-4 hover:bg-slate-50 transition-colors">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <h3 className="text-lg font-semibold text-slate-800">{resident.name}</h3>
                        <Badge className="bg-blue-100 text-blue-800">{resident.unit_number}</Badge>
                      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                        <div className="space-y-2">
                          <div className="flex items-center gap-2 text-sm text-slate-600">
                            <Home className="w-4 h-4" />
                            <span>{resident.estate_name}</span>
                          </div>
                          <div className="flex items-center gap-2 text-sm text-slate-600">
                            <MapPin className="w-4 h-4" />
                            <span>{resident.address}</span>
                          </div>
                          <div className="flex items-center gap-2 text-sm text-slate-600">
                            <Calendar className="w-4 h-4" />
                            <span>Registered: {new Date(resident.registration_date).toLocaleDateString()}</span>
                          </div>
                        </div>

<div className="space-y-2">
                          <div className="flex items-center gap-2 text-sm text-slate-600">
                            <Mail className="w-4 h-4" />
                            <span>{resident.email}</span>
                          </div>
                          <div className="flex items-center gap-2 text-sm text-slate-600">
                            <Phone className="w-4 h-4" />
                            <span>{resident.phone}</span>
                          </div>
                          <div className="flex items-center gap-2 text-sm text-slate-600">
                            <TrendingUp className="w-4 h-4" />
                            <span>Last active: {new Date(resident.last_activity).toLocaleDateString()}</span>
                          </div>
                        </div>
                      </div>

{/* Activity Stats */}
                      <div className="flex flex-wrap gap-4 mb-3">
                        <div className="flex items-center gap-1">
                          <QrCode className="w-4 h-4 text-green-600" />
                          <span className="text-sm font-medium text-green-600">
                            {resident.monthly_access_codes} codes
                          </span>
                        </div>
                        <div className="flex items-center gap-1">
                          <AlertCircle className="w-4 h-4 text-orange-600" />
                          <span className="text-sm font-medium text-orange-600">
                            {resident.total_complaints} complaints
                          </span>
                        </div>
                        <div className="flex items-center gap-1">
                          <MessageSquare className="w-4 h-4 text-blue-600" />
                          <span className="text-sm font-medium text-blue-600">
                            {resident.maintenance_requests} maintenance
                          </span>
                        </div>
                        <div className="flex items-center gap-1">
                          <Users className="w-4 h-4 text-purple-600" />
                          <span className="text-sm font-medium text-purple-600">
                            {resident.marketplace_posts} marketplace
                          </span>
                        </div>
                      </div>
                    </div>

<div className="flex gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => setSelectedResident(resident)}
                        className="flex items-center gap-1"
                      >
                        <Eye className="w-4 h-4" />
                        View Details
                      </Button>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        </CardContent>
      </Card>

{/* Resident Detail Modal/Panel would go here */}
      {selectedResident && (
        <Card className="border-blue-200 bg-blue-50">
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              <span>Resident Details: {selectedResident.name}</span>
              <Button size="sm" variant="outline" onClick={() => setSelectedResident(null)}>
                Close
              </Button>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h4 className="font-semibold mb-3">Contact Information</h4>
                <div className="space-y-2 text-sm">
                  <p>
                    <strong>Email:</strong> {selectedResident.email}
                  </p>
                  <p>
                    <strong>Phone:</strong> {selectedResident.phone}
                  </p>
                  <p>
                    <strong>Unit:</strong> {selectedResident.unit_number}
                  </p>
                  <p>
                    <strong>Estate:</strong> {selectedResident.estate_name}
                  </p>
                  <p>
                    <strong>Address:</strong> {selectedResident.address}
                  </p>
                </div>
              </div>
              <div>
                <h4 className="font-semibold mb-3">Activity Summary</h4>
                <div className="space-y-2 text-sm">
                  <p>
                    <strong>Access Codes (This Month):</strong> {selectedResident.monthly_access_codes}
                  </p>
                  <p>
                    <strong>Total Complaints:</strong> {selectedResident.total_complaints}
                  </p>
                  <p>
                    <strong>Maintenance Requests:</strong> {selectedResident.maintenance_requests}
                  </p>
                  <p>
                    <strong>Marketplace Posts:</strong> {selectedResident.marketplace_posts}
                  </p>
                  <p>
                    <strong>Registration Date:</strong>{" "}
                    {new Date(selectedResident.registration_date).toLocaleDateString()}
                  </p>
                  <p>
                    <strong>Last Activity:</strong> {new Date(selectedResident.last_activity).toLocaleString()}
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/auth-forms.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/hooks/use-toast"
import { Eye, EyeOff, Mail, Lock, User, Phone } from "lucide-react"

interface AuthFormsProps {
  onAuthSuccess: (user: any) => void
}

export function AuthForms({ onAuthSuccess }: AuthFormsProps) {
  const [showPassword, setShowPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()

// Sign In Form State
  const [signInData, setSignInData] = useState({
    email: "",
    password: "",
  })

// Sign Up Form State
  const [signUpData, setSignUpData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    password: "",
    confirmPassword: "",
  })

const handleGoogleSignIn = async () => {
    setIsLoading(true)
    try {
      // Simulate Google OAuth flow
      await new Promise((resolve) => setTimeout(resolve, 1500))

const mockGoogleUser = {
        id: "google_" + Date.now(),
        name: "John Doe",
        email: "john.doe@gmail.com",
        picture: "https://lh3.googleusercontent.com/a/default-user=s96-c",
        provider: "google",
      }

toast({
        title: "Success!",
        description: "Signed in with Google successfully",
      })

onAuthSuccess(mockGoogleUser)
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to sign in with Google",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleFacebookSignIn = async () => {
    setIsLoading(true)
    try {
      // Simulate Facebook OAuth flow
      await new Promise((resolve) => setTimeout(resolve, 1500))

const mockFacebookUser = {
        id: "facebook_" + Date.now(),
        name: "Jane Smith",
        email: "jane.smith@facebook.com",
        picture: "https://graph.facebook.com/v12.0/me/picture?type=large",
        provider: "facebook",
      }

toast({
        title: "Success!",
        description: "Signed in with Facebook successfully",
      })

onAuthSuccess(mockFacebookUser)
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to sign in with Facebook",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleEmailSignIn = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

try {
      // Simulate email sign in
      await new Promise((resolve) => setTimeout(resolve, 1000))

if (signInData.email && signInData.password) {
        const mockEmailUser = {
          id: "email_" + Date.now(),
          name: signInData.email.split("@")[0],
          email: signInData.email,
          provider: "email",
        }

toast({
          title: "Success!",
          description: "Signed in successfully",
        })

onAuthSuccess(mockEmailUser)
      } else {
        throw new Error("Please fill in all fields")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Invalid email or password",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleEmailSignUp = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

try {
      // Validate form
      if (!signUpData.firstName || !signUpData.lastName || !signUpData.email || !signUpData.password) {
        throw new Error("Please fill in all required fields")
      }

if (signUpData.password !== signUpData.confirmPassword) {
        throw new Error("Passwords do not match")
      }

if (signUpData.password.length < 6) {
        throw new Error("Password must be at least 6 characters")
      }

// Simulate account creation
      await new Promise((resolve) => setTimeout(resolve, 1500))

const newUser = {
        id: "new_" + Date.now(),
        name: `${signUpData.firstName} ${signUpData.lastName}`,
        email: signUpData.email,
        phone: signUpData.phone,
        provider: "email",
      }

toast({
        title: "Account Created!",
        description: "Your account has been created successfully",
      })

onAuthSuccess(newUser)
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to create account",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="w-full max-w-md mx-auto">
      <Card>
        <CardHeader className="text-center">
          <CardTitle className="text-2xl font-bold">Welcome to eDAS Access</CardTitle>
          <CardDescription>Sign in or create an account to continue with registration</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="signin" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="signin">Sign In</TabsTrigger>
              <TabsTrigger value="signup">Sign Up</TabsTrigger>
            </TabsList>

<TabsContent value="signin" className="space-y-4">
              {/* Social Sign In Buttons */}
              <div className="space-y-3">
                <Button onClick={handleGoogleSignIn} disabled={isLoading} variant="outline" className="w-full">
                  <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
                    <path
                      fill="#4285F4"
                      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                    />
                    <path
                      fill="#34A853"
                      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                    />
                    <path
                      fill="#FBBC05"
                      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                    />
                    <path
                      fill="#EA4335"
                      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                    />
                  </svg>
                  Continue with Google
                </Button>

<Button onClick={handleFacebookSignIn} disabled={isLoading} variant="outline" className="w-full">
                  <svg className="w-5 h-5 mr-2" fill="#1877F2" viewBox="0 0 24 24">
                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                  </svg>
                  Continue with Facebook
                </Button>
              </div>

<div className="relative">
                <div className="absolute inset-0 flex items-center">
                  <Separator className="w-full" />
                </div>
                <div className="relative flex justify-center text-xs uppercase">
                  <span className="bg-background px-2 text-muted-foreground">Or continue with email</span>
                </div>
              </div>

{/* Email Sign In Form */}
              <form onSubmit={handleEmailSignIn} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="signin-email">Email</Label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="signin-email"
                      type="email"
                      placeholder="Enter your email"
                      className="pl-10"
                      value={signInData.email}
                      onChange={(e) => setSignInData({ ...signInData, email: e.target.value })}
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="signin-password">Password</Label>
                  <div className="relative">
                    <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="signin-password"
                      type={showPassword ? "text" : "password"}
                      placeholder="Enter your password"
                      className="pl-10 pr-10"
                      value={signInData.password}
                      onChange={(e) => setSignInData({ ...signInData, password: e.target.value })}
                      required
                    />
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                      onClick={() => setShowPassword(!showPassword)}
                    >
                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </Button>
                  </div>
                </div>

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

<TabsContent value="signup" className="space-y-4">
              {/* Social Sign Up Buttons */}
              <div className="space-y-3">
                <Button onClick={handleGoogleSignIn} disabled={isLoading} variant="outline" className="w-full">
                  <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
                    <path
                      fill="#4285F4"
                      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                    />
                    <path
                      fill="#34A853"
                      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                    />
                    <path
                      fill="#FBBC05"
                      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                    />
                    <path
                      fill="#EA4335"
                      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                    />
                  </svg>
                  Sign up with Google
                </Button>

<Button onClick={handleFacebookSignIn} disabled={isLoading} variant="outline" className="w-full">
                  <svg className="w-5 h-5 mr-2" fill="#1877F2" viewBox="0 0 24 24">
                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                  </svg>
                  Sign up with Facebook
                </Button>
              </div>

<div className="relative">
                <div className="absolute inset-0 flex items-center">
                  <Separator className="w-full" />
                </div>
                <div className="relative flex justify-center text-xs uppercase">
                  <span className="bg-background px-2 text-muted-foreground">Or create account with email</span>
                </div>
              </div>

{/* Email Sign Up Form */}
              <form onSubmit={handleEmailSignUp} className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="firstName">First Name</Label>
                    <div className="relative">
                      <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                      <Input
                        id="firstName"
                        placeholder="First name"
                        className="pl-10"
                        value={signUpData.firstName}
                        onChange={(e) => setSignUpData({ ...signUpData, firstName: e.target.value })}
                        required
                      />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="lastName">Last Name</Label>
                    <div className="relative">
                      <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                      <Input
                        id="lastName"
                        placeholder="Last name"
                        className="pl-10"
                        value={signUpData.lastName}
                        onChange={(e) => setSignUpData({ ...signUpData, lastName: e.target.value })}
                        required
                      />
                    </div>
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="signup-email">Email</Label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="signup-email"
                      type="email"
                      placeholder="Enter your email"
                      className="pl-10"
                      value={signUpData.email}
                      onChange={(e) => setSignUpData({ ...signUpData, email: e.target.value })}
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="phone">Phone Number (Optional)</Label>
                  <div className="relative">
                    <Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="phone"
                      type="tel"
                      placeholder="Enter your phone number"
                      className="pl-10"
                      value={signUpData.phone}
                      onChange={(e) => setSignUpData({ ...signUpData, phone: e.target.value })}
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="signup-password">Password</Label>
                  <div className="relative">
                    <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="signup-password"
                      type={showPassword ? "text" : "password"}
                      placeholder="Create a password"
                      className="pl-10 pr-10"
                      value={signUpData.password}
                      onChange={(e) => setSignUpData({ ...signUpData, password: e.target.value })}
                      required
                    />
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                      onClick={() => setShowPassword(!showPassword)}
                    >
                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </Button>
                  </div>
                </div>

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

<Button type="submit" className="w-full" disabled={isLoading}>
                  {isLoading ? "Creating Account..." : "Create Account"}
                </Button>
              </form>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}

// Default export for backward compatibility
export default AuthForms
[V0_FILE]typescriptreact:file="components/pwa-qr-code.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { QrCode, Smartphone } from "lucide-react"

interface PWAQRCodeProps {
  size?: number
  showInstructions?: boolean
  title?: string
}

export function PWAQRCode({
  size = 200,
  showInstructions = true,
  title = "Scan to Install eDAS Access",
}: PWAQRCodeProps) {
  const [qrCodeUrl, setQrCodeUrl] = useState("")
  const appUrl = typeof window !== "undefined" ? `${window.location.origin}/pwa` : "https://your-domain.vercel.app/pwa"

useEffect(() => {
    // Generate QR code using a free QR code API
    const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(appUrl)}&format=png&margin=10`
    setQrCodeUrl(qrUrl)
  }, [appUrl, size])

return (
    <Card className="w-full max-w-sm mx-auto">
      <CardHeader className="text-center pb-4">
        <CardTitle className="flex items-center justify-center gap-2 text-lg">
          <QrCode className="w-5 h-5 text-teal-600" />
          {title}
        </CardTitle>
      </CardHeader>

<CardContent className="text-center space-y-4">
        {/* QR Code */}
        <div className="flex justify-center">
          <div className="p-4 bg-white rounded-lg border-2 border-gray-200">
            {qrCodeUrl && (
              <img
                src={qrCodeUrl || "/placeholder.svg"}
                alt="QR Code for eDAS Access App"
                className="w-full h-auto"
                style={{ width: size, height: size }}
              />
            )}
          </div>
        </div>

{/* Instructions */}
        {showInstructions && (
          <div className="space-y-3">
            <div className="bg-teal-50 p-3 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <Smartphone className="w-4 h-4 text-teal-600" />
                <span className="font-semibold text-teal-800 text-sm">How to Install:</span>
              </div>
              <ol className="text-xs text-teal-700 space-y-1 list-decimal list-inside">
                <li>Scan QR code with your phone camera</li>
                <li>Tap the notification or link that appears</li>
                <li>Tap "Install App Now" on the page</li>
                <li>App will be added to your home screen</li>
              </ol>
            </div>

<div className="text-xs text-gray-500">
              <p className="font-semibold mb-1">Estate Management Features:</p>
              <p>• Visitor Access Codes • Maintenance Requests</p>
              <p>• Community Marketplace • Estate Announcements</p>
            </div>
          </div>
        )}

{/* Direct Link */}
        <div className="pt-2 border-t">
          <p className="text-xs text-gray-500 mb-2">Or visit directly:</p>
          <code className="text-xs bg-gray-100 px-2 py-1 rounded break-all">{appUrl}</code>
        </div>
      </CardContent>
    </Card>
  )
}

// Standalone QR Code for embedding
export function EmbeddableQRCode({ size = 150 }: { size?: number }) {
  const [qrCodeUrl, setQrCodeUrl] = useState("")
  const appUrl = typeof window !== "undefined" ? `${window.location.origin}/pwa` : "https://your-domain.vercel.app/pwa"

useEffect(() => {
    const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(appUrl)}&format=png&margin=5`
    setQrCodeUrl(qrUrl)
  }, [appUrl, size])

return (
    <div className="text-center">
      <div className="inline-block p-2 bg-white rounded-lg border">
        {qrCodeUrl && (
          <img
            src={qrCodeUrl || "/placeholder.svg"}
            alt="Scan to install eDAS Access"
            style={{ width: size, height: size }}
          />
        )}
      </div>
      <p className="text-sm font-semibold mt-2">Scan to Install eDAS Access</p>
      <p className="text-xs text-gray-600">Estate Management App</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pwa/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Smartphone, Monitor, Download, QrCode, CheckCircle, Home, Users, Settings, Shield } from "lucide-react"

export default function PWALauncher() {
  const [deferredPrompt, setDeferredPrompt] = useState<any>(null)
  const [isInstalled, setIsInstalled] = useState(false)
  const [isInstalling, setIsInstalling] = useState(false)
  const [deviceType, setDeviceType] = useState<"mobile" | "desktop">("mobile")

useEffect(() => {
    // Detect device type
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    setDeviceType(isMobile ? "mobile" : "desktop")

// Check if app is already installed
    if (window.matchMedia("(display-mode: standalone)").matches) {
      setIsInstalled(true)
    }

// Listen for the beforeinstallprompt event
    const handleBeforeInstallPrompt = (e: Event) => {
      e.preventDefault()
      setDeferredPrompt(e)
    }

window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt)

// Auto-redirect to main app after 3 seconds if already installed
    if (isInstalled) {
      setTimeout(() => {
        window.location.href = "https://edasaccess.vercel.app/"
      }, 3000)
    }

return () => {
      window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt)
    }
  }, [isInstalled])

const installPWA = async () => {
    if (!deferredPrompt) {
      // Fallback: redirect to main app
      window.location.href = "https://edasaccess.vercel.app/"
      return
    }

setIsInstalling(true)

try {
      deferredPrompt.prompt()
      const { outcome } = await deferredPrompt.userChoice

if (outcome === "accepted") {
        setIsInstalled(true)
        setTimeout(() => {
          window.location.href = "https://edasaccess.vercel.app/"
        }, 2000)
      }
    } catch (error) {
      console.error("Installation failed:", error)
      // Fallback: redirect to main app
      window.location.href = "https://edasaccess.vercel.app/"
    } finally {
      setIsInstalling(false)
      setDeferredPrompt(null)
    }
  }

const openApp = () => {
    window.location.href = "https://edasaccess.vercel.app/"
  }

if (isInstalled) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-teal-900 flex items-center justify-center p-4">
        <Card className="w-full max-w-md text-center bg-white/95 backdrop-blur">
          <CardHeader>
            <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
              <CheckCircle className="w-8 h-8 text-green-600" />
            </div>
            <CardTitle className="text-2xl text-green-800">eDAS Access Installed!</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-gray-600 mb-6">eDAS Access is now installed on your device. Opening the app...</p>
            <Button onClick={openApp} className="w-full bg-teal-600 hover:bg-teal-700">
              <Home className="w-4 h-4 mr-2" />
              Open eDAS Access Now
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-teal-900 flex items-center justify-center p-4">
      <Card className="w-full max-w-lg bg-white/95 backdrop-blur">
        <CardHeader className="text-center">
          <div className="mx-auto w-24 h-24 bg-gradient-to-br from-teal-500 to-blue-600 rounded-full flex items-center justify-center mb-4 shadow-lg">
            <Shield className="w-12 h-12 text-white" />
          </div>
          <CardTitle className="text-3xl text-slate-800 mb-2">eDAS Access</CardTitle>
          <p className="text-lg text-teal-600 font-semibold">Estate Management System</p>
          <p className="text-gray-600">Install the app for the best experience</p>
        </CardHeader>

<CardContent className="space-y-6">
          {/* Install Button */}
          <Button
            onClick={installPWA}
            disabled={isInstalling}
            className="w-full bg-gradient-to-r from-teal-600 to-blue-600 hover:from-teal-700 hover:to-blue-700 text-white py-4 text-lg font-semibold shadow-lg"
          >
            <Download className="w-5 h-5 mr-2" />
            {isInstalling ? "Installing eDAS Access..." : "📱 Install eDAS Access App"}
          </Button>

{/* Or Open in Browser */}
          <div className="text-center">
            <p className="text-sm text-gray-500 mb-3">Or use without installing</p>
            <Button onClick={openApp} variant="outline" className="w-full border-teal-200 hover:bg-teal-50">
              Open in Browser
            </Button>
          </div>

{/* Features Grid */}
          <div className="bg-gradient-to-r from-teal-50 to-blue-50 p-5 rounded-xl">
            <h3 className="font-bold text-slate-800 mb-4 text-center">🏠 Estate Management Features</h3>
            <div className="grid grid-cols-2 gap-3 text-sm">
              <div className="flex items-center gap-2 text-slate-700">
                <QrCode className="w-4 h-4 text-teal-600" />
                <span>Visitor Access Codes</span>
              </div>
              <div className="flex items-center gap-2 text-slate-700">
                <Settings className="w-4 h-4 text-teal-600" />
                <span>Maintenance Requests</span>
              </div>
              <div className="flex items-center gap-2 text-slate-700">
                <Users className="w-4 h-4 text-teal-600" />
                <span>Community Marketplace</span>
              </div>
              <div className="flex items-center gap-2 text-slate-700">
                <Shield className="w-4 h-4 text-teal-600" />
                <span>Security Management</span>
              </div>
            </div>
          </div>

{/* Installation Instructions */}
          <div className="bg-slate-50 p-4 rounded-lg">
            <h4 className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
              {deviceType === "mobile" ? <Smartphone className="w-4 h-4" /> : <Monitor className="w-4 h-4" />}
              Installation Instructions
            </h4>

{deviceType === "mobile" ? (
              <div className="space-y-2 text-sm text-slate-600">
                <div className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    1
                  </span>
                  <span>Tap "Install eDAS Access App" button above</span>
                </div>
                <div className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    2
                  </span>
                  <span>Tap "Install" or "Add to Home Screen" when prompted</span>
                </div>
                <div className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    3
                  </span>
                  <span>App will appear on your home screen like any other app</span>
                </div>
              </div>
            ) : (
              <div className="space-y-2 text-sm text-slate-600">
                <div className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    1
                  </span>
                  <span>Click "Install eDAS Access App" button above</span>
                </div>
                <div className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    2
                  </span>
                  <span>Click "Install" in the popup that appears</span>
                </div>
                <div className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    3
                  </span>
                  <span>App will be added to your applications menu</span>
                </div>
              </div>
            )}
          </div>

{/* App URL */}
          <div className="text-center pt-2 border-t border-gray-200">
            <p className="text-xs text-gray-500 mb-2">Direct link:</p>
            <code className="text-xs bg-gray-100 px-3 py-1 rounded font-mono">edasaccess.vercel.app</code>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/edas-qr-code.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Smartphone, Shield } from "lucide-react"

interface EDASQRCodeProps {
  size?: number
  showInstructions?: boolean
  title?: string
}

export function EDASQRCode({
  size = 200,
  showInstructions = true,
  title = "Scan to Install eDAS Access",
}: EDASQRCodeProps) {
  const [qrCodeUrl, setQrCodeUrl] = useState("")
  const appUrl = "https://edasaccess.vercel.app/pwa"

useEffect(() => {
    // Generate QR code using QR Server API
    const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(appUrl)}&format=png&margin=10&bgcolor=FFFFFF&color=0F766E`
    setQrCodeUrl(qrUrl)
  }, [appUrl, size])

return (
    <Card className="w-full max-w-sm mx-auto bg-gradient-to-br from-white to-teal-50 border-teal-200">
      <CardHeader className="text-center pb-4">
        <div className="mx-auto w-12 h-12 bg-gradient-to-br from-teal-500 to-blue-600 rounded-full flex items-center justify-center mb-3">
          <Shield className="w-6 h-6 text-white" />
        </div>
        <CardTitle className="text-lg text-slate-800">{title}</CardTitle>
        <p className="text-sm text-teal-600 font-semibold">Estate Management System</p>
      </CardHeader>

<CardContent className="text-center space-y-4">
        {/* QR Code */}
        <div className="flex justify-center">
          <div className="p-4 bg-white rounded-xl border-2 border-teal-200 shadow-lg">
            {qrCodeUrl && (
              <img
                src={qrCodeUrl || "/placeholder.svg"}
                alt="QR Code for eDAS Access App"
                className="w-full h-auto rounded-lg"
                style={{ width: size, height: size }}
              />
            )}
          </div>
        </div>

{/* Instructions */}
        {showInstructions && (
          <div className="space-y-3">
            <div className="bg-gradient-to-r from-teal-50 to-blue-50 p-4 rounded-lg border border-teal-100">
              <div className="flex items-center gap-2 mb-3">
                <Smartphone className="w-4 h-4 text-teal-600" />
                <span className="font-semibold text-teal-800 text-sm">📱 How to Install:</span>
              </div>
              <ol className="text-xs text-slate-700 space-y-1.5 list-decimal list-inside text-left">
                <li>Open your phone's camera app</li>
                <li>Point camera at the QR code above</li>
                <li>Tap the notification that appears</li>
                <li>Tap "Install eDAS Access App"</li>
                <li>App will be added to your home screen</li>
              </ol>
            </div>

<div className="bg-slate-50 p-3 rounded-lg">
              <p className="font-semibold mb-2 text-xs text-slate-800">🏠 Key Features:</p>
              <div className="grid grid-cols-2 gap-1 text-xs text-slate-600">
                <div>• Visitor QR Codes</div>
                <div>• Maintenance Requests</div>
                <div>• Community Market</div>
                <div>• Estate Announcements</div>
              </div>
            </div>
          </div>
        )}

{/* Direct Link */}
        <div className="pt-3 border-t border-teal-100">
          <p className="text-xs text-gray-500 mb-2">Or visit directly:</p>
          <div className="bg-gray-100 px-3 py-2 rounded-lg">
            <code className="text-xs font-mono text-teal-700">edasaccess.vercel.app/pwa</code>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

// Standalone QR Code for embedding anywhere
export function EmbeddableEDASQR({ size = 150 }: { size?: number }) {
  const [qrCodeUrl, setQrCodeUrl] = useState("")
  const appUrl = "https://edasaccess.vercel.app/pwa"

useEffect(() => {
    const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(appUrl)}&format=png&margin=5&bgcolor=FFFFFF&color=0F766E`
    setQrCodeUrl(qrUrl)
  }, [appUrl, size])

return (
    <div className="text-center">
      <div className="inline-block p-3 bg-white rounded-xl border-2 border-teal-200 shadow-lg">
        {qrCodeUrl && (
          <img
            src={qrCodeUrl || "/placeholder.svg"}
            alt="Scan to install eDAS Access"
            style={{ width: size, height: size }}
            className="rounded-lg"
          />
        )}
      </div>
      <div className="mt-3">
        <p className="text-sm font-bold text-slate-800">📱 Scan to Install eDAS Access</p>
        <p className="text-xs text-teal-600 font-semibold">Estate Management System</p>
        <p className="text-xs text-gray-500 mt-1">edasaccess.vercel.app</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/qr-download/page.tsx" isEdit="true" isMerged="true"
import { EDASQRCode } from "@/components/edas-qr-code"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Shield, Smartphone, Monitor, QrCode } from "lucide-react"

export default function QRDownloadPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-teal-900 py-8 px-4">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="text-center mb-8">
          <div className="mx-auto w-20 h-20 bg-gradient-to-br from-teal-500 to-blue-600 rounded-full flex items-center justify-center mb-4 shadow-xl">
            <Shield className="w-10 h-10 text-white" />
          </div>
          <h1 className="text-4xl font-bold text-white mb-4">Install eDAS Access App</h1>
          <p className="text-xl text-teal-200">Scan the QR code below to install instantly on your device</p>
        </div>

{/* Main QR Code */}
        <div className="flex justify-center mb-8">
          <EDASQRCode size={280} />
        </div>

{/* Installation Methods */}
        <div className="grid md:grid-cols-2 gap-6 mb-8">
          <Card className="bg-white/95 backdrop-blur">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-teal-800">
                <Smartphone className="w-5 h-5" />📱 Mobile Installation
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ol className="space-y-2 text-sm text-slate-700">
                <li className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    1
                  </span>
                  <span>Open your phone's camera app</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    2
                  </span>
                  <span>Point the camera at the QR code above</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    3
                  </span>
                  <span>Tap the notification that appears</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    4
                  </span>
                  <span>Tap "Install eDAS Access App"</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    5
                  </span>
                  <span>App appears on your home screen!</span>
                </li>
              </ol>
            </CardContent>
          </Card>

<Card className="bg-white/95 backdrop-blur">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-teal-800">
                <Monitor className="w-5 h-5" />💻 Desktop Installation
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ol className="space-y-2 text-sm text-slate-700">
                <li className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    1
                  </span>
                  <span>
                    Visit: <code className="bg-gray-100 px-1 rounded">edasaccess.vercel.app/pwa</code>
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    2
                  </span>
                  <span>Click "Install eDAS Access App"</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    3
                  </span>
                  <span>Click "Install" in the popup</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    4
                  </span>
                  <span>App installs like desktop software</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="bg-teal-100 text-teal-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
                    5
                  </span>
                  <span>Access from your applications menu</span>
                </li>
              </ol>
            </CardContent>
          </Card>
        </div>

{/* Features Overview */}
        <Card className="bg-white/95 backdrop-blur">
          <CardHeader>
            <CardTitle className="text-center text-teal-800">🏠 eDAS Access Features</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid md:grid-cols-4 gap-4 text-center">
              <div className="p-4 bg-teal-50 rounded-lg">
                <QrCode className="w-8 h-8 text-teal-600 mx-auto mb-2" />
                <h3 className="font-semibold text-slate-800 mb-1">Visitor Access</h3>
                <p className="text-xs text-slate-600">Generate QR codes for guests</p>
              </div>
              <div className="p-4 bg-blue-50 rounded-lg">
                <Shield className="w-8 h-8 text-blue-600 mx-auto mb-2" />
                <h3 className="font-semibold text-slate-800 mb-1">Security</h3>
                <p className="text-xs text-slate-600">Estate security management</p>
              </div>
              <div className="p-4 bg-green-50 rounded-lg">
                <Smartphone className="w-8 h-8 text-green-600 mx-auto mb-2" />
                <h3 className="font-semibold text-slate-800 mb-1">Maintenance</h3>
                <p className="text-xs text-slate-600">Submit and track requests</p>
              </div>
              <div className="p-4 bg-purple-50 rounded-lg">
                <Monitor className="w-8 h-8 text-purple-600 mx-auto mb-2" />
                <h3 className="font-semibold text-slate-800 mb-1">Community</h3>
                <p className="text-xs text-slate-600">Marketplace and announcements</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Direct Links */}
        <div className="text-center mt-8">
          <div className="bg-white/10 backdrop-blur rounded-lg p-6">
            <h3 className="text-white font-semibold mb-4">Direct Links</h3>
            <div className="space-y-2 text-sm">
              <div className="text-teal-200">
                <strong>Install Page:</strong> <code>edasaccess.vercel.app/pwa</code>
              </div>
              <div className="text-teal-200">
                <strong>Main App:</strong> <code>edasaccess.vercel.app</code>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/embed/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Copy, Code, Download, QrCode } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export default function EmbedPage() {
  const { toast } = useToast()
  const [copiedCode, setCopiedCode] = useState("")

const embedCodes = {
    downloadButton: `
<a href="https://edasaccess.vercel.app/pwa" 
   style="display: inline-block; background: linear-gradient(135deg, #0f766e, #1e40af); 
          color: white; padding: 14px 28px; border-radius: 10px; text-decoration: none; 
          font-weight: 600; font-family: Arial, sans-serif; box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
          transition: transform 0.2s;"
   target="_blank"
   onmouseover="this.style.transform='translateY(-2px)'"
   onmouseout="this.style.transform='translateY(0)'">
   📱 Install eDAS Access App
</a>`,

qrCode: `
<div style="text-align: center; padding: 25px; font-family: Arial, sans-serif; 
            background: linear-gradient(135deg, #f0fdfa, #ecfdf5); border-radius: 15px; 
            border: 2px solid #14b8a6; max-width: 280px; margin: 20px auto;">
  <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #14b8a6, #1e40af); 
              border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; 
              justify-content: center; box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);">
    <span style="color: white; font-size: 24px;">🛡️</span>
  </div>
  <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https%3A//edasaccess.vercel.app/pwa&format=png&margin=10&bgcolor=FFFFFF&color=0F766E" 
       alt="Scan to install eDAS Access" 
       style="border: 3px solid #14b8a6; border-radius: 12px; padding: 10px; background: white; 
              box-shadow: 0 6px 20px rgba(20, 184, 166, 0.2);" />
  <h3 style="margin: 15px 0 5px 0; font-weight: bold; color: #0f766e; font-size: 18px;">
    📱 Scan to Install eDAS Access
  </h3>
  <p style="margin: 0 0 10px 0; font-size: 14px; color: #14b8a6; font-weight: 600;">
    Estate Management System
  </p>
  <p style="margin: 0; font-size: 12px; color: #6b7280;">
    edasaccess.vercel.app
  </p>
</div>`,

fullWidget: `
<div style="max-width: 320px; margin: 25px auto; padding: 25px; 
            background: linear-gradient(135deg, #ffffff, #f0fdfa); 
            border: 2px solid #14b8a6; border-radius: 20px; text-align: center; 
            font-family: Arial, sans-serif; box-shadow: 0 8px 25px rgba(20, 184, 166, 0.15);">
  
  
  <div style="margin-bottom: 20px;">
    <div style="width: 70px; height: 70px; background: linear-gradient(135deg, #14b8a6, #1e40af); 
                border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; 
                justify-content: center; box-shadow: 0 6px 20px rgba(20, 184, 166, 0.3);">
      <span style="color: white; font-size: 32px;">🛡️</span>
    </div>
    <h3 style="margin: 0 0 5px 0; color: #0f766e; font-size: 22px; font-weight: bold;">
      eDAS Access
    </h3>
    <p style="margin: 0; color: #14b8a6; font-size: 14px; font-weight: 600;">
      Estate Management System
    </p>
  </div>

<img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=https%3A//edasaccess.vercel.app/pwa&format=png&margin=8&bgcolor=FFFFFF&color=0F766E" 
       alt="QR Code" 
       style="border: 3px solid #14b8a6; border-radius: 12px; margin-bottom: 20px; 
              background: white; box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2);" />
  
  
  <p style="margin: 0 0 20px 0; font-size: 13px; color: #374151; line-height: 1.4;">
    Scan QR code with your phone camera or click button below to install
  </p>
  
  
  <a href="https://edasaccess.vercel.app/pwa" 
     style="display: inline-block; background: linear-gradient(135deg, #0f766e, #1e40af); 
            color: white; padding: 12px 24px; border-radius: 10px; text-decoration: none; 
            font-weight: 600; font-size: 14px; box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
            transition: transform 0.2s;"
     target="_blank"
     onmouseover="this.style.transform='translateY(-2px)'"
     onmouseout="this.style.transform='translateY(0)'">
     📱 Install Now
  </a>
  
  
  <div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #d1fae5;">
    <p style="margin: 0; font-size: 11px; color: #6b7280; line-height: 1.3;">
      🔐 Visitor QR Codes • 🔧 Maintenance • 🏪 Marketplace • 📢 Announcements
    </p>
  </div>
</div>`,
  }

const copyToClipboard = (code: string, type: string) => {
    navigator.clipboard.writeText(code)
    setCopiedCode(type)
    toast({
      title: "Code Copied!",
      description: `${type} code copied to clipboard`,
    })
    setTimeout(() => setCopiedCode(""), 2000)
  }

return (
    <div className="container mx-auto px-4 py-8 max-w-5xl">
      <div className="text-center mb-8">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">Embed eDAS Access Download</h1>
        <p className="text-lg text-gray-600">
          Copy and paste these codes into your website to add eDAS Access download options
        </p>
        <div className="mt-4 p-4 bg-teal-50 rounded-lg border border-teal-200">
          <p className="text-teal-800 font-semibold">
            🔗 Direct Install Link: <code className="bg-white px-2 py-1 rounded">edasaccess.vercel.app/pwa</code>
          </p>
        </div>
      </div>

<div className="space-y-8">
        {/* Download Button */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Download className="w-5 h-5" />
              Download Button
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="p-6 bg-gray-50 rounded-lg">
                <div dangerouslySetInnerHTML={{ __html: embedCodes.downloadButton }} />
              </div>
              <div className="relative">
                <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto max-h-64">
                  <code>{embedCodes.downloadButton}</code>
                </pre>
                <Button
                  onClick={() => copyToClipboard(embedCodes.downloadButton, "Download Button")}
                  className="absolute top-2 right-2"
                  size="sm"
                  variant="secondary"
                >
                  <Copy className="w-4 h-4" />
                  {copiedCode === "Download Button" ? "Copied!" : "Copy"}
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

{/* QR Code */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <QrCode className="w-5 h-5" />
              QR Code Widget
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="p-6 bg-gray-50 rounded-lg flex justify-center">
                <div dangerouslySetInnerHTML={{ __html: embedCodes.qrCode }} />
              </div>
              <div className="relative">
                <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto max-h-64">
                  <code>{embedCodes.qrCode}</code>
                </pre>
                <Button
                  onClick={() => copyToClipboard(embedCodes.qrCode, "QR Code")}
                  className="absolute top-2 right-2"
                  size="sm"
                  variant="secondary"
                >
                  <Copy className="w-4 h-4" />
                  {copiedCode === "QR Code" ? "Copied!" : "Copy"}
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Full Widget */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Code className="w-5 h-5" />
              Complete Installation Widget
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="p-6 bg-gray-50 rounded-lg flex justify-center">
                <div dangerouslySetInnerHTML={{ __html: embedCodes.fullWidget }} />
              </div>
              <div className="relative">
                <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto max-h-80">
                  <code>{embedCodes.fullWidget}</code>
                </pre>
                <Button
                  onClick={() => copyToClipboard(embedCodes.fullWidget, "Full Widget")}
                  className="absolute top-2 right-2"
                  size="sm"
                  variant="secondary"
                >
                  <Copy className="w-4 h-4" />
                  {copiedCode === "Full Widget" ? "Copied!" : "Copy"}
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Usage Instructions */}
      <Card className="mt-8">
        <CardHeader>
          <CardTitle>🚀 How to Use These Codes</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <h3 className="font-semibold text-teal-800 mb-3">For Website Owners:</h3>
              <ul className="space-y-2 text-sm text-gray-600">
                <li>• Copy any code above</li>
                <li>• Paste into your website's HTML</li>
                <li>• Visitors can click to install eDAS Access</li>
                <li>• Works on all devices (mobile & desktop)</li>
              </ul>
            </div>
            <div>
              <h3 className="font-semibold text-teal-800 mb-3">For Estate Managers:</h3>
              <ul className="space-y-2 text-sm text-gray-600">
                <li>• Add to estate websites</li>
                <li>• Include in email newsletters</li>
                <li>• Print QR codes for notice boards</li>
                <li>• Share in WhatsApp groups</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/mobile-navigation.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import {
  Home,
  Bell,
  MessageSquare,
  Shield,
  Car,
  Users,
  QrCode,
  Wrench,
  Calendar,
  MapPin,
  UserCheck,
  ShoppingBag,
  CreditCard,
  Zap,
  Building,
  AlertTriangle,
  UserPlus,
  Settings,
  BarChart3,
  Menu,
  X,
  LogOut,
} from "lucide-react"

const navigationItems = [
  { href: "/", label: "Dashboard", icon: Home },
  { href: "/announcements", label: "Announcements", icon: Bell },
  { href: "/messages", label: "Messages", icon: MessageSquare },
  { href: "/security", label: "Security", icon: Shield },
  { href: "/car-registration", label: "Car Registration", icon: Car },
  { href: "/visitor-management", label: "Visitor Management", icon: UserCheck },
  { href: "/security-scanner", label: "Security Scanner", icon: QrCode },
  { href: "/maintenance", label: "Maintenance", icon: Wrench },
  { href: "/events", label: "Events", icon: Calendar },
  { href: "/estate-map", label: "Estate Map", icon: MapPin },
  { href: "/resident-directory", label: "Resident Directory", icon: Users },
  { href: "/household-members", label: "Household Members", icon: UserCheck },
  { href: "/marketplace", label: "Marketplace", icon: ShoppingBag },
  { href: "/bills-payments", label: "Bills & Payments", icon: CreditCard },
  { href: "/electricity", label: "Electricity", icon: Zap },
  { href: "/estate-dues", label: "Estate Dues", icon: Building },
  { href: "/facilities", label: "Facilities", icon: Building },
  { href: "/emergency", label: "Emergency", icon: AlertTriangle },
  { href: "/registration", label: "Registration", icon: UserPlus },
  { href: "/settings", label: "Settings", icon: Settings },
  { href: "/management", label: "Management", icon: BarChart3 },
]

export function MobileNavigation() {
  const [isOpen, setIsOpen] = useState(false)
  const pathname = usePathname()
  const router = useRouter()

// Close sidebar when route changes
  useEffect(() => {
    setIsOpen(false)
  }, [pathname])

const handleLogout = () => {
    document.cookie = "auth-token=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT"
    router.push("/login")
  }

if (pathname === "/login") {
    return null
  }

return (
    <>
      {/* Mobile Menu Button */}
      <div className="fixed top-4 left-4 z-50">
        <Button
          variant="outline"
          size="sm"
          onClick={() => setIsOpen(!isOpen)}
          className="bg-slate-800 border-slate-600 text-white hover:bg-slate-700 shadow-lg"
        >
          {isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
        </Button>
      </div>

{/* Sidebar - Consistent dark slate theme */}
      <div
        className={`
        fixed inset-y-0 left-0 z-40 w-80 bg-gradient-to-b from-slate-700 via-slate-800 to-slate-900 text-white transform transition-transform duration-300 ease-in-out
        ${isOpen ? "translate-x-0" : "-translate-x-full"}
        md:translate-x-0 md:static md:inset-0
      `}
      >
        {/* Header */}
        <div className="p-6 border-b border-slate-600 bg-slate-800">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-slate-600 rounded-lg flex items-center justify-center">
              <QrCode className="w-6 h-6 text-white" />
            </div>
            <div>
              <h1 className="text-xl font-bold text-white">eDAS Access</h1>
              <p className="text-slate-300 text-sm">Estate Management</p>
            </div>
          </div>
        </div>

{/* Navigation Items */}
        <div className="flex-1 overflow-y-auto py-4 bg-slate-800">
          <nav className="space-y-1 px-3">
            {navigationItems.map((item) => {
              const Icon = item.icon
              const isActive = pathname === item.href

return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`
                    flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors
                    ${
                      isActive
                        ? "bg-slate-600 text-white shadow-lg border border-slate-500"
                        : "text-slate-300 hover:bg-slate-700 hover:text-white"
                    }
                  `}
                >
                  <Icon className="w-5 h-5 flex-shrink-0" />
                  <span className="truncate">{item.label}</span>
                  {item.href === "/estate-dues" && <div className="ml-auto w-2 h-2 bg-blue-400 rounded-full"></div>}
                </Link>
              )
            })}
          </nav>
        </div>

{/* Logout Button */}
        <div className="p-4 border-t border-slate-600 bg-slate-800">
          <Button
            onClick={handleLogout}
            variant="ghost"
            className="w-full justify-start text-slate-300 hover:bg-slate-700 hover:text-white"
          >
            <LogOut className="w-5 h-5 mr-3" />
            Sign Out
          </Button>
        </div>
      </div>

{/* Overlay for mobile */}
      {isOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden" onClick={() => setIsOpen(false)} />
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { Toaster } from "@/components/ui/toaster"
import { MobileNavigation } from "@/components/mobile-navigation"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "eDAS Access - Estate Management App",
  description: "Residential estate visitor access code generator and management platform",
  keywords: ["estate management", "visitor access", "residential app", "security"],
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "eDAS Access",
  },
  formatDetection: {
    telephone: false,
  },
  openGraph: {
    type: "website",
    siteName: "eDAS Access",
    title: "eDAS Access - Estate Management App",
    description: "Residential estate visitor access code generator and management platform",
  },
  twitter: {
    card: "summary",
    title: "eDAS Access - Estate Management App",
    description: "Residential estate visitor access code generator and management platform",
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <link rel="manifest" href="/manifest.json" />
        <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <meta name="apple-mobile-web-app-title" content="eDAS Access" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="theme-color" content="#1e293b" />
      </head>
      <body className={inter.className}>
        <div className="flex h-screen bg-slate-800">
          <MobileNavigation />
          <main className="flex-1 overflow-auto bg-slate-800">{children}</main>
        </div>
        <Toaster />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="lib/database.ts" isEdit="true" isMerged="true"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || "https://your-project.supabase.co"
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "your-anon-key"

export const supabase = createClient(supabaseUrl, supabaseKey)

// Database interfaces
export interface User {
  id: string
  email: string
  full_name: string
  phone_number?: string
  unit_number?: string
  estate_name?: string
  role: "resident" | "admin" | "security"
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface VisitorAccessCode {
  id: string
  resident_id: string
  guest_name: string
  guest_phone?: string
  guest_image_url?: string
  access_code: string
  valid_from: string
  valid_until: string
  is_active: boolean
  scan_count: number
  last_scanned_at?: string
  created_at: string
  resident_name?: string
  unit_number?: string
}

export interface MaintenanceRequest {
  id: string
  resident_id: string
  title: string
  description: string
  category: string
  priority: "low" | "medium" | "high" | "urgent"
  status: "pending" | "in_progress" | "completed" | "cancelled"
  images?: string[]
  assigned_to?: string
  created_at: string
  updated_at: string
  resident_name?: string
  unit_number?: string
}

export interface Announcement {
  id: string
  title: string
  content: string
  author_id: string
  priority: "low" | "medium" | "high"
  is_published: boolean
  created_at: string
  updated_at: string
}

export interface Message {
  id: string
  sender_id: string
  recipient_id: string
  subject: string
  content: string
  is_read: boolean
  created_at: string
}

export interface Vehicle {
  id: string
  resident_id: string
  make: string
  model: string
  year: number
  color: string
  license_plate: string
  is_approved: boolean
  created_at: string
}

export interface MarketplacePost {
  id: string
  title: string
  description: string
  price: number
  seller_name: string
  unit_number: string
  category: string
  is_approved: boolean
  image_url?: string
  created_at: string
}

export class DatabaseService {
  private supabase = supabase

// Visitor Access Codes
  async createVisitorCode(data: Partial<VisitorAccessCode>): Promise<VisitorAccessCode | null> {
    try {
      const { data: result, error } = await this.supabase.from("visitor_access_codes").insert([data]).select().single()

if (error) {
        console.warn("Database insert failed, using mock data:", error)
        return null
      }
      return result
    } catch (error) {
      console.warn("Error creating visitor code:", error)
      return null
    }
  }

async getVisitorCodes(residentId?: string): Promise<VisitorAccessCode[]> {
    try {
      // Try to fetch from database first
      let query = this.supabase
        .from("visitor_access_codes")
        .select(`
          *,
          users!visitor_access_codes_resident_id_fkey(full_name, unit_number)
        `)
        .order("created_at", { ascending: false })

if (residentId) {
        query = query.eq("resident_id", residentId)
      }

const { data, error } = await query

if (error) {
        console.warn("Database query failed, using mock data:", error)
        return this.getMockVisitorCodes()
      }

// Transform the data to include resident info
      const transformedData =
        data?.map((code: any) => ({
          ...code,
          resident_name: code.users?.full_name || "Unknown Resident",
          unit_number: code.users?.unit_number || "N/A",
        })) || []

return transformedData.length > 0 ? transformedData : this.getMockVisitorCodes()
    } catch (error) {
      console.warn("Error fetching visitor codes, using mock data:", error)
      return this.getMockVisitorCodes()
    }
  }

async validateVisitorCode(code: string): Promise<VisitorAccessCode | null> {
    try {
      const { data, error } = await this.supabase
        .from("visitor_access_codes")
        .select("*")
        .eq("access_code", code)
        .eq("is_active", true)
        .single()

if (error) {
        console.warn("Code validation failed:", error)
        return null
      }
      return data
    } catch (error) {
      console.warn("Error validating visitor code:", error)
      return null
    }
  }

async updateVisitorCodeStatus(id: string, isActive: boolean): Promise<boolean> {
    try {
      const { error } = await this.supabase
        .from("visitor_access_codes")
        .update({
          is_active: isActive,
          updated_at: new Date().toISOString(),
        })
        .eq("id", id)

if (error) {
        console.warn("Failed to update visitor code status:", error)
        return false
      }
      return true
    } catch (error) {
      console.warn("Error updating visitor code status:", error)
      return false
    }
  }

// Maintenance Requests
  async createMaintenanceRequest(data: Partial<MaintenanceRequest>): Promise<MaintenanceRequest | null> {
    try {
      const { data: result, error } = await this.supabase.from("maintenance_requests").insert([data]).select().single()

if (error) {
        console.warn("Database insert failed:", error)
        return null
      }
      return result
    } catch (error) {
      console.warn("Error creating maintenance request:", error)
      return null
    }
  }

async getMaintenanceRequests(residentId?: string): Promise<MaintenanceRequest[]> {
    try {
      let query = this.supabase
        .from("maintenance_requests")
        .select(`
          *,
          users!maintenance_requests_resident_id_fkey(full_name, unit_number)
        `)
        .order("created_at", { ascending: false })

if (residentId) {
        query = query.eq("resident_id", residentId)
      }

const { data, error } = await query

if (error) {
        console.warn("Database query failed, using mock data:", error)
        return this.getMockMaintenanceRequests()
      }

const transformedData =
        data?.map((request: any) => ({
          ...request,
          resident_name: request.users?.full_name || "Unknown Resident",
          unit_number: request.users?.unit_number || "N/A",
        })) || []

return transformedData.length > 0 ? transformedData : this.getMockMaintenanceRequests()
    } catch (error) {
      console.warn("Error fetching maintenance requests, using mock data:", error)
      return this.getMockMaintenanceRequests()
    }
  }

// Marketplace Posts
  async getMarketplacePosts(): Promise<MarketplacePost[]> {
    try {
      const { data, error } = await this.supabase
        .from("marketplace_posts")
        .select("*")
        .order("created_at", { ascending: false })

if (error) {
        console.warn("Database query failed, using mock data:", error)
        return this.getMockMarketplacePosts()
      }

return data && data.length > 0 ? data : this.getMockMarketplacePosts()
    } catch (error) {
      console.warn("Error fetching marketplace posts, using mock data:", error)
      return this.getMockMarketplacePosts()
    }
  }

async updateMarketplacePostStatus(id: string, isApproved: boolean): Promise<boolean> {
    try {
      const { error } = await this.supabase
        .from("marketplace_posts")
        .update({
          is_approved: isApproved,
          updated_at: new Date().toISOString(),
        })
        .eq("id", id)

if (error) {
        console.warn("Failed to update marketplace post status:", error)
        return false
      }
      return true
    } catch (error) {
      console.warn("Error updating marketplace post status:", error)
      return false
    }
  }

async deleteMarketplacePost(id: string): Promise<boolean> {
    try {
      const { error } = await this.supabase.from("marketplace_posts").delete().eq("id", id)

if (error) {
        console.warn("Failed to delete marketplace post:", error)
        return false
      }
      return true
    } catch (error) {
      console.warn("Error deleting marketplace post:", error)
      return false
    }
  }

// Mock data methods for fallback
  private getMockVisitorCodes(): VisitorAccessCode[] {
    return [
      {
        id: "mock-1",
        resident_id: "user-1",
        guest_name: "John Visitor",
        guest_phone: "+234 801 234 5678",
        access_code: "VIS123456",
        valid_from: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
        valid_until: new Date(Date.now() + 22 * 60 * 60 * 1000).toISOString(),
        is_active: true,
        scan_count: 2,
        last_scanned_at: new Date(Date.now() - 30 * 60 * 1000).toISOString(),
        created_at: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
        resident_name: "John Adebayo",
        unit_number: "A-15",
        guest_image_url: "/placeholder.svg?height=100&width=100&text=Guest",
      },
      {
        id: "mock-2",
        resident_id: "user-2",
        guest_name: "Sarah Guest",
        guest_phone: "+234 802 345 6789",
        access_code: "VIS789012",
        valid_from: new Date().toISOString(),
        valid_until: new Date(Date.now() + 48 * 60 * 60 * 1000).toISOString(),
        is_active: true,
        scan_count: 0,
        created_at: new Date().toISOString(),
        resident_name: "Sarah Okafor",
        unit_number: "B-22",
      },
      {
        id: "mock-3",
        resident_id: "user-3",
        guest_name: "Mike Johnson",
        guest_phone: "+234 803 456 7890",
        access_code: "VIS345678",
        valid_from: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
        valid_until: new Date(Date.now() - 1 * 60 * 60 * 1000).toISOString(),
        is_active: false,
        scan_count: 5,
        last_scanned_at: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
        created_at: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
        resident_name: "Michael Emeka",
        unit_number: "C-08",
      },
    ]
  }

private getMockMarketplacePosts(): MarketplacePost[] {
    return [
      {
        id: "post-1",
        title: "Dining Table Set",
        description: "Beautiful wooden dining table with 6 chairs. Excellent condition, barely used.",
        price: 150000,
        seller_name: "John Adebayo",
        unit_number: "A-15",
        category: "Furniture",
        is_approved: false,
        image_url: "/placeholder.svg?height=200&width=200&text=Dining+Table",
        created_at: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
      },
      {
        id: "post-2",
        title: "Samsung TV 55 inch",
        description: "Smart TV in excellent condition. 4K resolution, barely 1 year old.",
        price: 200000,
        seller_name: "Sarah Okafor",
        unit_number: "B-22",
        category: "Electronics",
        is_approved: true,
        image_url: "/placeholder.svg?height=200&width=200&text=Samsung+TV",
        created_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
      },
      {
        id: "post-3",
        title: "Children's Bicycle",
        description: "Red bicycle for kids aged 5-8. Good condition with training wheels.",
        price: 25000,
        seller_name: "Fatima Ibrahim",
        unit_number: "D-31",
        category: "Sports",
        is_approved: false,
        image_url: "/placeholder.svg?height=200&width=200&text=Bicycle",
        created_at: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
      },
    ]
  }

private getMockMaintenanceRequests(): MaintenanceRequest[] {
    return [
      {
        id: "req-1",
        resident_id: "user-1",
        title: "Leaking Faucet",
        description: "Kitchen faucet is leaking continuously. Water wastage is significant.",
        category: "Plumbing",
        priority: "medium",
        status: "pending",
        created_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
        updated_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
        resident_name: "John Adebayo",
        unit_number: "A-15",
      },
      {
        id: "req-2",
        resident_id: "user-2",
        title: "Air Conditioning Issue",
        description: "AC not cooling properly in living room. Making strange noises.",
        category: "HVAC",
        priority: "high",
        status: "in_progress",
        assigned_to: "Tech Team",
        created_at: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
        updated_at: new Date(Date.now() - 12 * 60 * 60 * 1000).toISOString(),
        resident_name: "Sarah Okafor",
        unit_number: "B-22",
      },
      {
        id: "req-3",
        resident_id: "user-3",
        title: "Electrical Outlet Not Working",
        description: "Power outlet in bedroom stopped working. Need urgent repair.",
        category: "Electrical",
        priority: "urgent",
        status: "pending",
        created_at: new Date(Date.now() - 6 * 60 * 60 * 1000).toISOString(),
        updated_at: new Date(Date.now() - 6 * 60 * 60 * 1000).toISOString(),
        resident_name: "Michael Emeka",
        unit_number: "C-08",
      },
    ]
  }
}

export default DatabaseService
[V0_FILE]typescriptreact:file="app/api/management/visitor-codes/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function GET() {
  try {
    const db = new DatabaseService()

// Get all visitor codes with resident information
    const codes = await db.getVisitorCodes()

return NextResponse.json({
      success: true,
      codes: codes || [],
      message: codes.length > 0 ? "Visitor codes loaded successfully" : "No visitor codes found",
    })
  } catch (error) {
    console.error("Failed to fetch visitor codes:", error)

// Return a proper JSON response even on error
    return NextResponse.json(
      {
        success: false,
        codes: [],
        error: "Failed to fetch visitor codes",
        message: "Using fallback data due to database connection issues",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/management/marketplace/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function GET() {
  try {
    const db = new DatabaseService()

// Get all marketplace posts
    const posts = await db.getMarketplacePosts()

return NextResponse.json({
      success: true,
      posts: posts || [],
      message: posts.length > 0 ? "Marketplace posts loaded successfully" : "No marketplace posts found",
    })
  } catch (error) {
    console.error("Failed to fetch marketplace posts:", error)

return NextResponse.json(
      {
        success: false,
        posts: [],
        error: "Failed to fetch marketplace posts",
        message: "Using fallback data due to database connection issues",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/management/pending-requests/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function GET() {
  try {
    const db = new DatabaseService()

// Get all maintenance requests
    const requests = await db.getMaintenanceRequests()

return NextResponse.json({
      success: true,
      requests: requests || [],
      message: requests.length > 0 ? "Maintenance requests loaded successfully" : "No maintenance requests found",
    })
  } catch (error) {
    console.error("Failed to fetch maintenance requests:", error)

return NextResponse.json(
      {
        success: false,
        requests: [],
        error: "Failed to fetch maintenance requests",
        message: "Using fallback data due to database connection issues",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/management/visitor-codes/[id]/validate/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function POST(request: Request, { params }: { params: { id: string } }) {
  try {
    const { isValid } = await request.json()
    const db = new DatabaseService()

// Update visitor code status
    const success = await db.updateVisitorCodeStatus(params.id, isValid)

if (success) {
      return NextResponse.json({
        success: true,
        message: `Visitor code ${isValid ? "activated" : "deactivated"} successfully`,
      })
    } else {
      return NextResponse.json(
        {
          success: false,
          message: "Failed to update visitor code status",
        },
        { status: 500 },
      )
    }
  } catch (error) {
    console.error("Failed to validate visitor code:", error)

return NextResponse.json(
      {
        success: false,
        message: "Failed to validate visitor code",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/management/marketplace/[id]/moderate/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function POST(request: Request, { params }: { params: { id: string } }) {
  try {
    const { action, notes } = await request.json()
    const db = new DatabaseService()

const isApproved = action === "approve"
    const success = await db.updateMarketplacePostStatus(params.id, isApproved)

if (success) {
      return NextResponse.json({
        success: true,
        message: `Post ${action}d successfully`,
      })
    } else {
      return NextResponse.json(
        {
          success: false,
          message: `Failed to ${action} post`,
        },
        { status: 500 },
      )
    }
  } catch (error) {
    console.error("Failed to moderate post:", error)

return NextResponse.json(
      {
        success: false,
        message: "Failed to moderate post",
      },
      { status: 500 },
    )
  }
}

export async function DELETE(request: Request, { params }: { params: { id: string } }) {
  try {
    const db = new DatabaseService()

const success = await db.deleteMarketplacePost(params.id)

if (success) {
      return NextResponse.json({
        success: true,
        message: "Post deleted successfully",
      })
    } else {
      return NextResponse.json(
        {
          success: false,
          message: "Failed to delete post",
        },
        { status: 500 },
      )
    }
  } catch (error) {
    console.error("Failed to delete post:", error)

return NextResponse.json(
      {
        success: false,
        message: "Failed to delete post",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/visitor-access-generator.tsx" isEdit="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { QrCode, Copy, Share2, Clock, User, Phone, Upload, ImageIcon } from "lucide-react"
import { generateRandomWords } from "@/lib/utils"
import { useToast } from "@/hooks/use-toast"

interface VisitorAccessGeneratorProps {
  userId: string
  appProfileId?: string
}

interface AccessCode {
  code: string
  visitorName: string
  visitorPhone: string
  validUntil: string
  purpose: string
  generatedAt: string
  guestImageUrl?: string
  appProfileId?: string
}

export function VisitorAccessGenerator({ userId, appProfileId }: VisitorAccessGeneratorProps) {
  const [visitorName, setVisitorName] = useState("")
  const [visitorPhone, setVisitorPhone] = useState("")
  const [purpose, setPurpose] = useState("")
  const [validityHours, setValidityHours] = useState("2")
  const [guestImage, setGuestImage] = useState<File | null>(null)
  const [guestImagePreview, setGuestImagePreview] = useState<string | null>(null)
  const [generatedCode, setGeneratedCode] = useState<AccessCode | null>(null)
  const [isGenerating, setIsGenerating] = useState(false)
  const [customPurpose, setCustomPurpose] = useState("")
  const { toast } = useToast()

// Predefined purposes of visit
  const visitPurposes = [
    {
      value: "Package Delivery",
      label: "📦 Package Delivery",
      description: "For package deliveries, food delivery",
    },
    {
      value: "Food Delivery",
      label: "🍕 Food Delivery",
      description: "For food delivery services",
    },
    {
      value: "Courier Service",
      label: "📮 Courier Service",
      description: "For courier and postal services",
    },
    {
      value: "Social Visit",
      label: "👥 Social Visit",
      description: "For friends, family visits, social gathering",
    },
    {
      value: "Family Visit",
      label: "👨‍👩‍👧‍👦 Family Visit",
      description: "For family members and relatives",
    },
    {
      value: "Friend Visit",
      label: "🤝 Friend Visit",
      description: "For personal friends and social calls",
    },
    {
      value: "Business Meeting",
      label: "💼 Business Meeting",
      description: "For business appointments, professional meetings",
    },
    {
      value: "Professional Service",
      label: "🔧 Professional Service",
      description: "For contractors, technicians, service providers",
    },
    {
      value: "Medical Visit",
      label: "🏥 Medical Visit",
      description: "For healthcare professionals, medical services",
    },
    {
      value: "Maintenance",
      label: "🛠️ Maintenance",
      description: "For repair work, maintenance services",
    },
    {
      value: "Cleaning Service",
      label: "🧹 Cleaning Service",
      description: "For cleaning and housekeeping services",
    },
    {
      value: "Other",
      label: "✏️ Other",
      description: "Custom purpose not listed above",
    },
  ]

const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      if (file.size > 5 * 1024 * 1024) {
        toast({
          title: "File Too Large",
          description: "Please select an image smaller than 5MB",
          variant: "destructive",
        })
        return
      }

setGuestImage(file)

const reader = new FileReader()
      reader.onload = (e) => {
        setGuestImagePreview(e.target?.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

const uploadGuestImage = async (file: File): Promise<string | null> => {
    try {
      const formData = new FormData()
      formData.append("image", file)
      formData.append("type", "guest-photo")

const response = await fetch("/api/upload-image", {
        method: "POST",
        body: formData,
      })

if (response.ok) {
        const data = await response.json()
        return data.url
      }
    } catch (error) {
      console.error("Image upload failed:", error)
    }
    return null
  }

const generateAccessCode = async () => {
    if (!visitorName.trim() || !visitorPhone.trim()) {
      toast({
        title: "Missing Information",
        description: "Please fill in visitor name and phone number",
        variant: "destructive",
      })
      return
    }

if (!purpose) {
      toast({
        title: "Missing Purpose",
        description: "Please select a purpose of visit",
        variant: "destructive",
      })
      return
    }

setIsGenerating(true)

try {
      let guestImageUrl = null
      if (guestImage) {
        guestImageUrl = await uploadGuestImage(guestImage)
      }

const codeWords = generateRandomWords({
        count: 2,
        type: "mixed",
        capitalize: true,
        separator: "",
      })
      const randomNumbers = Math.floor(Math.random() * 9000) + 1000
      const accessCode = `${codeWords}${randomNumbers}`

const validUntil = new Date()
      validUntil.setHours(validUntil.getHours() + Number.parseInt(validityHours))

const finalPurpose = purpose === "Other" ? customPurpose.trim() || "General Visit" : purpose

const response = await fetch("/api/visitor-codes", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          code: accessCode,
          visitor_name: visitorName.trim(),
          visitor_phone: visitorPhone.trim(),
          purpose: finalPurpose,
          valid_hours: Number.parseInt(validityHours),
          guest_image_url: guestImageUrl,
          app_profile_id: appProfileId,
        }),
      })

if (response.ok) {
        const newAccessCode: AccessCode = {
          code: accessCode,
          visitorName: visitorName.trim(),
          visitorPhone: visitorPhone.trim(),
          validUntil: validUntil.toLocaleString(),
          purpose: finalPurpose,
          generatedAt: new Date().toLocaleString(),
          guestImageUrl,
          appProfileId,
        }

setGeneratedCode(newAccessCode)

toast({
          title: "Access Code Generated",
          description: `Code ${accessCode} created for ${visitorName}`,
        })

// Clear form
        setVisitorName("")
        setVisitorPhone("")
        setPurpose("")
        setCustomPurpose("")
        setGuestImage(null)
        setGuestImagePreview(null)
      } else {
        throw new Error("Failed to generate access code")
      }
    } catch (error) {
      toast({
        title: "Generation Failed",
        description: "Failed to generate access code",
        variant: "destructive",
      })
    } finally {
      setIsGenerating(false)
    }
  }

const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    toast({
      title: "Copied to Clipboard",
      description: "Access code copied successfully",
    })
  }

const shareAccessCode = () => {
    if (!generatedCode) return

const shareText = `
eDAS Access Code for ${generatedCode.visitorName}

Access Code: ${generatedCode.code}
Valid Until: ${generatedCode.validUntil}
Purpose: ${generatedCode.purpose}
${generatedCode.appProfileId ? `App ID: ${generatedCode.appProfileId}` : ""}

Please present this code at the estate entrance.
    `.trim()

if (navigator.share) {
      navigator.share({
        title: "Estate Access Code",
        text: shareText,
      })
    } else {
      copyToClipboard(shareText)
    }
  }

const selectedPurposeInfo = visitPurposes.find((p) => p.value === purpose)

return (
    <div className="space-y-6">
      {/* Generate New Code Form */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <QrCode className="w-5 h-5" />
            Generate Visitor Access Code
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="visitor-name">Visitor Name *</Label>
              <Input
                id="visitor-name"
                placeholder="Enter visitor's full name"
                value={visitorName}
                onChange={(e) => setVisitorName(e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="visitor-phone">Phone Number *</Label>
              <Input
                id="visitor-phone"
                placeholder="Enter phone number"
                value={visitorPhone}
                onChange={(e) => setVisitorPhone(e.target.value)}
              />
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="purpose">Purpose of Visit *</Label>
              <Select value={purpose} onValueChange={setPurpose}>
                <SelectTrigger>
                  <SelectValue placeholder="Select purpose of visit" />
                </SelectTrigger>
                <SelectContent className="max-h-60">
                  {visitPurposes.map((purposeOption) => (
                    <SelectItem key={purposeOption.value} value={purposeOption.value}>
                      <div className="flex flex-col">
                        <span className="font-medium">{purposeOption.label}</span>
                        <span className="text-xs text-gray-500">{purposeOption.description}</span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

{/* Show selected purpose description */}
              {selectedPurposeInfo && <p className="text-xs text-gray-600 mt-1">{selectedPurposeInfo.description}</p>}

{/* Custom purpose input when "Other" is selected */}
              {purpose === "Other" && (
                <Input
                  className="mt-2"
                  placeholder="Please specify the purpose"
                  value={customPurpose}
                  onChange={(e) => setCustomPurpose(e.target.value)}
                />
              )}
            </div>
            <div>
              <Label htmlFor="validity">Valid For</Label>
              <Select value={validityHours} onValueChange={setValidityHours}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1">1 Hour</SelectItem>
                  <SelectItem value="2">2 Hours</SelectItem>
                  <SelectItem value="4">4 Hours</SelectItem>
                  <SelectItem value="8">8 Hours</SelectItem>
                  <SelectItem value="24">24 Hours</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

{/* Guest Image Upload */}
          <div>
            <Label htmlFor="guest-image">Guest Photo (Optional)</Label>
            <div className="mt-2">
              <div className="flex items-center gap-4">
                <div className="flex-1">
                  <Input
                    id="guest-image"
                    type="file"
                    accept="image/*"
                    onChange={handleImageUpload}
                    className="hidden"
                  />
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => document.getElementById("guest-image")?.click()}
                    className="w-full"
                  >
                    <Upload className="w-4 h-4 mr-2" />
                    {guestImage ? "Change Photo" : "Upload Guest Photo"}
                  </Button>
                </div>
                {guestImagePreview && (
                  <div className="w-16 h-16 rounded-lg overflow-hidden border">
                    <img
                      src={guestImagePreview || "/placeholder.svg"}
                      alt="Guest preview"
                      className="w-full h-full object-cover"
                    />
                  </div>
                )}
              </div>
              <p className="text-xs text-gray-500 mt-1">
                Upload a photo of your expected guest for security verification (Max 5MB)
              </p>
            </div>
          </div>

<Button onClick={generateAccessCode} disabled={isGenerating} className="w-full bg-teal-600 hover:bg-teal-700">
            {isGenerating ? "Generating..." : "Generate Access Code"}
          </Button>
        </CardContent>
      </Card>

{/* Generated Code Display */}
      {generatedCode && (
        <Card className="border-teal-200 bg-teal-50">
          <CardHeader>
            <CardTitle className="text-teal-800">Access Code Generated</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="text-center">
              <div className="text-4xl font-bold text-teal-600 mb-2 font-mono">{generatedCode.code}</div>
              <p className="text-sm text-teal-700">Share this code with your visitor</p>
              {generatedCode.appProfileId && (
                <p className="text-xs text-teal-600 mt-1">App ID: {generatedCode.appProfileId}</p>
              )}
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
              <div className="flex items-center gap-2">
                <User className="w-4 h-4 text-teal-600" />
                <span>
                  <strong>Visitor:</strong> {generatedCode.visitorName}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <Phone className="w-4 h-4 text-teal-600" />
                <span>
                  <strong>Phone:</strong> {generatedCode.visitorPhone}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <Clock className="w-4 h-4 text-teal-600" />
                <span>
                  <strong>Valid Until:</strong> {generatedCode.validUntil}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <QrCode className="w-4 h-4 text-teal-600" />
                <span>
                  <strong>Purpose:</strong> {generatedCode.purpose}
                </span>
              </div>
            </div>

{generatedCode.guestImageUrl && (
              <div className="flex items-center gap-2">
                <ImageIcon className="w-4 h-4 text-teal-600" />
                <span className="text-sm">
                  <strong>Guest Photo:</strong> Uploaded for security verification
                </span>
              </div>
            )}

<div className="flex gap-2">
              <Button
                variant="outline"
                className="flex-1 bg-transparent"
                onClick={() => copyToClipboard(generatedCode.code)}
              >
                <Copy className="w-4 h-4 mr-2" />
                Copy Code
              </Button>
              <Button variant="outline" className="flex-1 bg-transparent" onClick={shareAccessCode}>
                <Share2 className="w-4 h-4 mr-2" />
                Share Details
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

export interface User {
  id: string
  email: string
  name: string
}

export interface AuthSession {
  user: User
  token: string
}

// Mock function to get current session - replace with your actual auth implementation
async function getCurrentSession(): Promise<AuthSession | null> {
  const cookieStore = await cookies()
  const token = cookieStore.get("auth-token")

if (!token) {
    return null
  }

// Replace this with your actual session validation logic
  // This is a mock implementation
  try {
    // In a real app, you'd validate the token with your auth provider
    return {
      user: {
        id: "1",
        email: "user@example.com",
        name: "User",
      },
      token: token.value,
    }
  } catch (error) {
    return null
  }
}

export async function requireAuth(): Promise<AuthSession> {
  const session = await getCurrentSession()

if (!session) {
    redirect("/login")
  }

return session
}

export interface ActivityLog {
  userId: string
  action: string
  details?: Record<string, any>
  timestamp: Date
  ip?: string
  userAgent?: string
}

export async function logActivity(userId: string, action: string, details?: Record<string, any>): Promise<void> {
  const activity: ActivityLog = {
    userId,
    action,
    details,
    timestamp: new Date(),
  }

try {
    // In a real application, you would save this to your database
    // For now, we'll just log to console
    console.log("Activity logged:", activity)

// Example database save (replace with your actual implementation):
    // await db.activityLog.create({ data: activity })
  } catch (error) {
    console.error("Failed to log activity:", error)
    // Don't throw error to avoid breaking the main flow
  }
}

// Helper function to get user from session
export async function getCurrentUser(): Promise<User | null> {
  const session = await getCurrentSession()
  return session?.user || null
}

// Helper function to check if user is authenticated without redirecting
export async function isAuthenticated(): Promise<boolean> {
  const session = await getCurrentSession()
  return !!session
}
[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// Word lists for generating random words
const adjectives = [
  "amazing",
  "brilliant",
  "creative",
  "dynamic",
  "elegant",
  "fantastic",
  "gorgeous",
  "incredible",
  "magnificent",
  "outstanding",
  "spectacular",
  "wonderful",
  "excellent",
  "marvelous",
  "superb",
  "remarkable",
  "stunning",
  "beautiful",
  "awesome",
  "impressive",
  "extraordinary",
  "phenomenal",
  "exceptional",
  "splendid",
  "fabulous",
  "terrific",
  "incredible",
]

const nouns = [
  "adventure",
  "journey",
  "discovery",
  "innovation",
  "creation",
  "solution",
  "project",
  "idea",
  "concept",
  "vision",
  "dream",
  "goal",
  "mission",
  "purpose",
  "strategy",
  "plan",
  "design",
  "system",
  "platform",
  "service",
  "experience",
  "opportunity",
  "challenge",
  "achievement",
  "success",
  "breakthrough",
  "revolution",
  "transformation",
  "evolution",
  "progress",
]

const verbs = [
  "create",
  "build",
  "develop",
  "design",
  "innovate",
  "transform",
  "improve",
  "enhance",
  "optimize",
  "streamline",
  "simplify",
  "accelerate",
  "achieve",
  "accomplish",
  "deliver",
  "execute",
  "implement",
  "launch",
  "discover",
  "explore",
  "navigate",
  "connect",
  "collaborate",
  "communicate",
  "inspire",
  "motivate",
  "empower",
  "enable",
  "facilitate",
  "support",
]

export interface RandomWordsOptions {
  count?: number
  type?: "mixed" | "adjectives" | "nouns" | "verbs"
  separator?: string
  capitalize?: boolean
}

export function generateRandomWords(options: RandomWordsOptions = {}): string {
  const { count = 2, type = "mixed", separator = " ", capitalize = false } = options

let wordList: string[]

switch (type) {
    case "adjectives":
      wordList = adjectives
      break
    case "nouns":
      wordList = nouns
      break
    case "verbs":
      wordList = verbs
      break
    case "mixed":
    default:
      wordList = [...adjectives, ...nouns, ...verbs]
      break
  }

const selectedWords: string[] = []

for (let i = 0; i < count; i++) {
    const randomIndex = Math.floor(Math.random() * wordList.length)
    selectedWords.push(wordList[randomIndex])
  }

let result = selectedWords.join(separator)

if (capitalize) {
    result = result
      .split(" ")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(" ")
  }

return result
}

// Additional utility functions that might be useful

export function generateRandomId(length = 8): string {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
  let result = ""
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  return result
}

export function formatDate(date: Date): string {
  return new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(date)
}

export function formatDateTime(date: Date): string {
  return new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  }).format(date)
}

export function truncateText(text: string, maxLength: number): string {
  if (text.length <= maxLength) return text
  return text.slice(0, maxLength) + "..."
}

export function slugify(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^\w\s-]/g, "")
    .replace(/[\s_-]+/g, "-")
    .replace(/^-+|-+$/g, "")
}

export function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
  let timeout: NodeJS.Timeout
  return (...args: Parameters<T>) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => func(...args), wait)
  }
}
[V0_FILE]typescriptreact:file="components/word-generator.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { generateRandomWords } from "@/lib/utils"

interface WordGeneratorProps {
  userId: string
}

export function WordGenerator({ userId }: WordGeneratorProps) {
  const [generatedWords, setGeneratedWords] = useState("")
  const [wordCount, setWordCount] = useState(3)
  const [wordType, setWordType] = useState<"mixed" | "adjectives" | "nouns" | "verbs">("mixed")
  const [capitalize, setCapitalize] = useState(false)

const handleGenerate = async () => {
    const words = generateRandomWords({
      count: wordCount,
      type: wordType,
      capitalize,
      separator: " ",
    })

setGeneratedWords(words)

// Log the activity
    await fetch("/api/log-activity", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        action: "generate_words",
        details: { wordCount, wordType, capitalize, result: words },
      }),
    })
  }

return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-4">
        <div>
          <Label htmlFor="word-count">Word Count</Label>
          <Input
            id="word-count"
            type="number"
            min="1"
            max="10"
            value={wordCount}
            onChange={(e) => setWordCount(Number.parseInt(e.target.value) || 1)}
          />
        </div>

<div>
          <Label htmlFor="word-type">Word Type</Label>
          <Select value={wordType} onValueChange={(value: any) => setWordType(value)}>
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="mixed">Mixed</SelectItem>
              <SelectItem value="adjectives">Adjectives</SelectItem>
              <SelectItem value="nouns">Nouns</SelectItem>
              <SelectItem value="verbs">Verbs</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="flex items-center space-x-2">
        <input
          type="checkbox"
          id="capitalize"
          checked={capitalize}
          onChange={(e) => setCapitalize(e.target.checked)}
          className="rounded"
        />
        <Label htmlFor="capitalize">Capitalize words</Label>
      </div>

<Button onClick={handleGenerate} className="w-full">
        Generate Random Words
      </Button>

{generatedWords && (
        <div className="p-4 bg-gray-50 border rounded-lg">
          <p className="text-lg font-semibold text-center">{generatedWords}</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/activity-logger.tsx" isMerged="true"
"use client"

interface ActivityLoggerProps {
  userId: string
}

export function ActivityLogger({ userId }: ActivityLoggerProps) {
  const [action, setAction] = useState("")
  const [details, setDetails] = useState("")
  const [isLogging, setIsLogging] = useState(false)
  const [lastLogged, setLastLogged] = useState<string | null>(null)

const handleLogActivity = async () => {
    if (!action.trim()) return

setIsLogging(true)

try {
      const response = await fetch("/api/log-activity", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          userId,
          action: action.trim(),
          details: details.trim() ? { note: details.trim() } : undefined,
        }),
      })

if (response.ok) {
        setLastLogged(`${action} - ${new Date().toLocaleTimeString()}`)
        setAction("")
        setDetails("")
      }
    } catch (error) {
      console.error("Failed to log activity:", error)
    } finally {
      setIsLogging(false)
    }
  }

const quickActions = ["button_click", "form_submit", "page_scroll", "file_download", "search_query"]

return (
    <div className="space-y-4">
      <div>
        <Label htmlFor="action">Action</Label>
        <Input
          id="action"
          placeholder="e.g., button_click, form_submit"
          value={action}
          onChange={(e) => setAction(e.target.value)}
        />
      </div>

<div>
        <Label htmlFor="details">Details (optional)</Label>
        <Textarea
          id="details"
          placeholder="Additional details about the action"
          value={details}
          onChange={(e) => setDetails(e.target.value)}
          rows={3}
        />
      </div>