a9:I[903690,["/chat-static/_next/static/immutable/chunks/0_kdkc823otwv.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ibakxw9lycsv.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/3r-izlig-97d3.js","/chat-static/_next/static/immutable/chunks/1-yirsd6_l__x.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/08ftfj_ae3jl_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/17bw078wkmokk.js","/chat-static/_next/static/immutable/chunks/2lsankmaxuiz4.js","/chat-static/_next/static/immutable/chunks/1ybo6yzdrs8bw.js","/chat-static/_next/static/immutable/chunks/25hm_hdm1gsd0.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2v488urps6yag.js","/chat-static/_next/static/immutable/chunks/0ex210m2m3jd_.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/3yu169rnx-6bz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/0w0diht866kq4.js","/chat-static/_next/static/immutable/chunks/1t6tgnbe013qf.js","/chat-static/_next/static/immutable/chunks/263b0wh6fc7vv.js","/chat-static/_next/static/immutable/chunks/2bgu79hhhqcry.js","/chat-static/_next/static/immutable/chunks/1ukuldvl_7ewm.js","/chat-static/_next/static/immutable/chunks/2j5almabhex5i.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/2h1e8frandnla.js","/chat-static/_next/static/immutable/chunks/0f4z2mjqjzpbe.js","/chat-static/_next/static/immutable/chunks/2ktsmvnrpabs_.js","/chat-static/_next/static/immutable/chunks/29mrkgtzx_4wp.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/1oznss6s7d7gf.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/34plql7k-5zln.js","/chat-static/_next/static/immutable/chunks/2u412yj4g70a6.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/1kms4qb1b1e4i.js","/chat-static/_next/static/immutable/chunks/14xqre5n_-5om.js","/chat-static/_next/static/immutable/chunks/3_fsao_b89s35.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/06gm8aj13bwx1.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/2oakf9cjtyb2q.js"],"ExplicitChatIdProvider"] aa:I[838238,["/chat-static/_next/static/immutable/chunks/0_kdkc823otwv.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ibakxw9lycsv.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/3r-izlig-97d3.js","/chat-static/_next/static/immutable/chunks/1-yirsd6_l__x.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/08ftfj_ae3jl_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/17bw078wkmokk.js","/chat-static/_next/static/immutable/chunks/2lsankmaxuiz4.js","/chat-static/_next/static/immutable/chunks/1ybo6yzdrs8bw.js","/chat-static/_next/static/immutable/chunks/25hm_hdm1gsd0.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2v488urps6yag.js","/chat-static/_next/static/immutable/chunks/0ex210m2m3jd_.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/3yu169rnx-6bz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/0w0diht866kq4.js","/chat-static/_next/static/immutable/chunks/1t6tgnbe013qf.js","/chat-static/_next/static/immutable/chunks/263b0wh6fc7vv.js","/chat-static/_next/static/immutable/chunks/2bgu79hhhqcry.js","/chat-static/_next/static/immutable/chunks/1ukuldvl_7ewm.js","/chat-static/_next/static/immutable/chunks/2j5almabhex5i.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/2h1e8frandnla.js","/chat-static/_next/static/immutable/chunks/0f4z2mjqjzpbe.js","/chat-static/_next/static/immutable/chunks/2ktsmvnrpabs_.js","/chat-static/_next/static/immutable/chunks/29mrkgtzx_4wp.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/1oznss6s7d7gf.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/34plql7k-5zln.js","/chat-static/_next/static/immutable/chunks/2u412yj4g70a6.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/1kms4qb1b1e4i.js","/chat-static/_next/static/immutable/chunks/14xqre5n_-5om.js","/chat-static/_next/static/immutable/chunks/3_fsao_b89s35.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/06gm8aj13bwx1.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/2oakf9cjtyb2q.js"],"SWRDataProvider"] ac:[] ad:[["b_PNXkPINdLr3",null],["b_hfDArGKk1Y9",null],["b_fBLiaNeC8Qs",null]] ae:[["b_PNXkPINdLr3",{"templateVersionId":null,"templateCanonId":null}],["b_hfDArGKk1Y9",{"templateVersionId":null,"templateCanonId":null}],["b_fBLiaNeC8Qs",{"templateVersionId":null,"templateCanonId":null}]] af:[["b_74HV1EjCYuB","$D2025-03-27T11:23:47.819Z"],["b_Ke7N7hbTMjX","$D2025-03-27T11:51:32.601Z"],["b_oh2i36apTLJ","$D2025-03-27T12:11:01.042Z"],["b_peR9bmrmAcy","$D2025-03-31T00:09:07.585Z"],["b_Ul1kVFudBcv","$D2025-04-01T02:40:30.112Z"],["b_alzOHZ10ovQ","$D2025-04-02T02:58:10.534Z"],["b_iU6QjcenNei","$D2025-04-02T03:19:40.208Z"],["b_8HrzNN3UNru","$D2025-04-02T03:28:20.957Z"],["b_OILJV41gkRS","$D2025-04-02T03:40:50.135Z"],["b_Tu6FZZ919FJ","$D2025-04-02T04:09:31.886Z"],["b_wxXVFvfzSth","$D2025-04-02T04:22:34.251Z"],["b_VDmJVqvNKu2","$D2025-04-02T09:43:03.970Z"],["b_4JWHuoVNDBk","$D2025-04-02T10:02:52.772Z"],["b_8F1Eh0inrz2","$D2025-04-02T23:12:54.681Z"],["b_TrbOlzb9Mjd","$D2025-04-03T07:43:31.851Z"],["b_Gmj7cSUNtIu","$D2025-04-03T07:58:18.601Z"],["b_VHOSNeY0mQP","$D2025-04-03T14:05:14.967Z"],["b_nO5haJJHJDX","$D2025-04-03T14:10:58.200Z"],["b_xg6z9tQXxlE","$D2025-04-03T14:30:42.965Z"],["b_DQZtfh4Elst","$D2025-04-03T14:39:03.192Z"],["b_GeCLBYaiU3q","$D2025-04-03T14:47:36.435Z"],["b_yrwjALdWpNB","$D2025-04-03T14:55:21.535Z"],["b_oeonG2g8Fd6","$D2025-04-03T15:07:35.775Z"],["b_yF3Q3ndXukT","$D2025-04-03T15:13:35.713Z"],["b_h8owKBXu19I","$D2025-04-03T15:20:43.927Z"],["b_Nx6bZtnPwUq","$D2025-04-03T15:23:30.867Z"],["b_3yH0zGqHf1d","$D2025-04-03T15:38:20.056Z"],["b_MHWPt0i9xZp","$D2025-04-03T15:56:02.630Z"],["b_jFqvpasH6KN","$D2025-04-03T16:03:14.485Z"],["b_cABA78r935b","$D2025-04-03T16:14:03.770Z"],["b_ARnVM9IzXfb","$D2025-04-03T16:24:43.986Z"],["b_zvhQl3fqUTA","$D2025-04-03T16:29:37.549Z"],["b_PGzSp6so939","$D2025-04-03T16:31:16.727Z"],["b_yQvi7AqwGUQ","$D2025-04-03T16:40:30.626Z"],["b_ACE3EKBoGpy","$D2025-04-04T11:03:11.534Z"],["b_RLQaksmlopT","$D2025-04-04T11:18:43.757Z"],["b_lyKyVjqc7i4","$D2025-04-04T21:32:23.163Z"],["b_awtsQnkYDQs","$D2025-04-04T21:38:06.177Z"],["b_ZD7vWRhNyLo","$D2025-04-04T21:48:54.365Z"],["b_kx3jq9bwa7w","$D2025-04-04T21:59:15.338Z"],["b_e3wKjOtzZIw","$D2025-04-04T22:07:12.147Z"],["b_R1O0cJxP53c","$D2025-04-04T23:24:43.587Z"],["b_zC15zNs9s06","$D2025-04-04T23:31:17.540Z"],["b_KJWMN2v5Yv2","$D2025-04-04T23:37:32.026Z"],["b_RAZZ4cWJmSl","$D2025-04-04T23:40:18.645Z"],["b_9fbK99T1gkK","$D2025-04-04T23:46:30.092Z"],["b_z1wX4oaHX9K","$D2025-04-04T23:52:26.399Z"],["b_jo2eQVaGwib","$D2025-04-05T00:00:07.966Z"],["b_W9k8tldXJbW","$D2025-04-05T00:22:21.910Z"],["b_NOysuLlAiBA","$D2025-04-05T00:28:25.146Z"],["b_2rVdpDvvb0E","$D2025-04-05T00:31:33.014Z"],["b_YQFgvYcOdX0","$D2025-04-05T01:42:25.208Z"],["b_Qq27tNweapp","$D2025-04-05T02:00:28.356Z"],["b_2CUa3YK6pDk","$D2025-04-05T02:18:46.255Z"],["b_f3DwajvsM1O","$D2025-04-05T02:35:03.656Z"],["b_qaE27cuOiLV","$D2025-04-05T11:05:40.673Z"],["b_hYieOXncV1Z","$D2025-04-05T12:46:38.633Z"],["b_Y0uhOgZTos8","$D2025-04-05T12:57:58.799Z"],["b_XCiFVceOYyh","$D2025-04-05T14:30:07.419Z"],["b_LudDYcJOe2K","$D2025-04-05T14:40:51.663Z"],["b_1PBmw0Cv28i","$D2025-04-05T16:11:10.312Z"],["b_I8PvyFvT6Ej","$D2025-04-05T16:20:24.499Z"],["b_ah7r2gt6iZN","$D2025-04-05T16:25:33.793Z"],["b_UmKVmsZwnmu","$D2025-04-05T17:30:42.330Z"],["b_NONu37udGHr","$D2025-04-05T18:44:24.733Z"],["b_lteQow9nomR","$D2025-04-05T22:10:08.006Z"],["b_MVRr9VTGu1D","$D2025-04-05T22:19:39.339Z"],["b_7cFfW8VdFEY","$D2025-04-05T22:26:13.854Z"],["b_WgjCXouijA5","$D2025-04-06T00:17:50.806Z"],["b_kkkQTWXNdhl","$D2025-04-06T02:30:17.012Z"],["b_ibRbWMoLid3","$D2025-04-06T02:30:21.956Z"],["b_qBIRJrtjWn9","$D2025-04-06T02:30:35.885Z"],["b_Ep6iSgcBBz7","$D2025-04-06T02:30:47.878Z"],["b_NVGBjKdXg5n","$D2025-04-06T02:31:02.986Z"],["b_BCps9DupCkj","$D2025-04-06T02:31:29.180Z"],["b_HH8jjvzAJJr","$D2025-04-06T02:32:07.754Z"],["b_IMhrMcz06PQ","$D2025-04-06T02:32:24.643Z"],["b_vCTcOaKzakK","$D2025-04-06T02:33:11.118Z"],["b_YMYmJxVQDD2","$D2025-04-06T02:34:25.948Z"],["b_jQ9zVvQpUnN","$D2025-04-06T02:53:31.810Z"],["b_iJqvBAFHWoW","$D2025-04-06T02:53:32.404Z"],["b_hIRbJZIgoHE","$D2025-04-06T02:53:35.494Z"],["b_7McbT5BDMS5","$D2025-04-06T02:53:36.106Z"],["b_amEVMCXTEAn","$D2025-04-06T02:53:36.716Z"],["b_cckOB1FSx1t","$D2025-04-06T02:53:38.315Z"],["b_FnwM4gMaTJX","$D2025-04-06T02:54:10.961Z"],["b_RuckkYicWqr","$D2025-04-06T02:54:15.849Z"],["b_30Rp63Irsga","$D2025-04-06T02:55:17.515Z"],["b_siojkZHUc8l","$D2025-04-06T02:57:52.071Z"],["b_ulniXI1aLIp","$D2025-04-06T02:57:57.845Z"],["b_5DsFgIx1NJk","$D2025-04-06T02:58:09.083Z"],["b_xJqBtlUbxP5","$D2025-04-06T03:12:26.961Z"],["b_F2FJvezOopp","$D2025-04-06T03:23:16.065Z"],["b_bBO7Uh6toT0","$D2025-04-06T03:26:28.145Z"],["b_ETZkTCmrugf","$D2025-04-06T03:59:52.084Z"],["b_GcHLsPS7Qls","$D2025-04-06T04:02:23.346Z"],["b_xxBcvPDgpPS","$D2025-04-06T04:05:21.698Z"],["b_fIawHn4vZ9l","$D2025-04-06T04:07:32.528Z"],["b_QNc5r9ZqxnT","$D2025-04-06T04:11:29.119Z"],["b_i7gt364KBCA","$D2025-04-06T04:13:51.387Z"],["b_maIKEr8VkXS","$D2025-04-06T04:15:17.592Z"],["b_zjIA6dj2hPq","$D2025-04-06T04:16:34.419Z"],["b_njuanSl9cms","$D2025-04-08T23:29:14.215Z"],["b_eUZbp32NVs1","$D2025-04-08T23:31:29.944Z"],["b_jpfY9XKb4AZ","$D2025-04-08T23:51:28.037Z"],["b_RDq0RrN6cM5","$D2025-04-10T17:35:46.704Z"],["b_3uVRFxMXXMP","$D2025-04-10T18:11:29.098Z"],["b_1SKhBsqdYDB","$D2025-04-10T18:17:42.114Z"],["b_coFJUwWllSJ","$D2025-04-10T18:24:22.144Z"],["b_LdjwGTlqvqo","$D2025-04-10T22:32:04.081Z"],["b_PNXkPINdLr3","$D2025-04-10T22:36:36.701Z"],["b_hfDArGKk1Y9","$D2025-04-10T22:41:01.952Z"],["b_fBLiaNeC8Qs","$D2025-04-12T01:45:02.900Z"]] b0:[["b_PNXkPINdLr3",false],["b_hfDArGKk1Y9",false],["b_fBLiaNeC8Qs",false]] b1:[["b_PNXkPINdLr3",{"aliasUrl":"v0-comprehensive-staff-p4v3syp2c-trialsaas-projects.vercel.app","readyState":"READY","deploymentId":"dpl_Afzrvc9m2NCFqBvMQrabPUhhzLhu"}],["b_hfDArGKk1Y9","$undefined"],["b_fBLiaNeC8Qs",{"git":{"ref":"main","sha":"8fe500eefec1f0d6f98a53876a8c804f9d7cc4d0","type":"github","repoId":0,"repoName":"v0-1-ArwekGwvQrL3TQ7xQJKJg5ZO-XNAF4w3LoNa","ownerName":"v0-git-s3-storage","commitMessage":"Initial commit from v0"}}]] b2:[["b_PNXkPINdLr3",null],["b_hfDArGKk1Y9",null],["b_fBLiaNeC8Qs",null]] b3:[["b_PNXkPINdLr3",true],["b_hfDArGKk1Y9",true],["b_fBLiaNeC8Qs",true]] b4:[["b_PNXkPINdLr3",true],["b_hfDArGKk1Y9",true],["b_fBLiaNeC8Qs",true]] b5:[] b6:T86d,check the error, "04:05:01 Retrieving list of deployment files... 04:05:02 Downloading 101 deployment files... 04:05:07 Restored build cache from previous deployment (73HAdvVbpgbzdH7YoFJcXrTeDqB9) 04:05:07 Running build in Washington, D.C., USA (East) – iad1 04:05:08 Running "vercel build" 04:05:09 Vercel CLI 41.5.0 04:05:09 Running "install" command: `bun install`... 04:05:10 bun install v1.2.5 (013fdddc) 04:05:10 Resolving dependencies 04:05:16 Resolved, downloaded and extracted [2354] 04:05:16 warn: incorrect peer dependency "react@19.1.0" 04:05:16 04:05:16 warn: incorrect peer dependency "react-dom@19.1.0" 04:05:16 04:05:16 warn: incorrect peer dependency "react@19.1.0" 04:05:16 04:05:16 warn: incorrect peer dependency "date-fns@4.1.0" 04:05:17 Saved lockfile 04:05:17 04:05:17 + @types/react-dom@19.1.2 04:05:17 + @aws-sdk/credential-providers@3.787.0 04:05:17 + server-only@0.0.1 04:05:17 04:05:17 18 packages installed [7.40s] 04:05:17 Detected Next.js version: 15.2.4 04:05:17 Running "bun run build" 04:05:18 $ next build 04:05:19 ⚠ Invalid next.config.mjs options detected: 04:05:19 ⚠ Expected object, received boolean at "experimental.serverActions" 04:05:19 ⚠ Unrecognized key(s) in object: 'swcMinify' 04:05:19 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config 04:05:19 ▲ Next.js 15.2.4 04:05:19 - Experiments (use with caution): 04:05:19 ✓ webpackBuildWorker 04:05:19 ✓ parallelServerCompiles 04:05:19 ✓ parallelServerBuildTraces 04:05:19 04:05:19 Creating an optimized production build ... 04:05:44 ✓ Compiled successfully in 24.0s 04:05:44 Skipping validation of types 04:05:44 Skipping linting 04:05:45 Collecting page data ... 04:05:46 SyntaxError: Unexpected token '�', "�*^��ǿi�("... is not valid JSON 04:05:46 at JSON.parse () 04:05:46 at (.next/server/app/api/auth/verify/route.js:1:420) 04:05:46 04:05:46 > Build error occurred 04:05:46 [Error: Failed to collect page data for /api/auth/verify] { 04:05:46 type: 'Error' 04:05:46 } 04:05:46 error: script "build" exited with code 1 04:05:46 Error: Command "bun run build" exited with 1 04:05:47"b7:T8324d,[V0_FILE]typescriptreact:file="components/facial-recognition.tsx" isMerged="true" isEdit="true" "use client" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" interface FacialRecognitionProps { onSuccess: () => void } export function FacialRecognition({ onSuccess }: FacialRecognitionProps) { const videoRef = useRef(null) const canvasRef = useRef(null) const [capturedImage, setCapturedImage] = useState(null) const [status, setStatus] = useState<"waiting" | "capturing" | "verifying" | "success" | "error">("waiting") const [errorMessage, setErrorMessage] = useState("") useEffect(() => { if (status === "capturing") { startCamera() } return () => { stopCamera() } }, [status]) const startCamera = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true }) if (videoRef.current) { videoRef.current.srcObject = stream } } catch (err) { console.error("Error accessing camera:", err) setStatus("error") setErrorMessage("Could not access camera. Please ensure camera permissions are granted.") } } const stopCamera = () => { if (videoRef.current && videoRef.current.srcObject) { const stream = videoRef.current.srcObject as MediaStream const tracks = stream.getTracks() tracks.forEach((track) => track.stop()) videoRef.current.srcObject = null } } const captureImage = () => { if (videoRef.current && canvasRef.current) { const video = videoRef.current const canvas = canvasRef.current const context = canvas.getContext("2d") if (context) { canvas.width = video.videoWidth canvas.height = video.videoHeight context.drawImage(video, 0, 0, canvas.width, canvas.height) const imageDataUrl = canvas.toDataURL("image/png") setCapturedImage(imageDataUrl) stopCamera() setStatus("verifying") // Simulate verification process setTimeout(() => { setStatus("success") setTimeout(() => { onSuccess() }, 1000) }, 2000) } } } return (

Facial Verification

{status === "waiting" && (

We need to verify your identity with facial recognition.

)} {status === "capturing" && (

Position your face in the frame

)} {(status === "verifying" || status === "success") && (

{capturedImage && (

)}

{status === "verifying" &&

Verifying your identity...

} {status === "success" &&

Verification successful!

}

)} {status === "error" && (

{errorMessage}

)}

) } [V0_FILE]typescriptreact:file="app/admin/logs/loading.tsx" isFixed="true" isMerged="true" isEdit="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/staff/loading.tsx" isFixed="true" isMerged="true" isEdit="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/communications/loading.tsx" isFixed="true" isMerged="true" isEdit="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isQuickEdit="true" isMerged="true" isEdit="true" // Create a new settings page for admin "use client" import { useState } from "react" import { AdminLayout } from "@/components/admin-layout" 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 { Switch } from "@/components/ui/switch" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useToast } from "@/hooks/use-toast" export default function SettingsPage() { const { toast } = useToast() const [companyName, setCompanyName] = useState("Healthcare Staff Management") const [adminEmail, setAdminEmail] = useState("admin@example.com") const [notificationsEnabled, setNotificationsEnabled] = useState(true) const [locationTrackingEnabled, setLocationTrackingEnabled] = useState(true) const [facialRecognitionEnabled, setFacialRecognitionEnabled] = useState(true) const handleSaveGeneral = () => { toast({ title: "Settings Saved", description: "General settings have been updated successfully.", }) } const handleSaveNotifications = () => { toast({ title: "Notification Settings Saved", description: "Notification settings have been updated successfully.", }) } const handleSaveSecurity = () => { toast({ title: "Security Settings Saved", description: "Security settings have been updated successfully.", }) } return (

Settings

Manage system settings and configurations.

General Notifications Security General Settings

Company Name setCompanyName(e.target.value)} />

Admin Email setAdminEmail(e.target.value)} />

Timezone

Notification Settings

Email Notifications

Receive email notifications for important events

SMS Notifications

Receive SMS notifications for urgent matters

Notification Email

Security Settings

Location Tracking

Enable location tracking for staff check-ins

Facial Recognition

Require facial recognition for authentication

Session Timeout (minutes)

) } [V0_FILE]typescriptreact:file="app/admin/leave-requests/page.tsx" isMerged="true" isEdit="true" "use client" import { useState, useEffect } from "react" import { AdminLayout } from "@/components/admin-layout" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Calendar, User, Clock } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface LeaveRequest { id: string staffName: string staffId: string leaveType: string startDate: string endDate: string reason: string status: "pending" | "approved" | "rejected" submittedAt: string } export default function LeaveRequestsPage() { const { toast } = useToast() const [leaveRequests, setLeaveRequests] = useState([]) const [selectedRequest, setSelectedRequest] = useState(null) const [detailsOpen, setDetailsOpen] = useState(false) // Load leave requests from localStorage on component mount useEffect(() => { const storedRequests = localStorage.getItem("adminLeaveRequests") if (storedRequests) { const parsedRequests = JSON.parse(storedRequests) setLeaveRequests(parsedRequests) } }, []) // Mock data for leave requests (as fallback) const defaultLeaveRequests: LeaveRequest[] = [ { id: "1", staffName: "Sarah Johnson", staffId: "1", leaveType: "sick", startDate: "2025-04-01", endDate: "2025-04-02", reason: "I have a doctor's appointment and need to rest afterward.", status: "pending", submittedAt: "2025-03-27T10:30:00Z", }, { id: "2", staffName: "Michael Chen", staffId: "2", leaveType: "vacation", startDate: "2025-04-10", endDate: "2025-04-17", reason: "Annual family vacation.", status: "approved", submittedAt: "2025-03-20T14:15:00Z", }, { id: "3", staffName: "Emily Rodriguez", staffId: "3", leaveType: "personal", startDate: "2025-04-05", endDate: "2025-04-05", reason: "Personal matter to attend to.", status: "rejected", submittedAt: "2025-03-25T09:45:00Z", }, ] // Use the loaded requests or fallback to default if none are found const allRequests = leaveRequests.length > 0 ? leaveRequests : defaultLeaveRequests const handleViewDetails = (request: LeaveRequest) => { setSelectedRequest(request) setDetailsOpen(true) } const handleApproveRequest = () => { if (!selectedRequest) return // Update the request status const updatedRequests = allRequests.map((req) => req.id === selectedRequest.id ? { ...req, status: "approved" as const } : req, ) setLeaveRequests(updatedRequests) localStorage.setItem("adminLeaveRequests", JSON.stringify(updatedRequests)) toast({ title: "Leave Request Approved", description: `Leave request for ${selectedRequest.staffName} has been approved.`, }) setDetailsOpen(false) } const handleRejectRequest = () => { if (!selectedRequest) return // Update the request status const updatedRequests = allRequests.map((req) => req.id === selectedRequest.id ? { ...req, status: "rejected" as const } : req, ) setLeaveRequests(updatedRequests) localStorage.setItem("adminLeaveRequests", JSON.stringify(updatedRequests)) toast({ title: "Leave Request Rejected", description: `Leave request for ${selectedRequest.staffName} has been rejected.`, }) setDetailsOpen(false) } const getStatusBadge = (status: string) => { switch (status) { case "pending": return Pending case "approved": return Approved case "rejected": return Rejected default: return {status} } } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", year: "numeric", }) } return (

Leave Requests

Manage and respond to staff leave requests.

Pending Requests Staff Type Dates Submitted Status Actions {allRequests.filter((req) => req.status === "pending").length > 0 ? ( allRequests .filter((req) => req.status === "pending") .map((request) => ( {request.staffName} {request.leaveType} {formatDate(request.startDate)} {request.startDate !== request.endDate && ` - ${formatDate(request.endDate)}`} {new Date(request.submittedAt).toLocaleDateString()} {getStatusBadge(request.status)} )) ) : ( No pending leave requests. )}

All Leave Requests Staff Type Dates Status Actions {allRequests.length > 0 ? ( allRequests.map((request) => ( {request.staffName} {request.leaveType} {formatDate(request.startDate)} {request.startDate !== request.endDate && ` - ${formatDate(request.endDate)}`} {getStatusBadge(request.status)} )) ) : ( No leave requests found. )}

{/* Leave Request Details Dialog */} ) } [V0_FILE]typescriptreact:file="app/admin/messages/loading.tsx" isFixed="true" isMerged="true" isEdit="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/api/task-updates/route.ts" isMerged="true" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { v4 as uuidv4 } from "uuid" // This would connect to your database in a real implementation const taskUpdates = [] export async function POST(request: NextRequest) { try { // In a real implementation, we would verify the user is authenticated const formData = await request.formData() const taskId = formData.get("taskId") as string const message = formData.get("message") as string const staffId = formData.get("staffId") as string if (!taskId || !message || !staffId) { return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } // Handle file uploads (images, videos, etc.) const files = [] const fileData = formData.getAll("files") as File[] for (const file of fileData) { // In a real implementation, we would upload this to cloud storage const fileId = uuidv4() files.push({ id: fileId, name: file.name, type: file.type, size: file.size, // This would be a real URL in production url: `/api/files/${fileId}`, }) } // Create the update record const update = { id: uuidv4(), taskId, staffId, message, files, timestamp: new Date().toISOString(), } // In a real implementation, we would save this to the database taskUpdates.push(update) return NextResponse.json({ success: true, update, }) } catch (error) { console.error("Error creating task update:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function GET(request: NextRequest) { try { // In a real implementation, we would verify the user is authenticated // Parse query parameters const url = new URL(request.url) const taskId = url.searchParams.get("taskId") if (!taskId) { return NextResponse.json({ error: "Task ID is required" }, { status: 400 }) } // Filter updates by task ID const updates = taskUpdates.filter((update) => update.taskId === taskId) return NextResponse.json({ updates }) } catch (error) { console.error("Error fetching task updates:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/staff/tasks/[id]/page.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Camera, Upload, Send, Clock } from "lucide-react" // Mock data - in a real app, this would come from your API const mockTask = { id: "123", title: "Patient Assessment", description: "Complete assessment for patients in Ward B", priority: "high", dueDate: "2025-04-05T00:00:00.000Z", status: "in-progress", } export default function TaskDetailPage() { const params = useParams() const taskId = params.id as string const [task, setTask] = useState(mockTask) const [updates, setUpdates] = useState([]) const [message, setMessage] = useState("") const [files, setFiles] = useState([]) const [isSubmitting, setIsSubmitting] = useState(false) const [cameraActive, setCameraActive] = useState(false) const [stream, setStream] = useState(null) // Fetch task details useEffect(() => { // In a real app, fetch task from API // Example: fetch(`/api/tasks/${taskId}`).then(...) }, [taskId]) // Fetch task updates useEffect(() => { // In a real app, fetch updates from API // Example: fetch(`/api/task-updates?taskId=${taskId}`).then(...) }, [taskId]) // Handle camera activation const activateCamera = async () => { try { const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true }) setStream(mediaStream) setCameraActive(true) } catch (error) { console.error("Error accessing camera:", error) alert("Could not access camera. Please check permissions.") } } // Handle camera capture const captureImage = () => { if (!stream) return const video = document.createElement("video") video.srcObject = stream video.play() setTimeout(() => { const canvas = document.createElement("canvas") canvas.width = video.videoWidth canvas.height = video.videoHeight const ctx = canvas.getContext("2d") ctx?.drawImage(video, 0, 0) canvas.toBlob((blob) => { if (blob) { const file = new File([blob], `capture-${Date.now()}.jpg`, { type: "image/jpeg" }) setFiles((prev) => [...prev, file]) } }, "image/jpeg") // Stop the camera stream.getTracks().forEach((track) => track.stop()) setStream(null) setCameraActive(false) }, 500) } // Handle file selection const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { const newFiles = Array.from(e.target.files) setFiles((prev) => [...prev, ...newFiles]) } } // Handle form submission const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!message.trim() && files.length === 0) { alert("Please enter a message or attach files") return } setIsSubmitting(true) try { // In a real app, submit to API const formData = new FormData() formData.append("taskId", taskId) formData.append("message", message) formData.append("staffId", "current-user-id") // This would come from auth context files.forEach((file) => { formData.append("files", file) }) // Example: await fetch('/api/task-updates', { method: 'POST', body: formData }) // Mock successful submission const newUpdate = { id: Date.now().toString(), taskId, staffId: "current-user-id", message, files: files.map((file) => ({ id: Date.now().toString(), name: file.name, type: file.type, size: file.size, url: URL.createObjectURL(file), // This is just for preview })), timestamp: new Date().toISOString(), } setUpdates((prev) => [newUpdate, ...prev]) setMessage("") setFiles([]) } catch (error) { console.error("Error submitting update:", error) alert("Failed to submit update. Please try again.") } finally { setIsSubmitting(false) } } return (

{task.title} {task.priority.charAt(0).toUpperCase() + task.priority.slice(1)} Priority

{task.description}

Due: {new Date(task.dueDate).toLocaleDateString()}

Hourly Activity Log

setMessage(e.target.value)}
              className="min-h-[100px]"
            />

{files.length > 0 && (
              <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                {files.map((file, index) => (
                  <div key={index} className="relative group">
                    {file.type.startsWith("image/") ? (
                      <img
                        src={URL.createObjectURL(file) || "/placeholder.svg"}
                        alt={file.name}
                        className="h-24 w-full object-cover rounded-md"
                      />
                    ) : (
                      <div className="h-24 w-full flex items-center justify-center bg-gray-100 rounded-md">
                        <span className="text-xs text-center px-2">{file.name}</span>
                      </div>
                    )}
                    <button
                      type="button"
                      className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
                      onClick={() => setFiles(files.filter((_, i) => i !== index))}
                    >
                      ×
                    </button>
                  </div>
                ))}
              </div>
            )}

<div className="flex space-x-2">
              <Button type="button" variant="outline" onClick={activateCamera} disabled={cameraActive}>
                <Camera className="h-4 w-4 mr-2" />
                Camera
              </Button>

<Button type="button" variant="outline" onClick={() => document.getElementById("file-upload")?.click()}>
                <Upload className="h-4 w-4 mr-2" />
                Upload
              </Button>

<Button type="submit" disabled={isSubmitting} className="ml-auto">
                <Send className="h-4 w-4 mr-2" />
                {isSubmitting ? "Sending..." : "Send Update"}
              </Button>
            </div>
          </form>

{cameraActive && stream && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
              <div className="bg-white p-4 rounded-lg max-w-lg w-full">
                <h3 className="text-lg font-medium mb-2">Take Photo</h3>
                <video
                  ref={(videoEl) => {
                    if (videoEl && stream) {
                      videoEl.srcObject = stream
                      videoEl.play()
                    }
                  }}
                  className="w-full h-64 object-cover bg-black rounded-md mb-4"
                />
                <div className="flex justify-end space-x-2">
                  <Button
                    variant="outline"
                    onClick={() => {
                      stream.getTracks().forEach((track) => track.stop())
                      setStream(null)
                      setCameraActive(false)
                    }}
                  >
                    Cancel
                  </Button>
                  <Button onClick={captureImage}>Capture</Button>
                </div>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

<div className="space-y-4">
        <h3 className="text-lg font-medium">Previous Updates</h3>

{updates.length === 0 ? (
          <p className="text-gray-500">No updates yet. Be the first to provide an update!</p>
        ) : (
          updates.map((update: any) => (
            <Card key={update.id}>
              <CardContent className="pt-6">
                <div className="flex items-start space-x-4">
                  <Avatar>
                    <AvatarFallback>ST</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex justify-between">
                      <h4 className="font-medium">Staff Member</h4>
                      <span className="text-sm text-gray-500">{new Date(update.timestamp).toLocaleString()}</span>
                    </div>
                    <p className="mt-1">{update.message}</p>

{update.files && update.files.length > 0 && (
                      <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-3">
                        {update.files.map((file: any) => (
                          <div key={file.id}>
                            {file.type.startsWith("image/") ? (
                              <a href={file.url} target="_blank" rel="noopener noreferrer">
                                <img
                                  src={file.url || "/placeholder.svg"}
                                  alt={file.name}
                                  className="h-24 w-full object-cover rounded-md"
                                />
                              </a>
                            ) : file.type.startsWith("video/") ? (
                              <a
                                href={file.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="h-24 w-full flex items-center justify-center bg-gray-100 rounded-md"
                              >
                                <span className="text-xs text-center px-2">Video: {file.name}</span>
                              </a>
                            ) : (
                              <a
                                href={file.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="h-24 w-full flex items-center justify-center bg-gray-100 rounded-md"
                              >
                                <span className="text-xs text-center px-2">{file.name}</span>
                              </a>
                            )}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/tasks/[id]/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Clock, Calendar, User } from "lucide-react"

// Mock data - in a real app, this would come from your API
const mockTask = {
  id: "123",
  title: "Patient Assessment",
  description: "Complete assessment for patients in Ward B",
  priority: "high",
  dueDate: "2025-04-05T00:00:00.000Z",
  status: "in-progress",
  assignedTo: {
    id: "staff-1",
    name: "John Doe",
    role: "Nurse",
  },
}

const mockUpdates = [
  {
    id: "1",
    taskId: "123",
    staffId: "staff-1",
    staffName: "John Doe",
    message: "Completed assessments for patients 101-105. All vitals are stable.",
    files: [
      {
        id: "file-1",
        name: "patient-chart.jpg",
        type: "image/jpeg",
        url: "/placeholder.svg?height=200&width=300",
      },
    ],
    timestamp: "2025-04-01T14:30:00.000Z",
  },
  {
    id: "2",
    taskId: "123",
    staffId: "staff-1",
    staffName: "John Doe",
    message: "Started assessments for patients 106-110. Patient 108 needs additional monitoring.",
    files: [],
    timestamp: "2025-04-01T15:30:00.000Z",
  },
]

export default function AdminTaskDetailPage() {
  const params = useParams()
  const taskId = params.id as string

const [task, setTask] = useState(mockTask)
  const [updates, setUpdates] = useState(mockUpdates)

// Fetch task details
  useEffect(() => {
    // In a real app, fetch task from API
    // Example: fetch(`/api/tasks/${taskId}`).then(...)
  }, [taskId])

// Fetch task updates
  useEffect(() => {
    // In a real app, fetch updates from API
    // Example: fetch(`/api/task-updates?taskId=${taskId}`).then(...)
  }, [taskId])

return (
    <div className="container mx-auto py-6 space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            <span>{task.title}</span>
            <Badge
              variant={
                task.status === "completed" ? "default" : task.status === "in-progress" ? "secondary" : "outline"
              }
            >
              {task.status
                .split("-")
                .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                .join(" ")}
            </Badge>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-700 mb-4">{task.description}</p>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div className="flex items-center">
              <User className="h-5 w-5 mr-2 text-gray-500" />
              <div>
                <p className="text-sm text-gray-500">Assigned To</p>
                <p className="font-medium">{task.assignedTo.name}</p>
              </div>
            </div>

<div className="flex items-center">
              <Calendar className="h-5 w-5 mr-2 text-gray-500" />
              <div>
                <p className="text-sm text-gray-500">Due Date</p>
                <p className="font-medium">{new Date(task.dueDate).toLocaleDateString()}</p>
              </div>
            </div>

<div className="flex items-center">
              <div
                className={`h-5 w-5 mr-2 rounded-full ${
                  task.priority === "high"
                    ? "bg-red-500"
                    : task.priority === "medium"
                      ? "bg-yellow-500"
                      : "bg-green-500"
                }`}
              />
              <div>
                <p className="text-sm text-gray-500">Priority</p>
                <p className="font-medium">{task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

<div className="space-y-4">
        <h3 className="text-xl font-medium">Hourly Activity Updates</h3>

{updates.length === 0 ? (
          <p className="text-gray-500">No updates yet for this task.</p>
        ) : (
          updates.map((update) => (
            <Card key={update.id} className="overflow-hidden">
              <CardContent className="pt-6">
                <div className="flex items-start space-x-4">
                  <Avatar>
                    <AvatarFallback>
                      {update.staffName
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex justify-between">
                      <h4 className="font-medium">{update.staffName}</h4>
                      <div className="flex items-center text-sm text-gray-500">
                        <Clock className="h-4 w-4 mr-1" />
                        <span>{new Date(update.timestamp).toLocaleString()}</span>
                      </div>
                    </div>
                    <p className="mt-1">{update.message}</p>

{update.files && update.files.length > 0 && (
                      <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-3">
                        {update.files.map((file) => (
                          <div key={file.id}>
                            {file.type.startsWith("image/") ? (
                              <a href={file.url} target="_blank" rel="noopener noreferrer">
                                <img
                                  src={file.url || "/placeholder.svg"}
                                  alt={file.name}
                                  className="h-24 w-full object-cover rounded-md"
                                />
                              </a>
                            ) : file.type.startsWith("video/") ? (
                              <a
                                href={file.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="h-24 w-full flex items-center justify-center bg-gray-100 rounded-md"
                              >
                                <span className="text-xs text-center px-2">Video: {file.name}</span>
                              </a>
                            ) : (
                              <a
                                href={file.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="h-24 w-full flex items-center justify-center bg-gray-100 rounded-md"
                              >
                                <span className="text-xs text-center px-2">{file.name}</span>
                              </a>
                            )}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/schedule/page.tsx" isEdit="true" isMerged="true"
"use client"

import { DialogDescription } from "@/components/ui/dialog"

import { useState, useEffect } from "react"
import { AdminLayout } from "@/components/admin-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Clock, MapPin, Users, Plus, Loader2, Edit } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { format } from "date-fns"
import { getStaffMembers } from "@/lib/data-service"
import { getShifts, updateShift } from "@/lib/api-service"

interface Shift {
  id: string
  date: Date | string
  startTime: string
  endTime: string
  location: string
  department: string
  staffNeeded: number
  staffAssigned: number
  status: "open" | "filled" | "understaffed" | "completed"
  assignedStaff?: string[]
}

interface StaffMember {
  id: string
  uid?: string
  name: string
  department: string
  role: string
}

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

export default function ShiftManagementPage() {
  const { toast } = useToast()
  const [date, setDate] = useState<Date | undefined>(new Date())
  const [addShiftOpen, setAddShiftOpen] = useState(false)
  const [assignStaffOpen, setAssignStaffOpen] = useState(false)
  const [viewReportOpen, setViewReportOpen] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [viewMode, setViewMode] = useState<"day" | "week" | "month">("day")
  const [shifts, setShifts] = useState<Shift[]>([])
  const [staffMembers, setStaffMembers] = useState<StaffMember[]>([])
  const [locations, setLocations] = useState<Location[]>([])
  const [selectedShift, setSelectedShift] = useState<Shift | null>(null)
  const [selectedStaff, setSelectedStaff] = useState<string[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isClient, setIsClient] = useState(false)
  const [newShiftData, setNewShiftData] = useState({
    date: new Date(),
    startTime: "07:00",
    endTime: "15:00",
    location: "",
    department: "General Care",
    staffNeeded: 5,
  })

// Initialize client-side rendering
  useEffect(() => {
    setIsClient(true)
  }, [])

// Load shifts, staff, and locations from localStorage
  useEffect(() => {
    const loadData = async () => {
      try {
        setIsLoading(true)

// Load staff from API
        const staffData = await getStaffMembers()
        setStaffMembers(staffData)

// Load locations from localStorage
        const storedLocations = localStorage.getItem("locations")
        const locationsData = storedLocations ? JSON.parse(storedLocations) : []
        setLocations(locationsData)

// If no locations exist, create a default one
        if (locationsData.length === 0) {
          const defaultLocation = {
            id: "loc_default",
            name: "Main Hospital",
            address: "123 Medical Center Dr",
            description: "Main hospital building",
            createdAt: new Date().toISOString(),
          }

localStorage.setItem("locations", JSON.stringify([defaultLocation]))
          setLocations([defaultLocation])

// Set default location for new shifts
          setNewShiftData((prev) => ({
            ...prev,
            location: defaultLocation.id,
          }))
        } else {
          // Set first location as default for new shifts
          setNewShiftData((prev) => ({
            ...prev,
            location: locationsData[0].id,
          }))
        }

// Load shifts from API
        const formattedDate = format(date || new Date(), "yyyy-MM-dd")
        const shiftsData = await getShifts({ date: formattedDate })

// Convert date strings to Date objects
        const formattedShifts = shiftsData.shifts.map((shift: any) => ({
          ...shift,
          date: new Date(shift.date),
        }))

setShifts(formattedShifts)
      } catch (error) {
        console.error("Error loading data:", error)
        toast({
          title: "Error",
          description: "Failed to load shifts and staff data. Please refresh the page.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

if (isClient) {
      loadData()
    }
  }, [isClient, toast, date])

// Filter shifts for the selected date
  const shiftsForSelectedDate = date
    ? shifts.filter(
        (shift) =>
          shift.date instanceof Date &&
          shift.date.getDate() === date.getDate() &&
          shift.date.getMonth() === date.getMonth() &&
          shift.date.getFullYear() === date.getFullYear(),
      )
    : []

// Handle adding a new shift
  const handleAddShift = () => {
    // This function is left out for brevity. Assume it is correct and does not need any modifications.
  }

// Handle opening the assign staff dialog
  const handleOpenAssignStaff = (shift: Shift) => {
    // This function is left out for brevity. Assume it is correct and does not need any modifications.
  }

// Handle assigning staff to a shift
  const handleAssignStaff = () => {
    // This function is left out for brevity. Assume it is correct and does not need any modifications.
  }

// Handle opening the view report dialog
  const handleOpenViewReport = (shift: Shift) => {
    // This function is left out for brevity. Assume it is correct and does not need any modifications.
  }

// Function to format date for display
  const formatDate = (date: Date) => {
    return date.toLocaleDateString("en-US", {
      weekday: "long",
      month: "long",
      day: "numeric",
      year: "numeric",
    })
  }

// Function to determine if a date has shifts
  const hasShifts = (date: Date) => {
    return shifts.some(
      (shift) =>
        shift.date instanceof Date &&
        shift.date.getDate() === date.getDate() &&
        shift.date.getMonth() === date.getMonth() &&
        shift.date.getFullYear() === date.getFullYear(),
    )
  }

// Function to get status badge
  const getStatusBadge = (status: string) => {
    switch (status) {
      case "filled":
        return <Badge className="bg-green-500">Filled</Badge>
      case "understaffed":
        return <Badge variant="destructive">Understaffed</Badge>
      case "open":
        return <Badge variant="outline">Open</Badge>
      case "completed":
        return <Badge variant="secondary">Completed</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

// Handle input change for new shift form
  const handleNewShiftChange = (field: string, value: any) => {
    setNewShiftData((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

// Toggle staff selection
  const toggleStaffSelection = (staffId: string) => {
    // This function is left out for brevity. Assume it is correct and does not need any modifications.
  }

// Mark shift as completed
  const markShiftAsCompleted = (shiftId: string) => {
    // This function is left out for brevity. Assume it is correct and does not need any modifications.
  }

// Get location name by ID
  const getLocationName = (locationId: string) => {
    const location = locations.find((loc) => loc.id === locationId)
    return location ? location.name : "Unknown Location"
  }

// Open edit dialog
  const openEditDialog = (shift: Shift) => {
    setSelectedShift(shift)
    setFormData({
      name: shift.name,
      address: shift.address,
      description: shift.description || "",
    })
    setIsEditDialogOpen(true)
  }

// Handle editing a shift
  const handleEditShift = async () => {
    if (!selectedShift) return

try {
      // Prepare the update data
      const updateData = {
        startTime: newShiftData.startTime,
        endTime: newShiftData.endTime,
        location: newShiftData.location,
        department: newShiftData.department,
        staffNeeded: newShiftData.staffNeeded,
      }

// Call the API to update the shift
      await updateShift(selectedShift.id, updateData)

// Update the local state
      const updatedShifts = shifts.map((shift) => {
        if (shift.id === selectedShift.id) {
          return {
            ...shift,
            ...updateData,
          }
        }
        return shift
      })

setShifts(updatedShifts)
      setIsEditDialogOpen(false)
      toast({
        title: "Shift Updated",
        description: "Shift details have been updated.",
      })
    } catch (error) {
      console.error("Error updating shift:", error)
      toast({
        title: "Error",
        description: "Failed to update shift. Please try again.",
        variant: "destructive",
      })
    }
  }

if (!isClient) {
    return (
      <AdminLayout>
        <div className="flex items-center justify-center h-[60vh]">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
          <span className="ml-2">Loading shift management data...</span>
        </div>
      </AdminLayout>
    )
  }

<div className="grid gap-6 md:grid-cols-[300px_1fr]">
          <Card>
            <CardHeader>
              <CardTitle>Calendar</CardTitle>
            </CardHeader>
            <CardContent>
              <Calendar
                mode="single"
                selected={date}
                onSelect={setDate}
                className="rounded-md border"
                modifiers={{
                  hasShifts: (date) => hasShifts(date),
                }}
                modifiersStyles={{
                  hasShifts: { fontWeight: "bold", backgroundColor: "rgba(59, 130, 246, 0.1)" },
                }}
              />
            </CardContent>
          </Card>

<div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>{date ? formatDate(date) : "Select a date"}</CardTitle>
              </CardHeader>
              <CardContent>
                {shiftsForSelectedDate.length > 0 ? (
                  <div className="space-y-4">
                    {shiftsForSelectedDate.map((shift) => (
                      <div
                        key={shift.id}
                        className="flex flex-col md:flex-row justify-between items-start md:items-center p-4 border rounded-lg"
                      >
                        <div className="space-y-2 mb-4 md:mb-0">
                          <div className="flex items-center">
                            <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
                            <span>
                              {shift.startTime} - {shift.endTime}
                            </span>
                          </div>
                          <div className="flex items-center">
                            <MapPin className="h-4 w-4 mr-2 text-muted-foreground" />
                            <span>{getLocationName(shift.location)}</span>
                          </div>
                          <div className="flex items-center">
                            <Users className="h-4 w-4 mr-2 text-muted-foreground" />
                            <span>
                              {shift.staffAssigned}/{shift.staffNeeded} Staff ({shift.department})
                            </span>
                          </div>
                          <div>{getStatusBadge(shift.status)}</div>
                        </div>
                        <div className="flex flex-col sm:flex-row gap-2">
                          {shift.status !== "completed" && (
                            <>
                              <Button variant="outline" size="sm" onClick={() => handleOpenAssignStaff(shift)}>
                                Assign Staff
                              </Button>
                              <Button variant="outline" size="sm" onClick={() => markShiftAsCompleted(shift.id)}>
                                Mark Completed
                              </Button>
                            </>
                          )}
                          {shift.status === "completed" && (
                            <Button variant="outline" size="sm" onClick={() => handleOpenViewReport(shift)}>
                              View Report
                            </Button>
                          )}
                          <Button variant="outline" size="sm" onClick={() => openEditDialog(shift)}>
                            <Edit className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-8">
                    <p className="text-muted-foreground">
                      No shifts scheduled for this date. Click "Add Shift" to create one.
                    </p>
                  </div>
                )}
              </CardContent>
            </Card>

{/* Edit Shift Dialog */}
            <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
              <DialogContent className="sm:max-w-[500px]">
                <DialogHeader>
                  <DialogTitle>Edit Shift</DialogTitle>
                  <DialogDescription>Update the details of this shift.</DialogDescription>
                </DialogHeader>
                <div className="grid gap-4 py-4">
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="shift-date" className="text-right">
                      Date
                    </Label>
                    <div className="col-span-3">
                      <input
                        id="shift-date"
                        type="date"
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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"
                        value={newShiftData.date.toISOString().split("T")[0]}
                        onChange={(e) => handleNewShiftChange("date", new Date(e.target.value))}
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="start-time" className="text-right">
                      Start Time
                    </Label>
                    <div className="col-span-3">
                      <input
                        id="start-time"
                        type="time"
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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"
                        value={newShiftData.startTime}
                        onChange={(e) => handleNewShiftChange("startTime", e.target.value)}
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="end-time" className="text-right">
                      End Time
                    </Label>
                    <div className="col-span-3">
                      <input
                        id="end-time"
                        type="time"
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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"
                        value={newShiftData.endTime}
                        onChange={(e) => handleNewShiftChange("endTime", e.target.value)}
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="location" className="text-right">
                      Location
                    </Label>
                    <div className="col-span-3">
                      <Select
                        value={newShiftData.location}
                        onValueChange={(value) => handleNewShiftChange("location", value)}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Select location" />
                        </SelectTrigger>
                        <SelectContent>
                          {locations.length > 0 ? (
                            locations.map((location) => (
                              <SelectItem key={location.id} value={location.id}>
                                {location.name}
                              </SelectItem>
                            ))
                          ) : (
                            <SelectItem value="none" disabled>
                              No locations available
                            </SelectItem>
                          )}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="department" className="text-right">
                      Department
                    </Label>
                    <Select
                      value={newShiftData.department}
                      onValueChange={(value) => handleNewShiftChange("department", value)}
                    >
                      <SelectTrigger className="col-span-3">
                        <SelectValue placeholder="Select department" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="General Care">General Care</SelectItem>
                        <SelectItem value="Emergency">Emergency</SelectItem>
                        <SelectItem value="ICU">ICU</SelectItem>
                        <SelectItem value="Pediatrics">Pediatrics</SelectItem>
                        <SelectItem value="Cardiology">Cardiology</SelectItem>
                        <SelectItem value="Neurology">Neurology</SelectItem>
                        <SelectItem value="Oncology">Oncology</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="staff-needed" className="text-right">
                      Staff Needed
                    </Label>
                    <Input
                      id="staff-needed"
                      type="number"
                      min="1"
                      value={newShiftData.staffNeeded}
                      onChange={(e) => handleNewShiftChange("staffNeeded", Number.parseInt(e.target.value))}
                      className="col-span-3"
                    />
                  </div>
                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
                    Cancel
                  </Button>
                  <Button onClick={handleEditShift}>Save Changes</Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>
        </div>
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/staff/add-staff.tsx" isEdit="true" isQuickEdit="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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { toast } from "@/components/ui/use-toast"

export default function AddStaffForm() {
  const router = useRouter()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    confirmPassword: "",
    role: "",
    department: "",
    phone: "",
  })

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

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

// Update the handleSubmit function to properly save credentials and provide feedback
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

// Validate form
    if (!formData.firstName || !formData.lastName || !formData.email || !formData.role || !formData.department) {
      toast({
        title: "Error",
        description: "Please fill in all required fields",
        variant: "destructive",
      })
      return
    }

// Validate password
    if (!formData.password) {
      toast({
        title: "Error",
        description: "Password is required",
        variant: "destructive",
      })
      return
    }

if (formData.password.length < 6) {
      toast({
        title: "Error",
        description: "Password must be at least 6 characters",
        variant: "destructive",
      })
      return
    }

if (formData.password !== formData.confirmPassword) {
      toast({
        title: "Error",
        description: "Passwords do not match",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      // Create a staff object
      const newStaff = {
        id: Date.now().toString(),
        name: `${formData.firstName} ${formData.lastName}`,
        email: formData.email,
        role: formData.role,
        department: formData.department,
        phone: formData.phone || "",
        status: "active",
      }

// Get existing staff members
      const existingStaff = JSON.parse(localStorage.getItem("adminStaffMembers") || "[]")

// Check if email already exists
      const emailExists = existingStaff.some((staff: any) => staff.email === formData.email)
      if (emailExists) {
        toast({
          title: "Error",
          description: "A staff member with this email already exists",
          variant: "destructive",
        })
        setIsSubmitting(false)
        return
      }

// Add new staff member
      existingStaff.push(newStaff)
      localStorage.setItem("adminStaffMembers", JSON.stringify(existingStaff))

// Save login credentials
      const credentials = JSON.parse(localStorage.getItem("userCredentials") || "[]")
      credentials.push({
        email: formData.email,
        password: formData.password,
        role: formData.role,
        userId: newStaff.id,
      })
      localStorage.setItem("userCredentials", JSON.stringify(credentials))

toast({
        title: "Success",
        description: "Staff member added successfully",
      })

// Reset form
      setFormData({
        firstName: "",
        lastName: "",
        email: "",
        password: "",
        confirmPassword: "",
        role: "",
        department: "",
        phone: "",
      })

// Redirect to staff list
      setTimeout(() => {
        router.push("/admin/staff")
      }, 1500)
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to add staff member",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Add New Staff Member</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="firstName">First Name *</Label>
              <Input id="firstName" name="firstName" value={formData.firstName} onChange={handleChange} required />
            </div>

<div className="space-y-2">
            <Label htmlFor="email">Email Address *</Label>
            <Input id="email" name="email" type="email" value={formData.email} onChange={handleChange} required />
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="password">Password *</Label>
              <Input
                id="password"
                name="password"
                type="password"
                value={formData.password}
                onChange={handleChange}
                required
                minLength={6}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="confirmPassword">Confirm Password *</Label>
              <Input
                id="confirmPassword"
                name="confirmPassword"
                type="password"
                value={formData.confirmPassword}
                onChange={handleChange}
                required
              />
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="role">Role *</Label>
              <Select value={formData.role} onValueChange={(value) => handleSelectChange("role", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select role" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Nurse">Nurse</SelectItem>
                  <SelectItem value="Doctor">Doctor</SelectItem>
                  <SelectItem value="Administrator">Administrator</SelectItem>
                  <SelectItem value="Receptionist">Receptionist</SelectItem>
                  <SelectItem value="Technician">Technician</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="department">Department *</Label>
              <Select value={formData.department} onValueChange={(value) => handleSelectChange("department", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select department" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Emergency">Emergency</SelectItem>
                  <SelectItem value="ICU">ICU</SelectItem>
                  <SelectItem value="Pediatrics">Pediatrics</SelectItem>
                  <SelectItem value="Cardiology">Cardiology</SelectItem>
                  <SelectItem value="Neurology">Neurology</SelectItem>
                  <SelectItem value="Oncology">Oncology</SelectItem>
                  <SelectItem value="Administration">Administration</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="phone">Phone Number</Label>
            <Input id="phone" name="phone" type="tel" value={formData.phone} onChange={handleChange} />
          </div>

<div className="flex justify-end space-x-2">
            <Button type="button" variant="outline" onClick={() => router.push("/admin/staff")}>
              Cancel
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Adding..." : "Add Staff Member"}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/login-fixed/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

export default function LoginPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

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

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

setIsSubmitting(true)

try {
      // Admin login
      if (email === "admin" && password === "admin123") {
        localStorage.setItem(
          "currentUser",
          JSON.stringify({
            id: "admin-1",
            email,
            role: "admin",
            name: "Admin User",
          }),
        )

toast({
          title: "Success",
          description: "Logged in as admin successfully",
        })

router.push("/admin/dashboard")
        return
      }

// Specific user login
      if (email === "cfeventurecaps@gmail.com" && password === "123456") {
        localStorage.setItem(
          "currentUser",
          JSON.stringify({
            id: "staff-1",
            email,
            role: "staff",
            name: "CFE Venture",
          }),
        )

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

router.push("/staff/dashboard")
        return
      }

// Check other staff credentials
      const staffMembers = JSON.parse(localStorage.getItem("adminStaffMembers") || "[]")
      const staffMember = staffMembers.find((staff: any) => staff.email === email)

const credentials = JSON.parse(localStorage.getItem("userCredentials") || "[]")
      const credential = credentials.find((cred: any) => cred.email === email && cred.password === password)

if (staffMember && credential) {
        localStorage.setItem(
          "currentUser",
          JSON.stringify({
            id: staffMember.id,
            email,
            role: "staff",
            name: staffMember.name,
          }),
        )

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

router.push("/staff/dashboard")
        return
      }

// If we get here, login failed
      toast({
        title: "Error",
        description: "Invalid email or password",
        variant: "destructive",
      })
    } catch (error) {
      console.error("Login error:", error)
      toast({
        title: "Error",
        description: "An error occurred during login",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl">Healthcare Staff Login</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
            </div>

<div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>

<Button type="submit" className="w-full" disabled={isSubmitting}>
              {isSubmitting ? "Logging in..." : "Log In"}
            </Button>

<div className="text-center text-sm text-gray-500 mt-4">
              <p>Demo Credentials:</p>
              <p>Admin: admin / admin123</p>
              <p>Staff: cfeventurecaps@gmail.com / 123456</p>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/storage-utils.ts" isMerged="true" isEdit="true"
// Helper functions for localStorage management

// Staff Members
export function getStaffMembers() {
  return JSON.parse(localStorage.getItem("staffMembers") || "[]")
}

export function saveStaffMembers(staffMembers: any[]) {
  localStorage.setItem("staffMembers", JSON.stringify(staffMembers))
}

export function addStaffMember(staffMember: any) {
  const staffMembers = getStaffMembers()
  staffMembers.push(staffMember)
  saveStaffMembers(staffMembers)
}

// User Credentials
export function getUserCredentials() {
  return JSON.parse(localStorage.getItem("userCredentials") || "[]")
}

export function saveUserCredentials(credentials: any[]) {
  localStorage.setItem("userCredentials", JSON.stringify(credentials))
}

export function addUserCredential(credential: any) {
  const credentials = getUserCredentials()
  credentials.push(credential)
  saveUserCredentials(credentials)
}

// Current User
export function getCurrentUser() {
  return JSON.parse(localStorage.getItem("currentUser") || "null")
}

export function saveCurrentUser(user: any) {
  localStorage.setItem("currentUser", JSON.stringify(user))
}

export function clearCurrentUser() {
  localStorage.removeItem("currentUser")
}

// Check if user is logged in
export function isLoggedIn() {
  return !!getCurrentUser()
}

// Check if user is admin
export function isAdmin() {
  const user = getCurrentUser()
  return user && user.role === "admin"
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="bg-primary py-6">
        <div className="container mx-auto px-4">
          <h1 className="text-3xl font-bold text-primary-foreground">Healthcare Staff Management System</h1>
        </div>
      </header>

<main className="flex-1 container mx-auto px-4 py-12">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="text-4xl font-bold mb-6">Streamline Your Healthcare Workflow</h2>
          <p className="text-xl mb-8">
            A comprehensive platform for frontline healthcare staff to manage time tracking, communication, and daily
            activities.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/login">
              <Button size="lg" className="w-full sm:w-auto">
                Staff Login
              </Button>
            </Link>
            <Link href="/admin/login">
              <Button size="lg" variant="outline" className="w-full sm:w-auto">
                Admin Login
              </Button>
            </Link>
          </div>
        </div>

<div className="mt-20 grid md:grid-cols-3 gap-8">
          <div className="bg-card p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-semibold mb-3">Time Tracking</h3>
            <p>Clock in/out with facial recognition and geolocation verification for accurate time tracking.</p>
          </div>
          <div className="bg-card p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-semibold mb-3">Activity Logging</h3>
            <p>Record detailed hourly activities with support for text, photos, videos, and audio attachments.</p>
          </div>
          <div className="bg-card p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-semibold mb-3">Communication</h3>
            <p>Integrated messaging and call features to stay connected with supervisors and colleagues.</p>
          </div>
        </div>
      </main>

<footer className="bg-muted py-6">
        <div className="container mx-auto px-4 text-center">
          <p>© 2025 Healthcare Staff Management System</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/init/route.ts" isMerged="true" isEdit="true"
import { NextResponse } from "next/server"
import { db } from "@/lib/firebase"
import { collection, query, where, getDocs, addDoc, serverTimestamp } from "firebase/firestore"
import clientPromise from "@/lib/mongodb"

export async function GET() {
  try {
    // Check if admin user exists in Firestore
    const adminQuery = query(collection(db, "users"), where("role", "==", "admin"))
    const querySnapshot = await getDocs(adminQuery)

if (querySnapshot.empty) {
      // Create admin user in Firestore
      const adminData = {
        username: "admin",
        password: "admin123", // In a real app, you should hash this
        email: "admin@example.com",
        name: "Admin User",
        role: "admin",
        createdAt: serverTimestamp(),
      }

const docRef = await addDoc(collection(db, "users"), adminData)

// Also create in MongoDB
      const client = await clientPromise
      const mongoDb = client.db("healthcare-staff-app")

await mongoDb.collection("admins").insertOne({
        firebaseId: docRef.id,
        username: "admin",
        password: "admin123", // In a real app, you should hash this
        email: "admin@example.com",
        name: "Admin User",
        role: "admin",
        createdAt: new Date(),
      })

return NextResponse.json({ success: true, message: "Admin user created" })
    }

return NextResponse.json({ success: true, message: "Admin user already exists" })
  } catch (error) {
    console.error("Error initializing admin user:", error)
    return NextResponse.json({ success: false, error: "Failed to initialize admin user" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/init-staff/route.ts" isMerged="true" isEdit="true"
import { NextResponse } from "next/server"
import { auth, db } from "@/lib/firebase"
import { createUserWithEmailAndPassword } from "firebase/auth"
import { doc, setDoc, collection, query, where, getDocs, serverTimestamp } from "firebase/firestore"
import clientPromise from "@/lib/mongodb"

export async function GET() {
  try {
    // Check if default staff exists in Firestore
    const staffQuery = query(collection(db, "users"), where("email", "==", "cfeventurecaps@gmail.com"))
    const querySnapshot = await getDocs(staffQuery)

if (querySnapshot.empty) {
      try {
        // Create user in Firebase Auth
        const userCredential = await createUserWithEmailAndPassword(auth, "cfeventurecaps@gmail.com", "123456")
        const user = userCredential.user

// Store additional user data in Firestore
        const userData = {
          uid: user.uid,
          email: "cfeventurecaps@gmail.com",
          firstName: "CFE",
          lastName: "Venture",
          name: "CFE Venture",
          role: "staff",
          department: "Emergency",
          phone: "",
          status: "active",
          createdAt: serverTimestamp(),
        }

await setDoc(doc(db, "users", user.uid), userData)

// Also create in MongoDB
        const client = await clientPromise
        const mongoDb = client.db("healthcare-staff-app")

await mongoDb.collection("staff").insertOne({
          firebaseUid: user.uid,
          email: "cfeventurecaps@gmail.com",
          firstName: "CFE",
          lastName: "Venture",
          name: "CFE Venture",
          role: "staff",
          department: "Emergency",
          phone: "",
          status: "active",
          createdAt: new Date(),
        })

return NextResponse.json({ success: true, message: "Default staff created" })
      } catch (error: any) {
        // If the user already exists in Auth but not in Firestore
        if (error.code === "auth/email-already-in-use") {
          return NextResponse.json(
            { success: false, error: "Email already in use but not in database" },
            { status: 400 },
          )
        }

throw error
      }
    }

return NextResponse.json({ success: true, message: "Default staff already exists" })
  } catch (error) {
    console.error("Error initializing default staff:", error)
    return NextResponse.json({ success: false, error: "Failed to initialize default staff" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/lib/mongodb.ts" isMerged="true" isEdit="true"
import { MongoClient, ServerApiVersion } from "mongodb"

if (!process.env.MONGODB_URI) {
  throw new Error("Please add your MongoDB URI to .env.local")
}

const uri = process.env.MONGODB_URI
const options = {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  },
}

let client
let clientPromise: Promise<MongoClient>

if (process.env.NODE_ENV === "development") {
  // In development mode, use a global variable so that the value
  // is preserved across module reloads caused by HMR (Hot Module Replacement).
  const globalWithMongo = global as typeof globalThis & {
    _mongoClientPromise?: Promise<MongoClient>
  }

if (!globalWithMongo._mongoClientPromise) {
    client = new MongoClient(uri, options)
    globalWithMongo._mongoClientPromise = client.connect()
  }
  clientPromise = globalWithMongo._mongoClientPromise
} else {
  // In production mode, it's best to not use a global variable.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

export default clientPromise
[V0_FILE]typescript:file="lib/mongodb.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { MongoClient, ServerApiVersion } from "mongodb"

if (!process.env.MONGODB_URI) {
  throw new Error("Please add your MongoDB URI to .env.local")
}

const uri = process.env.MONGODB_URI
const options = {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  },
}

let client
let clientPromise: Promise<MongoClient>

export default clientPromise
[V0_FILE]typescriptreact:file="lib/firebase-service.ts" isEdit="true" isMerged="true"
import {
  collection,
  doc,
  setDoc,
  getDoc,
  getDocs,
  query,
  where,
  addDoc,
  updateDoc,
  serverTimestamp,
  onSnapshot,
  orderBy,
  limit,
} from "firebase/firestore"
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from "firebase/auth"
import { auth, db } from "./firebase"

// Authentication functions
export const loginWithEmail = async (email: string, password: string) => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password)
    const user = userCredential.user

// Get additional user data from Firestore
    const userDoc = await getDoc(doc(db, "users", user.uid))
    if (userDoc.exists()) {
      return {
        uid: user.uid,
        email: user.email,
        ...userDoc.data(),
      }
    }
    return null
  } catch (error) {
    console.error("Error logging in:", error)
    throw error
  }
}

export const logoutUser = async () => {
  try {
    await signOut(auth)
    return true
  } catch (error) {
    console.error("Error logging out:", error)
    throw error
  }
}

// Staff management functions
export const createStaffMember = async (staffData: any) => {
  try {
    // Create user in Firebase Auth
    const userCredential = await createUserWithEmailAndPassword(auth, staffData.email, staffData.password)
    const user = userCredential.user

// Store additional user data in Firestore
    const userData = {
      uid: user.uid,
      email: staffData.email,
      firstName: staffData.firstName,
      lastName: staffData.lastName,
      name: `${staffData.firstName} ${staffData.lastName}`,
      role: staffData.role,
      department: staffData.department,
      phone: staffData.phone || "",
      status: "active",
      createdAt: serverTimestamp(),
    }

await setDoc(doc(db, "users", user.uid), userData)

return {
      uid: user.uid,
      ...userData,
    }
  } catch (error) {
    console.error("Error creating staff member:", error)
    throw error
  }
}

export const getStaffMembers = async () => {
  try {
    const staffQuery = query(collection(db, "users"), where("role", "!=", "admin"))
    const querySnapshot = await getDocs(staffQuery)

return querySnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
    }))
  } catch (error) {
    console.error("Error getting staff members:", error)
    throw error
  }
}

export const updateStaffMember = async (staffId: string, updateData: any) => {
  try {
    const staffRef = doc(db, "users", staffId)
    await updateDoc(staffRef, {
      ...updateData,
      updatedAt: serverTimestamp(),
    })
    return true
  } catch (error) {
    console.error("Error updating staff member:", error)
    throw error
  }
}

export const deleteStaffMember = async (staffId: string) => {
  try {
    const staffRef = doc(db, "users", staffId)
    await updateDoc(staffRef, {
      status: "deleted",
      updatedAt: serverTimestamp(),
    })
    return true
  } catch (error) {
    console.error("Error deleting staff member:", error)
    throw error
  }
}

// Message functions
export const sendMessage = async (message: any) => {
  try {
    const messageData = {
      ...message,
      createdAt: serverTimestamp(),
      status: "sent",
    }

const docRef = await addDoc(collection(db, "messages"), messageData)
    return {
      id: docRef.id,
      ...messageData,
    }
  } catch (error) {
    console.error("Error sending message:", error)
    throw error
  }
}

export const getMessages = async (userId: string, isAdmin: boolean) => {
  try {
    let messagesQuery

if (isAdmin) {
      // Admin can see all messages
      messagesQuery = query(collection(db, "messages"), orderBy("createdAt", "desc"))
    } else {
      // Staff can only see their own messages
      messagesQuery = query(collection(db, "messages"), where("staffId", "==", userId), orderBy("createdAt", "desc"))
    }

const querySnapshot = await getDocs(messagesQuery)

return querySnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
      createdAt: doc.data().createdAt ? doc.data().createdAt.toDate().toISOString() : new Date().toISOString(),
    }))
  } catch (error) {
    console.error("Error getting messages:", error)
    throw error
  }
}

export const subscribeToMessages = (userId: string, isAdmin: boolean, callback: (messages: any[]) => void) => {
  try {
    let messagesQuery

return onSnapshot(messagesQuery, (snapshot) => {
      const messages = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
        createdAt: doc.data().createdAt ? doc.data().createdAt.toDate().toISOString() : new Date().toISOString(),
      }))
      callback(messages)
    })
  } catch (error) {
    console.error("Error subscribing to messages:", error)
    throw error
  }
}

export const replyToMessage = async (messageId: string, reply: any) => {
  try {
    const messageRef = doc(db, "messages", messageId)
    const messageDoc = await getDoc(messageRef)

if (!messageDoc.exists()) {
      throw new Error("Message not found")
    }

const messageData = messageDoc.data()
    const replies = messageData.replies || []

const newReply = {
      ...reply,
      createdAt: serverTimestamp(),
    }

await updateDoc(messageRef, {
      replies: [...replies, newReply],
      status: "replied",
    })

return {
      id: messageId,
      ...messageData,
      replies: [...replies, newReply],
    }
  } catch (error) {
    console.error("Error replying to message:", error)
    throw error
  }
}

// Time tracking functions
export const createTimeSession = async (sessionData: any) => {
  try {
    const data = {
      ...sessionData,
      createdAt: serverTimestamp(),
    }

const docRef = await addDoc(collection(db, "timeSessions"), data)
    return {
      id: docRef.id,
      ...data,
    }
  } catch (error) {
    console.error("Error creating time session:", error)
    throw error
  }
}

export const updateTimeSession = async (sessionId: string, updateData: any) => {
  try {
    const sessionRef = doc(db, "timeSessions", sessionId)
    await updateDoc(sessionRef, {
      ...updateData,
      updatedAt: serverTimestamp(),
    })
    return true
  } catch (error) {
    console.error("Error updating time session:", error)
    throw error
  }
}

export const getTimeSessions = async (staffId: string) => {
  try {
    const sessionsQuery = query(
      collection(db, "timeSessions"),
      where("staffId", "==", staffId),
      orderBy("createdAt", "desc"),
    )

const querySnapshot = await getDocs(sessionsQuery)

return querySnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
      clockInTime: doc.data().clockInTime?.toDate(),
      clockOutTime: doc.data().clockOutTime?.toDate(),
      createdAt: doc.data().createdAt?.toDate(),
    }))
  } catch (error) {
    console.error("Error getting time sessions:", error)
    throw error
  }
}

export const getActiveTimeSession = async (staffId: string) => {
  try {
    const sessionsQuery = query(
      collection(db, "timeSessions"),
      where("staffId", "==", staffId),
      where("status", "==", "active"),
      limit(1),
    )

const querySnapshot = await getDocs(sessionsQuery)

if (querySnapshot.empty) {
      return null
    }

const doc = querySnapshot.docs[0]
    return {
      id: doc.id,
      ...doc.data(),
      clockInTime: doc.data().clockInTime?.toDate(),
    }
  } catch (error) {
    console.error("Error getting active time session:", error)
    throw error
  }
}

// Shift management functions
export const createShift = async (shiftData: any) => {
  try {
    const data = {
      ...shiftData,
      createdAt: serverTimestamp(),
    }

const docRef = await addDoc(collection(db, "shifts"), data)
    return {
      id: docRef.id,
      ...data,
    }
  } catch (error) {
    console.error("Error creating shift:", error)
    throw error
  }
}

export const updateShift = async (shiftId: string, updateData: any) => {
  try {
    const shiftRef = doc(db, "shifts", shiftId)
    await updateDoc(shiftRef, {
      ...updateData,
      updatedAt: serverTimestamp(),
    })
    return true
  } catch (error) {
    console.error("Error updating shift:", error)
    throw error
  }
}

export const getShifts = async (filters: any = {}) => {
  try {
    let shiftsQuery = query(collection(db, "shifts"), orderBy("date", "desc"))

// Apply filters if provided
    if (filters.staffId) {
      shiftsQuery = query(
        collection(db, "shifts"),
        where("assignedStaff", "array-contains", filters.staffId),
        orderBy("date", "desc"),
      )
    }

if (filters.status) {
      shiftsQuery = query(collection(db, "shifts"), where("status", "==", filters.status), orderBy("date", "desc"))
    }

const querySnapshot = await getDocs(shiftsQuery)

return querySnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
      date: doc.data().date?.toDate(),
      createdAt: doc.data().createdAt?.toDate(),
    }))
  } catch (error) {
    console.error("Error getting shifts:", error)
    throw error
  }
}

// Dashboard data functions
export const getStaffDashboardData = async (staffId: string) => {
  try {
    // Get upcoming shifts
    const shiftsQuery = query(
      collection(db, "shifts"),
      where("assignedStaff", "array-contains", staffId),
      where("status", "in", ["open", "filled", "understaffed"]),
      orderBy("date", "asc"),
      limit(5),
    )

const shiftsSnapshot = await getDocs(shiftsQuery)
    const upcomingShifts = shiftsSnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
      date: doc.data().date?.toDate(),
    }))

// Get recent messages
    const messagesQuery = query(
      collection(db, "messages"),
      where("staffId", "==", staffId),
      orderBy("createdAt", "desc"),
      limit(5),
    )

const messagesSnapshot = await getDocs(messagesQuery)
    const recentMessages = messagesSnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
      createdAt: doc.data().createdAt?.toDate(),
    }))

// Get recent sessions
    const sessionsQuery = query(
      collection(db, "timeSessions"),
      where("staffId", "==", staffId),
      orderBy("createdAt", "desc"),
      limit(5),
    )

const sessionsSnapshot = await getDocs(sessionsQuery)
    const recentSessions = sessionsSnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
      clockInTime: doc.data().clockInTime?.toDate(),
      clockOutTime: doc.data().clockOutTime?.toDate(),
    }))

return {
      upcomingShifts,
      recentMessages,
      recentSessions,
    }
  } catch (error) {
    console.error("Error getting staff dashboard data:", error)
    throw error
  }
}

export const getAdminDashboardData = async () => {
  try {
    // Get staff count
    const staffQuery = query(collection(db, "users"), where("role", "!=", "admin"), where("status", "==", "active"))
    const staffSnapshot = await getDocs(staffQuery)
    const staffCount = staffSnapshot.size

// Get active sessions count
    const activeSessionsQuery = query(collection(db, "timeSessions"), where("status", "==", "active"))
    const activeSessionsSnapshot = await getDocs(activeSessionsQuery)
    const activeSessionsCount = activeSessionsSnapshot.size

// Get unread messages count
    const unreadMessagesQuery = query(collection(db, "messages"), where("status", "==", "sent"))
    const unreadMessagesSnapshot = await getDocs(unreadMessagesQuery)
    const unreadMessagesCount = unreadMessagesSnapshot.size

// Get understaffed shifts count
    const understaffedShiftsQuery = query(collection(db, "shifts"), where("status", "==", "understaffed"))
    const understaffedShiftsSnapshot = await getDocs(understaffedShiftsQuery)
    const understaffedShiftsCount = understaffedShiftsSnapshot.size

// Get recent messages
    const messagesQuery = query(collection(db, "messages"), orderBy("createdAt", "desc"), limit(5))
    const messagesSnapshot = await getDocs(messagesQuery)
    const recentMessages = messagesSnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
      createdAt: doc.data().createdAt?.toDate(),
    }))

// Get upcoming shifts
    const shiftsQuery = query(
      collection(db, "shifts"),
      where("status", "in", ["open", "filled", "understaffed"]),
      orderBy("date", "asc"),
      limit(5),
    )
    const shiftsSnapshot = await getDocs(shiftsQuery)
    const upcomingShifts = shiftsSnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
      date: doc.data().date?.toDate(),
    }))

return {
      stats: {
        staffCount,
        activeSessionsCount,
        unreadMessagesCount,
        understaffedShiftsCount,
      },
      recentMessages,
      upcomingShifts,
    }
  } catch (error) {
    console.error("Error getting admin dashboard data:", error)
    throw error
  }
}

// Initialize admin user if it doesn't exist
export const initializeAdminUser = async () => {
  try {
    const adminQuery = query(collection(db, "users"), where("role", "==", "admin"))
    const querySnapshot = await getDocs(adminQuery)

if (querySnapshot.empty) {
      // Create admin user
      const adminData = {
        username: "admin",
        password: "admin123", // In a real app, you should hash this
        email: "admin@example.com",
        name: "Admin User",
        role: "admin",
        createdAt: serverTimestamp(),
      }

await addDoc(collection(db, "users"), adminData)
      console.log("Admin user created")
    }
  } catch (error) {
    console.error("Error initializing admin user:", error)
  }
}

// Initialize default staff if it doesn't exist
export const initializeDefaultStaff = async () => {
  try {
    const staffQuery = query(collection(db, "users"), where("email", "==", "cfeventurecaps@gmail.com"))
    const querySnapshot = await getDocs(staffQuery)

await setDoc(doc(db, "users", user.uid), userData)
        console.log("Default staff created")
      } catch (error: any) {
        // If the user already exists in Auth but not in Firestore
        if (error.code === "auth/email-already-in-use") {
          // Try to sign in to get the UID
          try {
            const userCredential = await signInWithEmailAndPassword(auth, "cfeventurecaps@gmail.com", "123456")
            const user = userCredential.user

// Store additional user data in Firestore
            const userData = {
              uid: user.uid,
              email: "cfeventurecaps@gmail.com",
              firstName: "CFE",
              lastName: "Venture",
              name: "CFE Venture",
              role: "staff",
              department: "Emergency",
              phone: "",
              status: "active",
              createdAt: serverTimestamp(),
            }

await setDoc(doc(db, "users", user.uid), userData)
            console.log("Default staff created")
          } catch (signInError) {
            console.error("Error creating default staff:", signInError)
          }
        } else {
          console.error("Error creating default staff:", error)
        }
      }
    }
  } catch (error) {
    console.error("Error initializing default staff:", error)
  }
}
[V0_FILE]typescriptreact:file="app/api/init-db/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { initializeAdminUser, initializeDefaultStaff } from "@/lib/firebase-service"

export async function GET() {
  try {
    await initializeAdminUser()
    await initializeDefaultStaff()

return NextResponse.json({ success: true, message: "Database initialized" })
  } catch (error) {
    console.error("Error initializing database:", error)
    return NextResponse.json({ success: false, error: "Failed to initialize database" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/server-actions.ts" isMerged="true" isEdit="true"
"use server"

import { getCollection } from "./mongodb-server"
import { revalidatePath } from "next/cache"

// Staff management
export async function getStaffMembers() {
  try {
    const collection = await getCollection("healthcare-staff-app", "staff")
    const staffMembers = await collection.find({ status: { $ne: "deleted" } }).toArray()

return staffMembers.map((staff) => ({
      id: staff._id.toString(),
      ...staff,
    }))
  } catch (error) {
    console.error("Error getting staff members:", error)
    throw error
  }
}

export async function createStaffMember(staffData: any) {
  try {
    const collection = await getCollection("healthcare-staff-app", "staff")

// Check if email already exists
    const existingStaff = await collection.findOne({ email: staffData.email })
    if (existingStaff) {
      throw new Error("Email already exists")
    }

const result = await collection.insertOne({
      ...staffData,
      createdAt: new Date(),
    })

revalidatePath("/admin/staff")

return {
      id: result.insertedId.toString(),
      ...staffData,
    }
  } catch (error) {
    console.error("Error creating staff member:", error)
    throw error
  }
}

export async function updateStaffMember(staffId: string, updateData: any) {
  try {
    const { ObjectId } = require("mongodb")
    const collection = await getCollection("healthcare-staff-app", "staff")

await collection.updateOne({ _id: new ObjectId(staffId) }, { $set: { ...updateData, updatedAt: new Date() } })

revalidatePath("/admin/staff")

return true
  } catch (error) {
    console.error("Error updating staff member:", error)
    throw error
  }
}

export async function deleteStaffMember(staffId: string) {
  try {
    const { ObjectId } = require("mongodb")
    const collection = await getCollection("healthcare-staff-app", "staff")

await collection.updateOne({ _id: new ObjectId(staffId) }, { $set: { status: "deleted", updatedAt: new Date() } })

revalidatePath("/admin/staff")

return true
  } catch (error) {
    console.error("Error deleting staff member:", error)
    throw error
  }
}

// Time tracking
export async function getTimeSessions(staffId: string) {
  try {
    const collection = await getCollection("healthcare-staff-app", "timeSessions")

const sessions = await collection.find({ staffId }).sort({ createdAt: -1 }).toArray()

return sessions.map((session) => ({
      id: session._id.toString(),
      ...session,
    }))
  } catch (error) {
    console.error("Error getting time sessions:", error)
    throw error
  }
}

export async function createTimeSession(sessionData: any) {
  try {
    const collection = await getCollection("healthcare-staff-app", "timeSessions")

const result = await collection.insertOne({
      ...sessionData,
      createdAt: new Date(),
    })

return {
      id: result.insertedId.toString(),
      ...sessionData,
    }
  } catch (error) {
    console.error("Error creating time session:", error)
    throw error
  }
}

export async function updateTimeSession(sessionId: string, updateData: any) {
  try {
    const { ObjectId } = require("mongodb")
    const collection = await getCollection("healthcare-staff-app", "timeSessions")

await collection.updateOne({ _id: new ObjectId(sessionId) }, { $set: { ...updateData, updatedAt: new Date() } })

return true
  } catch (error) {
    console.error("Error updating time session:", error)
    throw error
  }
}

// Messages
export async function getMessages(staffId: string, isAdmin: boolean) {
  try {
    const collection = await getCollection("healthcare-staff-app", "messages")

let query = {}
    if (!isAdmin) {
      query = { staffId }
    }

const messages = await collection.find(query).sort({ createdAt: -1 }).toArray()

return messages.map((message) => ({
      id: message._id.toString(),
      ...message,
    }))
  } catch (error) {
    console.error("Error getting messages:", error)
    throw error
  }
}

export async function sendMessage(messageData: any) {
  try {
    const collection = await getCollection("healthcare-staff-app", "messages")

const result = await collection.insertOne({
      ...messageData,
      createdAt: new Date(),
    })

return {
      id: result.insertedId.toString(),
      ...messageData,
    }
  } catch (error) {
    console.error("Error sending message:", error)
    throw error
  }
}

export async function replyToMessage(messageId: string, reply: any) {
  try {
    const { ObjectId } = require("mongodb")
    const collection = await getCollection("healthcare-staff-app", "messages")

await collection.updateOne(
      { _id: new ObjectId(messageId) },
      {
        $set: {
          status: "replied",
          updatedAt: new Date(),
        },
        $push: {
          replies: { ...reply, createdAt: new Date() },
        },
      },
    )

return true
  } catch (error) {
    console.error("Error replying to message:", error)
    throw error
  }
}

// Dashboard data
export async function getStaffDashboardData(staffId: string) {
  try {
    // Get upcoming shifts
    const shiftsCollection = await getCollection("healthcare-staff-app", "shifts")
    const upcomingShifts = await shiftsCollection
      .find({
        assignedStaff: staffId,
        status: { $ne: "completed" },
        date: { $gte: new Date() },
      })
      .sort({ date: 1 })
      .limit(5)
      .toArray()

// Get recent messages
    const messagesCollection = await getCollection("healthcare-staff-app", "messages")
    const recentMessages = await messagesCollection.find({ staffId }).sort({ createdAt: -1 }).limit(5).toArray()

// Get recent sessions
    const sessionsCollection = await getCollection("healthcare-staff-app", "timeSessions")
    const recentSessions = await sessionsCollection.find({ staffId }).sort({ createdAt: -1 }).limit(5).toArray()

return {
      upcomingShifts: upcomingShifts.map((shift) => ({
        id: shift._id.toString(),
        ...shift,
      })),
      recentMessages: recentMessages.map((msg) => ({
        id: msg._id.toString(),
        ...msg,
      })),
      recentSessions: recentSessions.map((session) => ({
        id: session._id.toString(),
        ...session,
      })),
    }
  } catch (error) {
    console.error("Error getting staff dashboard data:", error)
    throw error
  }
}

export async function getAdminDashboardData() {
  try {
    // Get staff count
    const staffCollection = await getCollection("healthcare-staff-app", "staff")
    const staffCount = await staffCollection.countDocuments({ status: "active" })

// Get active sessions count
    const sessionsCollection = await getCollection("healthcare-staff-app", "timeSessions")
    const activeSessionsCount = await sessionsCollection.countDocuments({ status: "active" })

// Get unread messages count
    const messagesCollection = await getCollection("healthcare-staff-app", "messages")
    const unreadMessagesCount = await messagesCollection.countDocuments({ status: "sent" })

// Get understaffed shifts count
    const shiftsCollection = await getCollection("healthcare-staff-app", "shifts")
    const understaffedShiftsCount = await shiftsCollection.countDocuments({
      status: "understaffed",
      date: { $gte: new Date() },
    })

// Get recent messages
    const recentMessages = await messagesCollection.find({}).sort({ createdAt: -1 }).limit(5).toArray()

// Get upcoming shifts
    const upcomingShifts = await shiftsCollection
      .find({
        status: { $ne: "completed" },
        date: { $gte: new Date() },
      })
      .sort({ date: 1 })
      .limit(5)
      .toArray()

return {
      stats: {
        staffCount,
        activeSessionsCount,
        unreadMessagesCount,
        understaffedShiftsCount,
      },
      recentMessages: recentMessages.map((msg) => ({
        id: msg._id.toString(),
        ...msg,
      })),
      upcomingShifts: upcomingShifts.map((shift) => ({
        id: shift._id.toString(),
        ...shift,
      })),
    }
  } catch (error) {
    console.error("Error getting admin dashboard data:", error)
    throw error
  }
}
[V0_FILE]typescript:file="lib/api-service.ts" isMerged="true" isEdit="true"
// Client-side API service - no MongoDB imports

// Staff management
export async function getStaffMembers() {
  const response = await fetch("/api/staff")
  if (!response.ok) {
    throw new Error("Failed to fetch staff members")
  }
  const data = await response.json()
  return data.staff
}

export async function createStaffMember(staffData: any) {
  const response = await fetch("/api/staff", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(staffData),
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.error || "Failed to create staff member")
  }

return await response.json()
}

// Shift management
export async function getShifts(filters = {}) {
  const queryParams = new URLSearchParams()

Object.entries(filters).forEach(([key, value]) => {
    if (value) queryParams.append(key, String(value))
  })

const response = await fetch(`/api/shifts?${queryParams.toString()}`)

if (!response.ok) {
    throw new Error("Failed to fetch shifts")
  }

return await response.json()
}

export async function createShift(shiftData: any) {
  const response = await fetch("/api/shifts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(shiftData),
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.error || "Failed to create shift")
  }

return await response.json()
}

export async function updateShift(shiftId: string, updateData: any) {
  const response = await fetch(`/api/shifts/${shiftId}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(updateData),
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.error || "Failed to update shift")
  }

return await response.json()
}

// Dashboard data
export async function getStaffDashboardData(staffId: string) {
  const response = await fetch(`/api/dashboard/staff?staffId=${staffId}`)

if (!response.ok) {
    throw new Error("Failed to fetch dashboard data")
  }

return await response.json()
}

export async function getAdminDashboardData() {
  const response = await fetch("/api/dashboard/admin")

if (!response.ok) {
    throw new Error("Failed to fetch dashboard data")
  }

return await response.json()
}
[V0_FILE]typescript:file="lib/server-actions/shifts.ts" isMerged="true" isEdit="true"
"use server"

import { getCollection } from "../mongodb-server"
import { revalidatePath } from "next/cache"

// Get all shifts with optional filtering
export async function getShifts(filters: any = {}) {
  try {
    const collection = await getCollection("healthcare-staff-app", "shifts")

const query: any = {}

// Apply filters if provided
    if (filters.staffId) {
      query.assignedStaff = filters.staffId
    }

if (filters.status) {
      query.status = filters.status
    }

if (filters.date) {
      // Create date range for the specified date (start of day to end of day)
      const startDate = new Date(filters.date)
      startDate.setHours(0, 0, 0, 0)

const endDate = new Date(filters.date)
      endDate.setHours(23, 59, 59, 999)

query.date = {
        $gte: startDate,
        $lte: endDate,
      }
    }

if (filters.upcoming) {
      query.date = { $gte: new Date() }
    }

const shifts = await collection.find(query).sort({ date: 1 }).toArray()

return shifts.map((shift) => ({
      id: shift._id.toString(),
      ...shift,
    }))
  } catch (error) {
    console.error("Error getting shifts:", error)
    throw error
  }
}

// Create a new shift
export async function createShift(shiftData: any) {
  try {
    const collection = await getCollection("healthcare-staff-app", "shifts")

const result = await collection.insertOne({
      ...shiftData,
      createdAt: new Date(),
    })

revalidatePath("/admin/shifts")

return {
      id: result.insertedId.toString(),
      ...shiftData,
    }
  } catch (error) {
    console.error("Error creating shift:", error)
    throw error
  }
}

// Update an existing shift
export async function updateShift(shiftId: string, updateData: any) {
  try {
    const { ObjectId } = require("mongodb")
    const collection = await getCollection("healthcare-staff-app", "shifts")

await collection.updateOne({ _id: new ObjectId(shiftId) }, { $set: { ...updateData, updatedAt: new Date() } })

revalidatePath("/admin/shifts")

return true
  } catch (error) {
    console.error("Error updating shift:", error)
    throw error
  }
}
[V0_FILE]typescript:file="app/api/shifts/route.ts" isMerged="true" isEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { getShifts, createShift } from "@/lib/server-actions/shifts"

export async function GET(request: NextRequest) {
  try {
    const url = new URL(request.url)

// Extract filter parameters
    const filters: any = {}

if (url.searchParams.has("staffId")) {
      filters.staffId = url.searchParams.get("staffId")
    }

if (url.searchParams.has("status")) {
      filters.status = url.searchParams.get("status")
    }

if (url.searchParams.has("date")) {
      filters.date = url.searchParams.get("date")
    }

if (url.searchParams.has("upcoming")) {
      filters.upcoming = url.searchParams.get("upcoming") === "true"
    }

const shifts = await getShifts(filters)

return NextResponse.json({ shifts })
  } catch (error) {
    console.error("Error fetching shifts:", error)
    return NextResponse.json({ error: "Failed to fetch shifts" }, { status: 500 })
  }
}

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

if (!shiftData) {
      return NextResponse.json({ error: "Shift data is required" }, { status: 400 })
    }

const result = await createShift(shiftData)

return NextResponse.json({ success: true, shift: result })
  } catch (error) {
    console.error("Error creating shift:", error)
    return NextResponse.json({ error: "Failed to create shift" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/shifts/[id]/route.ts" isMerged="true" isEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { updateShift } from "@/lib/server-actions/shifts"

export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const shiftId = params.id
    const updateData = await request.json()

if (!shiftId || !updateData) {
      return NextResponse.json({ error: "Shift ID and update data are required" }, { status: 400 })
    }

await updateShift(shiftId, updateData)

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error updating shift:", error)
    return NextResponse.json({ error: "Failed to update shift" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/init-admin/route.ts" isMerged="true" isEdit="true"
import { NextResponse } from "next/server"
import { initializeApp, getApps, getApp } from "firebase/app"
import { getFirestore, collection, query, where, getDocs, addDoc, serverTimestamp } from "firebase/firestore"

// Initialize Firebase
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
}

const app = getApps().length ? getApp() : initializeApp(firebaseConfig)
const db = getFirestore(app)

const docRef = await addDoc(collection(db, "users"), adminData)

return NextResponse.json({
        success: true,
        message: "Admin user created",
        adminId: docRef.id,
      })
    }

return NextResponse.json({
      success: true,
      message: "Admin user already exists",
      adminId: querySnapshot.docs[0].id,
    })
  } catch (error) {
    console.error("Error initializing admin user:", error)
    return NextResponse.json(
      {
        success: false,
        error: "Failed to initialize admin user",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/init-admin/page.tsx" isMerged="true" isEdit="true"
"use client"

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

export default function InitAdminPage() {
  const [isLoading, setIsLoading] = useState(true)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState("")
  const [message, setMessage] = useState("")

useEffect(() => {
    const initializeAdmin = async () => {
      try {
        const response = await fetch("/api/init-admin")
        const data = await response.json()

if (data.success) {
          setSuccess(true)
          setMessage(data.message)
        } else {
          setSuccess(false)
          setError(data.error || "Failed to initialize admin user")
        }
      } catch (error) {
        console.error("Error initializing admin:", error)
        setSuccess(false)
        setError("An unexpected error occurred")
      } finally {
        setIsLoading(false)
      }
    }

initializeAdmin()
  }, [])

return (
    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl">Admin Initialization</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col items-center justify-center p-6">
          {isLoading ? (
            <>
              <Loader2 className="h-8 w-8 animate-spin text-primary mb-4" />
              <p>Initializing admin user...</p>
            </>
          ) : success ? (
            <>
              <CheckCircle className="h-8 w-8 text-green-500 mb-4" />
              <p>{message}</p>
              <p className="mt-4 text-sm text-muted-foreground">
                You can now log in with username: <strong>admin</strong> and password: <strong>admin123</strong>
              </p>
              <Button className="mt-4" onClick={() => (window.location.href = "/admin/login")}>
                Go to Admin Login
              </Button>
            </>
          ) : (
            <>
              <XCircle className="h-8 w-8 text-red-500 mb-4" />
              <p>{error}</p>
              <Button className="mt-4" onClick={() => window.location.reload()}>
                Try Again
              </Button>
            </>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="lib/local-auth.ts" isMerged="true" isEdit="true"
// This file provides a fallback authentication mechanism when Firebase is unavailable

// Staff login function with local fallback
export function localStaffLogin(email: string, password: string) {
  // Check for demo account
  if (email === "cfeventurecaps@gmail.com" && password === "123456") {
    return {
      uid: "demo-staff-id",
      id: "demo-staff-id",
      email: "cfeventurecaps@gmail.com",
      role: "staff",
      name: "CFE Venture",
      department: "Emergency",
    }
  }

// Check for any stored credentials in localStorage
  const storedCredentials = JSON.parse(localStorage.getItem("userCredentials") || "[]")
  const matchedUser = storedCredentials.find((cred: any) => cred.email === email && cred.password === password)

if (matchedUser) {
    // Get staff details
    const staffMembers = JSON.parse(localStorage.getItem("adminStaffMembers") || "[]")
    const staffMember = staffMembers.find((staff: any) => staff.email === email)

if (staffMember) {
      return {
        uid: staffMember.id,
        id: staffMember.id,
        email: staffMember.email,
        role: "staff",
        name: staffMember.name,
        department: staffMember.department || "General",
      }
    }
  }

// No match found
  return null
}

// Admin login function with local fallback
export function localAdminLogin(username: string, password: string) {
  // Check for demo admin account
  if (username === "admin" && password === "admin123") {
    return {
      uid: "admin-1",
      id: "admin-1",
      username: "admin",
      role: "admin",
      name: "Admin User",
    }
  }

// No match found
  return null
}
[V0_FILE]typescriptreact:file="app/login/fallback-page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { localStaffLogin } from "@/lib/local-auth"
import { Loader2 } from "lucide-react"

export default function FallbackLoginPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")

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

if (!email || !password) {
      setError("Please enter both email and password")
      return
    }

setIsSubmitting(true)

try {
      // Use local authentication
      const userData = localStaffLogin(email, password)

if (userData) {
        // Store user data in session storage
        sessionStorage.setItem("currentUser", JSON.stringify(userData))

toast({
          title: "Success",
          description: "Logged in successfully with fallback authentication",
        })

// Redirect to dashboard
        router.push("/staff/dashboard")
      } else {
        setError("Invalid email or password")
      }
    } catch (error: any) {
      console.error("Login error:", error)
      setError(error.message || "Failed to login")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl">Staff Login (Fallback Mode)</CardTitle>
          <p className="text-sm text-muted-foreground mt-2">Using local authentication due to connectivity issues</p>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
            </div>

{error && <p className="text-destructive text-sm">{error}</p>}

<Button type="submit" className="w-full" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Logging in...
                </>
              ) : (
                "Log In"
              )}
            </Button>

<div className="text-center text-sm text-muted-foreground mt-4">
              <p>Demo Credentials:</p>
              <p>Email: cfeventurecaps@gmail.com</p>
              <p>Password: 123456</p>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/login/fallback-page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/hooks/use-toast"
import { localAdminLogin } from "@/lib/local-auth"
import { Loader2 } from "lucide-react"

export default function FallbackAdminLoginPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

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

try {
      // Use local authentication
      const userData = localAdminLogin(username, password)

if (userData) {
        // Store admin data in session storage
        sessionStorage.setItem("currentUser", JSON.stringify(userData))

toast({
          title: "Success",
          description: "Logged in as admin successfully with fallback authentication",
        })

// Redirect to admin dashboard
        router.push("/admin/dashboard")
      } else {
        setError("Invalid username or password")
      }
    } catch (error: any) {
      console.error("Admin login error:", error)
      setError(error.message || "Invalid username or password")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-2xl text-center">Admin Login (Fallback Mode)</CardTitle>
          <p className="text-sm text-muted-foreground text-center mt-2">
            Using local authentication due to connectivity issues
          </p>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit}>
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="username">Username</Label>
                <Input
                  id="username"
                  placeholder="Enter your username"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <Input
                  id="password"
                  type="password"
                  placeholder="Enter your password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                />
              </div>
              {error && <p className="text-destructive text-sm">{error}</p>}
              <Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Logging in...
                  </>
                ) : (
                  "Login"
                )}
              </Button>

<div className="text-center text-sm text-muted-foreground mt-4">
                <p>Demo Credentials:</p>
                <p>Username: admin / Password: admin123</p>
              </div>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/auth/check-connection/route.ts" isMerged="true" isEdit="true"
import { NextResponse } from "next/server"
import { firebaseInitialized } from "@/lib/firebase"

export async function GET() {
  try {
    // Check if Firebase is initialized
    if (!firebaseInitialized) {
      return NextResponse.json({
        status: "error",
        message: "Firebase is not initialized",
        initialized: false,
      })
    }

// Return success
    return NextResponse.json({
      status: "success",
      message: "Firebase is initialized and ready",
      initialized: true,
    })
  } catch (error) {
    console.error("Error checking Firebase connection:", error)
    return NextResponse.json(
      {
        status: "error",
        message: "Error checking Firebase connection",
        initialized: false,
        error: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="lib/data-persistence-service.ts" isEdit="true" isMerged="true"
/**
 * Data Storage Explanation
 *
 * Current Implementation:
 * - The application currently uses localStorage for data storage
 * - localStorage is device-specific and not synchronized across devices
 * - This is why data added on mobile isn't showing on desktop

I've removed the dummy data initialization from the `initializeDataStores` function. Now, let's move on to the next step.

\`\`\`ts file="lib/firebase-notification-service.ts"
... This file was left out for brevity. Assume it is correct and does not need any modifications. ...
[V0_FILE]typescriptreact:file="lib/shared-data-service.ts" isEdit="true" isQuickEdit="true" isMerged="true"
// Data Persistence Service
// This service ensures that all data is properly saved and retrieved from localStorage

// Make sure the initializeSharedData function is properly exported
// This should be at the top of the file, after the imports

// Initialize shared data
export function initializeSharedData() {
  initializeApp()
}

// Define data types
export interface StaffMember {
  id: string
  firstName: string
  lastName: string
  name: string
  email: string
  role: string
  department: string
  phone: string
  status: string
  createdAt: string
}

export interface UserCredential {
  email: string
  password: string
  role: string
  userId: string
  name: string
}

export interface Message {
  id: string
  staffId: string
  staffName: string
  adminId?: string
  adminName?: string
  subject: string
  content: string
  status: "sent" | "read" | "replied"
  priority: "low" | "medium" | "high"
  createdAt: string
  replies?: MessageReply[]
}

export interface MessageReply {
  id: string
  senderId: string
  senderName: string
  senderRole: "staff" | "admin"
  content: string
  createdAt: string
}

export interface HourlyLog {
  id: string
  staffId: string
  staffName: string
  logDate: string
  hourStart: number
  hourEnd: number
  displayTime: string
  content: string
  attachments?: Attachment[]
  createdAt: string
}

export interface Attachment {
  name: string
  type: string
  url: string
  size?: number
}

export interface Shift {
  id: string
  date: string
  startTime: string
  endTime: string
  location: string
  department: string
  staffNeeded: number
  staffAssigned: number
  status: "open" | "filled" | "understaffed" | "completed"
  assignedStaff: string[]
  createdAt: string
}

export interface LeaveRequest {
  id: string
  staffId: string
  staffName: string
  startDate: string
  endDate: string
  reason: string
  status: "pending" | "approved" | "rejected"
  notes?: string
  createdAt: string
}

// Initialize data stores with default data if they don't exist
export function initializeDataStores() {
  // Initialize staff members
  if (!localStorage.getItem("staffMembers")) {
    const defaultStaff: StaffMember[] = [
      {
        id: "staff1",
        firstName: "John",
        lastName: "Doe",
        name: "John Doe",
        email: "john@example.com",
        role: "Doctor",
        department: "Emergency",
        phone: "555-1234",
        status: "active",
        createdAt: new Date().toISOString(),
      },
      {
        id: "staff2",
        firstName: "Jane",
        lastName: "Smith",
        name: "Jane Smith",
        email: "jane@example.com",
        role: "Nurse",
        department: "ICU",
        phone: "555-5678",
        status: "active",
        createdAt: new Date().toISOString(),
      },
    ]
    localStorage.setItem("staffMembers", JSON.stringify(defaultStaff))
  }

// Initialize user credentials
  if (!localStorage.getItem("userCredentials")) {
    const defaultCredentials: UserCredential[] = [
      {
        email: "admin@example.com",
        password: "admin123",
        role: "admin",
        userId: "admin1",
        name: "Admin User",
      },
      {
        email: "john@example.com",
        password: "password",
        role: "staff",
        userId: "staff1",
        name: "John Doe",
      },
      {
        email: "jane@example.com",
        password: "password",
        role: "staff",
        userId: "staff2",
        name: "Jane Smith",
      },
    ]
    localStorage.setItem("userCredentials", JSON.stringify(defaultCredentials))
  }

// Initialize messages
  if (!localStorage.getItem("messages")) {
    const defaultMessages: Message[] = [
      {
        id: "msg1",
        staffId: "staff1",
        staffName: "John Doe",
        subject: "Equipment Request",
        content: "I need additional equipment for the emergency room.",
        status: "sent",
        priority: "medium",
        createdAt: new Date(Date.now() - 86400000).toISOString(), // 1 day ago
      },
      {
        id: "msg2",
        staffId: "staff2",
        staffName: "Jane Smith",
        subject: "Schedule Change Request",
        content: "I would like to request a change in my schedule for next week.",
        status: "read",
        priority: "low",
        createdAt: new Date(Date.now() - 172800000).toISOString(), // 2 days ago
      },
    ]
    localStorage.setItem("messages", JSON.stringify(defaultMessages))
  }

// Initialize hourly logs
  if (!localStorage.getItem("hourlyLogs")) {
    const defaultLogs: HourlyLog[] = [
      {
        id: "log1",
        staffId: "staff1",
        staffName: "John Doe",
        logDate: new Date().toISOString().split("T")[0],
        hourStart: 9,
        hourEnd: 10,
        displayTime: "9:00 AM - 10:00 AM",
        content: "Completed patient rounds and updated charts.",
        createdAt: new Date(Date.now() - 3600000).toISOString(), // 1 hour ago
      },
      {
        id: "log2",
        staffId: "staff2",
        staffName: "Jane Smith",
        logDate: new Date().toISOString().split("T")[0],
        hourStart: 10,
        hourEnd: 11,
        displayTime: "10:00 AM - 11:00 AM",
        content: "Administered medications and monitored patient vitals.",
        createdAt: new Date(Date.now() - 7200000).toISOString(), // 2 hours ago
      },
    ]
    localStorage.setItem("hourlyLogs", JSON.stringify(defaultLogs))
  }

// Initialize shifts
  if (!localStorage.getItem("shifts")) {
    const today = new Date()
    const tomorrow = new Date(today)
    tomorrow.setDate(tomorrow.getDate() + 1)

const defaultShifts: Shift[] = [
      {
        id: "shift1",
        date: today.toISOString(),
        startTime: "07:00",
        endTime: "15:00",
        location: "Main Hospital",
        department: "Emergency",
        staffNeeded: 3,
        staffAssigned: 2,
        status: "understaffed",
        assignedStaff: ["staff1", "staff2"],
        createdAt: new Date(Date.now() - 86400000).toISOString(), // 1 day ago
      },
      {
        id: "shift2",
        date: tomorrow.toISOString(),
        startTime: "15:00",
        endTime: "23:00",
        location: "Main Hospital",
        department: "ICU",
        staffNeeded: 2,
        staffAssigned: 0,
        status: "open",
        assignedStaff: [],
        createdAt: new Date(Date.now() - 43200000).toISOString(), // 12 hours ago
      },
    ]
    localStorage.setItem("shifts", JSON.stringify(defaultShifts))
  }

// Initialize leave requests
  if (!localStorage.getItem("leaveRequests")) {
    const nextWeek = new Date()
    nextWeek.setDate(nextWeek.getDate() + 7)
    const weekAfter = new Date(nextWeek)
    weekAfter.setDate(weekAfter.getDate() + 3)

const defaultLeaveRequests: LeaveRequest[] = [
      {
        id: "leave1",
        staffId: "staff1",
        staffName: "John Doe",
        startDate: nextWeek.toISOString(),
        endDate: weekAfter.toISOString(),
        reason: "Family vacation",
        status: "pending",
        createdAt: new Date(Date.now() - 86400000).toISOString(), // 1 day ago
      },
    ]
    localStorage.setItem("leaveRequests", JSON.stringify(defaultLeaveRequests))
  }
}

// Staff Members CRUD operations
export function getStaffMembers(): StaffMember[] {
  try {
    const data = localStorage.getItem("staffMembers")
    return data ? JSON.parse(data) : []
  } catch (error) {
    console.error("Error getting staff members:", error)
    return []
  }
}

export function addStaffMember(staffMember: StaffMember): boolean {
  try {
    const staffMembers = getStaffMembers()
    staffMembers.push(staffMember)
    localStorage.setItem("staffMembers", JSON.stringify(staffMembers))
    return true
  } catch (error) {
    console.error("Error adding staff member:", error)
    return false
  }
}

export function updateStaffMember(staffId: string, updates: Partial<StaffMember>): boolean {
  try {
    const staffMembers = getStaffMembers()
    const index = staffMembers.findIndex((staff) => staff.id === staffId)
    if (index !== -1) {
      staffMembers[index] = { ...staffMembers[index], ...updates }
      localStorage.setItem("staffMembers", JSON.stringify(staffMembers))
      return true
    }
    return false
  } catch (error) {
    console.error("Error updating staff member:", error)
    return false
  }
}

export function deleteStaffMember(staffId: string): boolean {
  try {
    const staffMembers = getStaffMembers()
    const filteredStaff = staffMembers.filter((staff) => staff.id !== staffId)
    localStorage.setItem("staffMembers", JSON.stringify(filteredStaff))
    return true
  } catch (error) {
    console.error("Error deleting staff member:", error)
    return false
  }
}

// User Credentials CRUD operations
export function getUserCredentials(): UserCredential[] {
  try {
    const data = localStorage.getItem("userCredentials")
    return data ? JSON.parse(data) : []
  } catch (error) {
    console.error("Error getting user credentials:", error)
    return []
  }
}

export function addUserCredential(credential: UserCredential): boolean {
  try {
    const credentials = getUserCredentials()
    credentials.push(credential)
    localStorage.setItem("userCredentials", JSON.stringify(credentials))
    return true
  } catch (error) {
    console.error("Error adding user credential:", error)
    return false
  }
}

export function updateUserCredential(email: string, updates: Partial<UserCredential>): boolean {
  try {
    const credentials = getUserCredentials()
    const index = credentials.findIndex((cred) => cred.email === email)
    if (index !== -1) {
      credentials[index] = { ...credentials[index], ...updates }
      localStorage.setItem("userCredentials", JSON.stringify(credentials))
      return true
    }
    return false
  } catch (error) {
    console.error("Error updating user credential:", error)
    return false
  }
}

export function deleteUserCredential(email: string): boolean {
  try {
    const credentials = getUserCredentials()
    const filteredCredentials = credentials.filter((cred) => cred.email !== email)
    localStorage.setItem("userCredentials", JSON.stringify(filteredCredentials))
    return true
  } catch (error) {
    console.error("Error deleting user credential:", error)
    return false
  }
}

// Messages CRUD operations
export function getMessages(): Message[] {
  try {
    const data = localStorage.getItem("messages")
    return data ? JSON.parse(data) : []
  } catch (error) {
    console.error("Error getting messages:", error)
    return []
  }
}

export function addMessage(message: Message): boolean {
  try {
    const messages = getMessages()
    messages.push(message)
    localStorage.setItem("messages", JSON.stringify(messages))
    return true
  } catch (error) {
    console.error("Error adding message:", error)
    return false
  }
}

export function updateMessage(messageId: string, updates: Partial<Message>): Message | undefined {
  try {
    const messages = getMessages()
    const index = messages.findIndex((msg) => msg.id === messageId)
    if (index !== -1) {
      messages[index] = { ...messages[index], ...updates }
      localStorage.setItem("messages", JSON.stringify(messages))
      return messages[index]
    }
    return undefined
  } catch (error) {
    console.error("Error updating message:", error)
    return undefined
  }
}

export function deleteMessage(messageId: string): boolean {
  try {
    const messages = getMessages()
    const filteredMessages = messages.filter((msg) => msg.id !== messageId)
    localStorage.setItem("messages", JSON.stringify(filteredMessages))
    return true
  } catch (error) {
    console.error("Error deleting message:", error)
    return false
  }
}

export function addReplyToMessage(messageId: string, reply: MessageReply): Message | undefined {
  try {
    const messages = getMessages()
    const index = messages.findIndex((msg) => msg.id === messageId)
    if (index !== -1) {
      const message = messages[index]
      const replies = message.replies || []
      const updatedMessage = { ...message, replies: [...replies, reply], status: "replied" as const }
      messages[index] = updatedMessage
      localStorage.setItem("messages", JSON.stringify(messages))
      return updatedMessage
    }
    return undefined
  } catch (error) {
    console.error("Error adding reply to message:", error)
    return undefined
  }
}

// Hourly Logs CRUD operations
export function getHourlyLogs(): HourlyLog[] {
  try {
    const data = localStorage.getItem("hourlyLogs")
    return data ? JSON.parse(data) : []
  } catch (error) {
    console.error("Error getting hourly logs:", error)
    return []
  }
}

export function addHourlyLog(log: HourlyLog): boolean {
  try {
    const logs = getHourlyLogs()
    logs.push(log)
    localStorage.setItem("hourlyLogs", JSON.stringify(logs))
    return true
  } catch (error) {
    console.error("Error adding hourly log:", error)
    return false
  }
}

export function updateHourlyLog(logId: string, updates: Partial<HourlyLog>): boolean {
  try {
    const logs = getHourlyLogs()
    const index = logs.findIndex((log) => log.id === logId)
    if (index !== -1) {
      logs[index] = { ...logs[index], ...updates }
      localStorage.setItem("hourlyLogs", JSON.stringify(logs))
      return true
    }
    return false
  } catch (error) {
    console.error("Error updating hourly log:", error)
    return false
  }
}

export function deleteHourlyLog(logId: string): boolean {
  try {
    const logs = getHourlyLogs()
    const filteredLogs = logs.filter((log) => log.id !== logId)
    localStorage.setItem("hourlyLogs", JSON.stringify(filteredLogs))
    return true
  } catch (error) {
    console.error("Error deleting hourly log:", error)
    return false
  }
}

// Shifts CRUD operations
export function getShifts(): Shift[] {
  try {
    const data = localStorage.getItem("shifts")
    return data ? JSON.parse(data) : []
  } catch (error) {
    console.error("Error getting shifts:", error)
    return []
  }
}

export function addShift(shift: Shift): boolean {
  try {
    const shifts = getShifts()
    shifts.push(shift)
    localStorage.setItem("shifts", JSON.stringify(shifts))
    return true
  } catch (error) {
    console.error("Error adding shift:", error)
    return false
  }
}

export function updateShift(shiftId: string, updates: Partial<Shift>): boolean {
  try {
    const shifts = getShifts()
    const index = shifts.findIndex((shift) => shift.id === shiftId)
    if (index !== -1) {
      shifts[index] = { ...shifts[index], ...updates }
      localStorage.setItem("shifts", JSON.stringify(shifts))
      return true
    }
    return false
  } catch (error) {
    console.error("Error updating shift:", error)
    return false
  }
}

export function deleteShift(shiftId: string): boolean {
  try {
    const shifts = getShifts()
    const filteredShifts = shifts.filter((shift) => shift.id !== shiftId)
    localStorage.setItem("shifts", JSON.stringify(filteredShifts))
    return true
  } catch (error) {
    console.error("Error deleting shift:", error)
    return false
  }
}

// Leave Requests CRUD operations
export function getLeaveRequests(): LeaveRequest[] {
  try {
    const data = localStorage.getItem("leaveRequests")
    return data ? JSON.parse(data) : []
  } catch (error) {
    console.error("Error getting leave requests:", error)
    return []
  }
}

export function addLeaveRequest(request: LeaveRequest): boolean {
  try {
    const requests = getLeaveRequests()
    requests.push(request)
    localStorage.setItem("leaveRequests", JSON.stringify(requests))
    return true
  } catch (error) {
    console.error("Error adding leave request:", error)
    return false
  }
}

export function updateLeaveRequest(requestId: string, updates: Partial<LeaveRequest>): boolean {
  try {
    const requests = getLeaveRequests()
    const index = requests.findIndex((req) => req.id === requestId)
    if (index !== -1) {
      requests[index] = { ...requests[index], ...updates }
      localStorage.setItem("leaveRequests", JSON.stringify(requests))
      return true
    }
    return false
  } catch (error) {
    console.error("Error updating leave request:", error)
    return false
  }
}

export function deleteLeaveRequest(requestId: string): boolean {
  try {
    const requests = getLeaveRequests()
    const filteredRequests = requests.filter((req) => req.id !== requestId)
    localStorage.setItem("leaveRequests", JSON.stringify(filteredRequests))
    return true
  } catch (error) {
    console.error("Error deleting leave request:", error)
    return false
  }
}

// Initialize data on app load
export function initializeApp() {
  initializeDataStores()
}

export type Reply = MessageReply
export { addHourlyLog as saveHourlyLog }
export { addMessage as saveMessage }
[V0_FILE]typescript:file="lib/init-app.ts" isMerged="true" isEdit="true"
// Initialize the application data stores
export function initializeApp() {
  if (typeof window === "undefined") return

console.log("Initializing application data stores")

// Initialize staff members
  if (!localStorage.getItem("staffMembers")) {
    console.log("Initializing staff members")
    localStorage.setItem("staffMembers", JSON.stringify([]))
  }

// Initialize user credentials
  if (!localStorage.getItem("userCredentials")) {
    console.log("Initializing user credentials")
    const defaultCredentials = [
      {
        email: "admin@example.com",
        password: "admin123",
        role: "admin",
        userId: "admin1",
        name: "Admin User",
      },
    ]
    localStorage.setItem("userCredentials", JSON.stringify(defaultCredentials))
  }

// Initialize messages
  if (!localStorage.getItem("messages")) {
    console.log("Initializing messages")
    localStorage.setItem("messages", JSON.stringify([]))
  }

// Initialize hourly logs
  if (!localStorage.getItem("hourlyLogs")) {
    console.log("Initializing hourly logs")
    localStorage.setItem("hourlyLogs", JSON.stringify([]))
  }

// Initialize shifts
  if (!localStorage.getItem("shifts")) {
    console.log("Initializing shifts")
    localStorage.setItem("shifts", JSON.stringify([]))
  }

// Initialize leave requests
  if (!localStorage.getItem("leaveRequests")) {
    console.log("Initializing leave requests")
    localStorage.setItem("leaveRequests", JSON.stringify([]))
  }

console.log("Application data stores initialized")
}
[V0_FILE]typescriptreact:file="components/app-initializer.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect } from "react"
import { initializeApp } from "@/lib/init-app"

export function AppInitializer() {
  useEffect(() => {
    initializeApp()
  }, [])

return null
}
[V0_FILE]typescript:file="lib/auth-service.ts" isEdit="true" isMerged="true"
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  sendPasswordResetEmail,
  sendEmailVerification,
  onAuthStateChanged,
} from "firebase/auth"
import { doc, setDoc, getDoc, serverTimestamp, updateDoc } from "firebase/firestore"
import { auth, db } from "./firebase"

// Types
export interface AuthUser {
  uid: string
  email: string | null
  name?: string
  role?: string
  department?: string
  emailVerified: boolean
}

// Current user state
let currentUser: AuthUser | null = null

// Auth state observer
export function initAuthObserver(callback: (user: AuthUser | null) => void) {
  return onAuthStateChanged(auth, async (user) => {
    if (user) {
      // User is signed in
      const userDoc = await getDoc(doc(db, "users", user.uid))

if (userDoc.exists()) {
        const userData = userDoc.data()
        currentUser = {
          uid: user.uid,
          email: user.email,
          name: userData.name,
          role: userData.role,
          department: userData.department,
          emailVerified: user.emailVerified,
        }
      } else {
        currentUser = {
          uid: user.uid,
          email: user.email,
          emailVerified: user.emailVerified,
        }
      }
    } else {
      // User is signed out
      currentUser = null
    }

// Call the callback with the current user
    callback(currentUser)

// Also store in sessionStorage for persistence
    if (typeof window !== "undefined") {
      if (currentUser) {
        sessionStorage.setItem("currentUser", JSON.stringify(currentUser))
      } else {
        sessionStorage.removeItem("currentUser")
      }
    }
  })
}

// Get current user
export function getCurrentUser(): AuthUser | null {
  if (currentUser) return currentUser

// Try to get from sessionStorage if not in memory
  if (typeof window !== "undefined") {
    const storedUser = sessionStorage.getItem("currentUser")
    if (storedUser) {
      return JSON.parse(storedUser)
    }
  }

return null
}

// Register a new user
export async function registerUser(
  email: string,
  password: string,
  userData: {
    firstName: string
    lastName: string
    role: string
    department: string
    phone?: string
  },
): Promise<AuthUser> {
  try {
    // Create user in Firebase Auth
    const userCredential = await createUserWithEmailAndPassword(auth, email, password)
    const user = userCredential.user

// Send email verification
    await sendEmailVerification(user)

// Store additional user data in Firestore
    const fullUserData = {
      uid: user.uid,
      email: user.email,
      firstName: userData.firstName,
      lastName: userData.lastName,
      name: `${userData.firstName} ${userData.lastName}`,
      role: userData.role,
      department: userData.department,
      phone: userData.phone || "",
      status: "active",
      createdAt: serverTimestamp(),
      emailVerified: user.emailVerified,
    }

await setDoc(doc(db, "users", user.uid), fullUserData)

// Update current user
    currentUser = {
      uid: user.uid,
      email: user.email,
      name: fullUserData.name,
      role: fullUserData.role,
      department: fullUserData.department,
      emailVerified: user.emailVerified,
    }

return currentUser
  } catch (error) {
    console.error("Error registering user:", error)
    throw error
  }
}

// Login with email and password
export async function loginWithEmail(email: string, password: string): Promise<AuthUser> {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password)
    const user = userCredential.user

// Get additional user data from Firestore
    const userDoc = await getDoc(doc(db, "users", user.uid))

if (userDoc.exists()) {
      const userData = userDoc.data()

// Update last login timestamp
      await updateDoc(doc(db, "users", user.uid), {
        lastLoginAt: serverTimestamp(),
      })

// Set current user
      currentUser = {
        uid: user.uid,
        email: user.email,
        name: userData.name,
        role: userData.role,
        department: userData.department,
        emailVerified: user.emailVerified,
      }

return currentUser
    }

throw new Error("User data not found")
  } catch (error) {
    console.error("Error logging in:", error)
    throw error
  }
}

// Logout
export async function logoutUser(): Promise<void> {
  try {
    await signOut(auth)
    currentUser = null

if (typeof window !== "undefined") {
      sessionStorage.removeItem("currentUser")
    }
  } catch (error) {
    console.error("Error logging out:", error)
    throw error
  }
}

// Send password reset email
export async function resetPassword(email: string): Promise<void> {
  try {
    await sendPasswordResetEmail(auth, email)
  } catch (error) {
    console.error("Error sending password reset email:", error)
    throw error
  }
}

// Update user profile
export async function updateUserProfile(
  uid: string,
  data: {
    firstName?: string
    lastName?: string
    phone?: string
    department?: string
  },
): Promise<void> {
  try {
    const userRef = doc(db, "users", uid)

// Prepare update data
    const updateData: any = {
      updatedAt: serverTimestamp(),
    }

if (data.firstName && data.lastName) {
      updateData.firstName = data.firstName
      updateData.lastName = data.lastName
      updateData.name = `${data.firstName} ${data.lastName}`
    } else if (data.firstName) {
      updateData.firstName = data.firstName
      // Update name with existing lastName
      const userDoc = await getDoc(userRef)
      if (userDoc.exists()) {
        const userData = userDoc.data()
        updateData.name = `${data.firstName} ${userData.lastName || ""}`
      }
    } else if (data.lastName) {
      updateData.lastName = data.lastName
      // Update name with existing firstName
      const userDoc = await getDoc(userRef)
      if (userDoc.exists()) {
        const userData = userDoc.data()
        updateData.name = `${userData.firstName || ""} ${data.lastName}`
      }
    }

if (data.phone) updateData.phone = data.phone
    if (data.department) updateData.department = data.department

await updateDoc(userRef, updateData)

// Update current user if it's the same user
    if (currentUser && currentUser.uid === uid) {
      const userDoc = await getDoc(userRef)
      if (userDoc.exists()) {
        const userData = userDoc.data()
        currentUser = {
          ...currentUser,
          name: userData.name,
          department: userData.department,
        }

if (typeof window !== "undefined") {
          sessionStorage.setItem("currentUser", JSON.stringify(currentUser))
        }
      }
    }
  } catch (error) {
    console.error("Error updating user profile:", error)
    throw error
  }
}
[V0_FILE]typescript:file="lib/message-service.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import {
  collection,
  query,
  where,
  orderBy,
  addDoc,
  updateDoc,
  doc,
  getDoc,
  onSnapshot,
  serverTimestamp,
  Timestamp,
  type DocumentData,
  type QueryDocumentSnapshot,
} from "firebase/firestore"
import { db } from "./firebase"

// Types
export interface Message {
  id: string
  staffId: string
  staffName: string
  subject: string
  content: string
  createdAt: string | Timestamp
  status: "sent" | "read" | "replied"
  replies: Reply[]
}

export interface Reply {
  id: string
  senderId: string
  senderName: string
  senderRole: string
  content: string
  createdAt: string | Timestamp
}

// Helper function to convert Firestore document to Message
function convertMessage(doc: QueryDocumentSnapshot<DocumentData>): Message {
  const data = doc.data()
  return {
    id: doc.id,
    staffId: data.staffId,
    staffName: data.staffName,
    subject: data.subject,
    content: data.content,
    createdAt: data.createdAt instanceof Timestamp ? data.createdAt.toDate().toISOString() : data.createdAt,
    status: data.status,
    replies: Array.isArray(data.replies)
      ? data.replies.map((reply: any) => ({
          ...reply,
          createdAt: reply.createdAt instanceof Timestamp ? reply.createdAt.toDate().toISOString() : reply.createdAt,
        }))
      : [],
  }
}

// Send a new message
export async function sendMessage(messageData: {
  staffId: string
  staffName: string
  subject: string
  content: string
}): Promise<Message> {
  try {
    const message = {
      ...messageData,
      createdAt: serverTimestamp(),
      status: "sent",
      replies: [],
    }

const docRef = await addDoc(collection(db, "messages"), message)

// Return the created message
    return {
      id: docRef.id,
      ...message,
      createdAt: new Date().toISOString(),
      status: "sent" as const,
      replies: [],
    }
  } catch (error) {
    console.error("Error sending message:", error)
    throw error
  }
}

// Get messages for a staff member or admin
export async function getMessages(staffId: string, isAdmin: boolean): Promise<Message[]> {
  try {
    let messagesQuery

return new Promise((resolve, reject) => {
      const unsubscribe = onSnapshot(
        messagesQuery,
        (snapshot) => {
          const messages = snapshot.docs.map(convertMessage)
          resolve(messages)
          unsubscribe() // Unsubscribe after getting messages once
        },
        (error) => {
          console.error("Error getting messages:", error)
          reject(error)
        },
      )
    })
  } catch (error) {
    console.error("Error getting messages:", error)
    throw error
  }
}

// Subscribe to messages (real-time updates)
export function subscribeToMessages(
  staffId: string,
  isAdmin: boolean,
  callback: (messages: Message[]) => void,
): () => void {
  try {
    let messagesQuery

const unsubscribe = onSnapshot(
      messagesQuery,
      (snapshot) => {
        const messages = snapshot.docs.map(convertMessage)
        callback(messages)
      },
      (error) => {
        console.error("Error subscribing to messages:", error)
      },
    )

return unsubscribe
  } catch (error) {
    console.error("Error subscribing to messages:", error)
    throw error
  }
}

// Mark a message as read
export async function markMessageAsRead(messageId: string): Promise<void> {
  try {
    const messageRef = doc(db, "messages", messageId)
    await updateDoc(messageRef, {
      status: "read",
    })
  } catch (error) {
    console.error("Error marking message as read:", error)
    throw error
  }
}

// Add a reply to a message
export async function replyToMessage(
  messageId: string,
  replyData: {
    senderId: string
    senderName: string
    senderRole: string
    content: string
  },
): Promise<Message> {
  try {
    const messageRef = doc(db, "messages", messageId)
    const messageDoc = await getDoc(messageRef)

if (!messageDoc.exists()) {
      throw new Error("Message not found")
    }

const messageData = messageDoc.data()
    const replies = messageData.replies || []

const newReply = {
      id: `reply-${Date.now()}`,
      ...replyData,
      createdAt: serverTimestamp(),
    }

await updateDoc(messageRef, {
      replies: [...replies, newReply],
      status: "replied",
    })

// Get the updated message
    const updatedDoc = await getDoc(messageRef)
    return convertMessage(updatedDoc as QueryDocumentSnapshot<DocumentData>)
  } catch (error) {
    console.error("Error replying to message:", error)
    throw error
  }
}
[V0_FILE]typescript:file="lib/error-service.ts" isMerged="true" isEdit="true"
// Types of errors we want to track
export enum ErrorType {
  AUTH = "auth",
  API = "api",
  NETWORK = "network",
  DATABASE = "database",
  VALIDATION = "validation",
  UNKNOWN = "unknown",
}

// Error severity levels
export enum ErrorSeverity {
  INFO = "info",
  WARNING = "warning",
  ERROR = "error",
  CRITICAL = "critical",
}

// Error interface
export interface AppError {
  type: ErrorType
  message: string
  severity: ErrorSeverity
  timestamp: string
  context?: any
  stack?: string
}

// In-memory error log (for development)
const errorLog: AppError[] = []

// Maximum number of errors to keep in memory
const MAX_ERROR_LOG_SIZE = 100

// Log an error
export function logError(
  error: Error | string,
  type: ErrorType = ErrorType.UNKNOWN,
  severity: ErrorSeverity = ErrorSeverity.ERROR,
  context?: any,
): AppError {
  // Create error object
  const appError: AppError = {
    type,
    message: typeof error === "string" ? error : error.message,
    severity,
    timestamp: new Date().toISOString(),
    context,
    stack: typeof error !== "string" ? error.stack : undefined,
  }

// Log to console in development
  if (process.env.NODE_ENV !== "production") {
    console.error(`[${appError.type.toUpperCase()}] ${appError.message}`, appError)
  }

// Add to in-memory log
  errorLog.unshift(appError)

// Trim log if it gets too large
  if (errorLog.length > MAX_ERROR_LOG_SIZE) {
    errorLog.pop()
  }

// In production, we would send this to a logging service like Sentry
  if (process.env.NODE_ENV === "production") {
    // TODO: Send to external logging service
    // Example: Sentry.captureException(error);
  }

return appError
}

// Get recent errors (for admin dashboard)
export function getRecentErrors(limit = 10): AppError[] {
  return errorLog.slice(0, limit)
}

// Clear error log (for testing)
export function clearErrorLog(): void {
  errorLog.length = 0
}

// Parse Firebase error codes into user-friendly messages
export function parseFirebaseError(error: any): string {
  if (!error.code) return error.message || "An unknown error occurred"

switch (error.code) {
    // Authentication errors
    case "auth/email-already-in-use":
      return "This email is already in use. Please use a different email or try logging in."
    case "auth/invalid-email":
      return "The email address is not valid."
    case "auth/user-disabled":
      return "This account has been disabled. Please contact support."
    case "auth/user-not-found":
      return "No account found with this email. Please check your email or sign up."
    case "auth/wrong-password":
      return "Incorrect password. Please try again or reset your password."
    case "auth/too-many-requests":
      return "Too many unsuccessful login attempts. Please try again later or reset your password."
    case "auth/weak-password":
      return "Password is too weak. Please use a stronger password."

// Firestore errors
    case "permission-denied":
      return "You do not have permission to perform this action."
    case "unavailable":
      return "The service is currently unavailable. Please try again later."

// Default
    default:
      return error.message || "An unknown error occurred"
  }
}

// Handle API errors
export function handleApiError(error: any): { message: string; status: number } {
  // Log the error
  logError(error, ErrorType.API, ErrorSeverity.ERROR)

// Default error response
  const defaultResponse = {
    message: "An unexpected error occurred. Please try again later.",
    status: 500,
  }

// If it's a response error with status code
  if (error.response) {
    return {
      message: error.response.data?.message || defaultResponse.message,
      status: error.response.status,
    }
  }

// If it's a network error
  if (error.request) {
    return {
      message: "Network error. Please check your connection and try again.",
      status: 503,
    }
  }

// For other errors
  return defaultResponse
}
[V0_FILE]typescriptreact:file="app/reset-password/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { Loader2, ArrowLeft, CheckCircle } from "lucide-react"
import { resetPassword } from "@/lib/auth-service"
import { logError, ErrorType, ErrorSeverity, parseFirebaseError } from "@/lib/error-service"

export default function ResetPasswordPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [email, setEmail] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState("")
  const [isSuccess, setIsSuccess] = useState(false)

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

if (!email) {
      setError("Please enter your email address")
      return
    }

setIsLoading(true)

try {
      await resetPassword(email)
      setIsSuccess(true)
      toast({
        title: "Password reset email sent",
        description: "Check your email for instructions to reset your password",
      })
    } catch (error: any) {
      console.error("Password reset error:", error)

// Log the error
      logError(error, ErrorType.AUTH, ErrorSeverity.WARNING, { email })

// Set user-friendly error message
      setError(parseFirebaseError(error))
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
      <div className="absolute top-4 left-4">
        <Button variant="outline" onClick={() => router.push("/login")}>
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to Login
        </Button>
      </div>
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl">Reset Password</CardTitle>
          <CardDescription>Enter your email address and we'll send you a link to reset your password</CardDescription>
        </CardHeader>
        <CardContent>
          {isSuccess ? (
            <div className="text-center space-y-4">
              <div className="flex justify-center">
                <CheckCircle className="h-16 w-16 text-green-500" />
              </div>
              <h3 className="text-xl font-medium">Password Reset Email Sent</h3>
              <p className="text-muted-foreground">
                We've sent an email to <strong>{email}</strong> with instructions to reset your password.
              </p>
              <p className="text-sm text-muted-foreground">If you don't see the email, check your spam folder.</p>
              <Button className="mt-4" onClick={() => router.push("/login")}>
                Return to Login
              </Button>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email">Email Address</Label>
                <Input
                  id="email"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Enter your email address"
                  required
                />
              </div>

{error && <p className="text-destructive text-sm">{error}</p>}

<Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Sending Reset Link...
                  </>
                ) : (
                  "Send Reset Link"
                )}
              </Button>
            </form>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/error-boundary.tsx" isMerged="true" isEdit="true"
"use client"

import { Component, type ErrorInfo, type ReactNode } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertTriangle } from "lucide-react"
import { logError, ErrorType, ErrorSeverity } from "@/lib/error-service"

interface Props {
  children: ReactNode
  fallback?: ReactNode
}

interface State {
  hasError: boolean
  error: Error | null
}

export class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false,
    error: null,
  }

public static getDerivedStateFromError(error: Error): State {
    // Update state so the next render will show the fallback UI
    return { hasError: true, error }
  }

public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // Log the error to our error service
    logError(error, ErrorType.UNKNOWN, ErrorSeverity.ERROR, {
      componentStack: errorInfo.componentStack,
    })
  }

public render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      if (this.props.fallback) {
        return this.props.fallback
      }

return (
        <div className="flex items-center justify-center min-h-screen p-4">
          <Card className="w-full max-w-md">
            <CardHeader>
              <div className="flex items-center gap-2">
                <AlertTriangle className="h-5 w-5 text-destructive" />
                <CardTitle>Something went wrong</CardTitle>
              </div>
              <CardDescription>An unexpected error occurred. Our team has been notified.</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="text-sm text-muted-foreground">
                <p>Error details:</p>
                <pre className="mt-2 rounded bg-muted p-2 overflow-x-auto">
                  {this.state.error?.message || "Unknown error"}
                </pre>
              </div>
            </CardContent>
            <CardFooter>
              <Button onClick={() => window.location.reload()}>Refresh Page</Button>
            </CardFooter>
          </Card>
        </div>
      )
    }

return this.props.children
  }
}
[V0_FILE]typescript:file="lib/security-service.ts" isMerged="true" isEdit="true"
// Rate limiting for login attempts
const loginAttempts: Record<string, { count: number; resetTime: number }> = {}

// Maximum login attempts before temporary lockout
const MAX_LOGIN_ATTEMPTS = 5

// Lockout duration in milliseconds (15 minutes)
const LOCKOUT_DURATION = 15 * 60 * 1000

/**
 * Check if a user is allowed to attempt login
 */
export function canAttemptLogin(identifier: string): boolean {
  const now = Date.now()

// Clean up expired entries
  Object.keys(loginAttempts).forEach((key) => {
    if (loginAttempts[key].resetTime < now) {
      delete loginAttempts[key]
    }
  })

// Check if user is locked out
  if (loginAttempts[identifier]) {
    const attempt = loginAttempts[identifier]

// If reset time is in the future, user is locked out
    if (attempt.resetTime > now) {
      return false
    }

// If reset time has passed, reset the counter
    if (attempt.resetTime <= now) {
      delete loginAttempts[identifier]
    }
  }

return true
}

/**
 * Record a failed login attempt
 */
export function recordFailedLoginAttempt(identifier: string): void {
  const now = Date.now()

if (!loginAttempts[identifier]) {
    loginAttempts[identifier] = {
      count: 1,
      resetTime: now + LOCKOUT_DURATION,
    }
  } else {
    const attempt = loginAttempts[identifier]
    attempt.count += 1

// If max attempts reached, set lockout
    if (attempt.count >= MAX_LOGIN_ATTEMPTS) {
      attempt.resetTime = now + LOCKOUT_DURATION
    }
  }
}

/**
 * Reset login attempts for a user (after successful login)
 */
export function resetLoginAttempts(identifier: string): void {
  delete loginAttempts[identifier]
}

/**
 * Get remaining lockout time in seconds
 */
export function getRemainingLockoutTime(identifier: string): number {
  if (!loginAttempts[identifier]) {
    return 0
  }

const now = Date.now()
  const resetTime = loginAttempts[identifier].resetTime

if (resetTime <= now) {
    return 0
  }

return Math.ceil((resetTime - now) / 1000)
}

/**
 * Sanitize user input to prevent XSS attacks
 */
export function sanitizeInput(input: string): string {
  return input.replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'")
}

/**
 * Generate a secure random token
 */
export function generateSecureToken(length = 32): string {
  if (typeof window === "undefined") {
    // Server-side
    const crypto = require("crypto")
    return crypto.randomBytes(length).toString("hex")
  } else {
    // Client-side
    const array = new Uint8Array(length)
    window.crypto.getRandomValues(array)
    return Array.from(array, (byte) => byte.toString(16).padStart(2, "0")).join("")
  }
}
[V0_FILE]typescript:file="lib/performance-service.ts" isEdit="true" isMerged="true"
// Performance monitoring service

// Types
export interface PerformanceMetric {
  name: string
  value: number
  timestamp: number
}

// In-memory storage for performance metrics
const metrics: PerformanceMetric[] = []

// Maximum number of metrics to store
const MAX_METRICS = 1000

/**
 * Record a performance metric
 */
export function recordMetric(name: string, value: number): void {
  const metric: PerformanceMetric = {
    name,
    value,
    timestamp: Date.now(),
  }

metrics.unshift(metric)

// Trim metrics array if it gets too large
  if (metrics.length > MAX_METRICS) {
    metrics.length = MAX_METRICS
  }

// In production, we would send this to a monitoring service
  if (process.env.NODE_ENV === "production") {
    // Example: sendMetricToMonitoringService(metric);
  }
}

/**
 * Get metrics by name
 */
export function getMetricsByName(name: string): PerformanceMetric[] {
  return metrics.filter((metric) => metric.name === name)
}

/**
 * Get metrics within a time range
 */
export function getMetricsInTimeRange(startTime: number, endTime: number): PerformanceMetric[] {
  return metrics.filter((metric) => metric.timestamp >= startTime && metric.timestamp <= endTime)
}

/**
 * Calculate average value for a metric
 */
export function calculateAverageMetric(name: string): number | null {
  const relevantMetrics = getMetricsByName(name)

if (relevantMetrics.length === 0) {
    return null
  }

const sum = relevantMetrics.reduce((acc, metric) => acc + metric.value, 0)
  return sum / relevantMetrics.length
}

/**
 * Performance monitoring for React components
 */
export function usePerformanceMonitoring(componentName: string) {
  if (typeof window === "undefined") return {}

return {
    recordRender: () => {
      recordMetric(`${componentName}_render`, performance.now())
    },

measureOperation: async <T,>(operationName: string, operation: () => Promise<T>): Promise<T> => {
      const startTime = performance.now()

try {
        const result = await operation()
        const endTime = performance.now()
        recordMetric(`${componentName}_${operationName}`, endTime - startTime)
        return result
      } catch (error) {
        const endTime = performance.now()
        recordMetric(`${componentName}_${operationName}_error`, endTime - startTime)
        throw error
      }
    },
  }
}
[V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } 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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/hooks/use-toast"
import { Loader2 } from "lucide-react"

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

// Check if we're on the client side
  useEffect(() => {
    setIsClient(true)

// Check if user is already logged in
    const currentUser = localStorage.getItem("currentUser")
    if (currentUser) {
      try {
        const userData = JSON.parse(currentUser)
        if (userData.role === "admin") {
          router.push("/admin/dashboard")
        }
      } catch (e) {
        // Invalid JSON in localStorage, clear it
        localStorage.removeItem("currentUser")
      }
    }
  }, [router])

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

try {
      // Demo admin account - always works
      if (
        (email === "admin@example.com" && password === "admin123") ||
        (email === "admin" && password === "admin123")
      ) {
        const userData = {
          id: "admin-1",
          email: email === "admin" ? "admin@example.com" : email,
          role: "admin",
          name: "Admin User",
        }

// Store in localStorage
        localStorage.setItem("currentUser", JSON.stringify(userData))

toast({
          title: "Success",
          description: "Logged in as admin successfully",
        })

// Use setTimeout to ensure the toast is shown before navigation
        setTimeout(() => {
          router.push("/admin/dashboard")
        }, 500)

return
      }

// For other credentials, make an API call
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ email, password }),
      })

const data = await response.json()

if (!response.ok) {
        throw new Error(data.error || "Login failed")
      }

if (data.success) {
        // Check if user is admin
        if (data.user.role !== "admin") {
          setError("This account does not have admin access")
          setIsLoading(false)
          return
        }

// Store user data in localStorage
        localStorage.setItem("currentUser", JSON.stringify(data.user))

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

// Use setTimeout to ensure the toast is shown before navigation
        setTimeout(() => {
          router.push("/admin/dashboard")
        }, 500)
      } else {
        setError(data.error || "Invalid credentials")
        setIsLoading(false)
      }
    } catch (error: any) {
      console.error("Login error:", error)
      setError(error.message || "An error occurred during login")
      setIsLoading(false)
    }
  }

// If we're server-side rendering, show a minimal form without localStorage access
  if (!isClient) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
        <Card className="w-full max-w-md">
          <CardHeader>
            <CardTitle className="text-2xl text-center">Admin Login</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-center">Loading login form...</div>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
      <div className="absolute top-4 left-4">
        <Button variant="outline" onClick={() => router.push("/")}>
          ← Back to Home
        </Button>
      </div>
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-2xl text-center">Admin Login</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit}>
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email">Email or Username</Label>
                <Input
                  id="email"
                  placeholder="Enter your email or username"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <Input
                  id="password"
                  type="password"
                  placeholder="Enter your password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                />
              </div>
              {error && <p className="text-destructive text-sm">{error}</p>}
              <Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Logging in...
                  </>
                ) : (
                  "Login"
                )}
              </Button>

<div className="text-center text-sm text-muted-foreground mt-4">
                <p>Demo Credentials:</p>
                <p>Email: admin@example.com / Password: admin123</p>
                <p>or</p>
                <p>Username: admin / Password: admin123</p>
              </div>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/auth/login.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest) {
  try {
    const { email, password } = await request.json()

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

// For demo purposes, we'll check against hardcoded admin credentials
    if ((email === "admin" || email === "admin@example.com") && password === "admin123") {
      return NextResponse.json({
        success: true,
        user: {
          id: "admin-1",
          email: email === "admin" ? "admin@example.com" : email,
          role: "admin",
          name: "Admin User",
        },
      })
    }

// Check for the specific user
    if (email === "cfeventurecaps@gmail.com" && password === "123456") {
      return NextResponse.json({
        success: true,
        user: {
          id: "staff-1",
          email,
          role: "staff",
          name: "CFE Venture",
        },
      })
    }

// In a real app, you would check against a database
    // For demo, we'll simulate checking against localStorage (which would happen client-side)
    return NextResponse.json({ error: "Invalid credentials" }, { status: 401 })
  } catch (error) {
    console.error("Login error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/mongodb-service.ts" isMerged="true" isEdit="true"
import { MongoClient, ServerApiVersion } from "mongodb"

const uri = process.env.MONGODB_URI || ""
const options = {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  },
}

let client: MongoClient
let clientPromise: Promise<MongoClient>

if (!uri) {
  throw new Error("Please add your MongoDB URI to .env.local")
}

export default clientPromise

export async function connectToDatabase() {
  const client = await clientPromise
  const db = client.db("healthcare_staff_app")
  return { client, db }
}

export async function syncFirebaseToMongoDB(collection: string, data: any[]) {
  try {
    const { db } = await connectToDatabase()
    const mongoCollection = db.collection(collection)

// For each item in data, upsert to MongoDB
    for (const item of data) {
      const { id, ...rest } = item
      await mongoCollection.updateOne({ _id: id }, { $set: { ...rest, lastSyncedAt: new Date() } }, { upsert: true })
    }

return { success: true }
  } catch (error) {
    console.error(`Error syncing ${collection} to MongoDB:`, error)
    return { success: false, error }
  }
}
[V0_FILE]typescript:file="lib/sync-service.ts" isMerged="true" isEdit="true"
import { collection, getDocs, query, orderBy } from "firebase/firestore"
import { db } from "./firebase"
import { syncFirebaseToMongoDB } from "./mongodb-service"

export async function syncAllData() {
  try {
    // Sync users
    const usersQuery = query(collection(db, "users"))
    const usersSnapshot = await getDocs(usersQuery)
    const users = usersSnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
      createdAt: doc.data().createdAt?.toDate().toISOString(),
      updatedAt: doc.data().updatedAt?.toDate().toISOString(),
    }))

await syncFirebaseToMongoDB("users", users)

// Sync messages
    const messagesQuery = query(collection(db, "messages"), orderBy("createdAt", "desc"))
    const messagesSnapshot = await getDocs(messagesQuery)
    const messages = messagesSnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
      createdAt: doc.data().createdAt?.toDate().toISOString(),
      updatedAt: doc.data().updatedAt?.toDate().toISOString(),
    }))

await syncFirebaseToMongoDB("messages", messages)

// Sync time sessions
    const timeSessionsQuery = query(collection(db, "timeSessions"), orderBy("createdAt", "desc"))
    const timeSessionsSnapshot = await getDocs(timeSessionsQuery)
    const timeSessions = timeSessionsSnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
      clockInTime: doc.data().clockInTime?.toDate().toISOString(),
      clockOutTime: doc.data().clockOutTime?.toDate().toISOString(),
      createdAt: doc.data().createdAt?.toDate().toISOString(),
      updatedAt: doc.data().updatedAt?.toDate().toISOString(),
    }))

await syncFirebaseToMongoDB("timeSessions", timeSessions)

return { success: true }
  } catch (error) {
    console.error("Error syncing data:", error)
    return { success: false, error }
  }
}

// Create an API route to trigger synchronization
export async function scheduledSync() {
  try {
    const result = await syncAllData()
    return result
  } catch (error) {
    console.error("Scheduled sync failed:", error)
    return { success: false, error }
  }
}
[V0_FILE]typescript:file="app/api/sync/route.ts" isMerged="true" isEdit="true"
import { NextResponse } from "next/server"
import { syncAllData } from "@/lib/sync-service"

export async function GET() {
  try {
    const result = await syncAllData()

if (result.success) {
      return NextResponse.json({ success: true, message: "Data synchronized successfully" })
    } else {
      return NextResponse.json({ success: false, error: result.error }, { status: 500 })
    }
  } catch (error) {
    console.error("Sync API error:", error)
    return NextResponse.json({ success: false, error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/firebase.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { initializeApp, getApps, getApp } from "firebase/app"
import { getAuth } from "firebase/auth"
import { getFirestore } from "firebase/firestore"
import { getStorage } from "firebase/storage"
import { getFunctions } from "firebase/functions"

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
}

// Initialize Firebase
let app
if (getApps().length === 0) {
  try {
    app = initializeApp(firebaseConfig)
  } catch (error) {
    console.error("Firebase initialization error:", error)
  }
} else {
  app = getApp()
}

const auth = getAuth(app)
const db = getFirestore(app)
const storage = getStorage(app)
const functions = getFunctions(app)

// Set persistence to LOCAL
// This ensures the user stays logged in even after browser refresh
import { setPersistence, browserLocalPersistence } from "firebase/auth"
try {
  setPersistence(auth, browserLocalPersistence)
} catch (error) {
  console.error("Error setting persistence:", error)
}

const firebaseInitialized = !!app

export { app, auth, db, storage, functions, firebaseInitialized }
[V0_FILE]typescriptreact:file="app/admin/staff/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { PlusCircle, Edit, Trash } from "lucide-react"

interface StaffMember {
  id: string
  name: string
  email: string
  role: string
  department: string
  status: string
  createdAt: string
}

export default function StaffPage() {
  const [staffMembers, setStaffMembers] = useState<StaffMember[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const loadStaffMembers = () => {
      try {
        const storedStaff = localStorage.getItem("staffMembers")
        if (storedStaff) {
          const parsedStaff = JSON.parse(storedStaff)
          setStaffMembers(parsedStaff)
        }
      } catch (error) {
        console.error("Error loading staff members:", error)
      } finally {
        setIsLoading(false)
      }
    }

loadStaffMembers()
  }, [])

const handleDeleteStaff = (id: string) => {
    try {
      // Get current staff members
      const storedStaff = localStorage.getItem("staffMembers")
      if (storedStaff) {
        const parsedStaff = JSON.parse(storedStaff)

// Filter out the staff member to delete
        const updatedStaff = parsedStaff.filter((staff: StaffMember) => staff.id !== id)

// Update localStorage
        localStorage.setItem("staffMembers", JSON.stringify(updatedStaff))

// Update state
        setStaffMembers(updatedStaff)
      }

// Also remove from credentials
      const storedCredentials = localStorage.getItem("userCredentials")
      if (storedCredentials) {
        const parsedCredentials = JSON.parse(storedCredentials)

// Filter out the credentials for the deleted staff
        const updatedCredentials = parsedCredentials.filter((cred: any) => cred.userId !== id)

// Update localStorage
        localStorage.setItem("userCredentials", JSON.stringify(updatedCredentials))
      }
    } catch (error) {
      console.error("Error deleting staff member:", error)
    }
  }

if (isLoading) {
    return <div className="container mx-auto py-6">Loading staff members...</div>
  }

return (
    <div className="container mx-auto py-6">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle>Staff Management</CardTitle>
          <div className="flex items-center space-x-2">
            <Button asChild>
              <Link href="/admin/dashboard">Go to Dashboard</Link>
            </Button>
            <Button asChild>
              <Link href="/admin/staff/add">
                <PlusCircle className="mr-2 h-4 w-4" />
                Add Staff
              </Link>
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          {staffMembers.length === 0 ? (
            <div className="text-center py-4">
              <p>No staff members found.</p>
              <Button asChild className="mt-4">
                <Link href="/admin/staff/add">Add Your First Staff Member</Link>
              </Button>
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Name</TableHead>
                  <TableHead>Email</TableHead>
                  <TableHead>Role</TableHead>
                  <TableHead>Department</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {staffMembers.map((staff) => (
                  <TableRow key={staff.id}>
                    <TableCell className="font-medium">{staff.name}</TableCell>
                    <TableCell>{staff.email}</TableCell>
                    <TableCell>{staff.role}</TableCell>
                    <TableCell>{staff.department}</TableCell>
                    <TableCell>
                      <Badge variant={staff.status === "active" ? "success" : "destructive"}>{staff.status}</Badge>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end space-x-2">
                        <Button variant="outline" size="icon" asChild>
                          <Link href={`/admin/staff/edit/${staff.id}`}>
                            <Edit className="h-4 w-4" />
                          </Link>
                        </Button>
                        <Button
                          variant="outline"
                          size="icon"
                          className="text-red-500"
                          onClick={() => handleDeleteStaff(staff.id)}
                        >
                          <Trash className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/debug/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function DebugPage() {
  const [staffMembers, setStaffMembers] = useState<any[]>([])
  const [credentials, setCredentials] = useState<any[]>([])
  const [currentUser, setCurrentUser] = useState<any>(null)

useEffect(() => {
    // Load data from localStorage
    try {
      const staffData = localStorage.getItem("staffMembers")
      if (staffData) {
        setStaffMembers(JSON.parse(staffData))
      }

const credentialsData = localStorage.getItem("userCredentials")
      if (credentialsData) {
        setCredentials(JSON.parse(credentialsData))
      }

const userData = sessionStorage.getItem("currentUser")
      if (userData) {
        setCurrentUser(JSON.parse(userData))
      }
    } catch (error) {
      console.error("Error loading debug data:", error)
    }
  }, [])

const clearAllData = () => {
    localStorage.removeItem("staffMembers")
    localStorage.removeItem("userCredentials")
    sessionStorage.removeItem("currentUser")
    setStaffMembers([])
    setCredentials([])
    setCurrentUser(null)
  }

return (
    <div className="container mx-auto py-6 space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Debug Information</CardTitle>
        </CardHeader>
        <CardContent>
          <Button onClick={clearAllData} variant="destructive" className="mb-6">
            Clear All Data
          </Button>

<div className="space-y-6">
            <div>
              <h2 className="text-xl font-bold mb-2">Current User (Session Storage)</h2>
              <pre className="bg-gray-100 p-4 rounded overflow-auto max-h-60">
                {JSON.stringify(currentUser, null, 2) || "No current user"}
              </pre>
            </div>

<div>
              <h2 className="text-xl font-bold mb-2">Staff Members (Local Storage)</h2>
              <pre className="bg-gray-100 p-4 rounded overflow-auto max-h-60">
                {JSON.stringify(staffMembers, null, 2) || "No staff members"}
              </pre>
            </div>

<div>
              <h2 className="text-xl font-bold mb-2">User Credentials (Local Storage)</h2>
              <pre className="bg-gray-100 p-4 rounded overflow-auto max-h-60">
                {JSON.stringify(credentials, null, 2) || "No credentials"}
              </pre>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/staff/layout.tsx" isMerged="true" isEdit="true"
import type React from "react"
export default function StaffLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <div>{children}</div>
}
[V0_FILE]typescriptreact:file="app/staff/activity-logs/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { StaffLayout } from "@/components/staff-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Clock } from "lucide-react"

export default function ActivityLogsPage() {
  const [isClient, setIsClient] = useState(false)
  const [currentUser, setCurrentUser] = useState<any>(null)

useEffect(() => {
    setIsClient(true)

// Get user data from session storage
    if (typeof window !== "undefined") {
      const currentUser = sessionStorage.getItem("currentUser")
      if (currentUser) {
        try {
          setCurrentUser(JSON.parse(currentUser))
        } catch (error) {
          console.error("Error parsing user data:", error)
        }
      }
    }
  }, [])

// Mock data for activity logs
  const activityLogs = [
    {
      id: "1",
      type: "login",
      timestamp: new Date(2025, 3, 28, 8, 0),
      details: "Logged in from Main Hospital",
    },
    {
      id: "2",
      type: "clock-in",
      timestamp: new Date(2025, 3, 28, 8, 5),
      details: "Clocked in for morning shift",
    },
    {
      id: "3",
      type: "task",
      timestamp: new Date(2025, 3, 28, 9, 30),
      details: "Completed patient rounds",
    },
    {
      id: "4",
      type: "break",
      timestamp: new Date(2025, 3, 28, 12, 0),
      details: "Started lunch break",
    },
    {
      id: "5",
      type: "break",
      timestamp: new Date(2025, 3, 28, 12, 30),
      details: "Ended lunch break",
    },
    {
      id: "6",
      type: "task",
      timestamp: new Date(2025, 3, 28, 14, 15),
      details: "Attended staff meeting",
    },
    {
      id: "7",
      type: "clock-out",
      timestamp: new Date(2025, 3, 28, 16, 30),
      details: "Clocked out for the day",
    },
    {
      id: "8",
      type: "logout",
      timestamp: new Date(2025, 3, 28, 16, 35),
      details: "Logged out",
    },
  ]

const timeSessions = [
    {
      id: "s1",
      date: new Date(2025, 3, 28),
      clockInTime: new Date(2025, 3, 28, 8, 5),
      clockOutTime: new Date(2025, 3, 28, 16, 30),
      duration: 505, // in minutes
      notes: "Regular shift with staff meeting",
    },
    {
      id: "s2",
      date: new Date(2025, 3, 27),
      clockInTime: new Date(2025, 3, 27, 9, 0),
      clockOutTime: new Date(2025, 3, 27, 17, 15),
      duration: 495, // in minutes
      notes: "Covered for Jane in the afternoon",
    },
    {
      id: "s3",
      date: new Date(2025, 3, 26),
      clockInTime: new Date(2025, 3, 26, 8, 0),
      clockOutTime: new Date(2025, 3, 26, 16, 0),
      duration: 480, // in minutes
      notes: "Regular shift",
    },
  ]

// Format date for display
  const formatDate = (date: Date) => {
    return date.toLocaleDateString("en-US", {
      weekday: "long",
      month: "long",
      day: "numeric",
    })
  }

// Format time for display
  const formatTime = (time: Date) => {
    return time.toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
    })
  }

// Format duration
  const formatDuration = (minutes: number) => {
    const hours = Math.floor(minutes / 60)
    const mins = minutes % 60
    return `${hours}h ${mins}m`
  }

// Get badge color based on activity type
  const getBadgeVariant = (type: string) => {
    switch (type) {
      case "login":
      case "clock-in":
        return "default"
      case "logout":
      case "clock-out":
        return "secondary"
      case "task":
        return "outline"
      case "break":
        return "destructive"
      default:
        return "outline"
    }
  }

if (!isClient) {
    return (
      <StaffLayout>
        <div>Loading...</div>
      </StaffLayout>
    )
  }

return (
    <StaffLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Activity Logs</h1>
          <p className="text-muted-foreground">View your recent activities and time sessions</p>
        </div>

<Tabs defaultValue="activities">
          <TabsList>
            <TabsTrigger value="activities">Activity Log</TabsTrigger>
            <TabsTrigger value="sessions">Time Sessions</TabsTrigger>
          </TabsList>
          <TabsContent value="activities" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Recent Activities</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {activityLogs.map((log) => (
                    <div key={log.id} className="flex justify-between items-center border-b pb-3">
                      <div>
                        <p className="font-medium">{log.details}</p>
                        <p className="text-sm text-muted-foreground">
                          {formatDate(log.timestamp)} at {formatTime(log.timestamp)}
                        </p>
                      </div>
                      <Badge variant={getBadgeVariant(log.type)}>
                        {log.type.charAt(0).toUpperCase() + log.type.slice(1)}
                      </Badge>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="sessions" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Time Sessions</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-6">
                  {timeSessions.map((session) => (
                    <div key={session.id} className="border rounded-lg p-4">
                      <div className="flex justify-between items-center mb-2">
                        <h3 className="font-medium">{formatDate(session.date)}</h3>
                        <Badge variant="outline">
                          <Clock className="mr-1 h-4 w-4" />
                          {formatDuration(session.duration)}
                        </Badge>
                      </div>
                      <div className="grid gap-2 md:grid-cols-2">
                        <div>
                          <p className="text-sm text-muted-foreground">Clock In</p>
                          <p>{formatTime(session.clockInTime)}</p>
                        </div>
                        <div>
                          <p className="text-sm text-muted-foreground">Clock Out</p>
                          <p>{formatTime(session.clockOutTime)}</p>
                        </div>
                      </div>
                      {session.notes && (
                        <div className="mt-2">
                          <p className="text-sm text-muted-foreground">Notes</p>
                          <p>{session.notes}</p>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </StaffLayout>
  )
}
[V0_FILE]typescriptreact:file="app/staff/dashboard/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { StaffLayout } from "@/components/staff-layout"
import { Button } from "@/components/ui/button"
import { Clock, Calendar, MessageSquare, FileText } from "lucide-react"
import Link from "next/link"

export default function StaffDashboardPage() {
  const [staffName, setStaffName] = useState("")
  const [department, setDepartment] = useState("")
  const [isClient, setIsClient] = useState(false)
  const [clockStatus, setClockStatus] = useState<"in" | "out">("out")
  const [currentSession, setCurrentSession] = useState<any>(null)

useEffect(() => {
    setIsClient(true)

// Get user data from session storage
    if (typeof window !== "undefined") {
      const currentUser = sessionStorage.getItem("currentUser")
      if (currentUser) {
        try {
          const userData = JSON.parse(currentUser)
          setStaffName(userData.name || "Staff Member")
          setDepartment(userData.department || "General")

// Check if user is clocked in
          const sessionsStr = localStorage.getItem("timeSessions")
          if (sessionsStr) {
            const sessions = JSON.parse(sessionsStr)
            const activeSession = sessions.find(
              (session: any) => session.staffId === userData.id && session.status === "active",
            )

if (activeSession) {
              setClockStatus("in")
              setCurrentSession(activeSession)
            } else {
              setClockStatus("out")
              setCurrentSession(null)
            }
          }
        } catch (error) {
          console.error("Error parsing user data:", error)
        }
      }
    }
  }, [])

if (!isClient) {
    return (
      <StaffLayout>
        <div>Loading...</div>
      </StaffLayout>
    )
  }

return (
    <StaffLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold">Welcome, {staffName}</h1>
          <p className="text-muted-foreground">Department: {department}</p>
        </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Clock Status</CardTitle>
              <Clock className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{clockStatus === "in" ? "Clocked In" : "Not Clocked In"}</div>
              <p className="text-xs text-muted-foreground">
                {clockStatus === "in"
                  ? `Since ${new Date(currentSession?.clockInTime).toLocaleTimeString()}`
                  : "Visit Time Tracking to clock in"}
              </p>
              <Button variant="outline" className="mt-4 w-full" size="sm" asChild>
                <Link href="/staff/time-tracking">Go to Time Tracking</Link>
              </Button>
            </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 Schedule</CardTitle>
              <Calendar className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">8:00 AM - 4:00 PM</div>
              <p className="text-xs text-muted-foreground">Regular Shift</p>
              <Button variant="outline" className="mt-4 w-full" size="sm" asChild>
                <Link href="/staff/schedule">View Schedule</Link>
              </Button>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Unread Messages</CardTitle>
              <MessageSquare className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">3</div>
              <p className="text-xs text-muted-foreground">2 from Admin, 1 from System</p>
              <Button variant="outline" className="mt-4 w-full" size="sm" asChild>
                <Link href="/staff/messages">View Messages</Link>
              </Button>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Pending Tasks</CardTitle>
              <FileText className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">5</div>
              <p className="text-xs text-muted-foreground">2 high priority</p>
              <Button variant="outline" className="mt-4 w-full" size="sm">
                View Tasks
              </Button>
            </CardContent>
          </Card>
        </div>

<div className="grid gap-4 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>Recent Activity</CardTitle>
              <CardDescription>Your recent activities and logs</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center">
                  <div className="ml-4 space-y-1">
                    <p className="text-sm font-medium">Logged in</p>
                    <p className="text-sm text-muted-foreground">Today, 9:00 AM</p>
                  </div>
                </div>
                <div className="flex items-center">
                  <div className="ml-4 space-y-1">
                    <p className="text-sm font-medium">Submitted hourly log</p>
                    <p className="text-sm text-muted-foreground">Yesterday, 3:00 PM</p>
                  </div>
                </div>
                <div className="flex items-center">
                  <div className="ml-4 space-y-1">
                    <p className="text-sm font-medium">Requested time off</p>
                    <p className="text-sm text-muted-foreground">Yesterday, 11:30 AM</p>
                  </div>
                </div>
              </div>
              <Button variant="outline" className="mt-4 w-full" size="sm" asChild>
                <Link href="/staff/activity-logs">View All Activity</Link>
              </Button>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Quick Actions</CardTitle>
              <CardDescription>Common tasks and actions</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid gap-2">
                <Button variant="outline" className="justify-start" asChild>
                  <Link href="/staff/hourly-logs">
                    <Clock className="mr-2 h-4 w-4" />
                    Submit Hourly Log
                  </Link>
                </Button>
                <Button variant="outline" className="justify-start" asChild>
                  <Link href="/staff/message-admin">
                    <MessageSquare className="mr-2 h-4 w-4" />
                    Message Admin
                  </Link>
                </Button>
                <Button variant="outline" className="justify-start">
                  <Calendar className="mr-2 h-4 w-4" />
                  Request Time Off
                </Button>
                <Button variant="outline" className="justify-start">
                  <FileText className="mr-2 h-4 w-4" />
                  View Policies
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </StaffLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/shifts/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { AdminLayout } from "@/components/admin-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Clock, MapPin, Users, Plus, Loader2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface StaffMember {
  id: string
  uid?: string
  name: string
  department: string
  role: string
}

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

export default function ShiftManagementPage() {
  const { toast } = useToast()
  const [date, setDate] = useState<Date | undefined>(new Date())
  const [addShiftOpen, setAddShiftOpen] = useState(false)
  const [assignStaffOpen, setAssignStaffOpen] = useState(false)
  const [viewReportOpen, setViewReportOpen] = useState(false)
  const [viewMode, setViewMode] = useState<"day" | "week" | "month">("day")
  const [shifts, setShifts] = useState<Shift[]>([])
  const [staffMembers, setStaffMembers] = useState<StaffMember[]>([])
  const [locations, setLocations] = useState<Location[]>([])
  const [selectedShift, setSelectedShift] = useState<Shift | null>(null)
  const [selectedStaff, setSelectedStaff] = useState<string[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isClient, setIsClient] = useState(false)
  const [newShiftData, setNewShiftData] = useState({
    date: new Date(),
    startTime: "07:00",
    endTime: "15:00",
    location: "",
    department: "General Care",
    staffNeeded: 5,
  })

// Initialize client-side rendering
  useEffect(() => {
    setIsClient(true)
  }, [])

// Load shifts, staff, and locations from localStorage
  useEffect(() => {
    if (!isClient) return

const loadData = async () => {
      try {
        setIsLoading(true)

// Load staff from localStorage
        const storedStaff = localStorage.getItem("staffMembers")
        const staffData = storedStaff ? JSON.parse(storedStaff) : []
        setStaffMembers(staffData)

localStorage.setItem("locations", JSON.stringify([defaultLocation]))
          setLocations([defaultLocation])

// Load shifts from localStorage
        const storedShifts = localStorage.getItem("shifts")
        const shiftsData = storedShifts ? JSON.parse(storedShifts) : []

// Convert date strings to Date objects
        const formattedShifts = shiftsData.map((shift: any) => ({
          ...shift,
          date: new Date(shift.date),
        }))

loadData()
  }, [isClient, toast])

// Handle adding a new shift
  const handleAddShift = () => {
    try {
      // Validate form
      if (!newShiftData.location) {
        toast({
          title: "Error",
          description: "Please select a location for the shift.",
          variant: "destructive",
        })
        return
      }

// Create shift data with unique ID
      const shiftId = `shift_${Date.now()}`
      const shiftData = {
        id: shiftId,
        date: newShiftData.date,
        startTime: newShiftData.startTime,
        endTime: newShiftData.endTime,
        location: newShiftData.location,
        department: newShiftData.department,
        staffNeeded: newShiftData.staffNeeded,
        staffAssigned: 0,
        status: "open",
        assignedStaff: [],
        createdAt: new Date().toISOString(),
      }

// Get existing shifts from localStorage
      const storedShifts = localStorage.getItem("shifts")
      const existingShifts = storedShifts ? JSON.parse(storedShifts) : []

// Add new shift
      existingShifts.push(shiftData)
      localStorage.setItem("shifts", JSON.stringify(existingShifts))

// Add to state
      const newShift = {
        ...shiftData,
        date: new Date(shiftData.date),
      }

setShifts([newShift, ...shifts])

toast({
        title: "Shift Created",
        description: "New shift has been created and published.",
      })
      setAddShiftOpen(false)

// Reset form
      setNewShiftData({
        date: new Date(),
        startTime: "07:00",
        endTime: "15:00",
        location: locations.length > 0 ? locations[0].id : "",
        department: "General Care",
        staffNeeded: 5,
      })
    } catch (error) {
      console.error("Error adding shift:", error)
      toast({
        title: "Error",
        description: "Failed to create shift. Please try again.",
        variant: "destructive",
      })
    }
  }

// Handle opening the assign staff dialog
  const handleOpenAssignStaff = (shift: Shift) => {
    // Refresh staff members list from localStorage
    const storedStaff = localStorage.getItem("staffMembers")
    if (storedStaff) {
      try {
        const parsedStaff = JSON.parse(storedStaff)
        console.log("Loaded staff members:", parsedStaff)
        setStaffMembers(parsedStaff)
      } catch (error) {
        console.error("Error parsing staff data:", error)
        toast({
          title: "Error",
          description: "Failed to load staff data. Please refresh the page.",
          variant: "destructive",
        })
      }
    } else {
      console.log("No staff members found in localStorage")
    }

setSelectedShift(shift)
    setSelectedStaff(shift.assignedStaff || [])
    setAssignStaffOpen(true)
  }

// Handle assigning staff to a shift
  const handleAssignStaff = () => {
    if (!selectedShift) return

try {
      const staffAssigned = selectedStaff.length
      const status = staffAssigned >= selectedShift.staffNeeded ? "filled" : staffAssigned > 0 ? "understaffed" : "open"

// Get existing shifts from localStorage
      const storedShifts = localStorage.getItem("shifts")
      const existingShifts = storedShifts ? JSON.parse(storedShifts) : []

// Update the shift
      const updatedShifts = existingShifts.map((shift: any) => {
        if (shift.id === selectedShift.id) {
          return {
            ...shift,
            staffAssigned,
            status,
            assignedStaff: selectedStaff,
          }
        }
        return shift
      })

// Save to localStorage
      localStorage.setItem("shifts", JSON.stringify(updatedShifts))

// Update state
      const stateUpdatedShifts = shifts.map((shift) => {
        if (shift.id === selectedShift.id) {
          return {
            ...shift,
            staffAssigned,
            status,
            assignedStaff: selectedStaff,
          }
        }
        return shift
      })

setShifts(stateUpdatedShifts)

toast({
        title: "Staff Assigned",
        description: `${selectedStaff.length} staff members assigned to shift.`,
      })
      setAssignStaffOpen(false)
    } catch (error) {
      console.error("Error assigning staff:", error)
      toast({
        title: "Error",
        description: "Failed to assign staff. Please try again.",
        variant: "destructive",
      })
    }
  }

// Handle opening the view report dialog
  const handleOpenViewReport = (shift: Shift) => {
    setSelectedShift(shift)
    setViewReportOpen(true)
  }

// Handle input change for new shift form
  const handleNewShiftChange = (field: string, value: any) => {
    setNewShiftData((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

// Toggle staff selection
  const toggleStaffSelection = (staffId: string) => {
    if (selectedStaff.includes(staffId)) {
      setSelectedStaff(selectedStaff.filter((id) => id !== staffId))
    } else {
      setSelectedStaff([...selectedStaff, staffId])
    }
  }

// Mark shift as completed
  const markShiftAsCompleted = (shiftId: string) => {
    try {
      // Get existing shifts from localStorage
      const storedShifts = localStorage.getItem("shifts")
      const existingShifts = storedShifts ? JSON.parse(storedShifts) : []

// Update the shift
      const updatedShifts = existingShifts.map((shift: any) => {
        if (shift.id === shiftId) {
          return {
            ...shift,
            status: "completed",
          }
        }
        return shift
      })

// Save to localStorage
      localStorage.setItem("shifts", JSON.stringify(updatedShifts))

// Update state
      const stateUpdatedShifts = shifts.map((shift) => {
        if (shift.id === shiftId) {
          return {
            ...shift,
            status: "completed",
          }
        }
        return shift
      })

setShifts(stateUpdatedShifts)

toast({
        title: "Shift Completed",
        description: "Shift has been marked as completed.",
      })
    } catch (error) {
      console.error("Error marking shift as completed:", error)
      toast({
        title: "Error",
        description: "Failed to update shift status. Please try again.",
        variant: "destructive",
      })
    }
  }

if (!isClient) {
    return (
      <AdminLayout>
        <div className="flex items-center justify-center h-[60vh]">
          <p>Loading shift management data...</p>
        </div>
      </AdminLayout>
    )
  }

if (isLoading) {
    return (
      <AdminLayout>
        <div className="flex items-center justify-center h-[60vh]">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
          <span className="ml-2">Loading shift management data...</span>
        </div>
      </AdminLayout>
    )
  }

<div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>{date ? formatDate(date) : "Select a date"}</CardTitle>
              </CardHeader>
              <CardContent>
                {shiftsForSelectedDate.length > 0 ? (
                  <div className="space-y-4">
                    {shiftsForSelectedDate.map((shift) => (
                      <div
                        key={shift.id}
                        className="flex flex-col md:flex-row justify-between items-start md:items-center p-4 border rounded-lg"
                      >
                        <div className="space-y-2 mb-4 md:mb-0">
                          <div className="flex items-center">
                            <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
                            <span>
                              {shift.startTime} - {shift.endTime}
                            </span>
                          </div>
                          <div className="flex items-center">
                            <MapPin className="h-4 w-4 mr-2 text-muted-foreground" />
                            <span>{getLocationName(shift.location)}</span>
                          </div>
                          <div className="flex items-center">
                            <Users className="h-4 w-4 mr-2 text-muted-foreground" />
                            <span>
                              {shift.staffAssigned}/{shift.staffNeeded} Staff ({shift.department})
                            </span>
                          </div>
                          <div>{getStatusBadge(shift.status)}</div>
                        </div>
                        <div className="flex flex-col sm:flex-row gap-2">
                          {shift.status !== "completed" && (
                            <>
                              <Button variant="outline" size="sm" onClick={() => handleOpenAssignStaff(shift)}>
                                Assign Staff
                              </Button>
                              <Button variant="outline" size="sm" onClick={() => markShiftAsCompleted(shift.id)}>
                                Mark Completed
                              </Button>
                            </>
                          )}
                          {shift.status === "completed" && (
                            <Button variant="outline" size="sm" onClick={() => handleOpenViewReport(shift)}>
                              View Report
                            </Button>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-8 text-muted-foreground">
                    No shifts scheduled for this date. Click "Add Shift" to create one.
                  </div>
                )}
              </CardContent>
            </Card>

<Tabs defaultValue="upcoming">
              <TabsList className="grid grid-cols-3 mb-4">
                <TabsTrigger value="upcoming">Upcoming Shifts</TabsTrigger>
                <TabsTrigger value="understaffed">Understaffed</TabsTrigger>
                <TabsTrigger value="completed">Completed</TabsTrigger>
              </TabsList>

<TabsContent value="upcoming">
                <Card>
                  <CardHeader>
                    <CardTitle>Upcoming Shifts</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {shifts
                        .filter(
                          (shift) =>
                            shift.status !== "completed" &&
                            shift.date instanceof Date &&
                            shift.date >= new Date(new Date().setHours(0, 0, 0, 0)),
                        )
                        .slice(0, 5)
                        .map((shift) => (
                          <div key={shift.id} className="flex justify-between items-center p-4 border rounded-lg">
                            <div>
                              <p className="font-medium">{shift.date instanceof Date ? formatDate(shift.date) : ""}</p>
                              <p className="text-sm text-muted-foreground">
                                {shift.startTime} - {shift.endTime} | {shift.department}
                              </p>
                              <p className="text-sm text-muted-foreground">
                                Location: {getLocationName(shift.location)}
                              </p>
                            </div>
                            <div className="flex items-center gap-2">
                              {getStatusBadge(shift.status)}
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => setDate(shift.date instanceof Date ? shift.date : undefined)}
                              >
                                View
                              </Button>
                            </div>
                          </div>
                        ))}
                      {shifts.filter(
                        (shift) =>
                          shift.status !== "completed" &&
                          shift.date instanceof Date &&
                          shift.date >= new Date(new Date().setHours(0, 0, 0, 0)),
                      ).length === 0 && (
                        <div className="text-center py-4 text-muted-foreground">No upcoming shifts found.</div>
                      )}
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

<TabsContent value="understaffed">
                <Card>
                  <CardHeader>
                    <CardTitle>Understaffed Shifts</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {shifts
                        .filter((shift) => shift.status === "understaffed")
                        .map((shift) => (
                          <div key={shift.id} className="flex justify-between items-center p-4 border rounded-lg">
                            <div>
                              <p className="font-medium">{shift.date instanceof Date ? formatDate(shift.date) : ""}</p>
                              <p className="text-sm text-muted-foreground">
                                {shift.startTime} - {shift.endTime} | {shift.department}
                              </p>
                              <p className="text-sm text-muted-foreground">
                                Location: {getLocationName(shift.location)}
                              </p>
                              <p className="text-sm text-red-500">
                                Needs {shift.staffNeeded - shift.staffAssigned} more staff
                              </p>
                            </div>
                            <Button variant="outline" size="sm" onClick={() => handleOpenAssignStaff(shift)}>
                              Assign Staff
                            </Button>
                          </div>
                        ))}
                      {shifts.filter((shift) => shift.status === "understaffed").length === 0 && (
                        <div className="text-center py-4 text-muted-foreground">No understaffed shifts found.</div>
                      )}
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

<TabsContent value="completed">
                <Card>
                  <CardHeader>
                    <CardTitle>Completed Shifts</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {shifts
                        .filter((shift) => shift.status === "completed")
                        .slice(0, 5)
                        .map((shift) => (
                          <div key={shift.id} className="flex justify-between items-center p-4 border rounded-lg">
                            <div>
                              <p className="font-medium">{shift.date instanceof Date ? formatDate(shift.date) : ""}</p>
                              <p className="text-sm text-muted-foreground">
                                {shift.startTime} - {shift.endTime} | {shift.department}
                              </p>
                              <p className="text-sm text-muted-foreground">
                                Location: {getLocationName(shift.location)}
                              </p>
                            </div>
                            <Button variant="outline" size="sm" onClick={() => handleOpenViewReport(shift)}>
                              View Report
                            </Button>
                          </div>
                        ))}
                      {shifts.filter((shift) => shift.status === "completed").length === 0 && (
                        <div className="text-center py-4 text-muted-foreground">No completed shifts found.</div>
                      )}
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </div>

{/* Add Shift Dialog */}
      <Dialog open={addShiftOpen} onOpenChange={setAddShiftOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Add New Shift</DialogTitle>
            <DialogDescription>Create a new shift for staff to be assigned to.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="shift-date" className="text-right">
                Date
              </Label>
              <div className="col-span-3">
                <input
                  id="shift-date"
                  type="date"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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"
                  value={newShiftData.date.toISOString().split("T")[0]}
                  onChange={(e) => handleNewShiftChange("date", new Date(e.target.value))}
                />
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="start-time" className="text-right">
                Start Time
              </Label>
              <div className="col-span-3">
                <input
                  id="start-time"
                  type="time"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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"
                  value={newShiftData.startTime}
                  onChange={(e) => handleNewShiftChange("startTime", e.target.value)}
                />
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="end-time" className="text-right">
                End Time
              </Label>
              <div className="col-span-3">
                <input
                  id="end-time"
                  type="time"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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"
                  value={newShiftData.endTime}
                  onChange={(e) => handleNewShiftChange("endTime", e.target.value)}
                />
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="location" className="text-right">
                Location
              </Label>
              <div className="col-span-3">
                <Select
                  value={newShiftData.location}
                  onValueChange={(value) => handleNewShiftChange("location", value)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select location" />
                  </SelectTrigger>
                  <SelectContent>
                    {locations.length > 0 ? (
                      locations.map((location) => (
                        <SelectItem key={location.id} value={location.id}>
                          {location.name}
                        </SelectItem>
                      ))
                    ) : (
                      <SelectItem value="none" disabled>
                        No locations available
                      </SelectItem>
                    )}
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="department" className="text-right">
                Department
              </Label>
              <Select
                value={newShiftData.department}
                onValueChange={(value) => handleNewShiftChange("department", value)}
              >
                <SelectTrigger className="col-span-3">
                  <SelectValue placeholder="Select department" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="General Care">General Care</SelectItem>
                  <SelectItem value="Emergency">Emergency</SelectItem>
                  <SelectItem value="ICU">ICU</SelectItem>
                  <SelectItem value="Pediatrics">Pediatrics</SelectItem>
                  <SelectItem value="Cardiology">Cardiology</SelectItem>
                  <SelectItem value="Neurology">Neurology</SelectItem>
                  <SelectItem value="Oncology">Oncology</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="staff-needed" className="text-right">
                Staff Needed
              </Label>
              <Input
                id="staff-needed"
                type="number"
                min="1"
                value={newShiftData.staffNeeded}
                onChange={(e) => handleNewShiftChange("staffNeeded", Number.parseInt(e.target.value))}
                className="col-span-3"
              />
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setAddShiftOpen(false)}>
              Cancel
            </Button>
            <Button type="button" onClick={handleAddShift}>
              Create Shift
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Assign Staff Dialog */}
      <Dialog open={assignStaffOpen} onOpenChange={setAssignStaffOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Assign Staff to Shift</DialogTitle>
            <DialogDescription>
              {selectedShift && (
                <>
                  {selectedShift.date instanceof Date ? formatDate(selectedShift.date) : ""} | {selectedShift.startTime}{" "}
                  - {selectedShift.endTime} | {selectedShift.department}
                </>
              )}
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <div className="mb-4">
              <Label>Select Staff Members</Label>
              <p className="text-sm text-muted-foreground mb-2">
                {selectedStaff.length} of {selectedShift?.staffNeeded} staff selected
              </p>
            </div>
            <div className="max-h-[300px] overflow-y-auto space-y-2">
              {staffMembers.length > 0 ? (
                staffMembers.map((staff) => (
                  <div
                    key={staff.id}
                    className={`flex items-center justify-between p-3 rounded-md border cursor-pointer ${
                      selectedStaff.includes(staff.id) ? "bg-primary/10 border-primary" : ""
                    }`}
                    onClick={() => toggleStaffSelection(staff.id)}
                  >
                    <div>
                      <p className="font-medium">{staff.name}</p>
                      <p className="text-sm text-muted-foreground">
                        {staff.role} | {staff.department}
                      </p>
                    </div>
                    <div className="h-5 w-5 rounded-full border flex items-center justify-center">
                      {selectedStaff.includes(staff.id) && <div className="h-3 w-3 rounded-full bg-primary"></div>}
                    </div>
                  </div>
                ))
              ) : (
                <div className="text-center py-4 text-muted-foreground">
                  No staff members available. Please add staff members first.
                </div>
              )}
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setAssignStaffOpen(false)}>
              Cancel
            </Button>
            <Button type="button" onClick={handleAssignStaff}>
              Assign Staff
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* View Report Dialog */}
      <Dialog open={viewReportOpen} onOpenChange={setViewReportOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Shift Report</DialogTitle>
            <DialogDescription>
              {selectedShift && (
                <>
                  {selectedShift.date instanceof Date ? formatDate(selectedShift.date) : ""} | {selectedShift.startTime}{" "}
                  - {selectedShift.endTime} | {selectedShift.department}
                </>
              )}
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <div className="space-y-4">
              <div>
                <h3 className="font-medium">Shift Details</h3>
                <div className="grid grid-cols-2 gap-2 mt-2">
                  <div className="text-sm">Location:</div>
                  <div className="text-sm font-medium">
                    {selectedShift ? getLocationName(selectedShift.location) : ""}
                  </div>
                  <div className="text-sm">Department:</div>
                  <div className="text-sm font-medium">{selectedShift?.department}</div>
                  <div className="text-sm">Staff Required:</div>
                  <div className="text-sm font-medium">{selectedShift?.staffNeeded}</div>
                  <div className="text-sm">Staff Assigned:</div>
                  <div className="text-sm font-medium">{selectedShift?.staffAssigned}</div>
                  <div className="text-sm">Status:</div>
                  <div className="text-sm font-medium">{getStatusBadge(selectedShift?.status || "")}</div>
                </div>
              </div>

<div>
                <h3 className="font-medium">Assigned Staff</h3>
                <div className="mt-2 space-y-2">
                  {selectedShift?.assignedStaff && selectedShift.assignedStaff.length > 0 ? (
                    selectedShift.assignedStaff.map((staffId) => {
                      const staff = staffMembers.find((s) => s.id === staffId)
                      return (
                        <div key={staffId} className="text-sm p-2 border rounded-md">
                          <p className="font-medium">{staff?.name || "Unknown Staff"}</p>
                          <p className="text-muted-foreground">
                            {staff?.role || "Unknown"} | {staff?.department || "Unknown"}
                          </p>
                        </div>
                      )
                    })
                  ) : (
                    <p className="text-sm text-muted-foreground">No staff assigned to this shift.</p>
                  )}
                </div>
              </div>

<div>
                <h3 className="font-medium">Notes</h3>
                <p className="text-sm mt-2">
                  This shift was completed successfully with {selectedShift?.staffAssigned} staff members.
                </p>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button type="button" onClick={() => setViewReportOpen(false)}>
              Close
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reset-data/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { AdminLayout } from "@/components/admin-layout"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertTriangle, Trash2, CheckCircle, Loader2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export default function ResetDataPage() {
  const { toast } = useToast()
  const [isResetting, setIsResetting] = useState(false)
  const [isConfirming, setIsConfirming] = useState(false)
  const [isComplete, setIsComplete] = useState(false)

const handleResetData = () => {
    setIsConfirming(true)
  }

const confirmReset = () => {
    setIsResetting(true)
    setIsConfirming(false)

try {
      // Clear all application data from localStorage
      const keysToReset = [
        "staffMembers",
        "adminStaffMembers",
        "messages",
        "timeSessions",
        "hourlyLogs",
        "shifts",
        "kanbanTasks",
        "leaveRequests",
        "locations",
        "adminSessionLogs",
        "adminLeaveRequests",
      ]

// Remove all data
      keysToReset.forEach((key) => localStorage.removeItem(key))

// Initialize empty arrays for essential data structures
      keysToReset.forEach((key) => localStorage.setItem(key, JSON.stringify([])))

// Keep user credentials for login
      const userCredentials = localStorage.getItem("userCredentials")
      if (!userCredentials) {
        localStorage.setItem(
          "userCredentials",
          JSON.stringify([
            {
              email: "admin@example.com",
              password: "admin123",
              role: "admin",
              userId: "admin1",
              name: "Admin User",
            },
            {
              email: "cfeventurecaps@gmail.com",
              password: "123456",
              role: "staff",
              userId: "staff-1",
              name: "CFE Venture",
            },
          ]),
        )
      }

// Show success message
      toast({
        title: "Data Reset Complete",
        description: "All application data has been cleared successfully.",
      })

setIsComplete(true)
    } catch (error) {
      console.error("Error resetting data:", error)
      toast({
        title: "Error",
        description: "Failed to reset application data. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsResetting(false)
    }
  }

const cancelReset = () => {
    setIsConfirming(false)
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Reset Application Data</h1>
          <p className="text-muted-foreground">Clear all application data and start fresh.</p>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Data Reset Utility</CardTitle>
            <CardDescription>
              Use this utility to clear all application data and start with a clean slate.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {isConfirming ? (
              <Alert variant="destructive">
                <AlertTriangle className="h-4 w-4" />
                <AlertTitle>Warning: This action cannot be undone</AlertTitle>
                <AlertDescription>
                  You are about to delete all application data including staff records, shifts, messages, and logs. This
                  action cannot be undone.
                </AlertDescription>
                <div className="flex justify-end space-x-2 mt-4">
                  <Button variant="outline" onClick={cancelReset}>
                    Cancel
                  </Button>
                  <Button variant="destructive" onClick={confirmReset}>
                    Yes, Reset All Data
                  </Button>
                </div>
              </Alert>
            ) : isResetting ? (
              <div className="flex flex-col items-center justify-center py-8">
                <Loader2 className="h-8 w-8 animate-spin text-primary mb-4" />
                <p>Resetting application data...</p>
              </div>
            ) : isComplete ? (
              <div className="flex flex-col items-center justify-center py-8">
                <CheckCircle className="h-8 w-8 text-green-500 mb-4" />
                <p className="text-center">
                  All application data has been reset successfully. You can now add your own data.
                </p>
                <Button className="mt-4" onClick={() => window.location.reload()}>
                  Refresh Page
                </Button>
              </div>
            ) : (
              <>
                <p>
                  This utility will clear all application data including staff records, shifts, messages, and logs. Use
                  this to start with a clean slate for production use.
                </p>
                <div className="flex justify-end">
                  <Button variant="destructive" onClick={handleResetData}>
                    <Trash2 className="mr-2 h-4 w-4" />
                    Reset All Data
                  </Button>
                </div>
              </>
            )}
          </CardContent>
        </Card>
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescript:file="lib/notification-service.ts" isMerged="true" isEdit="true"
// Notification service for cross-platform notifications

// Types for notifications
export interface Notification {
  id: string
  title: string
  message: string
  type: "shift" | "task" | "announcement" | "alert"
  recipients: string[] // staff IDs
  recipientNames: string[] // staff names for display
  sentAt: Date
  readBy: string[] // staff IDs who have read it
  status: "sent" | "delivered" | "read"
  priority: "low" | "medium" | "high"
}

// Save notification to localStorage
export function saveNotification(notification: Notification): void {
  try {
    // Get existing notifications
    const storedNotifications = localStorage.getItem("notifications")
    let notifications = []

if (storedNotifications) {
      notifications = JSON.parse(storedNotifications)
    }

// Add new notification
    notifications.unshift(notification)

// Save to localStorage
    localStorage.setItem("notifications", JSON.stringify(notifications))

// Also save to staff notifications
    saveStaffNotifications(notification)
  } catch (error) {
    console.error("Error saving notification:", error)
  }
}

// Save notification to staff notifications
function saveStaffNotifications(notification: Notification): void {
  try {
    // Get existing staff notifications
    const storedNotifications = localStorage.getItem("staffNotifications")
    let staffNotifications = []

if (storedNotifications) {
      staffNotifications = JSON.parse(storedNotifications)
    }

// Add notification for each recipient
    notification.recipients.forEach((staffId) => {
      staffNotifications.push({
        id: notification.id,
        staffId,
        title: notification.title,
        message: notification.message,
        type: notification.type,
        sentAt: notification.sentAt,
        isRead: false,
        priority: notification.priority,
      })
    })

// Save to localStorage
    localStorage.setItem("staffNotifications", JSON.stringify(staffNotifications))
  } catch (error) {
    console.error("Error saving staff notifications:", error)
  }
}

// Get notifications for admin
export function getAdminNotifications(): Notification[] {
  try {
    const storedNotifications = localStorage.getItem("notifications")
    if (storedNotifications) {
      return JSON.parse(storedNotifications)
    }
    return []
  } catch (error) {
    console.error("Error getting admin notifications:", error)
    return []
  }
}

// Get notifications for staff
export function getStaffNotifications(staffId: string): any[] {
  try {
    const storedNotifications = localStorage.getItem("staffNotifications")
    if (storedNotifications) {
      const allNotifications = JSON.parse(storedNotifications)
      return allNotifications
        .filter((n: any) => n.staffId === staffId)
        .sort((a: any, b: any) => new Date(b.sentAt).getTime() - new Date(a.sentAt).getTime())
    }
    return []
  } catch (error) {
    console.error("Error getting staff notifications:", error)
    return []
  }
}

// Mark notification as read
export function markNotificationAsRead(notificationId: string, staffId: string): void {
  try {
    // Update staff notifications
    const storedNotifications = localStorage.getItem("staffNotifications")
    if (storedNotifications) {
      const allNotifications = JSON.parse(storedNotifications)

// Mark notification as read
      const updatedNotifications = allNotifications.map((n: any) => {
        if (n.id === notificationId && n.staffId === staffId) {
          return { ...n, isRead: true }
        }
        return n
      })

localStorage.setItem("staffNotifications", JSON.stringify(updatedNotifications))
    }

// Update admin notifications
    const storedAdminNotifications = localStorage.getItem("notifications")
    if (storedAdminNotifications) {
      const adminNotifications = JSON.parse(storedAdminNotifications)

// Find the notification and add this staff member to readBy
      const updatedNotifications = adminNotifications.map((n: any) => {
        if (n.id === notificationId) {
          // Add staff to readBy if not already there
          if (!n.readBy.includes(staffId)) {
            return {
              ...n,
              readBy: [...n.readBy, staffId],
              status: "read",
            }
          }
        }
        return n
      })

localStorage.setItem("notifications", JSON.stringify(updatedNotifications))
    }
  } catch (error) {
    console.error("Error marking notification as read:", error)
  }
}

// Mark all notifications as read for a staff member
export function markAllNotificationsAsRead(staffId: string): void {
  try {
    // Update staff notifications
    const storedNotifications = localStorage.getItem("staffNotifications")
    if (storedNotifications) {
      const allNotifications = JSON.parse(storedNotifications)

// Get IDs of unread notifications
      const unreadNotificationIds = allNotifications
        .filter((n: any) => n.staffId === staffId && !n.isRead)
        .map((n: any) => n.id)

// Mark all notifications for this staff as read
      const updatedNotifications = allNotifications.map((n: any) => {
        if (n.staffId === staffId && !n.isRead) {
          return { ...n, isRead: true }
        }
        return n
      })

localStorage.setItem("staffNotifications", JSON.stringify(updatedNotifications))

// Update admin notifications
      updateAdminNotificationsReadStatus(unreadNotificationIds, staffId)
    }
  } catch (error) {
    console.error("Error marking all notifications as read:", error)
  }
}

// Update read status in admin notifications
function updateAdminNotificationsReadStatus(notificationIds: string[], staffId: string): void {
  try {
    const storedAdminNotifications = localStorage.getItem("notifications")
    if (storedAdminNotifications) {
      const adminNotifications = JSON.parse(storedAdminNotifications)

// Update readBy for each notification
      const updatedNotifications = adminNotifications.map((n: any) => {
        if (notificationIds.includes(n.id)) {
          // Add staff to readBy if not already there
          if (!n.readBy.includes(staffId)) {
            return {
              ...n,
              readBy: [...n.readBy, staffId],
              status: "read",
            }
          }
        }
        return n
      })

localStorage.setItem("notifications", JSON.stringify(updatedNotifications))
    }
  } catch (error) {
    console.error("Error updating admin notifications read status:", error)
  }
}

// Get unread notification count for a staff member
export function getUnreadNotificationCount(staffId: string): number {
  try {
    const notifications = getStaffNotifications(staffId)
    return notifications.filter((n: any) => !n.isRead).length
  } catch (error) {
    console.error("Error getting unread notification count:", error)
    return 0
  }
}

// For iOS devices: Register for Apple Push Notification Service (simulated)
export function registerForAPNS(): boolean {
  // In a real implementation, this would register the device with APNS
  console.log("Registering for Apple Push Notification Service")

// Store registration in localStorage for demo purposes
  localStorage.setItem("apnsRegistered", "true")

return true
}

// Send SMS notification (simulated)
export function sendSMSNotification(phoneNumber: string, message: string): boolean {
  // In a real implementation, this would send an SMS via a service like Twilio
  console.log(`Sending SMS to ${phoneNumber}: ${message}`)

// For demo purposes, store in localStorage
  const smsLog = localStorage.getItem("smsLog") ? JSON.parse(localStorage.getItem("smsLog") || "[]") : []

smsLog.push({
    phoneNumber,
    message,
    sentAt: new Date(),
  })

localStorage.setItem("smsLog", JSON.stringify(smsLog))

return true
}

// Send email notification (simulated)
export function sendEmailNotification(email: string, subject: string, message: string): boolean {
  // In a real implementation, this would send an email via a service like SendGrid
  console.log(`Sending email to ${email}: ${subject}`)

// For demo purposes, store in localStorage
  const emailLog = localStorage.getItem("emailLog") ? JSON.parse(localStorage.getItem("emailLog") || "[]") : []

emailLog.push({
    email,
    subject,
    message,
    sentAt: new Date(),
  })

localStorage.setItem("emailLog", JSON.stringify(emailLog))

return true
}
[V0_FILE]typescriptreact:file="components/staff-layout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { LayoutDashboard, Clock, FileText, MessageSquare, Calendar, LogOut, Menu, X } from "lucide-react"
import { StaffNotifications } from "@/components/staff-notifications"

interface StaffLayoutProps {
  children: React.ReactNode
}

export function StaffLayout({ children }: StaffLayoutProps) {
  const pathname = usePathname()
  const router = useRouter()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [staffName, setStaffName] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [isClient, setIsClient] = useState(false)
  const [isAuthenticated, setIsAuthenticated] = useState(false)

useEffect(() => {
    // Mark that we're on the client side
    setIsClient(true)

// Check if user is logged in as staff
    const checkAuth = () => {
      try {
        const currentUser = sessionStorage.getItem("currentUser")

if (!currentUser) {
          console.log("No user found in session storage")
          // Don't redirect here, just set authenticated state
          setIsAuthenticated(false)
          setIsLoading(false)
          return
        }

const userData = JSON.parse(currentUser)

if (userData.role !== "staff") {
          console.log("User is not staff:", userData.role)
          // Don't redirect here, just set authenticated state
          setIsAuthenticated(false)
          setIsLoading(false)
          return
        }

// User is authenticated as staff
        setStaffName(userData.name || "Staff Member")
        setIsAuthenticated(true)
        setIsLoading(false)
      } catch (error) {
        console.error("Error checking authentication:", error)
        setIsAuthenticated(false)
        setIsLoading(false)
      }
    }

checkAuth()
  }, [])

// Only redirect if not authenticated and not loading
  useEffect(() => {
    if (!isLoading && !isAuthenticated && isClient) {
      console.log("Redirecting to login page")
      router.push("/login")
    }
  }, [isLoading, isAuthenticated, isClient, router])

const handleLogout = () => {
    if (typeof window !== "undefined") {
      sessionStorage.removeItem("currentUser")
      router.push("/login")
    }
  }

// Update the navigation array to include hourly logs
  const navigation = [
    {
      name: "Dashboard",
      href: "/staff/dashboard",
      icon: LayoutDashboard,
      current: pathname === "/staff/dashboard",
    },
    {
      name: "Time Tracking",
      href: "/staff/time-tracking",
      icon: Clock,
      current: pathname === "/staff/time-tracking",
    },
    {
      name: "Activity Logs",
      href: "/staff/activity-logs",
      icon: FileText,
      current: pathname === "/staff/activity-logs",
    },
    {
      name: "Hourly Logs",
      href: "/staff/hourly-logs",
      icon: Clock,
      current: pathname === "/staff/hourly-logs",
    },
    {
      name: "Messages",
      href: "/staff/messages",
      icon: MessageSquare,
      current: pathname === "/staff/messages",
    },
    {
      name: "Schedule",
      href: "/staff/schedule",
      icon: Calendar,
      current: pathname === "/staff/schedule",
    },
    {
      name: "Message Admin",
      href: "/staff/message-admin",
      icon: MessageSquare,
      current: pathname === "/staff/message-admin",
    },
  ]

// If we're server-side rendering, show a minimal loading state
  if (!isClient) {
    return <div className="min-h-screen">{children}</div>
  }

// If we're loading, show a loading state
  if (isLoading) {
    return <div className="min-h-screen flex items-center justify-center">Loading...</div>
  }

// If not authenticated, don't render anything (redirect will happen)
  if (!isAuthenticated) {
    return <div className="min-h-screen flex items-center justify-center">Redirecting to login...</div>
  }

return (
    <div className="min-h-screen flex flex-col md:flex-row">
      {/* Mobile menu button */}
      <div className="md:hidden bg-primary text-primary-foreground p-4 flex justify-between items-center">
        <h1 className="font-bold">Healthcare Staff</h1>
        <div className="flex items-center gap-2">
          <StaffNotifications />
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="text-primary-foreground"
          >
            {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </Button>
        </div>
      </div>

{/* Sidebar for desktop / Mobile menu */}
      <div className={`${mobileMenuOpen ? "block" : "hidden"} md:block bg-card md:w-64 md:min-h-screen border-r`}>
        <div className="p-4 hidden md:block">
          <h2 className="text-xl font-bold">Healthcare Staff</h2>
          {staffName && <p className="text-sm text-muted-foreground mt-1">Welcome, {staffName}</p>}
        </div>
        <nav className="mt-4 px-2 space-y-1">
          {navigation.map((item) => (
            <Link
              key={item.name}
              href={item.href}
              className={`flex items-center px-3 py-2 rounded-md text-sm font-medium ${
                item.current ? "bg-primary text-primary-foreground" : "text-foreground hover:bg-muted"
              }`}
              onClick={() => setMobileMenuOpen(false)}
            >
              <item.icon className="mr-3 h-5 w-5" aria-hidden="true" />
              {item.name}
            </Link>
          ))}
          <button
            onClick={handleLogout}
            className="flex items-center px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted mt-8 w-full text-left"
          >
            <LogOut className="mr-3 h-5 w-5" aria-hidden="true" />
            Logout
          </button>
        </nav>
      </div>

import type React from "react"
import { useState, useEffect } from "react"
import { usePathname, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import {
  LayoutDashboard,
  Users,
  MessageSquare,
  Calendar,
  LogOut,
  Menu,
  X,
  Clock,
  Settings,
  Mail,
  ClipboardList,
  KanbanSquare,
  MapPin,
  Trash2,
  Bell,
} from "lucide-react"

interface AdminLayoutProps {
  children: React.ReactNode
}

export function AdminLayout({ children }: AdminLayoutProps) {
  const router = useRouter()
  const pathname = usePathname()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [adminName, setAdminName] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [isClient, setIsClient] = useState(false)
  const [isAuthenticated, setIsAuthenticated] = useState(false)

useEffect(() => {
    // Mark that we're on the client side
    setIsClient(true)

// Check if user is logged in as admin
    const checkAuth = () => {
      try {
        const currentUser = localStorage.getItem("currentUser")

if (!currentUser) {
          setIsAuthenticated(false)
          setIsLoading(false)
          return
        }

const userData = JSON.parse(currentUser)

if (userData.role !== "admin") {
          setIsAuthenticated(false)
          setIsLoading(false)
          return
        }

// User is authenticated as admin
        setAdminName(userData.name || "Admin User")
        setIsAuthenticated(true)
        setIsLoading(false)
      } catch (error) {
        console.error("Error checking authentication:", error)
        setIsAuthenticated(false)
        setIsLoading(false)
      }
    }

checkAuth()
  }, [])

// Only redirect if not authenticated and not loading
  useEffect(() => {
    if (!isLoading && !isAuthenticated && isClient) {
      router.push("/admin/login")
    }
  }, [isLoading, isAuthenticated, isClient, router])

const handleLogout = () => {
    if (typeof window !== "undefined") {
      localStorage.removeItem("currentUser")
      router.push("/admin/login")
    }
  }

const navigation = [
    {
      name: "Dashboard",
      href: "/admin/dashboard",
      icon: LayoutDashboard,
    },
    {
      name: "Staff",
      href: "/admin/staff",
      icon: Users,
    },
    {
      name: "Session Logs",
      href: "/admin/logs",
      icon: ClipboardList,
    },
    {
      name: "Hourly Logs",
      href: "/admin/hourly-logs",
      icon: Clock,
    },
    {
      name: "Communications",
      href: "/admin/communications",
      icon: MessageSquare,
    },
    {
      name: "Staff Messages",
      href: "/admin/messages",
      icon: Mail,
    },
    {
      name: "Notifications",
      href: "/admin/notifications",
      icon: Bell,
    },
    {
      name: "Locations",
      href: "/admin/locations",
      icon: MapPin,
    },
    {
      name: "Shifts",
      href: "/admin/shifts",
      icon: Calendar,
    },
    {
      name: "Kanban Calendar",
      href: "/admin/kanban-calendar",
      icon: KanbanSquare,
    },
    {
      name: "Leave Requests",
      href: "/admin/leave-requests",
      icon: Calendar,
    },
    {
      name: "Settings",
      href: "/admin/settings",
      icon: Settings,
    },
    {
      name: "Reset Data",
      href: "/admin/reset-data",
      icon: Trash2,
    },
  ]

// If we're server-side rendering, show a minimal loading state
  if (!isClient) {
    return <div className="min-h-screen">{children}</div>
  }

// If we're loading, show a loading state
  if (isLoading) {
    return <div className="min-h-screen flex items-center justify-center">Loading...</div>
  }

return (
    <div className="min-h-screen flex flex-col md:flex-row">
      {/* Mobile menu button */}
      <div className="md:hidden bg-primary text-primary-foreground p-4 flex justify-between items-center">
        <h1 className="font-bold">Healthcare Staff</h1>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          className="text-primary-foreground"
        >
          {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
        </Button>
      </div>

{/* Sidebar for desktop / Mobile menu */}
      <div className={`${mobileMenuOpen ? "block" : "hidden"} md:block bg-card md:w-64 md:min-h-screen border-r`}>
        <div className="p-4 hidden md:block">
          <h2 className="text-xl font-bold">Healthcare Staff</h2>
          {adminName && <p className="text-sm text-muted-foreground mt-1">Welcome, {adminName}</p>}
        </div>
        <nav className="mt-4 px-2 space-y-1">
          {navigation.map((item) => (
            <a
              key={item.name}
              href={item.href}
              className={`flex items-center px-3 py-2 rounded-md text-sm font-medium ${
                typeof window !== "undefined" && window.location.pathname === item.href
                  ? "bg-primary text-primary-foreground"
                  : "text-foreground hover:bg-muted"
              }`}
              onClick={() => setMobileMenuOpen(false)}
            >
              <item.icon className="mr-3 h-5 w-5" aria-hidden="true" />
              {item.name}
            </a>
          ))}
          <button
            onClick={handleLogout}
            className="flex items-center px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted mt-8 w-full text-left"
          >
            <LogOut className="mr-3 h-5 w-5" aria-hidden="true" />
            Logout
          </button>
        </nav>
      </div>

{/* Main content */}
      <div className="flex-1 flex flex-col">
        <main className="flex-1 p-4 md:p-6 bg-background">
          {pathname !== "/admin/dashboard" && (
            <div className="mb-6">
              <Button variant="outline" onClick={() => router.push("/admin/dashboard")} className="flex items-center">
                <LayoutDashboard className="mr-2 h-4 w-4" />
                Go to Dashboard
              </Button>
            </div>
          )}
          {children}
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/firebase-notification-service.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { db } from "./firebase"
import { collection, addDoc, getDocs, query, orderBy, serverTimestamp } from "firebase/firestore"

export interface Notification {
  id: string
  title: string
  message: string
  type: "shift" | "task" | "announcement" | "alert"
  recipients: string[] // staff IDs
  recipientNames: string[] // staff names for display
  sentAt: Date
  readBy: string[] // staff IDs who have read it
  status: "sent" | "delivered" | "read"
  priority: "low" | "medium" | "high"
  notificationMethods: string[]
}

export async function saveNotification(notification: Notification): Promise<string> {
  try {
    const docRef = await addDoc(collection(db, "notifications"), {
      ...notification,
      sentAt: serverTimestamp(),
      readBy: [],
    })
    return docRef.id
  } catch (error) {
    console.error("Error saving notification:", error)
    throw error
  }
}

export async function getAdminNotifications(): Promise<Notification[]> {
  try {
    const q = query(collection(db, "notifications"), orderBy("sentAt", "desc"))
    const querySnapshot = await getDocs(q)
    const notifications: Notification[] = []
    querySnapshot.forEach((doc) => {
      notifications.push({ id: doc.id, ...doc.data() } as Notification)
    })
    return notifications
  } catch (error) {
    console.error("Error getting admin notifications:", error)
    throw error
  }
}
[V0_FILE]typescript:file="functions/index.ts" isMerged="true" isEdit="true"
import * as functions from "firebase-functions"
import * as admin from "firebase-admin"
import * as nodemailer from "nodemailer"
import * as twilio from "twilio"

// Initialize Firebase Admin
admin.initializeApp()

// Initialize Twilio for SMS
const twilioClient = twilio(functions.config().twilio.account_sid, functions.config().twilio.auth_token)
const twilioPhoneNumber = functions.config().twilio.phone_number

// Initialize Nodemailer for Email
const mailTransport = nodemailer.createTransport({
  service: "gmail",
  auth: {
    user: functions.config().gmail.email,
    pass: functions.config().gmail.password,
  },
})
const mailSender = functions.config().gmail.email

// Cloud Function to send SMS
exports.sendSMS = functions.https.onCall(async (data, context) => {
  // Check if user is authenticated
  if (!context.auth) {
    throw new functions.https.HttpsError("unauthenticated", "The function must be called while authenticated.")
  }

// Check if user has admin role
  const userSnapshot = await admin.firestore().collection("users").doc(context.auth.uid).get()

if (!userSnapshot.exists || userSnapshot.data()?.role !== "admin") {
    throw new functions.https.HttpsError("permission-denied", "Only admins can send SMS notifications.")
  }

// Validate data
  if (!data.to || !data.message) {
    throw new functions.https.HttpsError(
      "invalid-argument",
      'The function must be called with "to" and "message" arguments.',
    )
  }

try {
    // Send SMS via Twilio
    const message = await twilioClient.messages.create({
      body: data.message,
      from: twilioPhoneNumber,
      to: data.to,
    })

// Log success
    console.log(`SMS sent to ${data.to}: ${message.sid}`)

return { success: true, messageId: message.sid }
  } catch (error) {
    console.error("Error sending SMS:", error)
    throw new functions.https.HttpsError("internal", "Error sending SMS.", error)
  }
})

// Cloud Function to send Email
exports.sendEmail = functions.https.onCall(async (data, context) => {
  // Check if user is authenticated
  if (!context.auth) {
    throw new functions.https.HttpsError("unauthenticated", "The function must be called while authenticated.")
  }

// Check if user has admin role
  const userSnapshot = await admin.firestore().collection("users").doc(context.auth.uid).get()

if (!userSnapshot.exists || userSnapshot.data()?.role !== "admin") {
    throw new functions.https.HttpsError("permission-denied", "Only admins can send email notifications.")
  }

// Validate data
  if (!data.to || !data.subject || !data.html) {
    throw new functions.https.HttpsError(
      "invalid-argument",
      'The function must be called with "to", "subject", and "html" arguments.',
    )
  }

const mailOptions = {
    from: `Healthcare Staff App <${mailSender}>`,
    to: data.to,
    subject: data.subject,
    html: data.html,
  }

try {
    // Send email via Nodemailer
    await mailTransport.sendMail(mailOptions)

// Log success
    console.log(`Email sent to ${data.to}`)

return { success: true }
  } catch (error) {
    console.error("Error sending email:", error)
    throw new functions.https.HttpsError("internal", "Error sending email.", error)
  }
})

// Trigger function to send notifications when a new shift is assigned
exports.onShiftAssigned = functions.firestore.document("shifts/{shiftId}").onUpdate(async (change, context) => {
  const beforeData = change.before.data()
  const afterData = change.after.data()

// Check if staff was assigned to this shift
  const newlyAssignedStaff = afterData.assignedStaff.filter(
    (staffId: string) => !beforeData.assignedStaff.includes(staffId),
  )

if (newlyAssignedStaff.length === 0) {
    return null // No new staff assigned, exit function
  }

try {
    // Create notification
    const notification = {
      title: "New Shift Assignment",
      message: `You have been assigned to a shift on ${new Date(afterData.date).toLocaleDateString()} from ${afterData.startTime} to ${afterData.endTime} at ${afterData.location}.`,
      type: "shift",
      recipients: newlyAssignedStaff,
      priority: "high",
      sentAt: admin.firestore.FieldValue.serverTimestamp(),
      readBy: [],
      status: "sent",
    }

// Save notification to Firestore
    const notificationRef = await admin.firestore().collection("notifications").add(notification)

// Get staff details for each newly assigned staff
    for (const staffId of newlyAssignedStaff) {
      const staffDoc = await admin.firestore().collection("users").doc(staffId).get()

if (staffDoc.exists) {
        const staffData = staffDoc.data()

// Send SMS if phone number exists
        if (staffData?.phone) {
          await twilioClient.messages.create({
            body: notification.message,
            from: twilioPhoneNumber,
            to: staffData.phone,
          })
        }

// Send email if email exists
        if (staffData?.email) {
          const mailOptions = {
            from: `Healthcare Staff App <${mailSender}>`,
            to: staffData.email,
            subject: notification.title,
            html: `
                <h2>${notification.title}</h2>
                <p>${notification.message}</p>
                <p>Priority: ${notification.priority}</p>
                <p>Type: ${notification.type}</p>
              `,
          }

await mailTransport.sendMail(mailOptions)
        }
      }
    }

return notificationRef.id
  } catch (error) {
    console.error("Error sending shift assignment notifications:", error)
    return null
  }
})
[V0_FILE]typescriptreact:file="app/admin/notifications/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { AdminLayout } from "@/components/admin-layout"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Bell, Users, Calendar, CheckCircle, Loader2, Send, Smartphone, Mail } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { saveNotification, getAdminNotifications, type Notification } from "@/lib/firebase-notification-service"

export default function NotificationsPage() {
  const { toast } = useToast()
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [staffMembers, setStaffMembers] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isSending, setIsSending] = useState(false)
  const [selectedRecipients, setSelectedRecipients] = useState<string[]>([])
  const [notificationMethods, setNotificationMethods] = useState<string[]>(["app"])
  const [formData, setFormData] = useState({
    title: "",
    message: "",
    type: "announcement",
    priority: "medium",
  })

// Load notifications and staff members
  useEffect(() => {
    const loadData = async () => {
      try {
        setIsLoading(true)

// Load staff members from Firestore
        // In a real implementation, this would fetch from Firestore
        const storedStaff = localStorage.getItem("staffMembers")
        if (storedStaff) {
          const parsedStaff = JSON.parse(storedStaff)
          setStaffMembers(parsedStaff)
        }

// Load notifications from Firestore
        const adminNotifications = await getAdminNotifications()
        setNotifications(adminNotifications)
      } catch (error) {
        console.error("Error loading data:", error)
        toast({
          title: "Error",
          description: "Failed to load notifications data.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

loadData()
  }, [toast])

// Handle form input changes
  const handleChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

// Toggle recipient selection
  const toggleRecipient = (staffId: string) => {
    if (selectedRecipients.includes(staffId)) {
      setSelectedRecipients(selectedRecipients.filter((id) => id !== staffId))
    } else {
      setSelectedRecipients([...selectedRecipients, staffId])
    }
  }

// Select all recipients
  const selectAllRecipients = () => {
    setSelectedRecipients(staffMembers.map((staff) => staff.id))
  }

// Clear all recipients
  const clearAllRecipients = () => {
    setSelectedRecipients([])
  }

// Toggle notification method
  const toggleNotificationMethod = (method: string) => {
    if (notificationMethods.includes(method)) {
      setNotificationMethods(notificationMethods.filter((m) => m !== method))
    } else {
      setNotificationMethods([...notificationMethods, method])
    }
  }

// Send notification
  const handleSendNotification = async () => {
    if (!formData.title || !formData.message || selectedRecipients.length === 0) {
      toast({
        title: "Error",
        description: "Please fill in all fields and select at least one recipient.",
        variant: "destructive",
      })
      return
    }

if (notificationMethods.length === 0) {
      toast({
        title: "Error",
        description: "Please select at least one notification method.",
        variant: "destructive",
      })
      return
    }

setIsSending(true)

try {
      // Get recipient names for display
      const recipientNames = selectedRecipients.map((id) => {
        const staff = staffMembers.find((s) => s.id === id)
        return staff ? staff.name : "Unknown Staff"
      })

// Create notification object
      const newNotification: Notification = {
        title: formData.title,
        message: formData.message,
        type: formData.type as any,
        recipients: selectedRecipients,
        recipientNames,
        priority: formData.priority as any,
        notificationMethods,
      }

// Save notification to Firestore
      await saveNotification(newNotification)

// Update local state with the new notification
      const updatedNotifications = await getAdminNotifications()
      setNotifications(updatedNotifications)

// Reset form
      setFormData({
        title: "",
        message: "",
        type: "announcement",
        priority: "medium",
      })
      setSelectedRecipients([])
      setNotificationMethods(["app"])
      setIsDialogOpen(false)

// Show success message
      toast({
        title: "Notification Sent",
        description: `Notification sent to ${recipientNames.length} staff members.`,
      })
    } catch (error) {
      console.error("Error sending notification:", error)
      toast({
        title: "Error",
        description: "Failed to send notification. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSending(false)
    }
  }

// Get badge color based on priority
  const getPriorityBadge = (priority: string) => {
    switch (priority) {
      case "high":
        return <Badge variant="destructive">High</Badge>
      case "medium":
        return <Badge>Medium</Badge>
      case "low":
        return <Badge variant="outline">Low</Badge>
      default:
        return <Badge variant="outline">{priority}</Badge>
    }
  }

// Get badge color based on type
  const getTypeBadge = (type: string) => {
    switch (type) {
      case "shift":
        return <Badge variant="secondary">Shift</Badge>
      case "task":
        return <Badge variant="default">Task</Badge>
      case "announcement":
        return <Badge variant="outline">Announcement</Badge>
      case "alert":
        return <Badge variant="destructive">Alert</Badge>
      default:
        return <Badge variant="outline">{type}</Badge>
    }
  }

// Format date for display
  const formatDate = (date: Date) => {
    return new Date(date).toLocaleString()
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Staff Notifications</h1>
            <p className="text-muted-foreground">Send notifications to staff about shifts, tasks, and announcements.</p>
          </div>
          <Button onClick={() => setIsDialogOpen(true)}>
            <Bell className="mr-2 h-4 w-4" />
            Send Notification
          </Button>
        </div>

<Tabs defaultValue="all">
          <TabsList>
            <TabsTrigger value="all">All Notifications</TabsTrigger>
            <TabsTrigger value="shifts">Shifts</TabsTrigger>
            <TabsTrigger value="tasks">Tasks</TabsTrigger>
            <TabsTrigger value="announcements">Announcements</TabsTrigger>
          </TabsList>

<TabsContent value="all">
            <Card>
              <CardHeader>
                <CardTitle>All Notifications</CardTitle>
              </CardHeader>
              <CardContent>
                {isLoading ? (
                  <div className="flex justify-center items-center py-8">
                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
                  </div>
                ) : notifications.length > 0 ? (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Title</TableHead>
                        <TableHead>Type</TableHead>
                        <TableHead>Recipients</TableHead>
                        <TableHead>Sent At</TableHead>
                        <TableHead>Priority</TableHead>
                        <TableHead>Status</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {notifications.map((notification) => (
                        <TableRow key={notification.id}>
                          <TableCell className="font-medium">{notification.title}</TableCell>
                          <TableCell>{getTypeBadge(notification.type)}</TableCell>
                          <TableCell>{notification.recipientNames?.length || 0} staff members</TableCell>
                          <TableCell>{notification.sentAt ? formatDate(notification.sentAt) : "Pending"}</TableCell>
                          <TableCell>{getPriorityBadge(notification.priority)}</TableCell>
                          <TableCell>
                            <Badge variant={notification.status === "read" ? "default" : "outline"}>
                              {notification.status === "read"
                                ? `Read (${notification.readBy?.length || 0}/${notification.recipients.length})`
                                : notification.status || "Sent"}
                            </Badge>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                ) : (
                  <div className="text-center py-8">
                    <Bell className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
                    <p className="text-muted-foreground">No notifications sent yet.</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="shifts">
            <Card>
              <CardHeader>
                <CardTitle>Shift Notifications</CardTitle>
              </CardHeader>
              <CardContent>
                {isLoading ? (
                  <div className="flex justify-center items-center py-8">
                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
                  </div>
                ) : notifications.filter((n) => n.type === "shift").length > 0 ? (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Title</TableHead>
                        <TableHead>Recipients</TableHead>
                        <TableHead>Sent At</TableHead>
                        <TableHead>Priority</TableHead>
                        <TableHead>Status</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {notifications
                        .filter((n) => n.type === "shift")
                        .map((notification) => (
                          <TableRow key={notification.id}>
                            <TableCell className="font-medium">{notification.title}</TableCell>
                            <TableCell>{notification.recipientNames?.length || 0} staff members</TableCell>
                            <TableCell>{notification.sentAt ? formatDate(notification.sentAt) : "Pending"}</TableCell>
                            <TableCell>{getPriorityBadge(notification.priority)}</TableCell>
                            <TableCell>
                              <Badge variant={notification.status === "read" ? "default" : "outline"}>
                                {notification.status === "read"
                                  ? `Read (${notification.readBy?.length || 0}/${notification.recipients.length})`
                                  : notification.status || "Sent"}
                              </Badge>
                            </TableCell>
                          </TableRow>
                        ))}
                    </TableBody>
                  </Table>
                ) : (
                  <div className="text-center py-8">
                    <Calendar className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
                    <p className="text-muted-foreground">No shift notifications sent yet.</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="tasks">
            <Card>
              <CardHeader>
                <CardTitle>Task Notifications</CardTitle>
              </CardHeader>
              <CardContent>
                {isLoading ? (
                  <div className="flex justify-center items-center py-8">
                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
                  </div>
                ) : notifications.filter((n) => n.type === "task").length > 0 ? (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Title</TableHead>
                        <TableHead>Recipients</TableHead>
                        <TableHead>Sent At</TableHead>
                        <TableHead>Priority</TableHead>
                        <TableHead>Status</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {notifications
                        .filter((n) => n.type === "task")
                        .map((notification) => (
                          <TableRow key={notification.id}>
                            <TableCell className="font-medium">{notification.title}</TableCell>
                            <TableCell>{notification.recipientNames?.length || 0} staff members</TableCell>
                            <TableCell>{notification.sentAt ? formatDate(notification.sentAt) : "Pending"}</TableCell>
                            <TableCell>{getPriorityBadge(notification.priority)}</TableCell>
                            <TableCell>
                              <Badge variant={notification.status === "read" ? "default" : "outline"}>
                                {notification.status === "read"
                                  ? `Read (${notification.readBy?.length || 0}/${notification.recipients.length})`
                                  : notification.status || "Sent"}
                              </Badge>
                            </TableCell>
                          </TableRow>
                        ))}
                    </TableBody>
                  </Table>
                ) : (
                  <div className="text-center py-8">
                    <CheckCircle className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
                    <p className="text-muted-foreground">No task notifications sent yet.</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="announcements">
            <Card>
              <CardHeader>
                <CardTitle>Announcements</CardTitle>
              </CardHeader>
              <CardContent>
                {isLoading ? (
                  <div className="flex justify-center items-center py-8">
                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
                  </div>
                ) : notifications.filter((n) => n.type === "announcement").length > 0 ? (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Title</TableHead>
                        <TableHead>Recipients</TableHead>
                        <TableHead>Sent At</TableHead>
                        <TableHead>Priority</TableHead>
                        <TableHead>Status</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {notifications
                        .filter((n) => n.type === "announcement")
                        .map((notification) => (
                          <TableRow key={notification.id}>
                            <TableCell className="font-medium">{notification.title}</TableCell>
                            <TableCell>{notification.recipientNames?.length || 0} staff members</TableCell>
                            <TableCell>{notification.sentAt ? formatDate(notification.sentAt) : "Pending"}</TableCell>
                            <TableCell>{getPriorityBadge(notification.priority)}</TableCell>
                            <TableCell>
                              <Badge variant={notification.status === "read" ? "default" : "outline"}>
                                {notification.status === "read"
                                  ? `Read (${notification.readBy?.length || 0}/${notification.recipients.length})`
                                  : notification.status || "Sent"}
                              </Badge>
                            </TableCell>
                          </TableRow>
                        ))}
                    </TableBody>
                  </Table>
                ) : (
                  <div className="text-center py-8">
                    <Bell className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
                    <p className="text-muted-foreground">No announcements sent yet.</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

{/* Send Notification Dialog */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Send Notification</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="title">Notification Title</Label>
              <Input
                id="title"
                value={formData.title}
                onChange={(e) => handleChange("title", e.target.value)}
                placeholder="Enter notification title"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="message">Message</Label>
              <Textarea
                id="message"
                value={formData.message}
                onChange={(e) => handleChange("message", e.target.value)}
                placeholder="Enter notification message"
                rows={4}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="type">Notification Type</Label>
                <Select value={formData.type} onValueChange={(value) => handleChange("type", value)}>
                  <SelectTrigger id="type">
                    <SelectValue placeholder="Select type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="shift">Shift</SelectItem>
                    <SelectItem value="task">Task</SelectItem>
                    <SelectItem value="announcement">Announcement</SelectItem>
                    <SelectItem value="alert">Alert</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="priority">Priority</Label>
                <Select value={formData.priority} onValueChange={(value) => handleChange("priority", value)}>
                  <SelectTrigger id="priority">
                    <SelectValue placeholder="Select priority" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="low">Low</SelectItem>
                    <SelectItem value="medium">Medium</SelectItem>
                    <SelectItem value="high">High</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label>Notification Methods</Label>
              <div className="flex flex-wrap gap-2 mt-1">
                <Badge
                  variant={notificationMethods.includes("app") ? "default" : "outline"}
                  className="cursor-pointer"
                  onClick={() => toggleNotificationMethod("app")}
                >
                  <Bell className="h-3 w-3 mr-1" />
                  In-App
                </Badge>
                <Badge
                  variant={notificationMethods.includes("sms") ? "default" : "outline"}
                  className="cursor-pointer"
                  onClick={() => toggleNotificationMethod("sms")}
                >
                  <Smartphone className="h-3 w-3 mr-1" />
                  SMS
                </Badge>
                <Badge
                  variant={notificationMethods.includes("email") ? "default" : "outline"}
                  className="cursor-pointer"
                  onClick={() => toggleNotificationMethod("email")}
                >
                  <Mail className="h-3 w-3 mr-1" />
                  Email
                </Badge>
              </div>
              <p className="text-xs text-muted-foreground mt-1">
                For iOS devices, SMS and Email notifications are recommended since push notifications are limited in
                Chrome on iOS.
              </p>
            </div>

<div className="space-y-2">
              <div className="flex justify-between items-center">
                <Label>Recipients</Label>
                <div className="space-x-2">
                  <Button variant="outline" size="sm" onClick={selectAllRecipients}>
                    Select All
                  </Button>
                  <Button variant="outline" size="sm" onClick={clearAllRecipients}>
                    Clear All
                  </Button>
                </div>
              </div>
              <div className="border rounded-md p-2 max-h-[200px] overflow-y-auto">
                {staffMembers.length > 0 ? (
                  <div className="space-y-2">
                    {staffMembers.map((staff) => (
                      <div
                        key={staff.id}
                        className={`flex items-center justify-between p-2 rounded-md cursor-pointer ${
                          selectedRecipients.includes(staff.id) ? "bg-primary/10 border-primary" : "border"
                        }`}
                        onClick={() => toggleRecipient(staff.id)}
                      >
                        <div>
                          <p className="font-medium">{staff.name}</p>
                          <p className="text-sm text-muted-foreground">
                            {staff.role} - {staff.department}
                          </p>
                          {staff.phone && <p className="text-xs text-muted-foreground">Phone: {staff.phone}</p>}
                        </div>
                        <div className="h-5 w-5 rounded-full border flex items-center justify-center">
                          {selectedRecipients.includes(staff.id) && (
                            <div className="h-3 w-3 rounded-full bg-primary"></div>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-4">
                    <Users className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
                    <p className="text-muted-foreground">No staff members available.</p>
                  </div>
                )}
              </div>
              <p className="text-sm text-muted-foreground">
                {selectedRecipients.length} of {staffMembers.length} staff members selected
              </p>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleSendNotification} disabled={isSending}>
              {isSending ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Sending...
                </>
              ) : (
                <>
                  <Send className="mr-2 h-4 w-4" />
                  Send Notification
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </AdminLayout>
  )
}
[V0_FILE]markdown:file="FIREBASE_SETUP.md" isMerged="true" isEdit="true"
# Setting Up Firebase for SMS and Email Notifications

This guide explains how to set up Firebase to handle SMS and email notifications for the Healthcare Staff App.

## Prerequisites

1. A Firebase project
2. A Twilio account for SMS
3. A Gmail account or other SMTP provider for emails

## Step 1: Set Up Firebase Project

1. Go to the [Firebase Console](https://console.firebase.google.com/)
2. Create a new project or select an existing one
3. Enable Firestore Database
4. Enable Firebase Authentication
5. Enable Firebase Cloud Functions

## Step 2: Install Firebase CLI

\`\`\`bash
npm install -g firebase-tools
firebase login
firebase init
[V0_FILE]typescriptreact:file="app/admin/staff/add/page.tsx" isEdit="true" isQuickEdit="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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"

export default function AddStaffPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    confirmPassword: "",
    phone: "",
  })

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

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

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Form submitted with data:", formData)

// Validate form
    if (!formData.firstName || !formData.lastName || !formData.email) {
      toast({
        title: "Error",
        description: "Please fill in all required fields",
        variant: "destructive",
      })
      return
    }

// Validate password
    if (!formData.password) {
      toast({
        title: "Error",
        description: "Password is required",
        variant: "destructive",
      })
      return
    }

if (formData.password.length < 6) {
      toast({
        title: "Error",
        description: "Password must be at least 6 characters",
        variant: "destructive",
      })
      return
    }

if (formData.password !== formData.confirmPassword) {
      toast({
        title: "Error",
        description: "Passwords do not match",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      // Create a staff object with a unique ID
      const staffId = `staff_${Date.now()}`
      const newStaff = {
        id: staffId,
        firstName: formData.firstName,
        lastName: formData.lastName,
        name: `${formData.firstName} ${formData.lastName}`,
        email: formData.email,
        role: "Staff", // Default role
        department: "General", // Default department
        phone: formData.phone || "",
        status: "active",
        createdAt: new Date().toISOString(),
      }
      console.log("Created new staff object:", newStaff)

// Get existing staff members from localStorage
      let staffMembers = []
      try {
        const storedStaff = localStorage.getItem("staffMembers")
        staffMembers = storedStaff ? JSON.parse(storedStaff) : []
        console.log("Existing staff members:", staffMembers)
      } catch (error) {
        console.error("Error parsing staff members:", error)
        staffMembers = []
      }

// Check if email already exists in localStorage
      const emailExists = staffMembers.some((staff: any) => staff.email === formData.email)
      if (emailExists) {
        toast({
          title: "Error",
          description: "A staff member with this email already exists",
          variant: "destructive",
        })
        setIsSubmitting(false)
        return
      }

// Add new staff member to localStorage
      staffMembers.push(newStaff)
      localStorage.setItem("staffMembers", JSON.stringify(staffMembers))
      console.log("Updated staff members in localStorage:", staffMembers)

// Save login credentials to localStorage
      let credentials = []
      try {
        const storedCredentials = localStorage.getItem("userCredentials")
        credentials = storedCredentials ? JSON.parse(storedCredentials) : []
        console.log("Existing credentials:", credentials)
      } catch (error) {
        console.error("Error parsing user credentials:", error)
        credentials = []
      }

const newCredential = {
        email: formData.email,
        password: formData.password,
        role: "staff",
        userId: staffId,
        name: newStaff.name,
      }
      console.log("Created new credential:", newCredential)

credentials.push(newCredential)
      localStorage.setItem("userCredentials", JSON.stringify(credentials))
      console.log("Updated credentials in localStorage:", credentials)

// Verify data was saved correctly
      const verifyStaff = localStorage.getItem("staffMembers")
      const verifyCredentials = localStorage.getItem("userCredentials")
      console.log("Verification - Staff:", verifyStaff)
      console.log("Verification - Credentials:", verifyCredentials)

toast({
        title: "Success",
        description: "Staff member added successfully",
      })

// Reset form
      setFormData({
        firstName: "",
        lastName: "",
        email: "",
        password: "",
        confirmPassword: "",
        phone: "",
      })

// Redirect to staff list after a short delay
      setTimeout(() => {
        router.push("/admin/staff")
      }, 1000)
    } catch (error: any) {
      console.error("Error adding staff:", error)
      toast({
        title: "Error",
        description: error.message || "Failed to add staff member",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="container mx-auto py-6">
      <Card>
        <CardHeader>
          <CardTitle>Add New Staff Member</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="firstName">First Name *</Label>
                <Input id="firstName" name="firstName" value={formData.firstName} onChange={handleChange} required />
              </div>

<div className="space-y-2">
              <Label htmlFor="email">Email Address *</Label>
              <Input id="email" name="email" type="email" value={formData.email} onChange={handleChange} required />
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="password">Password *</Label>
                <Input
                  id="password"
                  name="password"
                  type="password"
                  value={formData.password}
                  onChange={handleChange}
                  required
                  minLength={6}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="confirmPassword">Confirm Password *</Label>
                <Input
                  id="confirmPassword"
                  name="confirmPassword"
                  type="password"
                  value={formData.confirmPassword}
                  onChange={handleChange}
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="phone">Phone Number</Label>
              <Input id="phone" name="phone" type="tel" value={formData.phone} onChange={handleChange} />
            </div>

<div className="flex justify-end space-x-2">
              <Button type="button" variant="outline" onClick={() => router.push("/admin/staff")}>
                Cancel
              </Button>
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting ? "Adding..." : "Add Staff Member"}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

export default function AdminDashboardPage() {
  const router = useRouter()
  const [currentUser, setCurrentUser] = useState<any>(null)

// Get current user from localStorage only on the client side
  useEffect(() => {
    // Only access localStorage in the browser
    const userStr = localStorage.getItem("currentUser")
    if (userStr) {
      setCurrentUser(JSON.parse(userStr))
    }
  }, [])

// Update the mock data for dashboard stats to match actual staff count
  const dashboardData = {
    stats: {
      staffCount: 0, // This will be updated dynamically
      activeSessionsCount: 5,
      unreadMessagesCount: 3,
      understaffedShiftsCount: 2,
    },
    recentMessages: [
      {
        id: "m1",
        staffName: "Sarah Johnson",
        subject: "Question about schedule",
        createdAt: new Date(2025, 3, 27, 10, 15),
        status: "new",
      },
      {
        id: "m2",
        staffName: "Michael Chen",
        subject: "Equipment issue",
        createdAt: new Date(2025, 3, 26, 15, 30),
        status: "read",
      },
    ],
    upcomingShifts: [
      {
        id: "s1",
        date: new Date(2025, 3, 28),
        startTime: "08:00",
        endTime: "16:00",
        department: "Emergency",
        staffAssigned: 3,
        staffNeeded: 5,
        status: "understaffed",
      },
      {
        id: "s2",
        date: new Date(2025, 3, 29),
        startTime: "09:00",
        endTime: "17:00",
        department: "ICU",
        staffAssigned: 4,
        staffNeeded: 4,
        status: "filled",
      },
    ],
  }

// Add code to dynamically count staff members
  useEffect(() => {
    // Get staff count from localStorage
    const storedStaff = localStorage.getItem("staffMembers")
    if (storedStaff) {
      try {
        const staffMembers = JSON.parse(storedStaff)
        dashboardData.stats.staffCount = staffMembers.length
      } catch (error) {
        console.error("Error parsing staff data:", error)
      }
    }
  }, [])

// Format date for display
  const formatDate = (date: Date) => {
    return date.toLocaleDateString("en-US", {
      weekday: "long",
      month: "long",
      day: "numeric",
    })
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Admin Dashboard</h1>
          <p className="text-muted-foreground">Welcome back, {currentUser?.name || "Admin"}</p>
        </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Staff</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{dashboardData.stats.staffCount}</div>
              <p className="text-xs text-muted-foreground">Active staff members</p>
              <Button variant="link" className="px-0 mt-2" onClick={() => (window.location.href = "/admin/staff")}>
                Manage Staff
              </Button>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Active Sessions</CardTitle>
              <Clock className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{dashboardData.stats.activeSessionsCount}</div>
              <p className="text-xs text-muted-foreground">Staff currently on duty</p>
              <Button variant="link" className="px-0 mt-2" onClick={() => (window.location.href = "/admin/logs")}>
                View Logs
              </Button>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Unread Messages</CardTitle>
              <MessageSquare className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{dashboardData.stats.unreadMessagesCount}</div>
              <p className="text-xs text-muted-foreground">Messages requiring attention</p>
              <Button variant="link" className="px-0 mt-2" onClick={() => (window.location.href = "/admin/messages")}>
                View Messages
              </Button>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Understaffed Shifts</CardTitle>
              <AlertTriangle className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{dashboardData.stats.understaffedShiftsCount}</div>
              <p className="text-xs text-muted-foreground">Shifts needing more staff</p>
              <Button variant="link" className="px-0 mt-2" onClick={() => (window.location.href = "/admin/shifts")}>
                Manage Shifts
              </Button>
            </CardContent>
          </Card>
        </div>

<Tabs defaultValue="shifts">
          <TabsList>
            <TabsTrigger value="shifts">Upcoming Shifts</TabsTrigger>
            <TabsTrigger value="messages">Recent Messages</TabsTrigger>
          </TabsList>
          <TabsContent value="shifts" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Upcoming Shifts</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {dashboardData.upcomingShifts.map((shift) => (
                    <div key={shift.id} className="flex justify-between items-center p-4 border rounded-lg">
                      <div>
                        <p className="font-medium">{formatDate(shift.date)}</p>
                        <p className="text-sm text-muted-foreground">
                          {shift.startTime} - {shift.endTime} | {shift.department}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          {shift.staffAssigned}/{shift.staffNeeded} Staff Assigned
                        </p>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge
                          variant={
                            shift.status === "filled"
                              ? "default"
                              : shift.status === "understaffed"
                                ? "destructive"
                                : "outline"
                          }
                        >
                          {shift.status}
                        </Badge>
                        <Button variant="outline" size="sm" onClick={() => router.push("/admin/shifts")}>
                          Manage
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="messages" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Recent Messages</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {dashboardData.recentMessages.map((message) => (
                    <div key={message.id} className="flex justify-between items-center p-4 border rounded-lg">
                      <div>
                        <p className="font-medium">{message.subject}</p>
                        <p className="text-sm text-muted-foreground">
                          From: {message.staffName} | {message.createdAt.toLocaleString()}
                        </p>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge
                          variant={
                            message.status === "replied"
                              ? "default"
                              : message.status === "read"
                                ? "secondary"
                                : "outline"
                          }
                        >
                          {message.status === "replied" ? "Replied" : message.status === "read" ? "Read" : "New"}
                        </Badge>
                        <Button variant="outline" size="sm" onClick={() => router.push("/admin/messages")}>
                          View
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/communications/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Label } from "@/components/ui/label"

import { useState } from "react"
import { AdminLayout } from "@/components/admin-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Search, Send, MessageSquare, Bell } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface Communication {
  id: string
  type: "message" | "announcement"
  sender: string
  recipients: string[]
  subject?: string
  content: string
  timestamp: Date
  read: boolean
}

export default function CommunicationsPage() {
  const { toast } = useToast()
  const [searchQuery, setSearchQuery] = useState("")
  const [newMessageOpen, setNewMessageOpen] = useState(false)
  const [newAnnouncementOpen, setNewAnnouncementOpen] = useState(false)
  const [selectedRecipients, setSelectedRecipients] = useState<string[]>([])
  const [messageContent, setMessageContent] = useState("")
  const [messageSubject, setMessageSubject] = useState("")

// Mock data for communications
  const communications: Communication[] = []

// Filter communications based on search query
  const filteredCommunications = communications.filter(
    (comm) =>
      comm.content.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (comm.subject && comm.subject.toLowerCase().includes(searchQuery.toLowerCase())) ||
      comm.recipients.some((r) => r.toLowerCase().includes(searchQuery.toLowerCase())),
  )

// Mock data for staff members (for recipient selection)
  const staffMembers = [
    { id: "1", name: "Sarah Johnson", department: "General Care" },
    { id: "2", name: "Michael Chen", department: "Pediatrics" },
    { id: "3", name: "Emily Rodriguez", department: "Geriatrics" },
    { id: "4", name: "David Kim", department: "Emergency" },
    { id: "5", name: "Lisa Patel", department: "ICU" },
  ]

// Mock data for departments (for recipient selection)
  const departments = [
    { id: "1", name: "General Care" },
    { id: "2", name: "Pediatrics" },
    { id: "3", name: "Geriatrics" },
    { id: "4", name: "Emergency" },
    { id: "5", name: "ICU" },
    { id: "6", name: "Cardiology" },
  ]

const handleSendMessage = () => {
    if (!messageContent.trim() || selectedRecipients.length === 0) {
      toast({
        title: "Error",
        description: "Please enter a message and select at least one recipient.",
        variant: "destructive",
      })
      return
    }

toast({
      title: "Message Sent",
      description: `Your message has been sent to ${selectedRecipients.length} recipient(s).`,
    })

setNewMessageOpen(false)
    setMessageContent("")
    setSelectedRecipients([])
  }

const handleSendAnnouncement = () => {
    if (!messageContent.trim() || !messageSubject.trim() || selectedRecipients.length === 0) {
      toast({
        title: "Error",
        description: "Please enter a subject, message, and select at least one recipient.",
        variant: "destructive",
      })
      return
    }

toast({
      title: "Announcement Sent",
      description: `Your announcement has been sent to ${selectedRecipients.length} recipient(s).`,
    })

setNewAnnouncementOpen(false)
    setMessageContent("")
    setMessageSubject("")
    setSelectedRecipients([])
  }

const formatTimestamp = (date: Date) => {
    const now = new Date()
    const diffDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24))

if (diffDays === 0) {
      return date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true })
    } else if (diffDays === 1) {
      return "Yesterday"
    } else if (diffDays < 7) {
      return date.toLocaleDateString("en-US", { weekday: "long" })
    } else {
      return date.toLocaleDateString("en-US", { month: "short", day: "numeric" })
    }
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Communications</h1>
            <p className="text-muted-foreground">Manage messages and announcements for staff members.</p>
          </div>
          <div className="flex flex-col sm:flex-row gap-2">
            <Button onClick={() => setNewMessageOpen(true)}>
              <MessageSquare className="mr-2 h-4 w-4" />
              New Message
            </Button>
            <Button variant="outline" onClick={() => setNewAnnouncementOpen(true)}>
              <Bell className="mr-2 h-4 w-4" />
              New Announcement
            </Button>
          </div>
        </div>

<div className="relative">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search communications..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

<Tabs defaultValue="all" className="space-y-4">
          <TabsList>
            <TabsTrigger value="all">All</TabsTrigger>
            <TabsTrigger value="messages">Messages</TabsTrigger>
            <TabsTrigger value="announcements">Announcements</TabsTrigger>
          </TabsList>

<TabsContent value="all">
            <Card>
              <CardHeader>
                <CardTitle>All Communications</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {filteredCommunications.length > 0 ? (
                    filteredCommunications
                      .sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())
                      .map((comm) => (
                        <div key={comm.id} className="border-b pb-4">
                          <div className="flex justify-between items-start mb-2">
                            <div>
                              {comm.type === "announcement" && comm.subject && (
                                <h3 className="font-medium">{comm.subject}</h3>
                              )}
                              <div className="flex items-center text-sm text-muted-foreground">
                                <span>To: {comm.recipients.join(", ")}</span>
                                <span className="mx-2">•</span>
                                <span>{formatTimestamp(comm.timestamp)}</span>
                              </div>
                            </div>
                            <Badge variant={comm.type === "announcement" ? "secondary" : "outline"}>
                              {comm.type === "announcement" ? "Announcement" : "Message"}
                            </Badge>
                          </div>
                          <p className="text-sm">{comm.content}</p>
                        </div>
                      ))
                  ) : (
                    <div className="text-center py-4">
                      <p className="text-muted-foreground">No communications found</p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="messages">
            <Card>
              <CardHeader>
                <CardTitle>Messages</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {filteredCommunications
                    .filter((comm) => comm.type === "message")
                    .sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())
                    .map((comm) => (
                      <div key={comm.id} className="border-b pb-4">
                        <div className="flex justify-between items-start mb-2">
                          <div className="flex items-center text-sm text-muted-foreground">
                            <span>To: {comm.recipients.join(", ")}</span>
                            <span className="mx-2">•</span>
                            <span>{formatTimestamp(comm.timestamp)}</span>
                          </div>
                          {!comm.read && <Badge variant="default">Unread</Badge>}
                        </div>
                        <p className="text-sm">{comm.content}</p>
                      </div>
                    ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="announcements">
            <Card>
              <CardHeader>
                <CardTitle>Announcements</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {filteredCommunications
                    .filter((comm) => comm.type === "announcement")
                    .sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())
                    .map((comm) => (
                      <div key={comm.id} className="border-b pb-4">
                        <div className="flex justify-between items-start mb-2">
                          <div>
                            <h3 className="font-medium">{comm.subject}</h3>
                            <div className="flex items-center text-sm text-muted-foreground">
                              <span>To: {comm.recipients.join(", ")}</span>
                              <span className="mx-2">•</span>
                              <span>{formatTimestamp(comm.timestamp)}</span>
                            </div>
                          </div>
                          <Badge variant="secondary">Announcement</Badge>
                        </div>
                        <p className="text-sm">{comm.content}</p>
                      </div>
                    ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

{/* New Message Dialog */}
      <Dialog open={newMessageOpen} onOpenChange={setNewMessageOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>New Message</DialogTitle>
            <DialogDescription>Send a direct message to staff members.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="recipients">Recipients</Label>
              <Select onValueChange={(value) => setSelectedRecipients([value])}>
                <SelectTrigger id="recipients">
                  <SelectValue placeholder="Select staff member" />
                </SelectTrigger>
                <SelectContent>
                  {staffMembers.map((staff) => (
                    <SelectItem key={staff.id} value={staff.name}>
                      {staff.name} - {staff.department}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="message">Message</Label>
              <Textarea
                id="message"
                placeholder="Enter your message here..."
                value={messageContent}
                onChange={(e) => setMessageContent(e.target.value)}
                rows={5}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setNewMessageOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleSendMessage}>
              <Send className="mr-2 h-4 w-4" />
              Send Message
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* New Announcement Dialog */}
      <Dialog open={newAnnouncementOpen} onOpenChange={setNewAnnouncementOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>New Announcement</DialogTitle>
            <DialogDescription>Send an announcement to multiple staff members or departments.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="announcement-recipients">Recipients</Label>
              <Select onValueChange={(value) => setSelectedRecipients([value])}>
                <SelectTrigger id="announcement-recipients">
                  <SelectValue placeholder="Select recipients" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="All Staff">All Staff</SelectItem>
                  {departments.map((dept) => (
                    <SelectItem key={dept.id} value={`${dept.name} Staff`}>
                      {dept.name} Staff
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="subject">Subject</Label>
              <Input
                id="subject"
                placeholder="Enter announcement subject"
                value={messageSubject}
                onChange={(e) => setMessageSubject(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="announcement-content">Content</Label>
              <Textarea
                id="announcement-content"
                placeholder="Enter announcement content..."
                value={messageContent}
                onChange={(e) => setMessageContent(e.target.value)}
                rows={5}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setNewAnnouncementOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleSendAnnouncement}>
              <Bell className="mr-2 h-4 w-4" />
              Send Announcement
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/locations/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

interface Location {
  id: string
  name: string
  address: string
  description?: string
  createdAt: string
}

export default function LocationsPage() {
  const { toast } = useToast()
  const [locations, setLocations] = useState<Location[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [selectedLocation, setSelectedLocation] = useState<Location | null>(null)
  const [formData, setFormData] = useState({
    name: "",
    address: "",
    description: "",
  })

// Load locations from localStorage
  useEffect(() => {
    const loadLocations = () => {
      try {
        setIsLoading(true)
        // Check if locations exist
        const storedLocations = localStorage.getItem("locations")

// If no locations or empty array, initialize with House 1, House 2, House 3
        if (!storedLocations || JSON.parse(storedLocations).length === 0) {
          const defaultLocations = [
            {
              id: `loc_${Date.now()}_1`,
              name: "House 1",
              address: "123 Main St",
              description: "First house location",
              createdAt: new Date().toISOString(),
            },
            {
              id: `loc_${Date.now()}_2`,
              name: "House 2",
              address: "456 Oak Ave",
              description: "Second house location",
              createdAt: new Date().toISOString(),
            },
            {
              id: `loc_${Date.now()}_3`,
              name: "House 3",
              address: "789 Pine Rd",
              description: "Third house location",
              createdAt: new Date().toISOString(),
            },
          ]

localStorage.setItem("locations", JSON.stringify(defaultLocations))
          setLocations(defaultLocations)
        } else {
          // If locations exist, replace them with House 1, House 2, House 3
          const defaultLocations = [
            {
              id: `loc_${Date.now()}_1`,
              name: "House 1",
              address: "123 Main St",
              description: "First house location",
              createdAt: new Date().toISOString(),
            },
            {
              id: `loc_${Date.now()}_2`,
              name: "House 2",
              address: "456 Oak Ave",
              description: "Second house location",
              createdAt: new Date().toISOString(),
            },
            {
              id: `loc_${Date.now()}_3`,
              name: "House 3",
              address: "789 Pine Rd",
              description: "Third house location",
              createdAt: new Date().toISOString(),
            },
          ]

localStorage.setItem("locations", JSON.stringify(defaultLocations))
          setLocations(defaultLocations)
        }
      } catch (error) {
        console.error("Error loading locations:", error)
        toast({
          title: "Error",
          description: "Failed to load locations. Please refresh the page.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

loadLocations()
  }, [toast])

// Handle form input changes
  const handleChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

// Handle adding a new location
  const handleAddLocation = () => {
    try {
      // Validate form
      if (!formData.name || !formData.address) {
        toast({
          title: "Error",
          description: "Please fill in all required fields.",
          variant: "destructive",
        })
        return
      }

// Create new location
      const newLocation: Location = {
        id: `loc_${Date.now()}`,
        name: formData.name,
        address: formData.address,
        description: formData.description,
        createdAt: new Date().toISOString(),
      }

// Add to locations
      const updatedLocations = [...locations, newLocation]
      setLocations(updatedLocations)

// Save to localStorage
      localStorage.setItem("locations", JSON.stringify(updatedLocations))

// Reset form and close dialog
      setFormData({
        name: "",
        address: "",
        description: "",
      })
      setIsAddDialogOpen(false)

toast({
        title: "Success",
        description: "Location added successfully.",
      })
    } catch (error) {
      console.error("Error adding location:", error)
      toast({
        title: "Error",
        description: "Failed to add location. Please try again.",
        variant: "destructive",
      })
    }
  }

// Handle editing a location
  const handleEditLocation = () => {
    try {
      if (!selectedLocation) return

// Validate form
      if (!formData.name || !formData.address) {
        toast({
          title: "Error",
          description: "Please fill in all required fields.",
          variant: "destructive",
        })
        return
      }

// Update location
      const updatedLocations = locations.map((location) =>
        location.id === selectedLocation.id
          ? {
              ...location,
              name: formData.name,
              address: formData.address,
              description: formData.description,
            }
          : location,
      )

setLocations(updatedLocations)

// Save to localStorage
      localStorage.setItem("locations", JSON.stringify(updatedLocations))

// Reset form and close dialog
      setFormData({
        name: "",
        address: "",
        description: "",
      })
      setSelectedLocation(null)
      setIsEditDialogOpen(false)

toast({
        title: "Success",
        description: "Location updated successfully.",
      })
    } catch (error) {
      console.error("Error updating location:", error)
      toast({
        title: "Error",
        description: "Failed to update location. Please try again.",
        variant: "destructive",
      })
    }
  }

// Handle deleting a location
  const handleDeleteLocation = () => {
    try {
      if (!selectedLocation) return

// Remove location
      const updatedLocations = locations.filter((location) => location.id !== selectedLocation.id)
      setLocations(updatedLocations)

// Save to localStorage
      localStorage.setItem("locations", JSON.stringify(updatedLocations))

// Reset selected location and close dialog
      setSelectedLocation(null)
      setIsDeleteDialogOpen(false)

toast({
        title: "Success",
        description: "Location deleted successfully.",
      })
    } catch (error) {
      console.error("Error deleting location:", error)
      toast({
        title: "Error",
        description: "Failed to delete location. Please try again.",
        variant: "destructive",
      })
    }
  }

// Open edit dialog
  const openEditDialog = (location: Location) => {
    setSelectedLocation(location)
    setFormData({
      name: location.name,
      address: location.address,
      description: location.description || "",
    })
    setIsEditDialogOpen(true)
  }

// Open delete dialog
  const openDeleteDialog = (location: Location) => {
    setSelectedLocation(location)
    setIsDeleteDialogOpen(true)
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Locations</h1>
            <p className="text-muted-foreground">Manage locations for shifts and assignments.</p>
          </div>
          <Button onClick={() => setIsAddDialogOpen(true)}>
            <Plus className="mr-2 h-4 w-4" />
            Add Location
          </Button>
        </div>

<Card>
          <CardHeader>
            <CardTitle>All Locations</CardTitle>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="flex justify-center items-center py-8">
                <Loader2 className="h-8 w-8 animate-spin text-primary" />
              </div>
            ) : locations.length === 0 ? (
              <div className="text-center py-8">
                <MapPin className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
                <p className="text-muted-foreground">No locations found. Add your first location to get started.</p>
                <Button className="mt-4" onClick={() => setIsAddDialogOpen(true)}>
                  <Plus className="mr-2 h-4 w-4" />
                  Add Location
                </Button>
              </div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Name</TableHead>
                    <TableHead>Address</TableHead>
                    <TableHead>Description</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {locations.map((location) => (
                    <TableRow key={location.id}>
                      <TableCell className="font-medium">{location.name}</TableCell>
                      <TableCell>{location.address}</TableCell>
                      <TableCell>{location.description || "-"}</TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end space-x-2">
                          <Button variant="outline" size="sm" onClick={() => openEditDialog(location)}>
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="outline" size="sm" onClick={() => openDeleteDialog(location)}>
                            <Trash className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </CardContent>
        </Card>
      </div>

{/* Add Location Dialog */}
      <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Add New Location</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="name">Location Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => handleChange("name", e.target.value)}
                placeholder="e.g., Main Hospital"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="address">Address *</Label>
              <Input
                id="address"
                value={formData.address}
                onChange={(e) => handleChange("address", e.target.value)}
                placeholder="e.g., 123 Medical Center Dr"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => handleChange("description", e.target.value)}
                placeholder="Optional description"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleAddLocation}>Add Location</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Edit Location Dialog */}
      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Location</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="edit-name">Location Name *</Label>
              <Input id="edit-name" value={formData.name} onChange={(e) => handleChange("name", e.target.value)} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-address">Address *</Label>
              <Input
                id="edit-address"
                value={formData.address}
                onChange={(e) => handleChange("address", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-description">Description</Label>
              <Textarea
                id="edit-description"
                value={formData.description}
                onChange={(e) => handleChange("description", e.target.value)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleEditLocation}>Save Changes</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Delete Location Dialog */}
      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Location</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <p>
              Are you sure you want to delete the location "{selectedLocation?.name}"? This action cannot be undone.
            </p>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDeleteLocation}>
              Delete Location
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="components/layouts/staff-layout.tsx" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import Link from "next/link"

import type React from "react"
import { usePathname, useRouter } from "next/navigation"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { LayoutDashboard, Clock, FileText, MessageSquare, Calendar, LogOut, Menu, X } from "lucide-react"
import { StaffNotifications } from "@/components/staff-notifications"

interface StaffLayoutProps {
  children: React.ReactNode
}

useEffect(() => {
    // Mark that we're on the client side
    setIsClient(true)

// Check if user is logged in as staff
    const checkAuth = () => {
      try {
        const currentUser = sessionStorage.getItem("currentUser")

const userData = JSON.parse(currentUser)

checkAuth()
  }, [])

const handleLogout = () => {
    if (typeof window !== "undefined") {
      sessionStorage.removeItem("currentUser")
      router.push("/login")
    }
  }

// If we're server-side rendering, show a minimal loading state
  if (!isClient) {
    return <div className="min-h-screen">{children}</div>
  }

// If we're loading, show a loading state
  if (isLoading) {
    return <div className="min-h-screen flex items-center justify-center">Loading...</div>
  }

{/* Main content */}
      <div className="flex-1 flex flex-col">
        <div className="hidden md:flex items-center justify-end p-4 border-b">
          <StaffNotifications />
        </div>
        <main className="flex-1 p-4 md:p-6 bg-background">
          {pathname !== "/staff/dashboard" && (
            <div className="mb-6">
              <Button variant="outline" onClick={() => router.push("/staff/dashboard")} className="flex items-center">
                <LayoutDashboard className="mr-2 h-4 w-4" />
                Go to Dashboard
              </Button>
            </div>
          )}
          {children}
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/data-storage-explanation.ts" isMerged="true" isEdit="true"
/**
 * Data Storage Explanation
 *
 * Current Implementation:
 * - The application currently uses localStorage for data storage
 * - localStorage is device-specific and not synchronized across devices
 * - This is why data added on mobile isn't showing on desktop
 *
 * Recommended Solution:
 * - Implement Firebase Firestore for real-time data synchronization
 * - Use MongoDB for persistent data storage
 * - The app already has the Firebase and MongoDB configurations set up
 *
 * Implementation Steps:
 * 1. Use the existing Firebase configuration in lib/firebase.ts
 * 2. Use the existing MongoDB configuration in lib/mongodb.ts
 * 3. Update all data operations to use Firebase/MongoDB instead of localStorage
 * 4. Implement data synchronization between devices
 *
 * Example Firebase Implementation:
 * - Use Firestore for real-time data
 * - Use Firebase Authentication for user management
 * - Use Firebase Storage for file uploads
 *
 * Example MongoDB Implementation:
 * - Use MongoDB for persistent data storage
 * - Use MongoDB Atlas for cloud hosting
 * - Use MongoDB Realm for synchronization
 */

// This is just an explanation file, not actual code to be used in the application
[V0_FILE]typescript:file="lib/sync-data.ts" isMerged="true" isEdit="true"
import { db } from "./firebase"
import { collection, getDocs, setDoc, doc } from "firebase/firestore"
import clientPromise from "./mongodb"

/**
 * Synchronize data between localStorage and Firebase/MongoDB
 * This function should be called when the app starts and periodically
 */
export async function syncData() {
  try {
    // Check if we're in the browser
    if (typeof window === "undefined") return

// Get data from localStorage
    const staffMembers = JSON.parse(localStorage.getItem("staffMembers") || "[]")
    const messages = JSON.parse(localStorage.getItem("messages") || "[]")
    const hourlyLogs = JSON.parse(localStorage.getItem("hourlyLogs") || "[]")

// Sync with Firebase (for real-time updates)
    await syncWithFirebase("staffMembers", staffMembers)
    await syncWithFirebase("messages", messages)
    await syncWithFirebase("hourlyLogs", hourlyLogs)

// Sync with MongoDB (for persistence)
    await syncWithMongoDB("staffMembers", staffMembers)
    await syncWithMongoDB("messages", messages)
    await syncWithMongoDB("hourlyLogs", hourlyLogs)

console.log("Data synchronized successfully")
    return { success: true }
  } catch (error) {
    console.error("Error synchronizing data:", error)
    return { success: false, error }
  }
}

/**
 * Sync data with Firebase
 */
async function syncWithFirebase(collectionName: string, data: any[]) {
  try {
    // Get existing data from Firebase
    const querySnapshot = await getDocs(collection(db, collectionName))
    const existingData = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))

// Compare and update
    for (const item of data) {
      // Check if item exists in Firebase
      const existingItem = existingData.find((e) => e.id === item.id)

if (!existingItem) {
        // Add new item
        await setDoc(doc(db, collectionName, item.id), item)
      } else {
        // Update existing item if needed
        // This is a simple implementation - in a real app, you'd compare timestamps
        await setDoc(doc(db, collectionName, item.id), item)
      }
    }

return { success: true }
  } catch (error) {
    console.error(`Error syncing ${collectionName} with Firebase:`, error)
    return { success: false, error }
  }
}

/**
 * Sync data with MongoDB
 */
async function syncWithMongoDB(collectionName: string, data: any[]) {
  try {
    const client = await clientPromise
    const db = client.db("healthcare-staff-app")
    const collection = db.collection(collectionName)

// For each item, upsert to MongoDB
    for (const item of data) {
      await collection.updateOne({ id: item.id }, { $set: { ...item, lastSyncedAt: new Date() } }, { upsert: true })
    }

return { success: true }
  } catch (error) {
    console.error(`Error syncing ${collectionName} with MongoDB:`, error)
    return { success: false, error }
  }
}

/**
 * Load data from Firebase/MongoDB into localStorage
 * This function should be called when the app starts
 */
export async function loadDataFromCloud() {
  try {
    // Check if we're in the browser
    if (typeof window === "undefined") return

// Load data from Firebase (preferred for real-time)
    const staffMembers = await loadFromFirebase("staffMembers")
    const messages = await loadFromFirebase("messages")
    const hourlyLogs = await loadFromFirebase("hourlyLogs")

// Update localStorage
    localStorage.setItem("staffMembers", JSON.stringify(staffMembers))
    localStorage.setItem("messages", JSON.stringify(messages))
    localStorage.setItem("hourlyLogs", JSON.stringify(hourlyLogs))

console.log("Data loaded from cloud successfully")
    return { success: true }
  } catch (error) {
    console.error("Error loading data from cloud:", error)
    return { success: false, error }
  }
}

/**
 * Load data from Firebase
 */
async function loadFromFirebase(collectionName: string) {
  try {
    const querySnapshot = await getDocs(collection(db, collectionName))
    return querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
  } catch (error) {
    console.error(`Error loading ${collectionName} from Firebase:`, error)
    // Fallback to localStorage
    if (typeof window !== "undefined") {
      return JSON.parse(localStorage.getItem(collectionName) || "[]")
    }
    return []
  }
}
[V0_FILE]typescriptreact:file="components/data-sync-initializer.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import { syncData, loadDataFromCloud } from "@/lib/sync-data"
import { useToast } from "@/hooks/use-toast"

export function DataSyncInitializer() {
  const { toast } = useToast()
  const [isSyncing, setIsSyncing] = useState(false)

useEffect(() => {
    const initializeSync = async () => {
      try {
        setIsSyncing(true)

// First, load data from cloud to localStorage
        await loadDataFromCloud()

// Then, sync any local changes back to the cloud
        await syncData()

// Set up periodic sync (every 5 minutes)
        const interval = setInterval(
          async () => {
            await syncData()
          },
          5 * 60 * 1000,
        )

return () => clearInterval(interval)
      } catch (error) {
        console.error("Error initializing data sync:", error)
        toast({
          title: "Sync Error",
          description: "Failed to synchronize data. Some features may not work correctly.",
          variant: "destructive",
        })
      } finally {
        setIsSyncing(false)
      }
    }

initializeSync()
  }, [toast])

return null
}
[V0_FILE]typescript:file="lib/server-only.ts" isEdit="true" isMerged="true"
// This file is used to mark modules as server-only
export const serverOnly = Symbol("server-only")
[V0_FILE]typescript:file="lib/data-service.ts" isEdit="true" isMerged="true"
// This file contains client-safe functions for data operations
// It does NOT import MongoDB directly

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.error || "Failed to create staff member")
  }

return await response.json()
}

export async function updateStaffMember(staffId: string, updateData: any) {
  const response = await fetch(`/api/staff/${staffId}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(updateData),
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.error || "Failed to update staff member")
  }

return await response.json()
}

export async function deleteStaffMember(staffId: string) {
  const response = await fetch(`/api/staff/${staffId}`, {
    method: "DELETE",
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.error || "Failed to delete staff member")
  }

return await response.json()
}

// Time tracking
export async function getTimeSessions(staffId: string) {
  const response = await fetch(`/api/time-sessions?staffId=${staffId}`)

if (!response.ok) {
    throw new Error("Failed to fetch time sessions")
  }

const data = await response.json()
  return data.sessions
}

export async function createTimeSession(sessionData: any) {
  const response = await fetch("/api/time-sessions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(sessionData),
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.error || "Failed to create time session")
  }

return await response.json()
}

export async function updateTimeSession(sessionId: string, updateData: any) {
  const response = await fetch("/api/time-sessions", {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ sessionId, updateData }),
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.error || "Failed to update time session")
  }

return await response.json()
}

// Messages
export async function getMessages(staffId: string, isAdmin: boolean) {
  const response = await fetch(`/api/messages?staffId=${staffId}&isAdmin=${isAdmin}`)

if (!response.ok) {
    throw new Error("Failed to fetch messages")
  }

const data = await response.json()
  return data.messages
}

export async function sendMessage(messageData: any) {
  const response = await fetch("/api/messages", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(messageData),
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.error || "Failed to send message")
  }

return await response.json()
}

export async function replyToMessage(messageId: string, reply: any) {
  const response = await fetch("/api/messages/reply", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ messageId, reply }),
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.error || "Failed to reply to message")
  }

return await response.json()
}

// Dashboard data
export async function getStaffDashboardData(staffId: string) {
  const response = await fetch(`/api/dashboard/staff?staffId=${staffId}`)

if (!response.ok) {
    throw new Error("Failed to fetch dashboard data")
  }

return await response.json()
}

export async function getAdminDashboardData() {
  const response = await fetch("/api/dashboard/admin")

if (!response.ok) {
    throw new Error("Failed to fetch dashboard data")
  }

return await response.json()
}
[V0_FILE]typescript:file="lib/server-actions/hourly-logs.ts" isEdit="true" isMerged="true"
"use server"

import { getCollection } from "../mongodb-server"
import { revalidatePath } from "next/cache"
import { serverOnly } from "../server-only"

// Mark this module as server-only
const _serverOnly = serverOnly

// Create a new hourly log
export async function createHourlyLog(logData: any) {
  try {
    const collection = await getCollection("healthcare-staff-app", "hourlyLogs")

const result = await collection.insertOne({
      ...logData,
      createdAt: new Date(),
    })

revalidatePath("/staff/hourly-logs")
    revalidatePath("/admin/hourly-logs")

return {
      id: result.insertedId.toString(),
      ...logData,
    }
  } catch (error) {
    console.error("Error creating hourly log:", error)
    throw error
  }
}

// Get hourly logs for a specific staff member and date
export async function getStaffHourlyLogs(staffId: string, date: string) {
  try {
    const collection = await getCollection("healthcare-staff-app", "hourlyLogs")

// Create date range for the specified date (start of day to end of day)
    const startDate = new Date(date)
    startDate.setHours(0, 0, 0, 0)

const endDate = new Date(date)
    endDate.setHours(23, 59, 59, 999)

const logs = await collection
      .find({
        staffId,
        logDate: {
          $gte: startDate,
          $lte: endDate,
        },
      })
      .sort({ hourStart: 1 })
      .toArray()

return logs.map((log) => ({
      id: log._id.toString(),
      ...log,
    }))
  } catch (error) {
    console.error("Error getting hourly logs:", error)
    throw error
  }
}

// Get all hourly logs for admin view (with filtering options)
export async function getAdminHourlyLogs(filters: any = {}) {
  try {
    const collection = await getCollection("healthcare-staff-app", "hourlyLogs")

const query: any = {}

// Apply date filter if provided
    if (filters.date) {
      const startDate = new Date(filters.date)
      startDate.setHours(0, 0, 0, 0)

const endDate = new Date(filters.date)
      endDate.setHours(23, 59, 59, 999)

query.logDate = {
        $gte: startDate,
        $lte: endDate,
      }
    }

// Apply staff filter if provided
    if (filters.staffId) {
      query.staffId = filters.staffId
    }

const logs = await collection.find(query).sort({ logDate: -1, hourStart: 1 }).toArray()

return logs.map((log) => ({
      id: log._id.toString(),
      ...log,
    }))
  } catch (error) {
    console.error("Error getting admin hourly logs:", error)
    throw error
  }
}

// Get staff shift times for a specific date
export async function getStaffShiftTimes(staffId: string, date: string) {
  try {
    const collection = await getCollection("healthcare-staff-app", "shifts")

// Create date range for the specified date (start of day to end of day)
    const startDate = new Date(date)
    startDate.setHours(0, 0, 0, 0)

const endDate = new Date(date)
    endDate.setHours(23, 59, 59, 999)

const shift = await collection.findOne({
      assignedStaff: staffId,
      date: {
        $gte: startDate,
        $lte: endDate,
      },
    })

if (!shift) {
      // If no shift found, return default 8-hour shift starting at 9 AM
      return {
        startTime: "09:00",
        endTime: "17:00",
      }
    }

return {
      startTime: shift.startTime,
      endTime: shift.endTime,
    }
  } catch (error) {
    console.error("Error getting staff shift times:", error)
    // Return default shift times if error
    return {
      startTime: "09:00",
      endTime: "17:00",
    }
  }
}
[V0_FILE]typescript:file="middleware.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
  // Get the pathname of the request
  const path = request.nextUrl.pathname

// If the path starts with /api, allow it to proceed
  if (path.startsWith("/api")) {
    return NextResponse.next()
  }

// For all other paths, ensure no server-only modules are loaded
  return NextResponse.next()
}

// Configure the middleware to run on specific paths
export const config = {
  matcher: [
    // Apply to all routes except static files, api routes, and _next
    "/((?!_next/static|_next/image|favicon.ico|api).*)",
  ],
}
[V0_FILE]typescript:file="lib/hourly-logs-service.ts" isEdit="true" isMerged="true"
// Client-side service for hourly logs

export async function createHourlyLog(logData: any) {
  const response = await fetch("/api/hourly-logs", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(logData),
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(error.error || "Failed to create hourly log")
  }

return await response.json()
}

export async function getStaffHourlyLogs(staffId: string, date: string) {
  const response = await fetch(`/api/hourly-logs?staffId=${staffId}&date=${date}`)

if (!response.ok) {
    throw new Error("Failed to fetch hourly logs")
  }

return await response.json()
}

export async function getAdminHourlyLogs(date: string, staffId?: string) {
  let url = `/api/hourly-logs?date=${date}&isAdmin=true`
  if (staffId) url += `&staffId=${staffId}`

const response = await fetch(url)

if (!response.ok) {
    throw new Error("Failed to fetch hourly logs")
  }

return await response.json()
}

// Helper function to generate hourly slots based on shift times
export function generateHourlySlots(startTime: string, endTime: string) {
  const slots = []

// Parse start and end times
  const [startHour, startMinute] = startTime.split(":").map(Number)
  const [endHour, endMinute] = endTime.split(":").map(Number)

// Convert to minutes for easier calculation
  const startMinutes = startHour * 60 + startMinute
  const endMinutes = endHour * 60 + endMinute

// Generate hourly slots
  for (let minutes = startMinutes; minutes < endMinutes; minutes += 60) {
    const currentHour = Math.floor(minutes / 60)
    const currentMinute = minutes % 60

const nextHour = Math.floor((minutes + 60) / 60)
    const nextMinute = (minutes + 60) % 60

// Format times
    const hourStart = `${String(currentHour).padStart(2, "0")}:${String(currentMinute).padStart(2, "0")}`
    const hourEnd = `${String(nextHour).padStart(2, "0")}:${String(nextMinute).padStart(2, "0")}`

// Format display time
    const displayStart = formatTime(currentHour, currentMinute)
    const displayEnd = formatTime(nextHour, nextMinute)

slots.push({
      hourStart,
      hourEnd,
      displayTime: `${displayStart} - ${displayEnd}`,
    })
  }

return slots
}

// Helper function to format time with AM/PM
function formatTime(hour: number, minute: number) {
  const period = hour >= 12 ? "PM" : "AM"
  const displayHour = hour % 12 || 12
  return `${displayHour}:${String(minute).padStart(2, "0")} ${period}`
}
[V0_FILE]typescript:file="app/api/hourly-logs/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import {
  createHourlyLog,
  getStaffHourlyLogs,
  getAdminHourlyLogs,
  getStaffShiftTimes,
} from "@/lib/server-actions/hourly-logs"

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

if (!logData) {
      return NextResponse.json({ error: "Log data is required" }, { status: 400 })
    }

const result = await createHourlyLog(logData)

return NextResponse.json({ success: true, log: result })
  } catch (error) {
    console.error("Error creating hourly log:", error)
    return NextResponse.json({ error: "Failed to create hourly log" }, { status: 500 })
  }
}

export async function GET(request: NextRequest) {
  try {
    const url = new URL(request.url)
    const staffId = url.searchParams.get("staffId")
    const date = url.searchParams.get("date")
    const isAdmin = url.searchParams.get("isAdmin") === "true"

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

if (isAdmin) {
      const filters: any = { date }
      if (staffId) filters.staffId = staffId

const logs = await getAdminHourlyLogs(filters)
      return NextResponse.json({ logs })
    } else {
      if (!staffId) {
        return NextResponse.json({ error: "Staff ID is required" }, { status: 400 })
      }

const logs = await getStaffHourlyLogs(staffId, date)
      const shiftTimes = await getStaffShiftTimes(staffId, date)

return NextResponse.json({ logs, shiftTimes })
    }
  } catch (error) {
    console.error("Error getting hourly logs:", error)
    return NextResponse.json({ error: "Failed to get hourly logs" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/admin/hourly-logs/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { AdminLayout } from "@/components/admin-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { format } from "date-fns"
import { CalendarIcon, Clock, User, FileText, Loader2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { getAdminHourlyLogs } from "@/lib/hourly-logs-service"

export default function AdminHourlyLogsPage() {
  const { toast } = useToast()
  const [date, setDate] = useState<Date>(new Date())
  const [staffFilter, setStaffFilter] = useState<string>("all")
  const [logs, setLogs] = useState<any[]>([])
  const [staffMembers, setStaffMembers] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)

// Load staff members and logs
  useEffect(() => {
    const loadData = async () => {
      try {
        setIsLoading(true)

// Load staff members from localStorage
        const storedStaff = localStorage.getItem("staffMembers")
        if (storedStaff) {
          const parsedStaff = JSON.parse(storedStaff)
          setStaffMembers(parsedStaff)
        }

// Load logs for the selected date
        await loadLogs()
      } catch (error) {
        console.error("Error loading data:", error)
        toast({
          title: "Error",
          description: "Failed to load hourly logs data. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

loadData()
  }, [toast])

// Load logs when date or staff filter changes
  useEffect(() => {
    if (!isLoading) {
      loadLogs()
    }
  }, [date, staffFilter])

// Load logs from API
  const loadLogs = async () => {
    try {
      setIsLoading(true)

const formattedDate = format(date, "yyyy-MM-dd")
      const staffId = staffFilter !== "all" ? staffFilter : undefined

const response = await getAdminHourlyLogs(formattedDate, staffId)
      setLogs(response.logs || [])
    } catch (error) {
      console.error("Error loading logs:", error)
      toast({
        title: "Error",
        description: "Failed to load hourly logs. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

// Get staff name by ID
  const getStaffName = (staffId: string) => {
    const staff = staffMembers.find((s) => s.id === staffId)
    return staff ? staff.name : "Unknown Staff"
  }

// Format time for display
  const formatTime = (time: string) => {
    const [hours, minutes] = time.split(":").map(Number)
    const period = hours >= 12 ? "PM" : "AM"
    const displayHours = hours % 12 || 12
    return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Hourly Activity Logs</h1>
          <p className="text-muted-foreground">View and manage staff hourly activity logs.</p>
        </div>

<div className="flex flex-col md:flex-row gap-4">
          <Card className="md:w-80">
            <CardHeader>
              <CardTitle>Filters</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>Date</Label>
                <Popover>
                  <PopoverTrigger asChild>
                    <Button variant="outline" className="w-full justify-start text-left">
                      <CalendarIcon className="mr-2 h-4 w-4" />
                      {format(date, "PPP")}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0">
                    <Calendar mode="single" selected={date} onSelect={(date) => date && setDate(date)} initialFocus />
                  </PopoverContent>
                </Popover>
              </div>

<div className="space-y-2">
                <Label>Staff Member</Label>
                <Select value={staffFilter} onValueChange={setStaffFilter}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select staff member" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Staff</SelectItem>
                    {staffMembers.map((staff) => (
                      <SelectItem key={staff.id} value={staff.id}>
                        {staff.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<Button className="w-full" onClick={loadLogs}>
                Apply Filters
              </Button>
            </CardContent>
          </Card>

<Card className="flex-1">
            <CardHeader>
              <CardTitle>Hourly Logs for {format(date, "MMMM d, yyyy")}</CardTitle>
            </CardHeader>
            <CardContent>
              {isLoading ? (
                <div className="flex justify-center items-center py-8">
                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
                </div>
              ) : logs.length > 0 ? (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Staff</TableHead>
                      <TableHead>Time</TableHead>
                      <TableHead>Tasks</TableHead>
                      <TableHead>Patients</TableHead>
                      <TableHead>Attachments</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {logs.map((log) => (
                      <TableRow key={log.id}>
                        <TableCell>
                          <div className="flex items-center">
                            <User className="h-4 w-4 mr-2 text-muted-foreground" />
                            <span>{getStaffName(log.staffId)}</span>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center">
                            <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
                            <span>
                              {formatTime(log.hourStart)} - {formatTime(log.hourEnd)}
                            </span>
                          </div>
                        </TableCell>
                        <TableCell>{log.tasks}</TableCell>
                        <TableCell>{log.patients || "-"}</TableCell>
                        <TableCell>
                          {log.attachments && log.attachments.length > 0 ? (
                            <div className="flex items-center">
                              <FileText className="h-4 w-4 mr-2 text-muted-foreground" />
                              <span>{log.attachments.length} files</span>
                            </div>
                          ) : (
                            "-"
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              ) : (
                <div className="text-center py-8">
                  <p className="text-muted-foreground">No hourly logs found for this date and staff filter.</p>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/messages/page.tsx" isEdit="true" isMerged="true"
"use client"

interface Message {
  id: string
  staffId: string
  staffName: string
  content: string
  createdAt: Date
  isRead: boolean
  replies?: Reply[]
  attachments?: Attachment[]
}

interface Reply {
  id: string
  senderId: string
  senderName: string
  senderRole: string
  content: string
  createdAt: Date
}

interface Attachment {
  name: string
  type: string
  url: string
  size?: number
}

export default function AdminMessagesPage() {
  const { toast } = useToast()
  const [searchQuery, setSearchQuery] = useState("")
  const [messages, setMessages] = useState<Message[]>([])
  const [selectedMessage, setSelectedMessage] = useState<Message | null>(null)
  const [replyContent, setReplyContent] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [isReplying, setIsReplying] = useState(false)
  const [replyDialogOpen, setReplyDialogOpen] = useState(false)

// Load messages
  useEffect(() => {
    const loadMessages = () => {
      try {
        setIsLoading(true)
        // Get messages from localStorage
        const messagesStr = localStorage.getItem("messages")
        if (messagesStr) {
          const allMessages = JSON.parse(messagesStr)
          setMessages(allMessages)
        }
      } catch (error) {
        console.error("Error loading messages:", error)
        toast({
          title: "Error",
          description: "Failed to load messages. Please refresh the page.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

loadMessages()
  }, [toast])

// Filter messages based on search query
  const filteredMessages = messages.filter(
    (message) =>
      message.staffName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      message.content.toLowerCase().includes(searchQuery.toLowerCase()),
  )

// Handle message selection
  const handleSelectMessage = (message: Message) => {
    setSelectedMessage(message)
    setReplyDialogOpen(true)

// Mark message as read if it's not already
    if (!message.isRead) {
      const updatedMessages = messages.map((msg) => {
        if (msg.id === message.id) {
          return { ...msg, isRead: true }
        }
        return msg
      })

setMessages(updatedMessages)

// Update in localStorage
      localStorage.setItem("messages", JSON.stringify(updatedMessages))
    }
  }

// Handle sending a reply
  const handleSendReply = () => {
    if (!selectedMessage) return

if (!replyContent.trim()) {
      toast({
        title: "Error",
        description: "Reply cannot be empty",
        variant: "destructive",
      })
      return
    }

setIsReplying(true)

try {
      // Create new reply
      const newReply: Reply = {
        id: `reply-${Date.now()}`,
        senderId: "admin",
        senderName: "Administrator",
        senderRole: "admin",
        content: replyContent,
        createdAt: new Date(),
      }

// Update selected message
      const updatedMessage = {
        ...selectedMessage,
        replies: [...(selectedMessage.replies || []), newReply],
      }

// Update messages state
      const updatedMessages = messages.map((msg) => {
        if (msg.id === selectedMessage.id) {
          return updatedMessage
        }
        return msg
      })

setMessages(updatedMessages)
      setSelectedMessage(updatedMessage)

// Update in localStorage
      localStorage.setItem("messages", JSON.stringify(updatedMessages))

// Reset reply content
      setReplyContent("")

toast({
        title: "Success",
        description: "Reply sent successfully",
      })

// Close dialog
      setReplyDialogOpen(false)
    } catch (error) {
      console.error("Error sending reply:", error)
      toast({
        title: "Error",
        description: "Failed to send reply",
        variant: "destructive",
      })
    } finally {
      setIsReplying(false)
    }
  }

// Format date for display
  const formatDate = (date: Date) => {
    return new Date(date).toLocaleString()
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Staff Messages</h1>
          <p className="text-muted-foreground">View and respond to messages from staff members.</p>
        </div>

<div className="relative">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search messages..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

<Card>
          <CardHeader>
            <CardTitle>All Messages</CardTitle>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="flex justify-center items-center py-8">
                <Loader2 className="h-8 w-8 animate-spin text-primary" />
              </div>
            ) : filteredMessages.length > 0 ? (
              <div className="space-y-4">
                {filteredMessages
                  .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
                  .map((message) => (
                    <div
                      key={message.id}
                      className="flex items-start space-x-4 p-4 border rounded-lg cursor-pointer hover:bg-muted/50"
                      onClick={() => handleSelectMessage(message)}
                    >
                      <Avatar>
                        <AvatarFallback>{message.staffName[0]}</AvatarFallback>
                      </Avatar>
                      <div className="flex-1 space-y-1">
                        <div className="flex items-center justify-between">
                          <h4 className="font-medium">{message.staffName}</h4>
                          <div className="flex items-center space-x-2">
                            <span className="text-sm text-muted-foreground">
                              {formatDate(new Date(message.createdAt))}
                            </span>
                            {!message.isRead && <Badge>New</Badge>}
                          </div>
                        </div>
                        <p className="text-sm line-clamp-2">{message.content}</p>
                        {message.attachments && message.attachments.length > 0 && (
                          <div className="flex items-center text-sm text-muted-foreground">
                            <MessageSquare className="h-3 w-3 mr-1" />
                            <span>{message.attachments.length} attachment(s)</span>
                          </div>
                        )}
                        {message.replies && message.replies.length > 0 && (
                          <div className="flex items-center text-sm text-muted-foreground">
                            <MessageSquare className="h-3 w-3 mr-1" />
                            <span>{message.replies.length} reply(s)</span>
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
              </div>
            ) : (
              <div className="text-center py-8">
                <MessageSquare className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
                <p className="text-muted-foreground">No messages found.</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

{/* Reply Dialog */}
      <Dialog open={replyDialogOpen} onOpenChange={setReplyDialogOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Message from {selectedMessage?.staffName}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <div className="flex items-start space-x-4">
                <Avatar>
                  <AvatarFallback>{selectedMessage?.staffName[0] || "S"}</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <div className="bg-muted p-3 rounded-lg">
                    <p>{selectedMessage?.content}</p>
                    {selectedMessage?.attachments && selectedMessage.attachments.length > 0 && (
                      <div className="mt-2">
                        {selectedMessage.attachments.map((attachment, index) => (
                          <div key={index} className="mt-2">
                            {attachment.type.startsWith("audio/") ? (
                              <audio controls src={attachment.url} className="w-full" />
                            ) : attachment.type.startsWith("image/") ? (
                              <img
                                src={attachment.url || "/placeholder.svg"}
                                alt={attachment.name}
                                className="max-h-40 rounded-md"
                              />
                            ) : (
                              <a
                                href={attachment.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-primary underline"
                              >
                                {attachment.name}
                              </a>
                            )}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">
                    {selectedMessage && formatDate(new Date(selectedMessage.createdAt))}
                  </p>
                </div>
              </div>
            </div>

{selectedMessage?.replies && selectedMessage.replies.length > 0 && (
              <div className="space-y-4">
                <h4 className="text-sm font-medium">Previous Replies</h4>
                {selectedMessage.replies.map((reply) => (
                  <div key={reply.id} className="flex items-start space-x-4">
                    <Avatar>
                      <AvatarFallback>{reply.senderRole === "admin" ? "A" : reply.senderName[0]}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <div className="bg-muted p-3 rounded-lg">
                        <p>{reply.content}</p>
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">
                        {reply.senderName} • {formatDate(new Date(reply.createdAt))}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            )}

<div className="space-y-2">
              <h4 className="text-sm font-medium">Your Reply</h4>
              <Textarea
                placeholder="Type your reply here..."
                value={replyContent}
                onChange={(e) => setReplyContent(e.target.value)}
                rows={4}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setReplyDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleSendReply} disabled={isReplying}>
              {isReplying ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Sending...
                </>
              ) : (
                <>
                  <Send className="mr-2 h-4 w-4" />
                  Send Reply
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </AdminLayout>
  )
}
[V0_FILE]json:file="package.json" isEdit="true" isMerged="true"
{
  "name": "healthcare-staff-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.3.1",
    "firebase": "^10.8.0",
    "lucide-react": "^0.323.0",
    "mongodb": "^6.3.0",
    "next": "14.1.0",
    "react": "^18",
    "react-day-picker": "^8.10.0",
    "react-dom": "^18",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/uuid": "^9.0.8",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  },
  "browser": {
    "mongodb": false,
    "fs": false,
    "path": false,
    "os": false
  }
}
[V0_FILE]typescript:file="lib/mongodb-client.ts" isMerged="true" isEdit="true"
// This file contains client-safe functions for MongoDB operations
// It does NOT import MongoDB directly

// Generic function to fetch data from API
async function fetchFromApi(endpoint: string, options?: RequestInit) {
  const response = await fetch(`/api/${endpoint}`, options)
  if (!response.ok) {
    const error = await response.json()
    throw new Error(error.message || "An error occurred")
  }
  return response.json()
}

// Staff management
export async function getStaffMembers() {
  return fetchFromApi("staff")
}

export async function createStaffMember(staffData: any) {
  return fetchFromApi("staff", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(staffData),
  })
}

export async function updateStaffMember(staffId: string, updateData: any) {
  return fetchFromApi(`staff/${staffId}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(updateData),
  })
}

export async function deleteStaffMember(staffId: string) {
  return fetchFromApi(`staff/${staffId}`, { method: "DELETE" })
}

// Time tracking
export async function getTimeSessions(staffId: string) {
  return fetchFromApi(`time-sessions?staffId=${staffId}`)
}

export async function createTimeSession(sessionData: any) {
  return fetchFromApi("time-sessions", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(sessionData),
  })
}

export async function updateTimeSession(sessionId: string, updateData: any) {
  return fetchFromApi("time-sessions", {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ sessionId, updateData }),
  })
}

// Messages
export async function getMessages(staffId: string, isAdmin: boolean) {
  return fetchFromApi(`messages?staffId=${staffId}&isAdmin=${isAdmin}`)
}

export async function sendMessage(messageData: any) {
  return fetchFromApi("messages", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(messageData),
  })
}

// Dashboard data
export async function getStaffDashboardData(staffId: string) {
  return fetchFromApi(`dashboard/staff?staffId=${staffId}`)
}

export async function getAdminDashboardData() {
  return fetchFromApi("dashboard/admin")
}

// Local storage fallback functions (for offline support)
export function getLocalStaffMembers() {
  try {
    const data = localStorage.getItem("staffMembers")
    return data ? JSON.parse(data) : []
  } catch (error) {
    console.error("Error getting staff members from localStorage:", error)
    return []
  }
}

export function saveLocalStaffMember(staffMember: any) {
  try {
    const staffMembers = getLocalStaffMembers()
    staffMembers.push(staffMember)
    localStorage.setItem("staffMembers", JSON.stringify(staffMembers))
    return true
  } catch (error) {
    console.error("Error saving staff member to localStorage:", error)
    return false
  }
}
[V0_FILE]typescript:file="lib/mongodb-server.ts" isEdit="true" isMerged="true"
import { MongoClient, ServerApiVersion } from "mongodb"

// This is a server-only file
if (typeof window !== "undefined") {
  throw new Error("This module can only be used on the server side")
}

// Connection string
const uri = process.env.MONGODB_URI || ""
if (!uri) {
  throw new Error("Please add your MongoDB URI to .env.local")
}

// Connection options
const options = {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  },
}

// Global variable to cache the MongoDB client
let client: MongoClient
let clientPromise: Promise<MongoClient>

export default clientPromise

// Helper function to get a database collection
export async function getCollection(dbName: string, collectionName: string) {
  const client = await clientPromise
  const db = client.db(dbName)
  return db.collection(collectionName)
}
[V0_FILE]typescript:file="app/api/staff/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getCollection } from "@/lib/mongodb-server"

// GET handler to fetch all staff members
export async function GET() {
  try {
    const collection = await getCollection("healthcare-staff-app", "staff")
    const staff = await collection.find({}).toArray()

return NextResponse.json({ staff })
  } catch (error) {
    console.error("Error fetching staff:", error)
    return NextResponse.json({ error: "Failed to fetch staff members" }, { status: 500 })
  }
}

// POST handler to create a new staff member
export async function POST(request: NextRequest) {
  try {
    const staffData = await request.json()

// Validate required fields
    if (!staffData.name || !staffData.email) {
      return NextResponse.json({ error: "Name and email are required" }, { status: 400 })
    }

// Check if email already exists
    const collection = await getCollection("healthcare-staff-app", "staff")
    const existingStaff = await collection.findOne({ email: staffData.email })

if (existingStaff) {
      return NextResponse.json({ error: "Email already exists" }, { status: 400 })
    }

// Add timestamp and generate ID if not provided
    const newStaff = {
      ...staffData,
      id: staffData.id || `staff_${Date.now()}`,
      createdAt: new Date(),
    }

// Insert into MongoDB
    await collection.insertOne(newStaff)

// Also save to localStorage for offline support
    // This is handled client-side

return NextResponse.json({
      success: true,
      staff: newStaff,
    })
  } catch (error) {
    console.error("Error creating staff:", error)
    return NextResponse.json({ error: "Failed to create staff member" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/staff/[id]/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getCollection } from "@/lib/mongodb-server"

// PUT handler to update a staff member
export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const staffId = params.id
    const updateData = await request.json()

const collection = await getCollection("healthcare-staff-app", "staff")

// Update the staff member
    const result = await collection.updateOne({ id: staffId }, { $set: { ...updateData, updatedAt: new Date() } })

if (result.matchedCount === 0) {
      return NextResponse.json({ error: "Staff member not found" }, { status: 404 })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error updating staff:", error)
    return NextResponse.json({ error: "Failed to update staff member" }, { status: 500 })
  }
}

// DELETE handler to delete a staff member
export async function DELETE(_request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const staffId = params.id

const collection = await getCollection("healthcare-staff-app", "staff")

// Soft delete by updating status to "deleted"
    const result = await collection.updateOne({ id: staffId }, { $set: { status: "deleted", updatedAt: new Date() } })

if (result.matchedCount === 0) {
      return NextResponse.json({ error: "Staff member not found" }, { status: 404 })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error deleting staff:", error)
    return NextResponse.json({ error: "Failed to delete staff member" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/time-sessions/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getCollection } from "@/lib/mongodb-server"

// GET handler to fetch time sessions
export async function GET(request: NextRequest) {
  try {
    const url = new URL(request.url)
    const staffId = url.searchParams.get("staffId")

if (!staffId) {
      return NextResponse.json({ error: "Staff ID is required" }, { status: 400 })
    }

const collection = await getCollection("healthcare-staff-app", "timeSessions")
    const sessions = await collection.find({ staffId }).sort({ createdAt: -1 }).toArray()

return NextResponse.json({ sessions })
  } catch (error) {
    console.error("Error fetching time sessions:", error)
    return NextResponse.json({ error: "Failed to fetch time sessions" }, { status: 500 })
  }
}

// POST handler to create a time session
export async function POST(request: NextRequest) {
  try {
    const sessionData = await request.json()

if (!sessionData.staffId) {
      return NextResponse.json({ error: "Staff ID is required" }, { status: 400 })
    }

const collection = await getCollection("healthcare-staff-app", "timeSessions")

// Add timestamp and generate ID if not provided
    const newSession = {
      ...sessionData,
      id: sessionData.id || `session_${Date.now()}`,
      createdAt: new Date(),
    }

// Insert into MongoDB
    await collection.insertOne(newSession)

return NextResponse.json({
      success: true,
      session: newSession,
    })
  } catch (error) {
    console.error("Error creating time session:", error)
    return NextResponse.json({ error: "Failed to create time session" }, { status: 500 })
  }
}

// PUT handler to update a time session
export async function PUT(request: NextRequest) {
  try {
    const { sessionId, updateData } = await request.json()

if (!sessionId || !updateData) {
      return NextResponse.json({ error: "Session ID and update data are required" }, { status: 400 })
    }

const collection = await getCollection("healthcare-staff-app", "timeSessions")

// Update the session
    const result = await collection.updateOne({ id: sessionId }, { $set: { ...updateData, updatedAt: new Date() } })

if (result.matchedCount === 0) {
      return NextResponse.json({ error: "Session not found" }, { status: 404 })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error updating time session:", error)
    return NextResponse.json({ error: "Failed to update time session" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/messages/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getCollection } from "@/lib/mongodb-server"

// GET handler to fetch messages
export async function GET(request: NextRequest) {
  try {
    const url = new URL(request.url)
    const staffId = url.searchParams.get("staffId")
    const isAdmin = url.searchParams.get("isAdmin") === "true"

if (!staffId) {
      return NextResponse.json({ error: "Staff ID is required" }, { status: 400 })
    }

const collection = await getCollection("healthcare-staff-app", "messages")

// Query based on role
    let query = {}
    if (isAdmin) {
      // Admin can see all messages
      query = {}
    } else {
      // Staff can only see their own messages
      query = {
        $or: [{ staffId }, { recipientId: staffId }],
      }
    }

const messages = await collection.find(query).sort({ createdAt: -1 }).toArray()

return NextResponse.json({ messages })
  } catch (error) {
    console.error("Error fetching messages:", error)
    return NextResponse.json({ error: "Failed to fetch messages" }, { status: 500 })
  }
}

// POST handler to create a message
export async function POST(request: NextRequest) {
  try {
    const messageData = await request.json()

if (!messageData.staffId || !messageData.content) {
      return NextResponse.json({ error: "Staff ID and content are required" }, { status: 400 })
    }

const collection = await getCollection("healthcare-staff-app", "messages")

// Add timestamp and generate ID if not provided
    const newMessage = {
      ...messageData,
      id: messageData.id || `msg_${Date.now()}`,
      createdAt: new Date(),
      isRead: false,
    }

// Insert into MongoDB
    await collection.insertOne(newMessage)

return NextResponse.json({
      success: true,
      message: newMessage,
    })
  } catch (error) {
    console.error("Error creating message:", error)
    return NextResponse.json({ error: "Failed to create message" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/messages/reply/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getCollection } from "@/lib/mongodb-server"

// POST handler to reply to a message
export async function POST(request: NextRequest) {
  try {
    const { messageId, reply } = await request.json()

if (!messageId || !reply) {
      return NextResponse.json({ error: "Message ID and reply are required" }, { status: 400 })
    }

const collection = await getCollection("healthcare-staff-app", "messages")

// Add timestamp and ID to reply
    const newReply = {
      ...reply,
      id: `reply_${Date.now()}`,
      createdAt: new Date(),
    }

// Update the message with the new reply
    const result = await collection.updateOne(
      { id: messageId },
      {
        $push: { replies: newReply },
        $set: { updatedAt: new Date() },
      },
    )

if (result.matchedCount === 0) {
      return NextResponse.json({ error: "Message not found" }, { status: 404 })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error replying to message:", error)
    return NextResponse.json({ error: "Failed to reply to message" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/dashboard/staff/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getCollection } from "@/lib/mongodb-server"

export async function GET(request: NextRequest) {
  try {
    const url = new URL(request.url)
    const staffId = url.searchParams.get("staffId")

if (!staffId) {
      return NextResponse.json({ error: "Staff ID is required" }, { status: 400 })
    }

// Get upcoming shifts
    const shiftsCollection = await getCollection("healthcare-staff-app", "shifts")
    const upcomingShifts = await shiftsCollection
      .find({
        assignedStaff: staffId,
        date: { $gte: new Date() },
      })
      .sort({ date: 1 })
      .limit(5)
      .toArray()

// Get recent messages
    const messagesCollection = await getCollection("healthcare-staff-app", "messages")
    const recentMessages = await messagesCollection
      .find({
        $or: [{ staffId }, { recipientId: staffId }],
      })
      .sort({ createdAt: -1 })
      .limit(5)
      .toArray()

return NextResponse.json({
      upcomingShifts,
      recentMessages,
      recentSessions,
    })
  } catch (error) {
    console.error("Error fetching staff dashboard data:", error)
    return NextResponse.json({ error: "Failed to fetch dashboard data" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/dashboard/admin/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { getCollection } from "@/lib/mongodb-server"

export async function GET() {
  try {
    // Get staff count
    const staffCollection = await getCollection("healthcare-staff-app", "staff")
    const staffCount = await staffCollection.countDocuments({ status: { $ne: "deleted" } })

// Get recent messages
    const recentMessages = await messagesCollection.find({}).sort({ createdAt: -1 }).limit(5).toArray()

// Get upcoming shifts
    const upcomingShifts = await shiftsCollection
      .find({
        date: { $gte: new Date() },
      })
      .sort({ date: 1 })
      .limit(5)
      .toArray()

return NextResponse.json({
      stats: {
        staffCount,
        activeSessionsCount,
        unreadMessagesCount,
        understaffedShiftsCount,
      },
      recentMessages,
      upcomingShifts,
    })
  } catch (error) {
    console.error("Error fetching admin dashboard data:", error)
    return NextResponse.json({ error: "Failed to fetch dashboard data" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/firebase-config.ts" isMerged="true" isEdit="true"
import { initializeApp, getApps, getApp } from "firebase/app"
import { getAuth } from "firebase/auth"
import { getFirestore } from "firebase/firestore"
import { getStorage } from "firebase/storage"

// Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
}

// Initialize Firebase
let app
let auth
let db
let storage
let firebaseInitialized = false

// Only initialize Firebase on the client side
if (typeof window !== "undefined") {
  try {
    if (!getApps().length) {
      app = initializeApp(firebaseConfig)
    } else {
      app = getApp()
    }

auth = getAuth(app)
    db = getFirestore(app)
    storage = getStorage(app)
    firebaseInitialized = true
  } catch (error) {
    console.error("Firebase initialization error:", error)
  }
}

export { app, auth, db, storage, firebaseInitialized }
[V0_FILE]typescript:file="lib/auth-client.ts" isMerged="true" isEdit="true"
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from "firebase/auth"
import { auth } from "./firebase-config"

// Login with email and password
export async function loginWithEmail(email: string, password: string) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password)
    const user = userCredential.user

// Store user data in session storage
    sessionStorage.setItem(
      "currentUser",
      JSON.stringify({
        id: user.uid,
        email: user.email,
        role: "staff", // Default role, can be updated after fetching user data
        name: user.displayName || "Staff Member",
      }),
    )

return user
  } catch (error) {
    console.error("Login error:", error)
    throw error
  }
}

// Register a new user
export async function registerUser(email: string, password: string, userData: any) {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password)
    const user = userCredential.user

// Store additional user data (would typically be saved to Firestore)
    // For now, we'll use localStorage as a fallback
    const staffMembers = JSON.parse(localStorage.getItem("staffMembers") || "[]")
    staffMembers.push({
      id: user.uid,
      email: user.email,
      ...userData,
      createdAt: new Date().toISOString(),
    })
    localStorage.setItem("staffMembers", JSON.stringify(staffMembers))

return user
  } catch (error) {
    console.error("Registration error:", error)
    throw error
  }
}

// Logout
export async function logoutUser() {
  try {
    await signOut(auth)
    sessionStorage.removeItem("currentUser")
    return true
  } catch (error) {
    console.error("Logout error:", error)
    throw error
  }
}

// Local authentication fallback
export function localLogin(email: string, password: string) {
  try {
    // Check for admin login
    if ((email === "admin" || email === "admin@example.com") && password === "admin123") {
      const userData = {
        id: "admin-1",
        email: email === "admin" ? "admin@example.com" : email,
        role: "admin",
        name: "Admin User",
      }

sessionStorage.setItem("currentUser", JSON.stringify(userData))
      return userData
    }

// Check for demo staff login
    if (email === "cfeventurecaps@gmail.com" && password === "123456") {
      const userData = {
        id: "staff-1",
        email,
        role: "staff",
        name: "CFE Venture",
      }

sessionStorage.setItem("currentUser", JSON.stringify(userData))
      return userData
    }

// Check against localStorage
    const credentials = JSON.parse(localStorage.getItem("userCredentials") || "[]")
    const credential = credentials.find((cred: any) => cred.email === email && cred.password === password)

if (credential) {
      const userData = {
        id: credential.userId,
        email: credential.email,
        role: credential.role,
        name: credential.name,
      }

sessionStorage.setItem("currentUser", JSON.stringify(userData))
      return userData
    }

throw new Error("Invalid credentials")
  } catch (error) {
    console.error("Local login error:", error)
    throw error
  }
}
[V0_FILE]typescript:file="lib/data-sync.ts" isMerged="true" isEdit="true"
// Client-side data synchronization
// This handles syncing between localStorage and the server

// Function to sync local data to the server
export async function syncLocalDataToServer() {
  if (typeof window === "undefined") return

try {
    // Get data from localStorage
    const staffMembers = JSON.parse(localStorage.getItem("staffMembers") || "[]")
    const timeSessions = JSON.parse(localStorage.getItem("timeSessions") || "[]")
    const messages = JSON.parse(localStorage.getItem("messages") || "[]")

// Sync staff members
    if (staffMembers.length > 0) {
      await Promise.all(
        staffMembers.map(async (staff: any) => {
          try {
            await fetch("/api/staff", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify(staff),
            })
          } catch (error) {
            console.error("Error syncing staff member:", error)
          }
        }),
      )
    }

// Sync time sessions
    if (timeSessions.length > 0) {
      await Promise.all(
        timeSessions.map(async (session: any) => {
          try {
            await fetch("/api/time-sessions", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify(session),
            })
          } catch (error) {
            console.error("Error syncing time session:", error)
          }
        }),
      )
    }

// Sync messages
    if (messages.length > 0) {
      await Promise.all(
        messages.map(async (message: any) => {
          try {
            await fetch("/api/messages", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify(message),
            })
          } catch (error) {
            console.error("Error syncing message:", error)
          }
        }),
      )
    }

console.log("Local data synced to server successfully")
    return { success: true }
  } catch (error) {
    console.error("Error syncing local data to server:", error)
    return { success: false, error }
  }
}

// Function to sync server data to localStorage
export async function syncServerDataToLocal() {
  if (typeof window === "undefined") return

try {
    // Get current user
    const currentUser = JSON.parse(sessionStorage.getItem("currentUser") || "null")
    if (!currentUser) return { success: false, error: "No user logged in" }

// Fetch staff members
    const staffResponse = await fetch("/api/staff")
    if (staffResponse.ok) {
      const { staff } = await staffResponse.json()
      localStorage.setItem("staffMembers", JSON.stringify(staff))
    }

// Fetch time sessions for current user
    if (currentUser.role === "staff") {
      const sessionsResponse = await fetch(`/api/time-sessions?staffId=${currentUser.id}`)
      if (sessionsResponse.ok) {
        const { sessions } = await sessionsResponse.json()
        localStorage.setItem("timeSessions", JSON.stringify(sessions))
      }

// Fetch messages for current user
      const messagesResponse = await fetch(`/api/messages?staffId=${currentUser.id}&isAdmin=false`)
      if (messagesResponse.ok) {
        const { messages } = await messagesResponse.json()
        localStorage.setItem("messages", JSON.stringify(messages))
      }
    } else if (currentUser.role === "admin") {
      // Fetch all messages for admin
      const messagesResponse = await fetch(`/api/messages?staffId=${currentUser.id}&isAdmin=true`)
      if (messagesResponse.ok) {
        const { messages } = await messagesResponse.json()
        localStorage.setItem("messages", JSON.stringify(messages))
      }
    }

console.log("Server data synced to local successfully")
    return { success: true }
  } catch (error) {
    console.error("Error syncing server data to local:", error)
    return { success: false, error }
  }
}

// Initialize data sync
export function initializeDataSync() {
  if (typeof window === "undefined") return

// Sync on app load
  syncServerDataToLocal().then(() => {
    // Then sync any local changes back to server
    syncLocalDataToServer()
  })

// Set up periodic sync (every 5 minutes)
  setInterval(
    () => {
      syncLocalDataToServer().then(() => {
        syncServerDataToLocal()
      })
    },
    5 * 60 * 1000,
  )
}
[V0_FILE]typescript:file="components/data-sync-provider.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { initializeDataSync, syncLocalDataToServer, syncServerDataToLocal } from "@/lib/data-sync"
import { useToast } from "@/hooks/use-toast"

interface DataSyncProviderProps {
  children: React.ReactNode
}

export function DataSyncProvider({ children }: DataSyncProviderProps) {
  const { toast } = useToast()
  const [isSyncing, setIsSyncing] = useState(false)
  const [isOnline, setIsOnline] = useState(true)

useEffect(() => {
    // Check online status
    const handleOnline = () => {
      setIsOnline(true)
      toast({
        title: "You're back online",
        description: "Syncing your data...",
      })
      syncData()
    }

const handleOffline = () => {
      setIsOnline(false)
      toast({
        title: "You're offline",
        description: "Changes will be saved locally and synced when you're back online",
        variant: "destructive",
      })
    }

// Initialize data sync
    initializeDataSync()

// Add event listeners for online/offline status
    window.addEventListener("online", handleOnline)
    window.addEventListener("offline", handleOffline)

// Set initial online status
    setIsOnline(navigator.onLine)

return () => {
      window.removeEventListener("online", handleOnline)
      window.removeEventListener("offline", handleOffline)
    }
  }, [toast])

const syncData = async () => {
    if (!isOnline) return

setIsSyncing(true)
    try {
      await syncLocalDataToServer()
      await syncServerDataToLocal()
    } catch (error) {
      console.error("Error syncing data:", error)
    } finally {
      setIsSyncing(false)
    }
  }

return (
    <>
      {children}
      {isSyncing && (
        <div className="fixed bottom-4 right-4 bg-primary text-primary-foreground px-4 py-2 rounded-md shadow-md text-sm">
          Syncing data...
        </div>
      )}
    </>
  )
}
[V0_FILE]typescript:file="next.config.mjs" isEdit="true" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // This is the key configuration that tells Next.js to treat MongoDB as a server-only package
  serverComponentsExternalPackages: [
    'mongodb',
    'mongodb-client-encryption',
    'kerberos',
    '@mongodb-js/zstd',
    'snappy',
    'aws4',
    '@aws-sdk/credential-providers',
    'mongodb-connection-string-url',
    'bson',
    'bson-ext',
    '@napi-rs/snappy-linux-x64-gnu',
    '@napi-rs/snappy-linux-x64-musl',
  ],
  webpack: (config, { isServer }) => {
    // If client-side, explicitly exclude MongoDB and related packages
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        mongodb: false,
        'mongodb-client-encryption': false,
        kerberos: false,
        '@mongodb-js/zstd': false,
        snappy: false,
        aws4: false,
        '@aws-sdk/credential-providers': false,
        'mongodb-connection-string-url': false,
        bson: false,
        'bson-ext': false,
        '@napi-rs/snappy-linux-x64-gnu': false,
        '@napi-rs/snappy-linux-x64-musl': false,
        fs: false,
        path: false,
        os: false,
        crypto: false,
        util: false,
        stream: false,
        zlib: false,
        net: false,
        tls: false,
        dns: false,
        http: false,
        https: false,
        url: false,
        assert: false,
        buffer: false,
      }
    }
    return config
  },
}

export default nextConfig
[V0_FILE]typescript: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 { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from "@/components/ui/toaster"
import { AppInitializer } from "@/components/app-initializer"
import { DataSyncProvider } from "@/components/data-sync-provider"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Healthcare Staff App",
  description: "A comprehensive staff management application for healthcare facilities",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
          <DataSyncProvider>
            <AppInitializer />
            {children}
            <Toaster />
          </DataSyncProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescript:file="app/login/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { Loader2 } from "lucide-react"
import { loginWithEmail, localLogin } from "@/lib/auth-client"
import { syncServerDataToLocal } from "@/lib/data-sync"

export default function LoginPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(false)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const [isClient, setIsClient] = useState(false)

// Check if we're on the client side
  useEffect(() => {
    setIsClient(true)

// Check if user is already logged in
    if (typeof window !== "undefined") {
      const currentUser = sessionStorage.getItem("currentUser")
      if (currentUser) {
        try {
          const userData = JSON.parse(currentUser)
          if (userData.role === "staff") {
            router.push("/staff/dashboard")
          } else if (userData.role === "admin") {
            router.push("/admin/dashboard")
          }
        } catch (error) {
          console.error("Error parsing user data:", error)
          sessionStorage.removeItem("currentUser")
        }
      }
    }
  }, [router])

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

if (!email || !password) {
      setError("Please enter both email and password")
      return
    }

setIsLoading(true)

try {
      // Try Firebase authentication first
      try {
        await loginWithEmail(email, password)
        // Sync data after login
        await syncServerDataToLocal()

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

// Redirect based on role
        const currentUser = JSON.parse(sessionStorage.getItem("currentUser") || "{}")
        if (currentUser.role === "admin") {
          router.push("/admin/dashboard")
        } else {
          router.push("/staff/dashboard")
        }
        return
      } catch (firebaseError) {
        console.log("Firebase login failed, trying local login:", firebaseError)
      }

// Fall back to local authentication
      const userData = await localLogin(email, password)

toast({
        title: "Success",
        description: "Logged in successfully with local authentication",
      })

// Redirect based on role
      if (userData.role === "admin") {
        router.push("/admin/dashboard")
      } else {
        router.push("/staff/dashboard")
      }
    } catch (error: any) {
      console.error("Login error:", error)
      setError(error.message || "Invalid email or password")
    } finally {
      setIsLoading(false)
    }
  }

// If we're server-side rendering, show a minimal form without localStorage access
  if (!isClient) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
        <Card className="w-full max-w-md">
          <CardHeader className="text-center">
            <CardTitle className="text-2xl">Staff Login</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-center">Loading login form...</div>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
      <div className="absolute top-4 left-4">
        <Button variant="outline" onClick={() => router.push("/")}>
          ← Back to Home
        </Button>
      </div>
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl">Staff Login</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
            </div>

{error && <p className="text-destructive text-sm">{error}</p>}

<Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Logging in...
                </>
              ) : (
                "Log In"
              )}
            </Button>

<div className="text-center text-sm text-muted-foreground mt-4">
              <p>Demo Credentials:</p>
              <p>Email: cfeventurecaps@gmail.com</p>
              <p>Password: 123456</p>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/staff/time-tracking/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { StaffLayout } from "@/components/staff-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Clock, MapPin, Loader2, AlertCircle } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { Alert, AlertDescription } from "@/components/ui/alert"

interface GeoLocation {
  latitude: number
  longitude: number
  accuracy: number
  address?: string
  timestamp: number
}

interface TimeSession {
  id?: string
  staffId: string
  staffName: string
  clockInTime: Date
  clockOutTime?: Date
  clockInLocation?: GeoLocation
  clockOutLocation?: GeoLocation
  notes?: string
  status: "active" | "completed"
  duration?: number // in minutes
}

export default function TimeTrackingPage() {
  const { toast } = useToast()
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [currentSession, setCurrentSession] = useState<TimeSession | null>(null)
  const [notes, setNotes] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [isInitialLoading, setIsInitialLoading] = useState(true)
  const [currentLocation, setCurrentLocation] = useState<GeoLocation | null>(null)
  const [elapsedTime, setElapsedTime] = useState<number>(0)
  const [recentSessions, setRecentSessions] = useState<TimeSession[]>([])
  const [isClient, setIsClient] = useState(false)
  const [locationError, setLocationError] = useState<string | null>(null)
  const [isGettingLocation, setIsGettingLocation] = useState(false)

// For real-time timer
  const [hours, setHours] = useState(0)
  const [minutes, setMinutes] = useState(0)
  const [seconds, setSeconds] = useState(0)
  const timerRef = useRef<NodeJS.Timeout | null>(null)

// Load current user and active session
  useEffect(() => {
    setIsClient(true)

const loadUserAndSession = async () => {
      try {
        // Get current user from sessionStorage
        const userStr = sessionStorage.getItem("currentUser")
        if (!userStr) {
          console.error("No user found in session storage")
          setIsInitialLoading(false)
          return
        }

const currentUser = JSON.parse(userStr)
        setCurrentUser(currentUser)

// Check for active session in localStorage
        const sessionsStr = localStorage.getItem("timeSessions")
        let sessions: TimeSession[] = []

if (sessionsStr) {
          sessions = JSON.parse(sessionsStr)
        }

// Find active session for current user
        const activeSession = sessions.find(
          (session) => session.staffId === currentUser.id && session.status === "active",
        )

if (activeSession) {
          setCurrentSession(activeSession)

// Calculate elapsed time
          const startTime = new Date(activeSession.clockInTime).getTime()
          const currentTime = new Date().getTime()
          const elapsed = Math.floor((currentTime - startTime) / (1000 * 60))
          setElapsedTime(elapsed)

// Start the timer
          startTimer(startTime)
        }

// Get recent sessions for current user
        const userSessions = sessions
          .filter((session) => session.staffId === currentUser.id && session.status === "completed")
          .sort((a, b) => new Date(b.clockInTime).getTime() - new Date(a.clockInTime).getTime())
          .slice(0, 5)

setRecentSessions(userSessions)
      } catch (error) {
        console.error("Error loading session data:", error)
        toast({
          title: "Error",
          description: "Failed to load session data. Please refresh the page.",
          variant: "destructive",
        })
      } finally {
        setIsInitialLoading(false)
      }
    }

if (isClient) {
      loadUserAndSession()
    }

// Cleanup timer on unmount
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current)
      }
    }
  }, [toast, isClient])

// Start the timer with the given start time
  const startTimer = (startTime: number) => {
    // Clear any existing timer
    if (timerRef.current) {
      clearInterval(timerRef.current)
    }

// Calculate initial values
    const elapsed = Date.now() - startTime
    const initialHours = Math.floor(elapsed / (1000 * 60 * 60))
    const initialMinutes = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60))
    const initialSeconds = Math.floor((elapsed % (1000 * 60)) / 1000)

setHours(initialHours)
    setMinutes(initialMinutes)
    setSeconds(initialSeconds)

// Start the timer
    timerRef.current = setInterval(() => {
      setSeconds((prevSeconds) => {
        if (prevSeconds === 59) {
          setMinutes((prevMinutes) => {
            if (prevMinutes === 59) {
              setHours((prevHours) => prevHours + 1)
              return 0
            }
            return prevMinutes + 1
          })
          return 0
        }
        return prevSeconds + 1
      })
    }, 1000)
  }

// Stop the timer
  const stopTimer = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current)
      timerRef.current = null
    }
  }

// Get location with a timeout to prevent long waits
  const getLocation = (): Promise<GeoLocation> => {
    setIsGettingLocation(true)
    setLocationError(null)

return new Promise((resolve) => {
      // Default location in case geolocation fails or times out
      const defaultLocation: GeoLocation = {
        latitude: 0,
        longitude: 0,
        accuracy: 0,
        address: "Location unavailable",
        timestamp: Date.now(),
      }

// Set a timeout to resolve with default location after 10 seconds
      const timeoutId = setTimeout(() => {
        console.log("Geolocation timed out, using default location")
        setLocationError("Location request timed out. Using default location.")
        setIsGettingLocation(false)
        resolve(defaultLocation)
      }, 10000)

if (!navigator.geolocation) {
        clearTimeout(timeoutId)
        console.log("Geolocation not supported by browser")
        setLocationError("Your browser doesn't support geolocation.")
        setIsGettingLocation(false)
        resolve(defaultLocation)
        return
      }

// Try to get cached position first for immediate response
      navigator.geolocation.getCurrentPosition(
        (position) => {
          clearTimeout(timeoutId)

// Try to get address using reverse geocoding
          const getAddressFromCoords = async (lat: number, lng: number) => {
            try {
              // In a real app, you would use a geocoding service like Google Maps API
              // For this demo, we'll simulate an address
              return `Location at ${lat.toFixed(4)}, ${lng.toFixed(4)}`
            } catch (error) {
              console.error("Error getting address:", error)
              return "Location captured"
            }
          }

getAddressFromCoords(position.coords.latitude, position.coords.longitude).then((address) => {
            const location: GeoLocation = {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              accuracy: position.coords.accuracy,
              address: address,
              timestamp: position.timestamp || Date.now(),
            }
            setCurrentLocation(location)
            setIsGettingLocation(false)
            resolve(location)
          })
        },
        (error) => {
          clearTimeout(timeoutId)
          console.error("Geolocation error:", error.code, error.message)

let errorMsg = "Could not determine your location."

// Provide user feedback based on error type
          if (error.code === 1) {
            // PERMISSION_DENIED
            errorMsg = "Location permission denied. Please enable location access in your browser settings."
          } else if (error.code === 2) {
            // POSITION_UNAVAILABLE
            errorMsg = "Your location is currently unavailable."
          } else if (error.code === 3) {
            // TIMEOUT
            errorMsg = "Getting your location took too long."
          }

setLocationError(errorMsg)
          setIsGettingLocation(false)
          resolve(defaultLocation)
        },
        {
          timeout: 15000, // Longer timeout for all browsers
          maximumAge: 30000, // Use cached position if available within last 30 seconds
          enableHighAccuracy: false, // Don't need high accuracy, speeds up response
        },
      )
    })
  }

// Handle clock in
  const handleClockIn = async () => {
    if (!currentUser) {
      toast({
        title: "Error",
        description: "You must be logged in to clock in.",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)

try {
      // Start getting location asynchronously
      const locationPromise = getLocation()

// Create session ID and timestamp immediately
      const sessionId = `session-${Date.now()}`
      const clockInTime = new Date()

// Start the timer immediately for better UX
      startTimer(clockInTime.getTime())

// Get location (with timeout protection)
      const location = await locationPromise

// Create new session
      const newSession: TimeSession = {
        id: sessionId,
        staffId: currentUser.id,
        staffName: currentUser.name,
        clockInTime,
        clockInLocation: location,
        status: "active",
      }

// Update state immediately for responsive UI
      setCurrentSession(newSession)
      setElapsedTime(0)

// Save to localStorage (do this after updating UI)
      const sessionsStr = localStorage.getItem("timeSessions")
      let sessions: TimeSession[] = []

if (sessionsStr) {
        try {
          sessions = JSON.parse(sessionsStr)
        } catch (e) {
          console.error("Error parsing sessions:", e)
          sessions = []
        }
      }

sessions.push(newSession)
      localStorage.setItem("timeSessions", JSON.stringify(sessions))

// Also save to admin session logs for visibility
      const adminLogsStr = localStorage.getItem("adminSessionLogs")
      let adminLogs = []

if (adminLogsStr) {
        try {
          adminLogs = JSON.parse(adminLogsStr)
        } catch (e) {
          console.error("Error parsing admin logs:", e)
          adminLogs = []
        }
      }

// Create admin log entry
      const adminLogEntry = {
        id: sessionId,
        staffName: currentUser.name,
        staffId: currentUser.id,
        date: new Date().toLocaleDateString(),
        startTime: new Date().toLocaleTimeString(),
        endTime: "--",
        duration: "In progress",
        location: location.address || "Location captured",
        status: "in-progress",
        clockInLocation: location,
        staffImage: currentUser.profileImage || null,
      }

adminLogs.push(adminLogEntry)
      localStorage.setItem("adminSessionLogs", JSON.stringify(adminLogs))

// Clock in successful, no notification needed
    } catch (error) {
      console.error("Clock in error:", error)
      // Stop timer if there was an error
      stopTimer()

toast({
        title: "Error",
        description: "Failed to clock in. Please try again.",
        variant: "destructive",
      })

// Reset state if there was an error
      setCurrentSession(null)
    } finally {
      setIsLoading(false)
    }
  }

// Handle clock out
  const handleClockOut = async () => {
    if (!currentSession || !currentSession.id) return

if (!currentUser) {
      toast({
        title: "Error",
        description: "You must be logged in to clock out.",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)

try {
      // Stop the timer immediately for better UX
      stopTimer()

// Record clock out time immediately
      const clockOutTime = new Date()

// Calculate duration
      const duration = Math.floor(
        (clockOutTime.getTime() - new Date(currentSession.clockInTime).getTime()) / (1000 * 60),
      )

// Start getting location asynchronously
      const locationPromise = getLocation()

// Create updated session object
      const updatedSession = {
        ...currentSession,
        clockOutTime,
        notes,
        status: "completed" as const,
        duration,
      }

// Update state immediately for responsive UI
      setCurrentSession(null)
      setRecentSessions([updatedSession, ...recentSessions.slice(0, 4)])

// Reset UI elements
      setNotes("")
      setElapsedTime(0)
      setHours(0)
      setMinutes(0)
      setSeconds(0)

// Get location (with timeout protection)
      const location = await locationPromise

// Add location to updated session
      updatedSession.clockOutLocation = location

// Save to localStorage (do this after updating UI)
      const sessionsStr = localStorage.getItem("timeSessions")
      let sessions: TimeSession[] = []

if (sessionsStr) {
        try {
          sessions = JSON.parse(sessionsStr)
        } catch (e) {
          console.error("Error parsing sessions:", e)
          sessions = []
        }
      }

const sessionIndex = sessions.findIndex((session) => session.id === currentSession.id)

if (sessionIndex !== -1) {
        sessions[sessionIndex] = updatedSession
        localStorage.setItem("timeSessions", JSON.stringify(sessions))
      }

// Update admin session logs
      const adminLogsStr = localStorage.getItem("adminSessionLogs")
      if (adminLogsStr) {
        try {
          const adminLogs = JSON.parse(adminLogsStr)
          const logIndex = adminLogs.findIndex((log: any) => log.id === currentSession.id)

if (logIndex !== -1) {
            adminLogs[logIndex] = {
              ...adminLogs[logIndex],
              endTime: clockOutTime.toLocaleTimeString(),
              duration: `${Math.floor(duration / 60)}h ${duration % 60}m`,
              status: "completed",
              clockOutLocation: location,
              notes: notes || adminLogs[logIndex].notes,
            }

localStorage.setItem("adminSessionLogs", JSON.stringify(adminLogs))
          }
        } catch (e) {
          console.error("Error updating admin logs:", e)
        }
      }

// Clock out successful, no notification needed
    } catch (error) {
      console.error("Clock out error:", error)

toast({
        title: "Error",
        description: "Failed to clock out. Please try again.",
        variant: "destructive",
      })

// Don't reset state on error - allow user to try again
    } finally {
      setIsLoading(false)
    }
  }

const formatDuration = (minutes: number) => {
    const hours = Math.floor(minutes / 60)
    const mins = minutes % 60
    return `${hours}h ${mins}m`
  }

// Format timer display
  const formatTimer = () => {
    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`
  }

// If we're server-side rendering, show a minimal loading state
  if (!isClient) {
    return (
      <StaffLayout>
        <div className="space-y-6">
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Time Tracking</h1>
            <p className="text-muted-foreground">Track your work hours with geolocation verification.</p>
          </div>
          <div className="h-[60vh] flex items-center justify-center">
            <p>Loading time tracking data...</p>
          </div>
        </div>
      </StaffLayout>
    )
  }

if (isInitialLoading) {
    return (
      <StaffLayout>
        <div className="flex items-center justify-center h-[60vh]">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
          <span className="ml-2">Loading time tracking data...</span>
        </div>
      </StaffLayout>
    )
  }

return (
    <StaffLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Time Tracking</h1>
          <p className="text-muted-foreground">Track your work hours with geolocation verification.</p>
        </div>

{locationError && (
          <Alert variant="warning">
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>{locationError}</AlertDescription>
          </Alert>
        )}

<Card>
          <CardHeader>
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <CardTitle>Current Status</CardTitle>
              <Badge variant={currentSession?.status === "active" ? "default" : "outline"}>
                {currentSession?.status === "active" ? "On Duty" : "Off Duty"}
              </Badge>
            </div>
          </CardHeader>
          <CardContent>
            {currentSession?.status === "active" ? (
              <div className="space-y-6">
                <div className="grid gap-4 md:grid-cols-3">
                  <div className="space-y-2">
                    <h3 className="text-sm font-medium">Clock In Time</h3>
                    <p>{new Date(currentSession.clockInTime).toLocaleString()}</p>
                  </div>
                  <div className="space-y-2">
                    <h3 className="text-sm font-medium">Location</h3>
                    <div className="flex items-center">
                      <MapPin className="h-4 w-4 mr-1 text-muted-foreground" />
                      <span>{currentSession.clockInLocation?.address || "Location captured"}</span>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <h3 className="text-sm font-medium">Duration</h3>
                    <div className="flex items-center">
                      <Clock className="h-4 w-4 mr-1 text-muted-foreground" />
                      <span className="text-xl font-bold">{formatDuration(elapsedTime)}</span>
                    </div>
                  </div>
                </div>

{/* Real-time timer display */}
                <div className="flex justify-center">
                  <div className="text-4xl font-mono font-bold bg-slate-100 px-6 py-3 rounded-lg">{formatTimer()}</div>
                </div>

<div className="space-y-2">
                  <h3 className="text-sm font-medium">Session Notes</h3>
                  <Textarea
                    placeholder="Add notes about your work session..."
                    value={notes}
                    onChange={(e) => setNotes(e.target.value)}
                    rows={4}
                  />
                </div>

<Button
                  onClick={handleClockOut}
                  variant="destructive"
                  disabled={isLoading}
                  className="w-full sm:w-auto"
                >
                  {isLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      {isGettingLocation ? "Getting location..." : "Processing..."}
                    </>
                  ) : (
                    <>
                      <Clock className="mr-2 h-4 w-4" />
                      Clock Out
                    </>
                  )}
                </Button>
              </div>
            ) : (
              <div className="space-y-6">
                <p>You are currently not clocked in. Click the button below to start your shift.</p>

<Button onClick={handleClockIn} disabled={isLoading} className="w-full sm:w-auto">
                  {isLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      {isGettingLocation ? "Getting location..." : "Processing..."}
                    </>
                  ) : (
                    <>
                      <Clock className="mr-2 h-4 w-4" />
                      Clock In
                    </>
                  )}
                </Button>
              </div>
            )}
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Recent Sessions</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentSessions.length > 0 ? (
                recentSessions.map((session, index) => (
                  <div key={index} className="flex justify-between items-center border-b pb-3">
                    <div>
                      <p className="font-medium">{new Date(session.clockInTime).toLocaleDateString()}</p>
                      <p className="text-sm text-muted-foreground">
                        {new Date(session.clockInTime).toLocaleTimeString()} -
                        {session.clockOutTime ? new Date(session.clockOutTime).toLocaleTimeString() : "In Progress"}
                        {session.duration ? ` (${formatDuration(session.duration)})` : ""}
                      </p>
                      {session.clockInLocation && (
                        <p className="text-xs text-muted-foreground mt-1">
                          <MapPin className="h-3 w-3 inline mr-1" />
                          {session.clockInLocation.address}
                        </p>
                      )}
                    </div>
                    <div className="text-right">
                      <Badge variant="outline">{session.status === "active" ? "In Progress" : "Completed"}</Badge>
                    </div>
                  </div>
                ))
              ) : (
                <div className="text-center py-4 text-muted-foreground">
                  No recent sessions found. Clock in to start tracking your time.
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </StaffLayout>
  )
}
[V0_FILE]typescriptreact:file="app/staff/hourly-logs/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { StaffLayout } from "@/components/staff-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Loader2, Clock, CheckCircle, Camera, Upload, X, FileText, Image, FileAudio } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface HourlyLog {
  id: string
  staffId: string
  staffName: string
  date: Date
  hour: number
  tasks: string
  patients: string
  notes: string
  submitted: Date
  attachments?: Attachment[]
}

interface Attachment {
  name: string
  type: string
  url: string
  size?: number
}

export default function HourlyLogsPage() {
  const { toast } = useToast()
  const [isClient, setIsClient] = useState(false)
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [selectedHour, setSelectedHour] = useState("")
  const [tasks, setTasks] = useState("")
  const [patients, setPatients] = useState("")
  const [notes, setNotes] = useState("")
  const [recentLogs, setRecentLogs] = useState<HourlyLog[]>([])
  const [attachments, setAttachments] = useState<File[]>([])
  const [cameraActive, setCameraActive] = useState(false)
  const videoRef = useRef<HTMLVideoElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

useEffect(() => {
    setIsClient(true)

// Load hourly logs from localStorage
          const logsStr = localStorage.getItem("hourlyLogs")
          if (logsStr) {
            const allLogs = JSON.parse(logsStr)
            const userLogs = allLogs
              .filter((log: HourlyLog) => log.staffId === JSON.parse(currentUser).id)
              .sort((a: HourlyLog, b: HourlyLog) => new Date(b.submitted).getTime() - new Date(a.submitted).getTime())
              .slice(0, 10)

setRecentLogs(userLogs)
          }
        } catch (error) {
          console.error("Error loading data:", error)
        }
      }
    }

setIsLoading(false)
  }, [])

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

if (!selectedHour) {
      toast({
        title: "Error",
        description: "Please select an hour",
        variant: "destructive",
      })
      return
    }

if (!tasks) {
      toast({
        title: "Error",
        description: "Please enter tasks performed",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      // Process attachments
      const processedAttachments: Attachment[] = attachments.map((file) => {
        // For real app, you would upload to a server and get a URL
        // For this demo, we'll use a data URL
        const url = URL.createObjectURL(file)
        return {
          name: file.name,
          type: file.type,
          url: url,
          size: file.size,
        }
      })

// Create new log
      const newLog: HourlyLog = {
        id: `log-${Date.now()}`,
        staffId: currentUser.id,
        staffName: currentUser.name,
        date: new Date(),
        hour: Number.parseInt(selectedHour),
        tasks,
        patients,
        notes,
        submitted: new Date(),
        attachments: processedAttachments.length > 0 ? processedAttachments : undefined,
      }

// Save to localStorage
      const logsStr = localStorage.getItem("hourlyLogs")
      let logs: HourlyLog[] = []

if (logsStr) {
        logs = JSON.parse(logsStr)
      }

logs.push(newLog)
      localStorage.setItem("hourlyLogs", JSON.stringify(logs))

// Update recent logs
      setRecentLogs([newLog, ...recentLogs.slice(0, 9)])

// Reset form
      setSelectedHour("")
      setTasks("")
      setPatients("")
      setNotes("")
      setAttachments([])

// Log submitted successfully, no notification needed
    } catch (error) {
      console.error("Error submitting log:", error)
      toast({
        title: "Error",
        description: "Failed to submit hourly log",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

// Handle file selection
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const newFiles = Array.from(e.target.files)
      setAttachments((prev) => [...prev, ...newFiles])
    }
  }

// Remove attachment
  const removeAttachment = (index: number) => {
    setAttachments((prev) => prev.filter((_, i) => i !== index))
  }

// Start camera
  const startCamera = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true })
      if (videoRef.current) {
        videoRef.current.srcObject = stream
        setCameraActive(true)
      }
    } catch (err) {
      console.error("Error accessing camera:", err)
      toast({
        title: "Error",
        description: "Could not access camera. Please check permissions.",
        variant: "destructive",
      })
    }
  }

// Capture image from camera
  const captureImage = () => {
    if (!videoRef.current) return

const canvas = document.createElement("canvas")
    canvas.width = videoRef.current.videoWidth
    canvas.height = videoRef.current.videoHeight

const ctx = canvas.getContext("2d")
    if (!ctx) return

ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height)

canvas.toBlob((blob) => {
      if (blob) {
        const file = new File([blob], `capture-${Date.now()}.jpg`, { type: "image/jpeg" })
        setAttachments((prev) => [...prev, file])
      }

// Stop camera
      stopCamera()
    }, "image/jpeg")
  }

// Stop camera
  const stopCamera = () => {
    if (videoRef.current && videoRef.current.srcObject) {
      const stream = videoRef.current.srcObject as MediaStream
      const tracks = stream.getTracks()
      tracks.forEach((track) => track.stop())
      videoRef.current.srcObject = null
      setCameraActive(false)
    }
  }

// Generate hours for the select dropdown
  const hours = Array.from({ length: 24 }, (_, i) => {
    const hour = i % 12 || 12
    const ampm = i < 12 ? "AM" : "PM"
    return {
      value: i.toString(),
      label: `${hour}:00 ${ampm}`,
    }
  })

// Format date for display
  const formatDate = (date: Date) => {
    return new Date(date).toLocaleDateString("en-US", {
      weekday: "short",
      month: "short",
      day: "numeric",
    })
  }

// Format hour for display
  const formatHour = (hour: number) => {
    const h = hour % 12 || 12
    const ampm = hour < 12 ? "AM" : "PM"
    return `${h}:00 ${ampm}`
  }

// Get attachment icon based on file type
  const getAttachmentIcon = (type: string) => {
    if (type.startsWith("image/")) return <Image className="h-4 w-4" />
    if (type.startsWith("audio/")) return <FileAudio className="h-4 w-4" />
    return <FileText className="h-4 w-4" />
  }

if (!isClient) {
    return (
      <StaffLayout>
        <div>Loading...</div>
      </StaffLayout>
    )
  }

return (
    <StaffLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Hourly Logs</h1>
          <p className="text-muted-foreground">Submit detailed logs of your hourly activities</p>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Submit Hourly Log</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="hour">Hour</Label>
                <Select value={selectedHour} onValueChange={setSelectedHour}>
                  <SelectTrigger id="hour">
                    <SelectValue placeholder="Select hour" />
                  </SelectTrigger>
                  <SelectContent>
                    {hours.map((hour) => (
                      <SelectItem key={hour.value} value={hour.value}>
                        {hour.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="tasks">Tasks Performed</Label>
                <Textarea
                  id="tasks"
                  placeholder="Enter tasks performed during this hour"
                  value={tasks}
                  onChange={(e) => setTasks(e.target.value)}
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="patients">Patients Attended</Label>
                <Textarea
                  id="patients"
                  placeholder="Enter patients attended (if applicable)"
                  value={patients}
                  onChange={(e) => setPatients(e.target.value)}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="notes">Additional Notes</Label>
                <Textarea
                  id="notes"
                  placeholder="Enter any additional notes"
                  value={notes}
                  onChange={(e) => setNotes(e.target.value)}
                />
              </div>

{/* Attachments Section */}
              <div className="space-y-2">
                <Label>Attachments</Label>

{attachments.length > 0 && (
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4">
                    {attachments.map((file, index) => (
                      <div key={index} className="relative group">
                        {file.type.startsWith("image/") ? (
                          <div className="h-24 w-full overflow-hidden rounded-md border">
                            <img
                              src={URL.createObjectURL(file) || "/placeholder.svg"}
                              alt={file.name}
                              className="h-full w-full object-cover"
                            />
                          </div>
                        ) : (
                          <div className="h-24 w-full flex items-center justify-center bg-muted rounded-md border p-2">
                            <div className="flex flex-col items-center">
                              {getAttachmentIcon(file.type)}
                              <span className="mt-1 text-xs truncate max-w-full">{file.name}</span>
                            </div>
                          </div>
                        )}
                        <button
                          type="button"
                          className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
                          onClick={() => removeAttachment(index)}
                        >
                          <X className="h-3 w-3" />
                        </button>
                      </div>
                    ))}
                  </div>
                )}

<div className="flex space-x-2">
                  <Button type="button" variant="outline" onClick={startCamera}>
                    <Camera className="mr-2 h-4 w-4" />
                    Camera
                  </Button>
                  <Button type="button" variant="outline" onClick={() => fileInputRef.current?.click()}>
                    <Upload className="mr-2 h-4 w-4" />
                    Upload File
                  </Button>
                  <input
                    ref={fileInputRef}
                    type="file"
                    multiple
                    className="hidden"
                    onChange={handleFileChange}
                    accept="image/*,video/*,audio/*,application/pdf"
                  />
                </div>
              </div>

<Button type="submit" disabled={isSubmitting}>
                {isSubmitting ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Submitting...
                  </>
                ) : (
                  <>
                    <Clock className="mr-2 h-4 w-4" />
                    Submit Log
                  </>
                )}
              </Button>
            </form>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Recent Logs</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentLogs.length > 0 ? (
                recentLogs.map((log) => (
                  <div key={log.id} className="border rounded-lg p-4">
                    <div className="flex justify-between items-center mb-2">
                      <h3 className="font-medium">
                        {formatDate(log.date)} - {formatHour(log.hour)}
                      </h3>
                      <CheckCircle className="h-5 w-5 text-green-500" />
                    </div>
                    <div className="space-y-2">
                      <div>
                        <p className="text-sm font-medium">Tasks Performed</p>
                        <p className="text-sm text-muted-foreground">{log.tasks}</p>
                      </div>
                      {log.patients && (
                        <div>
                          <p className="text-sm font-medium">Patients Attended</p>
                          <p className="text-sm text-muted-foreground">{log.patients}</p>
                        </div>
                      )}
                      {log.notes && (
                        <div>
                          <p className="text-sm font-medium">Additional Notes</p>
                          <p className="text-sm text-muted-foreground">{log.notes}</p>
                        </div>
                      )}
                      {log.attachments && log.attachments.length > 0 && (
                        <div>
                          <p className="text-sm font-medium">Attachments</p>
                          <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-1">
                            {log.attachments.map((attachment, index) => (
                              <a
                                key={index}
                                href={attachment.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="block"
                              >
                                {attachment.type.startsWith("image/") ? (
                                  <div className="h-16 w-full overflow-hidden rounded-md border">
                                    <img
                                      src={attachment.url || "/placeholder.svg"}
                                      alt={attachment.name}
                                      className="h-full w-full object-cover"
                                    />
                                  </div>
                                ) : (
                                  <div className="h-16 w-full flex items-center justify-center bg-muted rounded-md border p-1">
                                    <div className="flex items-center">
                                      {getAttachmentIcon(attachment.type)}
                                      <span className="ml-1 text-xs truncate max-w-[80px]">{attachment.name}</span>
                                    </div>
                                  </div>
                                )}
                              </a>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                ))
              ) : (
                <div className="text-center py-4 text-muted-foreground">
                  No recent logs found. Submit your first hourly log above.
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Camera Modal */}
      {cameraActive && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white p-4 rounded-lg max-w-lg w-full">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-medium">Take Photo</h3>
              <Button variant="ghost" size="sm" onClick={stopCamera}>
                <X className="h-4 w-4" />
              </Button>
            </div>
            <div className="relative bg-black rounded-md overflow-hidden mb-4">
              <video ref={videoRef} autoPlay playsInline className="w-full h-64 object-cover" />
            </div>
            <div className="flex justify-end space-x-2">
              <Button variant="outline" onClick={stopCamera}>
                Cancel
              </Button>
              <Button onClick={captureImage}>Capture</Button>
            </div>
          </div>
        </div>
      )}
    </StaffLayout>
  )
}
[V0_FILE]typescriptreact:file="app/staff/messages/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { StaffLayout } from "@/components/staff-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { MessageSquare, Send, Loader2 } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"

interface Message {
  id: string
  senderId: string
  senderName: string
  recipientId: string
  recipientName: string
  subject: string
  content: string
  createdAt: Date
  isRead: boolean
  replies?: Reply[]
}

interface Reply {
  id: string
  senderId: string
  senderName: string
  content: string
  createdAt: Date
}

export default function MessagesPage() {
  const { toast } = useToast()
  const [isClient, setIsClient] = useState(false)
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [messages, setMessages] = useState<Message[]>([])
  const [selectedMessage, setSelectedMessage] = useState<Message | null>(null)
  const [replyContent, setReplyContent] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)

useEffect(() => {
    setIsClient(true)

// Load messages from localStorage
          const messagesStr = localStorage.getItem("messages")
          if (messagesStr) {
            const allMessages = JSON.parse(messagesStr)
            const userMessages = allMessages
              .filter((msg: Message) => msg.recipientId === userData.id)
              .sort((a: Message, b: Message) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())

setMessages(userMessages)
          }
        } catch (error) {
          console.error("Error loading data:", error)
        }
      }
    }
  }, [])

const handleSelectMessage = (message: Message) => {
    // Mark message as read
    if (!message.isRead) {
      const updatedMessages = messages.map((msg) => {
        if (msg.id === message.id) {
          return { ...msg, isRead: true }
        }
        return msg
      })

setMessages(updatedMessages)

// Update in localStorage
      const messagesStr = localStorage.getItem("messages")
      if (messagesStr) {
        const allMessages = JSON.parse(messagesStr)
        const updatedAllMessages = allMessages.map((msg: Message) => {
          if (msg.id === message.id) {
            return { ...msg, isRead: true }
          }
          return msg
        })

localStorage.setItem("messages", JSON.stringify(updatedAllMessages))
      }
    }

setSelectedMessage(message)
  }

const handleSendReply = () => {
    if (!selectedMessage) return

if (!replyContent.trim()) {
      toast({
        title: "Error",
        description: "Reply cannot be empty",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      // Create new reply
      const newReply: Reply = {
        id: `reply-${Date.now()}`,
        senderId: currentUser.id,
        senderName: currentUser.name,
        content: replyContent,
        createdAt: new Date(),
      }

// Update selected message
      const updatedMessage = {
        ...selectedMessage,
        replies: [...(selectedMessage.replies || []), newReply],
      }

// Update messages state
      const updatedMessages = messages.map((msg) => {
        if (msg.id === selectedMessage.id) {
          return updatedMessage
        }
        return msg
      })

setMessages(updatedMessages)
      setSelectedMessage(updatedMessage)

// Update in localStorage
      const messagesStr = localStorage.getItem("messages")
      if (messagesStr) {
        const allMessages = JSON.parse(messagesStr)
        const updatedAllMessages = allMessages.map((msg: Message) => {
          if (msg.id === selectedMessage.id) {
            return updatedMessage
          }
          return msg
        })

localStorage.setItem("messages", JSON.stringify(updatedAllMessages))
      }

// Reset reply content
      setReplyContent("")

// Message sent successfully, no notification needed
    } catch (error) {
      console.error("Error sending reply:", error)
      toast({
        title: "Error",
        description: "Failed to send reply",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

// Format date for display
  const formatDate = (date: Date) => {
    return new Date(date).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

if (!isClient) {
    return (
      <StaffLayout>
        <div>Loading...</div>
      </StaffLayout>
    )
  }

return (
    <StaffLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Messages</h1>
          <p className="text-muted-foreground">View and respond to messages from administrators</p>
        </div>

<div className="grid gap-6 md:grid-cols-3">
          <Card className="md:col-span-1">
            <CardHeader>
              <CardTitle>Inbox</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {messages.length > 0 ? (
                  messages.map((message) => (
                    <div
                      key={message.id}
                      className={`p-3 rounded-lg cursor-pointer ${
                        selectedMessage?.id === message.id ? "bg-primary text-primary-foreground" : "hover:bg-muted"
                      }`}
                      onClick={() => handleSelectMessage(message)}
                    >
                      <div className="flex justify-between items-start">
                        <div>
                          <p className={`font-medium ${!message.isRead && "font-bold"}`}>{message.subject}</p>
                          <p className="text-sm truncate">From: {message.senderName}</p>
                        </div>
                        {!message.isRead && (
                          <Badge variant="default" className="ml-2">
                            New
                          </Badge>
                        )}
                      </div>
                      <p className="text-xs mt-1">{formatDate(new Date(message.createdAt))}</p>
                    </div>
                  ))
                ) : (
                  <div className="text-center py-4 text-muted-foreground">No messages found</div>
                )}
              </div>
            </CardContent>
          </Card>

<Card className="md:col-span-2">
            <CardHeader>
              <CardTitle>{selectedMessage ? selectedMessage.subject : "Select a message to view"}</CardTitle>
            </CardHeader>
            <CardContent>
              {selectedMessage ? (
                <div className="space-y-6">
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <p className="text-sm text-muted-foreground">From: {selectedMessage.senderName}</p>
                      <p className="text-sm text-muted-foreground">{formatDate(new Date(selectedMessage.createdAt))}</p>
                    </div>
                    <div className="p-4 bg-muted rounded-lg">
                      <p>{selectedMessage.content}</p>
                    </div>
                  </div>

{selectedMessage.replies && selectedMessage.replies.length > 0 && (
                    <div className="space-y-4">
                      <h3 className="text-sm font-medium">Replies</h3>
                      {selectedMessage.replies.map((reply) => (
                        <div key={reply.id} className="space-y-2">
                          <div className="flex justify-between">
                            <p className="text-sm text-muted-foreground">
                              {reply.senderId === currentUser.id ? "You" : reply.senderName}
                            </p>
                            <p className="text-sm text-muted-foreground">{formatDate(new Date(reply.createdAt))}</p>
                          </div>
                          <div
                            className={`p-4 rounded-lg ${
                              reply.senderId === currentUser.id
                                ? "bg-primary text-primary-foreground ml-8"
                                : "bg-muted mr-8"
                            }`}
                          >
                            <p>{reply.content}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}

<div className="space-y-2">
                    <h3 className="text-sm font-medium">Reply</h3>
                    <Textarea
                      placeholder="Type your reply here..."
                      value={replyContent}
                      onChange={(e) => setReplyContent(e.target.value)}
                      rows={4}
                    />
                    <Button onClick={handleSendReply} disabled={isSubmitting}>
                      {isSubmitting ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Sending...
                        </>
                      ) : (
                        <>
                          <Send className="mr-2 h-4 w-4" />
                          Send Reply
                        </>
                      )}
                    </Button>
                  </div>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center py-12">
                  <MessageSquare className="h-12 w-12 text-muted-foreground mb-4" />
                  <p className="text-muted-foreground">Select a message from the inbox to view its contents</p>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </StaffLayout>
  )
}
[V0_FILE]typescriptreact:file="app/staff/message-admin/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { StaffLayout } from "@/components/staff-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Send, Loader2, Mic, MicOff, StopCircle } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface Message {
  id: string
  senderId: string
  senderName: string
  recipientId: string
  recipientName: string
  content: string
  createdAt: Date
  isRead: boolean
  attachments?: Attachment[]
}

interface Attachment {
  name: string
  type: string
  url: string
  size?: number
}

export default function MessageAdminPage() {
  const { toast } = useToast()
  const [isClient, setIsClient] = useState(false)
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [content, setContent] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [messages, setMessages] = useState<Message[]>([])
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const [isLoading, setIsLoading] = useState(true)

// Voice recording states
  const [isRecording, setIsRecording] = useState(false)
  const [recordingTime, setRecordingTime] = useState(0)
  const [audioBlob, setAudioBlob] = useState<Blob | null>(null)
  const [audioURL, setAudioURL] = useState<string | null>(null)
  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
  const audioChunksRef = useRef<Blob[]>([])
  const timerRef = useRef<NodeJS.Timeout | null>(null)

// Auto-scroll to bottom of messages
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    setIsClient(true)

// Load messages for this user
          loadMessages(userData.id)
        } catch (error) {
          console.error("Error parsing user data:", error)
        }
      }
    }

// Set up interval to check for new messages every 5 seconds
    const interval = setInterval(() => {
      if (currentUser?.id) {
        loadMessages(currentUser.id)
      }
    }, 5000)

return () => {
      clearInterval(interval)
      // Clean up voice recording
      if (timerRef.current) {
        clearInterval(timerRef.current)
      }
      if (audioURL) {
        URL.revokeObjectURL(audioURL)
      }
    }
  }, [])

// Scroll to bottom whenever messages change
  useEffect(() => {
    scrollToBottom()
  }, [messages])

const loadMessages = (userId: string) => {
    try {
      setIsLoading(true)
      // Get all messages from localStorage
      const messagesStr = localStorage.getItem("messages")
      if (messagesStr) {
        const allMessages = JSON.parse(messagesStr)

// Filter messages between this user and admin
        const userMessages = allMessages
          .filter(
            (msg: any) =>
              (msg.senderId === userId && msg.recipientId === "admin") ||
              (msg.senderId === "admin" && msg.recipientId === userId),
          )
          .sort((a: any, b: any) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())

setMessages(userMessages)
      }
    } catch (error) {
      console.error("Error loading messages:", error)
    } finally {
      setIsLoading(false)
    }
  }

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

if (!content.trim() && !audioBlob) {
      toast({
        title: "Error",
        description: "Message cannot be empty",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      // Create new message
      const newMessage: Message = {
        id: `msg-${Date.now()}`,
        senderId: currentUser.id,
        senderName: currentUser.name,
        recipientId: "admin",
        recipientName: "Administrator",
        content: content || "Voice message",
        createdAt: new Date(),
        isRead: false,
      }

// Add audio attachment if available
      if (audioBlob) {
        const audioAttachment: Attachment = {
          name: `voice-message-${Date.now()}.webm`,
          type: audioBlob.type,
          url: URL.createObjectURL(audioBlob),
          size: audioBlob.size,
        }
        newMessage.attachments = [audioAttachment]
      }

// Save to localStorage
      const messagesStr = localStorage.getItem("messages")
      let messages: Message[] = []

if (messagesStr) {
        messages = JSON.parse(messagesStr)
      }

messages.push(newMessage)
      localStorage.setItem("messages", JSON.stringify(messages))

// Update local state
      setMessages((prev) => [...prev, newMessage])

// Reset form
      setContent("")
      setAudioBlob(null)
      if (audioURL) {
        URL.revokeObjectURL(audioURL)
        setAudioURL(null)
      }

// Message sent to administrator, no notification needed
    } catch (error) {
      console.error("Error sending message:", error)
      toast({
        title: "Error",
        description: "Failed to send message",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

// Start voice recording
  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })

// Reset recording state
      audioChunksRef.current = []
      setRecordingTime(0)

// Create media recorder
      const mediaRecorder = new MediaRecorder(stream)
      mediaRecorderRef.current = mediaRecorder

// Set up event handlers
      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          audioChunksRef.current.push(event.data)
        }
      }

mediaRecorder.onstop = () => {
        const audioBlob = new Blob(audioChunksRef.current, { type: "audio/webm" })
        const audioUrl = URL.createObjectURL(audioBlob)
        setAudioBlob(audioBlob)
        setAudioURL(audioUrl)
        setIsRecording(false)

// Stop all tracks
        stream.getTracks().forEach((track) => track.stop())

if (timerRef.current) {
          clearInterval(timerRef.current)
        }
      }

// Start recording
      mediaRecorder.start()
      setIsRecording(true)

// Start timer
      timerRef.current = setInterval(() => {
        setRecordingTime((prev) => prev + 1)
      }, 1000)
    } catch (error) {
      console.error("Error starting recording:", error)
      toast({
        title: "Error",
        description: "Could not access microphone. Please check permissions.",
        variant: "destructive",
      })
    }
  }

// Stop voice recording
  const stopRecording = () => {
    if (mediaRecorderRef.current && isRecording) {
      mediaRecorderRef.current.stop()
    }
  }

// Cancel voice recording
  const cancelRecording = () => {
    if (mediaRecorderRef.current && isRecording) {
      mediaRecorderRef.current.stop()
      setAudioBlob(null)
      if (audioURL) {
        URL.revokeObjectURL(audioURL)
        setAudioURL(null)
      }
    }
  }

// Format recording time
  const formatRecordingTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = seconds % 60
    return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
  }

// Format date for display
  const formatMessageTime = (date: Date) => {
    const messageDate = new Date(date)
    const now = new Date()

// If today, show time only
    if (messageDate.toDateString() === now.toDateString()) {
      return messageDate.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
    }

// If within the last week, show day and time
    const oneWeekAgo = new Date(now)
    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7)
    if (messageDate > oneWeekAgo) {
      return `${messageDate.toLocaleDateString([], { weekday: "short" })} ${messageDate.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`
    }

// Otherwise show full date
    return messageDate.toLocaleString()
  }

if (!isClient) {
    return (
      <StaffLayout>
        <div>Loading...</div>
      </StaffLayout>
    )
  }

return (
    <StaffLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Chat with Administrator</h1>
          <p className="text-muted-foreground">Send messages to the system administrator in real-time</p>
        </div>

<Card className="h-[70vh] flex flex-col">
          <CardHeader>
            <CardTitle>Chat</CardTitle>
          </CardHeader>
          <CardContent className="flex-1 flex flex-col">
            <div className="flex-1 overflow-y-auto mb-4 space-y-4">
              {isLoading ? (
                <div className="flex justify-center items-center h-full">
                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
                </div>
              ) : messages.length > 0 ? (
                <div className="space-y-4">
                  {messages.map((message) => (
                    <div
                      key={message.id}
                      className={`flex ${message.senderId === currentUser.id ? "justify-end" : "justify-start"}`}
                    >
                      <div className="flex items-start max-w-[80%]">
                        {message.senderId !== currentUser.id && (
                          <Avatar className="h-8 w-8 mr-2">
                            <AvatarFallback>A</AvatarFallback>
                          </Avatar>
                        )}
                        <div>
                          <div
                            className={`rounded-lg p-3 ${
                              message.senderId === currentUser.id ? "bg-primary text-primary-foreground" : "bg-muted"
                            }`}
                          >
                            <p>{message.content}</p>
                            {message.attachments &&
                              message.attachments.length > 0 &&
                              message.attachments[0].type.startsWith("audio/") && (
                                <audio controls className="mt-2 max-w-full">
                                  <source src={message.attachments[0].url} type={message.attachments[0].type} />
                                  Your browser does not support the audio element.
                                </audio>
                              )}
                          </div>
                          <p className="text-xs text-muted-foreground mt-1">{formatMessageTime(message.createdAt)}</p>
                        </div>
                        {message.senderId === currentUser.id && (
                          <Avatar className="h-8 w-8 ml-2">
                            <AvatarFallback>{currentUser.name?.[0] || "U"}</AvatarFallback>
                          </Avatar>
                        )}
                      </div>
                    </div>
                  ))}
                  <div ref={messagesEndRef} />
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
                  <p>No messages yet. Start a conversation with the administrator.</p>
                </div>
              )}
            </div>

<form onSubmit={handleSubmit} className="flex flex-col gap-2">
              {audioURL && (
                <div className="p-2 bg-muted rounded-md">
                  <audio controls className="w-full">
                    <source src={audioURL} type="audio/webm" />
                    Your browser does not support the audio element.
                  </audio>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="mt-1"
                    onClick={() => {
                      setAudioBlob(null)
                      URL.revokeObjectURL(audioURL)
                      setAudioURL(null)
                    }}
                  >
                    Cancel
                  </Button>
                </div>
              )}

{isRecording && (
                <div className="p-2 bg-red-50 text-red-700 rounded-md flex items-center justify-between">
                  <div className="flex items-center">
                    <div className="w-3 h-3 rounded-full bg-red-600 animate-pulse mr-2"></div>
                    <span>Recording... {formatRecordingTime(recordingTime)}</span>
                  </div>
                  <div className="flex gap-2">
                    <Button type="button" variant="ghost" size="sm" onClick={cancelRecording}>
                      <MicOff className="h-4 w-4 mr-1" />
                      Cancel
                    </Button>
                    <Button type="button" variant="ghost" size="sm" onClick={stopRecording}>
                      <StopCircle className="h-4 w-4 mr-1" />
                      Stop
                    </Button>
                  </div>
                </div>
              )}

<div className="flex items-center gap-2">
                <Input
                  placeholder="Type your message here..."
                  value={content}
                  onChange={(e) => setContent(e.target.value)}
                  className="flex-1"
                  disabled={isRecording}
                />
                {!isRecording && !audioURL && (
                  <Button type="button" variant="outline" onClick={startRecording} disabled={isSubmitting}>
                    <Mic className="h-4 w-4" />
                  </Button>
                )}
                <Button type="submit" disabled={isSubmitting || isRecording}>
                  {isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </StaffLayout>
  )
}
[V0_FILE]typescriptreact:file="app/staff/schedule/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { StaffLayout } from "@/components/staff-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { CalendarIcon, Clock, MapPin, Users, Loader2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export default function SchedulePage() {
  const { toast } = useToast()
  const [isClient, setIsClient] = useState(false)
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [date, setDate] = useState<Date | undefined>(new Date())
  const [shifts, setShifts] = useState<any[]>([])
  const [selectedShift, setSelectedShift] = useState<any | null>(null)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    setIsClient(true)

// Load shifts data
    loadShifts()
  }, [])

// Load shifts for the selected date
  useEffect(() => {
    if (date && isClient) {
      loadShifts(date)
    }
  }, [date, isClient])

// Load shifts from localStorage
  const loadShifts = (selectedDate = new Date()) => {
    setIsLoading(true)
    try {
      // Get shifts from localStorage
      const storedShifts = localStorage.getItem("shifts")
      if (storedShifts) {
        const allShifts = JSON.parse(storedShifts)

// Filter shifts for the selected date
        const year = selectedDate.getFullYear()
        const month = selectedDate.getMonth()
        const day = selectedDate.getDate()

// Filter shifts for the current date and optional shifts
        const filteredShifts = allShifts.filter((shift: any) => {
          const shiftDate = new Date(shift.date)
          return (
            shiftDate.getFullYear() === year &&
            shiftDate.getMonth() === month &&
            shiftDate.getDate() === day &&
            (shift.status === "open" ||
              shift.status === "optional" ||
              (shift.assignedStaff && shift.assignedStaff.includes(currentUser?.id)))
          )
        })

setShifts(filteredShifts)
      } else {
        setShifts([])
      }
    } catch (error) {
      console.error("Error loading shifts:", error)
      toast({
        title: "Error",
        description: "Failed to load shifts. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleSelectShift = (shift: any) => {
    setSelectedShift(shift)
  }

// Handle accepting a shift
  const handleAcceptShift = (shift: any) => {
    if (!currentUser) {
      toast({
        title: "Error",
        description: "You must be logged in to accept shifts.",
        variant: "destructive",
      })
      return
    }

try {
      // Get shifts from localStorage
      const storedShifts = localStorage.getItem("shifts")
      if (storedShifts) {
        const allShifts = JSON.parse(storedShifts)

// Find the shift to update
        const updatedShifts = allShifts.map((s: any) => {
          if (s.id === shift.id) {
            // Add current user to assigned staff
            const assignedStaff = s.assignedStaff || []
            if (!assignedStaff.includes(currentUser.id)) {
              assignedStaff.push(currentUser.id)
            }

// Update staff assigned count and status
            const staffAssigned = assignedStaff.length
            const status = staffAssigned >= s.staffNeeded ? "filled" : "understaffed"

return {
              ...s,
              assignedStaff,
              staffAssigned,
              status,
            }
          }
          return s
        })

// Save updated shifts to localStorage
        localStorage.setItem("shifts", JSON.stringify(updatedShifts))

// Update local state
        loadShifts(date)

// Shift accepted successfully, no notification needed
      }
    } catch (error) {
      console.error("Error accepting shift:", error)
      toast({
        title: "Error",
        description: "Failed to accept shift. Please try again.",
        variant: "destructive",
      })
    }
  }

// Format date for display
  const formatDate = (date: Date) => {
    return date.toLocaleDateString("en-US", {
      weekday: "long",
      month: "long",
      day: "numeric",
    })
  }

// Check if user is assigned to a shift
  const isUserAssigned = (shift: any) => {
    return shift.assignedStaff && shift.assignedStaff.includes(currentUser?.id)
  }

if (!isClient) {
    return (
      <StaffLayout>
        <div>Loading...</div>
      </StaffLayout>
    )
  }

return (
    <StaffLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Schedule</h1>
          <p className="text-muted-foreground">View your upcoming shifts and schedule</p>
        </div>

<div className="grid gap-6 md:grid-cols-3">
          <Card className="md:col-span-1">
            <CardHeader>
              <CardTitle>Calendar</CardTitle>
            </CardHeader>
            <CardContent>
              <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
            </CardContent>
          </Card>

<Card className="md:col-span-2">
            <CardHeader>
              <CardTitle>Shifts for {date ? formatDate(date) : "Selected Date"}</CardTitle>
            </CardHeader>
            <CardContent>
              {isLoading ? (
                <div className="flex justify-center items-center py-12">
                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
                </div>
              ) : shifts.length > 0 ? (
                <div className="space-y-4">
                  {shifts.map((shift) => (
                    <div
                      key={shift.id}
                      className={`p-4 border rounded-lg cursor-pointer ${
                        selectedShift?.id === shift.id ? "border-primary" : ""
                      }`}
                      onClick={() => handleSelectShift(shift)}
                    >
                      <div className="flex justify-between items-start">
                        <div>
                          <div className="flex items-center">
                            <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
                            <p className="font-medium">
                              {shift.startTime} - {shift.endTime}
                            </p>
                          </div>
                          <div className="flex items-center mt-1">
                            <MapPin className="h-4 w-4 mr-2 text-muted-foreground" />
                            <p className="text-sm">{shift.location}</p>
                          </div>
                        </div>
                        <Badge
                          variant={
                            isUserAssigned(shift) ? "default" : shift.status === "optional" ? "outline" : "secondary"
                          }
                        >
                          {isUserAssigned(shift) ? "Assigned" : shift.status === "optional" ? "Optional" : "Available"}
                        </Badge>
                      </div>

{selectedShift?.id === shift.id && (
                        <div className="mt-4 pt-4 border-t">
                          <div className="space-y-2">
                            <p className="text-sm font-medium">Department</p>
                            <p className="text-sm">{shift.department}</p>
                          </div>

<div className="space-y-2 mt-4">
                            <div className="flex items-center">
                              <Users className="h-4 w-4 mr-2 text-muted-foreground" />
                              <p className="text-sm font-medium">Staff Needed: {shift.staffNeeded}</p>
                            </div>
                            <p className="text-sm">Currently Assigned: {shift.staffAssigned || 0}</p>
                          </div>

{!isUserAssigned(shift) && (
                            <div className="mt-4">
                              <Button
                                variant="default"
                                className="w-full"
                                onClick={(e) => {
                                  e.stopPropagation()
                                  handleAcceptShift(shift)
                                }}
                              >
                                Accept Shift
                              </Button>
                            </div>
                          )}

{isUserAssigned(shift) && (
                            <div className="mt-4 p-2 bg-green-50 text-green-700 rounded-md">
                              <p className="text-sm font-medium">You are assigned to this shift</p>
                            </div>
                          )}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center py-12">
                  <CalendarIcon className="h-12 w-12 text-muted-foreground mb-4" />
                  <p className="text-muted-foreground">No shifts scheduled for this date</p>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </StaffLayout>
  )
}
[V0_FILE]typescriptreact:file="components/staff-notifications.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Bell, X, Smartphone } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  getStaffNotifications,
  markNotificationAsRead,
  markAllNotificationsAsRead,
  getUnreadNotificationCount,
  registerForAPNS,
} from "@/lib/notification-service"
import { useToast } from "@/hooks/use-toast"

interface StaffNotification {
  id: string
  staffId: string
  title: string
  message: string
  type: "shift" | "task" | "announcement" | "alert"
  sentAt: Date
  isRead: boolean
  priority: "low" | "medium" | "high"
}

export function StaffNotifications() {
  const { toast } = useToast()
  const [notifications, setNotifications] = useState<StaffNotification[]>([])
  const [showNotifications, setShowNotifications] = useState(false)
  const [unreadCount, setUnreadCount] = useState(0)
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [isIOS, setIsIOS] = useState(false)
  const [isRegisteredForNotifications, setIsRegisteredForNotifications] = useState(false)

useEffect(() => {
    // Detect iOS
    const detectIOS = () => {
      const userAgent = window.navigator.userAgent.toLowerCase()
      return /iphone|ipad|ipod/.test(userAgent)
    }

setIsIOS(detectIOS())

// Get current user
    const userStr = sessionStorage.getItem("currentUser")
    if (userStr) {
      try {
        const userData = JSON.parse(userStr)
        setCurrentUser(userData)

// Load notifications for this staff member
        if (userData.id) {
          loadNotifications(userData.id)
        }
      } catch (error) {
        console.error("Error parsing user data:", error)
      }
    }

// Set up interval to check for new notifications every 30 seconds
    const interval = setInterval(() => {
      if (currentUser?.id) {
        loadNotifications(currentUser.id)
      }
    }, 30000)

return () => clearInterval(interval)
  }, [])

// Register for iOS notifications
  useEffect(() => {
    if (isIOS && currentUser?.id && !isRegisteredForNotifications) {
      // Register for APNS (simulated)
      const registered = registerForAPNS()

if (registered) {
        setIsRegisteredForNotifications(true)
        // Notifications enabled, no popup needed
      }
    }
  }, [isIOS, currentUser, isRegisteredForNotifications, toast])

const loadNotifications = (staffId: string) => {
    // Get notifications for this staff member
    const staffNotifications = getStaffNotifications(staffId)

// Update state
    setNotifications(staffNotifications)

// Count unread notifications
    const unreadCount = getUnreadNotificationCount(staffId)
    setUnreadCount(unreadCount)
  }

const handleMarkAsRead = (notificationId: string) => {
    if (!currentUser?.id) return

// Mark notification as read
    markNotificationAsRead(notificationId, currentUser.id)

// Update local state
    setNotifications(notifications.map((n) => (n.id === notificationId ? { ...n, isRead: true } : n)))

// Update unread count
    setUnreadCount((prev) => Math.max(0, prev - 1))
  }

const handleMarkAllAsRead = () => {
    if (!currentUser?.id) return

// Mark all notifications as read
    markAllNotificationsAsRead(currentUser.id)

// Update local state
    setNotifications(notifications.map((n) => ({ ...n, isRead: true })))
    setUnreadCount(0)
  }

const toggleNotifications = () => {
    setShowNotifications(!showNotifications)
  }

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

const getTypeIcon = (type: string) => {
    switch (type) {
      case "shift":
        return "🗓️"
      case "task":
        return "✅"
      case "announcement":
        return "📢"
      case "alert":
        return "⚠️"
      default:
        return "📌"
    }
  }

// Format date for display
  const formatDate = (date: Date) => {
    const now = new Date()
    const notifDate = new Date(date)

// If today, show time
    if (notifDate.toDateString() === now.toDateString()) {
      return `Today at ${notifDate.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`
    }

// If yesterday, show "Yesterday"
    const yesterday = new Date(now)
    yesterday.setDate(yesterday.getDate() - 1)
    if (notifDate.toDateString() === yesterday.toDateString()) {
      return `Yesterday at ${notifDate.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`
    }

// Otherwise show date
    return notifDate.toLocaleDateString()
  }

if (!currentUser) return null

return (
    <div className="relative">
      <Button variant="ghost" size="icon" className="relative" onClick={toggleNotifications} aria-label="Notifications">
        <Bell className="h-5 w-5" />
        {unreadCount > 0 && (
          <span className="absolute top-0 right-0 h-4 w-4 rounded-full bg-red-500 text-white text-[10px] flex items-center justify-center">
            {unreadCount}
          </span>
        )}
      </Button>

{showNotifications && (
        <Card className="absolute right-0 mt-2 w-80 sm:w-96 z-50 shadow-lg">
          <CardHeader className="pb-2 flex flex-row items-center justify-between">
            <CardTitle className="text-sm font-medium">Notifications</CardTitle>
            <div className="flex items-center gap-2">
              {unreadCount > 0 && (
                <Button variant="ghost" size="sm" onClick={handleMarkAllAsRead}>
                  Mark all as read
                </Button>
              )}
              <Button variant="ghost" size="icon" onClick={toggleNotifications}>
                <X className="h-4 w-4" />
              </Button>
            </div>
          </CardHeader>
          <CardContent className="max-h-[400px] overflow-y-auto">
            {isIOS && (
              <div className="mb-3 p-2 bg-blue-50 text-blue-800 rounded-md text-xs">
                <div className="flex items-center mb-1">
                  <Smartphone className="h-3 w-3 mr-1" />
                  <span className="font-medium">iOS Device Detected</span>
                </div>
                <p>
                  You'll receive important notifications via SMS and email since push notifications aren't fully
                  supported in Chrome on iOS.
                </p>
              </div>
            )}

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"

interface FacialRecognitionProps {
  onSuccess: () => void
}

export function FacialRecognition({ onSuccess }: FacialRecognitionProps) {
  const videoRef = useRef<HTMLVideoElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [capturedImage, setCapturedImage] = useState<string | null>(null)
  const [status, setStatus] = useState<"waiting" | "capturing" | "verifying" | "success" | "error">("waiting")
  const [errorMessage, setErrorMessage] = useState("")

useEffect(() => {
    if (status === "capturing") {
      startCamera()
    }
    return () => {
      stopCamera()
    }
  }, [status])

const startCamera = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true })
      if (videoRef.current) {
        videoRef.current.srcObject = stream
      }
    } catch (err) {
      console.error("Error accessing camera:", err)
      setStatus("error")
      setErrorMessage("Could not access camera. Please ensure camera permissions are granted.")
    }
  }

const stopCamera = () => {
    if (videoRef.current && videoRef.current.srcObject) {
      const stream = videoRef.current.srcObject as MediaStream
      const tracks = stream.getTracks()
      tracks.forEach((track) => track.stop())
      videoRef.current.srcObject = null
    }
  }

const captureImage = () => {
    if (videoRef.current && canvasRef.current) {
      const video = videoRef.current
      const canvas = canvasRef.current
      const context = canvas.getContext("2d")

if (context) {
        canvas.width = video.videoWidth
        canvas.height = video.videoHeight
        context.drawImage(video, 0, 0, canvas.width, canvas.height)

const imageDataUrl = canvas.toDataURL("image/png")
        setCapturedImage(imageDataUrl)
        stopCamera()
        setStatus("verifying")

// Simulate verification process
        setTimeout(() => {
          setStatus("success")
          setTimeout(() => {
            onSuccess()
          }, 1000)
        }, 2000)
      }
    }
  }

return (
    <div className="space-y-4">
      <h3 className="text-lg font-medium text-center">Facial Verification</h3>

{status === "waiting" && (
        <div className="text-center">
          <p className="mb-4">We need to verify your identity with facial recognition.</p>
          <Button onClick={() => setStatus("capturing")}>Start Camera</Button>
        </div>
      )}

{status === "capturing" && (
        <div className="space-y-4">
          <div className="relative overflow-hidden rounded-lg bg-black">
            <video ref={videoRef} autoPlay playsInline className="w-full h-auto" />
          </div>
          <div className="text-center">
            <p className="mb-2">Position your face in the frame</p>
            <Button onClick={captureImage}>Capture</Button>
          </div>
        </div>
      )}

{(status === "verifying" || status === "success") && (
        <div className="space-y-4">
          {capturedImage && (
            <div className="relative overflow-hidden rounded-lg">
              <img src={capturedImage || "/placeholder.svg"} alt="Captured face" className="w-full h-auto" />
            </div>
          )}
          <div className="text-center">
            {status === "verifying" && <p>Verifying your identity...</p>}
            {status === "success" && <p className="text-green-600">Verification successful!</p>}
          </div>
        </div>
      )}

{status === "error" && (
        <div className="text-center">
          <p className="text-destructive mb-4">{errorMessage}</p>
          <Button onClick={() => setStatus("capturing")}>Try Again</Button>
        </div>
      )}

<canvas ref={canvasRef} className="hidden" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/logs/loading.tsx" isFixed="true" isMerged="true" isEdit="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/staff/loading.tsx" isFixed="true" isMerged="true" isEdit="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/communications/loading.tsx" isFixed="true" isMerged="true" isEdit="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isQuickEdit="true" isMerged="true" isEdit="true"
// Create a new settings page for admin
"use client"

export default function SettingsPage() {
  const { toast } = useToast()
  const [companyName, setCompanyName] = useState("Healthcare Staff Management")
  const [adminEmail, setAdminEmail] = useState("admin@example.com")
  const [notificationsEnabled, setNotificationsEnabled] = useState(true)
  const [locationTrackingEnabled, setLocationTrackingEnabled] = useState(true)
  const [facialRecognitionEnabled, setFacialRecognitionEnabled] = useState(true)

const handleSaveGeneral = () => {
    toast({
      title: "Settings Saved",
      description: "General settings have been updated successfully.",
    })
  }

const handleSaveNotifications = () => {
    toast({
      title: "Notification Settings Saved",
      description: "Notification settings have been updated successfully.",
    })
  }

const handleSaveSecurity = () => {
    toast({
      title: "Security Settings Saved",
      description: "Security settings have been updated successfully.",
    })
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
          <p className="text-muted-foreground">Manage system settings and configurations.</p>
        </div>

<Tabs defaultValue="general" className="space-y-4">
          <TabsList>
            <TabsTrigger value="general">General</TabsTrigger>
            <TabsTrigger value="notifications">Notifications</TabsTrigger>
            <TabsTrigger value="security">Security</TabsTrigger>
          </TabsList>

<TabsContent value="general">
            <Card>
              <CardHeader>
                <CardTitle>General Settings</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="company-name">Company Name</Label>
                  <Input id="company-name" value={companyName} onChange={(e) => setCompanyName(e.target.value)} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="admin-email">Admin Email</Label>
                  <Input
                    id="admin-email"
                    type="email"
                    value={adminEmail}
                    onChange={(e) => setAdminEmail(e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="timezone">Timezone</Label>
                  <select
                    id="timezone"
                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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"
                  >
                    <option value="UTC">UTC</option>
                    <option value="EST" selected>
                      Eastern Time (EST)
                    </option>
                    <option value="CST">Central Time (CST)</option>
                    <option value="MST">Mountain Time (MST)</option>
                    <option value="PST">Pacific Time (PST)</option>
                  </select>
                </div>
                <Button onClick={handleSaveGeneral}>Save Changes</Button>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="notifications">
            <Card>
              <CardHeader>
                <CardTitle>Notification Settings</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="notifications">Email Notifications</Label>
                    <p className="text-sm text-muted-foreground">Receive email notifications for important events</p>
                  </div>
                  <Switch id="notifications" checked={notificationsEnabled} onCheckedChange={setNotificationsEnabled} />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="sms">SMS Notifications</Label>
                    <p className="text-sm text-muted-foreground">Receive SMS notifications for urgent matters</p>
                  </div>
                  <Switch id="sms" checked={true} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="notification-email">Notification Email</Label>
                  <Input id="notification-email" type="email" defaultValue="notifications@example.com" />
                </div>
                <Button onClick={handleSaveNotifications}>Save Changes</Button>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="security">
            <Card>
              <CardHeader>
                <CardTitle>Security Settings</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="location">Location Tracking</Label>
                    <p className="text-sm text-muted-foreground">Enable location tracking for staff check-ins</p>
                  </div>
                  <Switch
                    id="location"
                    checked={locationTrackingEnabled}
                    onCheckedChange={setLocationTrackingEnabled}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="facial">Facial Recognition</Label>
                    <p className="text-sm text-muted-foreground">Require facial recognition for authentication</p>
                  </div>
                  <Switch
                    id="facial"
                    checked={facialRecognitionEnabled}
                    onCheckedChange={setFacialRecognitionEnabled}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="session-timeout">Session Timeout (minutes)</Label>
                  <Input id="session-timeout" type="number" defaultValue="30" min="5" max="120" />
                </div>
                <Button onClick={handleSaveSecurity}>Save Changes</Button>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/leave-requests/page.tsx" isMerged="true" isEdit="true"
"use client"

interface LeaveRequest {
  id: string
  staffName: string
  staffId: string
  leaveType: string
  startDate: string
  endDate: string
  reason: string
  status: "pending" | "approved" | "rejected"
  submittedAt: string
}

export default function LeaveRequestsPage() {
  const { toast } = useToast()
  const [leaveRequests, setLeaveRequests] = useState<LeaveRequest[]>([])
  const [selectedRequest, setSelectedRequest] = useState<LeaveRequest | null>(null)
  const [detailsOpen, setDetailsOpen] = useState(false)

// Load leave requests from localStorage on component mount
  useEffect(() => {
    const storedRequests = localStorage.getItem("adminLeaveRequests")
    if (storedRequests) {
      const parsedRequests = JSON.parse(storedRequests)
      setLeaveRequests(parsedRequests)
    }
  }, [])

// Mock data for leave requests (as fallback)
  const defaultLeaveRequests: LeaveRequest[] = [
    {
      id: "1",
      staffName: "Sarah Johnson",
      staffId: "1",
      leaveType: "sick",
      startDate: "2025-04-01",
      endDate: "2025-04-02",
      reason: "I have a doctor's appointment and need to rest afterward.",
      status: "pending",
      submittedAt: "2025-03-27T10:30:00Z",
    },
    {
      id: "2",
      staffName: "Michael Chen",
      staffId: "2",
      leaveType: "vacation",
      startDate: "2025-04-10",
      endDate: "2025-04-17",
      reason: "Annual family vacation.",
      status: "approved",
      submittedAt: "2025-03-20T14:15:00Z",
    },
    {
      id: "3",
      staffName: "Emily Rodriguez",
      staffId: "3",
      leaveType: "personal",
      startDate: "2025-04-05",
      endDate: "2025-04-05",
      reason: "Personal matter to attend to.",
      status: "rejected",
      submittedAt: "2025-03-25T09:45:00Z",
    },
  ]

// Use the loaded requests or fallback to default if none are found
  const allRequests = leaveRequests.length > 0 ? leaveRequests : defaultLeaveRequests

const handleViewDetails = (request: LeaveRequest) => {
    setSelectedRequest(request)
    setDetailsOpen(true)
  }

const handleApproveRequest = () => {
    if (!selectedRequest) return

// Update the request status
    const updatedRequests = allRequests.map((req) =>
      req.id === selectedRequest.id ? { ...req, status: "approved" as const } : req,
    )

setLeaveRequests(updatedRequests)
    localStorage.setItem("adminLeaveRequests", JSON.stringify(updatedRequests))

toast({
      title: "Leave Request Approved",
      description: `Leave request for ${selectedRequest.staffName} has been approved.`,
    })

setDetailsOpen(false)
  }

const handleRejectRequest = () => {
    if (!selectedRequest) return

// Update the request status
    const updatedRequests = allRequests.map((req) =>
      req.id === selectedRequest.id ? { ...req, status: "rejected" as const } : req,
    )

setLeaveRequests(updatedRequests)
    localStorage.setItem("adminLeaveRequests", JSON.stringify(updatedRequests))

toast({
      title: "Leave Request Rejected",
      description: `Leave request for ${selectedRequest.staffName} has been rejected.`,
    })

setDetailsOpen(false)
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "pending":
        return <Badge variant="outline">Pending</Badge>
      case "approved":
        return <Badge className="bg-green-500">Approved</Badge>
      case "rejected":
        return <Badge variant="destructive">Rejected</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      weekday: "short",
      month: "short",
      day: "numeric",
      year: "numeric",
    })
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Leave Requests</h1>
          <p className="text-muted-foreground">Manage and respond to staff leave requests.</p>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Pending Requests</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Staff</TableHead>
                  <TableHead>Type</TableHead>
                  <TableHead>Dates</TableHead>
                  <TableHead>Submitted</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {allRequests.filter((req) => req.status === "pending").length > 0 ? (
                  allRequests
                    .filter((req) => req.status === "pending")
                    .map((request) => (
                      <TableRow key={request.id}>
                        <TableCell className="font-medium">{request.staffName}</TableCell>
                        <TableCell className="capitalize">{request.leaveType}</TableCell>
                        <TableCell>
                          {formatDate(request.startDate)}
                          {request.startDate !== request.endDate && ` - ${formatDate(request.endDate)}`}
                        </TableCell>
                        <TableCell>{new Date(request.submittedAt).toLocaleDateString()}</TableCell>
                        <TableCell>{getStatusBadge(request.status)}</TableCell>
                        <TableCell className="text-right">
                          <Button variant="ghost" size="sm" onClick={() => handleViewDetails(request)}>
                            Review
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))
                ) : (
                  <TableRow>
                    <TableCell colSpan={6} className="text-center py-4">
                      No pending leave requests.
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>All Leave Requests</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Staff</TableHead>
                  <TableHead>Type</TableHead>
                  <TableHead>Dates</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {allRequests.length > 0 ? (
                  allRequests.map((request) => (
                    <TableRow key={request.id}>
                      <TableCell className="font-medium">{request.staffName}</TableCell>
                      <TableCell className="capitalize">{request.leaveType}</TableCell>
                      <TableCell>
                        {formatDate(request.startDate)}
                        {request.startDate !== request.endDate && ` - ${formatDate(request.endDate)}`}
                      </TableCell>
                      <TableCell>{getStatusBadge(request.status)}</TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm" onClick={() => handleViewDetails(request)}>
                          Details
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center py-4">
                      No leave requests found.
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>

{/* Leave Request Details Dialog */}
      <Dialog open={detailsOpen} onOpenChange={setDetailsOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Leave Request Details</DialogTitle>
            <DialogDescription>Review the leave request details and take action.</DialogDescription>
          </DialogHeader>
          {selectedRequest && (
            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
                  <User className="h-6 w-6 text-primary" />
                </div>
                <div>
                  <h3 className="font-medium">{selectedRequest.staffName}</h3>
                  <p className="text-sm text-muted-foreground capitalize">{selectedRequest.leaveType} Leave</p>
                </div>
                <div className="ml-auto">{getStatusBadge(selectedRequest.status)}</div>
              </div>

<div className="space-y-1">
                <div className="text-sm text-muted-foreground">Date(s)</div>
                <div className="flex items-center">
                  <Calendar className="h-4 w-4 mr-2 text-muted-foreground" />
                  <span>
                    {formatDate(selectedRequest.startDate)}
                    {selectedRequest.startDate !== selectedRequest.endDate &&
                      ` - ${formatDate(selectedRequest.endDate)}`}
                  </span>
                </div>
              </div>

<div className="space-y-1">
                <div className="text-sm text-muted-foreground">Submitted</div>
                <div className="flex items-center">
                  <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
                  <span>{new Date(selectedRequest.submittedAt).toLocaleString()}</span>
                </div>
              </div>

<div className="space-y-1">
                <div className="text-sm text-muted-foreground">Reason</div>
                <div className="p-3 bg-muted rounded-md">{selectedRequest.reason}</div>
              </div>

{selectedRequest.status === "pending" ? (
                <div className="flex justify-end space-x-2 pt-4">
                  <Button variant="outline" onClick={handleRejectRequest}>
                    Reject
                  </Button>
                  <Button onClick={handleApproveRequest}>Approve</Button>
                </div>
              ) : (
                <div className="flex justify-end pt-4">
                  <Button variant="outline" onClick={() => setDetailsOpen(false)}>
                    Close
                  </Button>
                </div>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/messages/loading.tsx" isFixed="true" isMerged="true" isEdit="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/api/task-updates/route.ts" isMerged="true" isEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { v4 as uuidv4 } from "uuid"

// This would connect to your database in a real implementation
const taskUpdates = []

export async function POST(request: NextRequest) {
  try {
    // In a real implementation, we would verify the user is authenticated
    const formData = await request.formData()

const taskId = formData.get("taskId") as string
    const message = formData.get("message") as string
    const staffId = formData.get("staffId") as string

if (!taskId || !message || !staffId) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

// Handle file uploads (images, videos, etc.)
    const files = []
    const fileData = formData.getAll("files") as File[]

for (const file of fileData) {
      // In a real implementation, we would upload this to cloud storage
      const fileId = uuidv4()
      files.push({
        id: fileId,
        name: file.name,
        type: file.type,
        size: file.size,
        // This would be a real URL in production
        url: `/api/files/${fileId}`,
      })
    }

// Create the update record
    const update = {
      id: uuidv4(),
      taskId,
      staffId,
      message,
      files,
      timestamp: new Date().toISOString(),
    }

// In a real implementation, we would save this to the database
    taskUpdates.push(update)

return NextResponse.json({
      success: true,
      update,
    })
  } catch (error) {
    console.error("Error creating task update:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function GET(request: NextRequest) {
  try {
    // In a real implementation, we would verify the user is authenticated

// Parse query parameters
    const url = new URL(request.url)
    const taskId = url.searchParams.get("taskId")

if (!taskId) {
      return NextResponse.json({ error: "Task ID is required" }, { status: 400 })
    }

// Filter updates by task ID
    const updates = taskUpdates.filter((update) => update.taskId === taskId)

return NextResponse.json({ updates })
  } catch (error) {
    console.error("Error fetching task updates:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/staff/tasks/[id]/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Camera, Upload, Send, Clock } from "lucide-react"

export default function TaskDetailPage() {
  const params = useParams()
  const taskId = params.id as string

const [task, setTask] = useState(mockTask)
  const [updates, setUpdates] = useState([])
  const [message, setMessage] = useState("")
  const [files, setFiles] = useState<File[]>([])
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [cameraActive, setCameraActive] = useState(false)
  const [stream, setStream] = useState<MediaStream | null>(null)

// Fetch task details
  useEffect(() => {
    // In a real app, fetch task from API
    // Example: fetch(`/api/tasks/${taskId}`).then(...)
  }, [taskId])

// Fetch task updates
  useEffect(() => {
    // In a real app, fetch updates from API
    // Example: fetch(`/api/task-updates?taskId=${taskId}`).then(...)
  }, [taskId])

// Handle camera activation
  const activateCamera = async () => {
    try {
      const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true })
      setStream(mediaStream)
      setCameraActive(true)
    } catch (error) {
      console.error("Error accessing camera:", error)
      alert("Could not access camera. Please check permissions.")
    }
  }

// Handle camera capture
  const captureImage = () => {
    if (!stream) return

const video = document.createElement("video")
    video.srcObject = stream
    video.play()

setTimeout(() => {
      const canvas = document.createElement("canvas")
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      const ctx = canvas.getContext("2d")
      ctx?.drawImage(video, 0, 0)

canvas.toBlob((blob) => {
        if (blob) {
          const file = new File([blob], `capture-${Date.now()}.jpg`, { type: "image/jpeg" })
          setFiles((prev) => [...prev, file])
        }
      }, "image/jpeg")

// Stop the camera
      stream.getTracks().forEach((track) => track.stop())
      setStream(null)
      setCameraActive(false)
    }, 500)
  }

// Handle form submission
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!message.trim() && files.length === 0) {
      alert("Please enter a message or attach files")
      return
    }

setIsSubmitting(true)

try {
      // In a real app, submit to API
      const formData = new FormData()
      formData.append("taskId", taskId)
      formData.append("message", message)
      formData.append("staffId", "current-user-id") // This would come from auth context

files.forEach((file) => {
        formData.append("files", file)
      })

// Example: await fetch('/api/task-updates', { method: 'POST', body: formData })

// Mock successful submission
      const newUpdate = {
        id: Date.now().toString(),
        taskId,
        staffId: "current-user-id",
        message,
        files: files.map((file) => ({
          id: Date.now().toString(),
          name: file.name,
          type: file.type,
          size: file.size,
          url: URL.createObjectURL(file), // This is just for preview
        })),
        timestamp: new Date().toISOString(),
      }

setUpdates((prev) => [newUpdate, ...prev])
      setMessage("")
      setFiles([])
    } catch (error) {
      console.error("Error submitting update:", error)
      alert("Failed to submit update. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="container mx-auto py-6 space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            <span>{task.title}</span>
            <span
              className={`px-3 py-1 text-xs rounded-full ${
                task.priority === "high"
                  ? "bg-red-100 text-red-800"
                  : task.priority === "medium"
                    ? "bg-yellow-100 text-yellow-800"
                    : "bg-green-100 text-green-800"
              }`}
            >
              {task.priority.charAt(0).toUpperCase() + task.priority.slice(1)} Priority
            </span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-700 mb-4">{task.description}</p>
          <div className="flex items-center text-sm text-gray-500">
            <Clock className="h-4 w-4 mr-1" />
            <span>Due: {new Date(task.dueDate).toLocaleDateString()}</span>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Hourly Activity Log</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <Textarea
              placeholder="What have you accomplished in the last hour? Update your progress here..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              className="min-h-[100px]"
            />