9d:I[903690,["/chat-static/_next/static/immutable/chunks/3i7z_b9ju5p0l.js","/chat-static/_next/static/immutable/chunks/3rjx58sh0g69q.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/30d3zxg6nkubj.js","/chat-static/_next/static/immutable/chunks/0ai904ok7xmqu.js","/chat-static/_next/static/immutable/chunks/1nwzd05fjwfah.js","/chat-static/_next/static/immutable/chunks/1spqqj78e1ykn.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/1d0-ugkvq77it.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/2kv6vo--6ni6k.js","/chat-static/_next/static/immutable/chunks/1zq7897ur3lup.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/44kjwr51vqfu6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/35zyqe5iplnm8.js","/chat-static/_next/static/immutable/chunks/24os_andi8yq4.js","/chat-static/_next/static/immutable/chunks/387uldq7z6ywv.js","/chat-static/_next/static/immutable/chunks/1tnp2al0c8u_f.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/02xtg9yt08jbr.js","/chat-static/_next/static/immutable/chunks/3ldgj5vn7sd9j.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/1sjit0q0vpbp_.js","/chat-static/_next/static/immutable/chunks/3hyzknxyslfo7.js","/chat-static/_next/static/immutable/chunks/0sc-3jko6o60i.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/146sfa99mal_a.js","/chat-static/_next/static/immutable/chunks/0nspmgdomfjot.js","/chat-static/_next/static/immutable/chunks/0mc1ezkg-qis9.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/2nn5bo7v3dun5.js","/chat-static/_next/static/immutable/chunks/00dsptmlc0bht.js","/chat-static/_next/static/immutable/chunks/2e94o250766ot.js","/chat-static/_next/static/immutable/chunks/29pr1wyrw7_bq.js","/chat-static/_next/static/immutable/chunks/1rn9kgcyniam7.js","/chat-static/_next/static/immutable/chunks/3qndnuev6ehgi.js","/chat-static/_next/static/immutable/chunks/2tcip0srok_ui.js","/chat-static/_next/static/immutable/chunks/38givft7bj570.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/2pfntbtod00n6.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0zbio1k8sn41_.js","/chat-static/_next/static/immutable/chunks/38qfy3u8hh_hq.js","/chat-static/_next/static/immutable/chunks/2zypdmsnsp62v.js","/chat-static/_next/static/immutable/chunks/2_8w13-3-h0_i.js","/chat-static/_next/static/immutable/chunks/0x5--85caen4l.js","/chat-static/_next/static/immutable/chunks/0aivm9mgugpct.js"],"ExplicitChatIdProvider"] 9e:I[838238,["/chat-static/_next/static/immutable/chunks/3i7z_b9ju5p0l.js","/chat-static/_next/static/immutable/chunks/3rjx58sh0g69q.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/30d3zxg6nkubj.js","/chat-static/_next/static/immutable/chunks/0ai904ok7xmqu.js","/chat-static/_next/static/immutable/chunks/1nwzd05fjwfah.js","/chat-static/_next/static/immutable/chunks/1spqqj78e1ykn.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/1d0-ugkvq77it.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/2kv6vo--6ni6k.js","/chat-static/_next/static/immutable/chunks/1zq7897ur3lup.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/44kjwr51vqfu6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/35zyqe5iplnm8.js","/chat-static/_next/static/immutable/chunks/24os_andi8yq4.js","/chat-static/_next/static/immutable/chunks/387uldq7z6ywv.js","/chat-static/_next/static/immutable/chunks/1tnp2al0c8u_f.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/02xtg9yt08jbr.js","/chat-static/_next/static/immutable/chunks/3ldgj5vn7sd9j.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/1sjit0q0vpbp_.js","/chat-static/_next/static/immutable/chunks/3hyzknxyslfo7.js","/chat-static/_next/static/immutable/chunks/0sc-3jko6o60i.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/146sfa99mal_a.js","/chat-static/_next/static/immutable/chunks/0nspmgdomfjot.js","/chat-static/_next/static/immutable/chunks/0mc1ezkg-qis9.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/2nn5bo7v3dun5.js","/chat-static/_next/static/immutable/chunks/00dsptmlc0bht.js","/chat-static/_next/static/immutable/chunks/2e94o250766ot.js","/chat-static/_next/static/immutable/chunks/29pr1wyrw7_bq.js","/chat-static/_next/static/immutable/chunks/1rn9kgcyniam7.js","/chat-static/_next/static/immutable/chunks/3qndnuev6ehgi.js","/chat-static/_next/static/immutable/chunks/2tcip0srok_ui.js","/chat-static/_next/static/immutable/chunks/38givft7bj570.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/2pfntbtod00n6.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0zbio1k8sn41_.js","/chat-static/_next/static/immutable/chunks/38qfy3u8hh_hq.js","/chat-static/_next/static/immutable/chunks/2zypdmsnsp62v.js","/chat-static/_next/static/immutable/chunks/2_8w13-3-h0_i.js","/chat-static/_next/static/immutable/chunks/0x5--85caen4l.js","/chat-static/_next/static/immutable/chunks/0aivm9mgugpct.js"],"SWRDataProvider"] a0:[] a1:[["b_5ok2ZmZ43Tc",null],["b_RzNOBz4p8pN",null],["b_xCvU1YwKmU1",null],["b_exitCyz0Jy0",null],["b_OIaq4IoQwTo",null],["b_JlPTHat61Ox",null],["b_eyRZTON8Tuh",null],["b_X9DC2GSJQ73",null]] a2:[["b_5ok2ZmZ43Tc",{"templateVersionId":null,"templateCanonId":null}],["b_RzNOBz4p8pN",{"templateVersionId":null,"templateCanonId":null}],["b_xCvU1YwKmU1",{"templateVersionId":null,"templateCanonId":null}],["b_exitCyz0Jy0",{"templateVersionId":null,"templateCanonId":null}],["b_OIaq4IoQwTo",{"templateVersionId":null,"templateCanonId":null}],["b_JlPTHat61Ox",{"templateVersionId":null,"templateCanonId":null}],["b_eyRZTON8Tuh",{"templateVersionId":null,"templateCanonId":null}],["b_X9DC2GSJQ73",{"templateVersionId":null,"templateCanonId":null}]] a3:[["6ZzWvD7m9H7","$D2026-01-18T23:17:43.688Z"],["b_kQ8GOfypzDg","$D2026-01-18T23:42:23.429Z"],["b_57S0EIp4iHY","$D2026-01-18T23:42:39.271Z"],["b_59tsT7X8BP1","$D2026-01-19T00:05:43.893Z"],["b_ukjvs1N5Jjd","$D2026-01-19T09:59:04.370Z"],["b_rDLNVVshcxZ","$D2026-01-19T09:59:17.040Z"],["b_NwmuRKNMaUp","$D2026-01-19T10:26:26.193Z"],["b_vTyjzEns87t","$D2026-01-19T10:26:42.451Z"],["b_ugOlFBLeG0Y","$D2026-01-19T10:41:14.912Z"],["b_xn0wA40UlRS","$D2026-01-19T10:41:30.688Z"],["b_LiELowmugRt","$D2026-01-19T10:41:40.992Z"],["b_NzpWZ3PCi9r","$D2026-01-19T11:26:52.082Z"],["b_mBLvLsYp9iE","$D2026-01-19T12:04:04.421Z"],["b_I5nSrt0fMWR","$D2026-01-19T12:04:13.500Z"],["b_Hcv6GNNqKYU","$D2026-01-19T12:12:51.719Z"],["b_fd1Dex1V5Fr","$D2026-01-19T12:13:03.105Z"],["b_j0vkKmEOIJT","$D2026-01-19T12:13:17.549Z"],["b_6d6bEzxtq0V","$D2026-01-19T12:13:24.487Z"],["b_9sxZvhfxn9C","$D2026-01-19T12:13:35.913Z"],["b_3qoU15qoZTl","$D2026-01-19T12:13:44.559Z"],["b_VVUF7cSq5wg","$D2026-01-19T12:16:24.413Z"],["b_lvINzohlnOL","$D2026-01-19T18:26:23.615Z"],["b_QmIoQ68inOl","$D2026-01-19T18:35:42.436Z"],["b_42xTZYB9r4G","$D2026-01-19T18:44:20.115Z"],["b_IjLGmemaHHm","$D2026-01-19T18:51:38.023Z"],["b_5ok2ZmZ43Tc","$D2026-01-19T21:23:22.403Z"],["b_RzNOBz4p8pN","$D2026-01-19T21:23:38.123Z"],["b_xCvU1YwKmU1","$D2026-01-19T21:23:50.655Z"],["b_exitCyz0Jy0","$D2026-01-26T23:05:58.110Z"],["b_OIaq4IoQwTo","$D2026-01-26T23:06:12.104Z"],["b_JlPTHat61Ox","$D2026-01-26T23:06:22.090Z"],["b_eyRZTON8Tuh","$D2026-01-26T23:07:20.840Z"],["b_X9DC2GSJQ73","$D2026-01-26T23:07:36.885Z"]] a4:[["b_5ok2ZmZ43Tc",false],["b_RzNOBz4p8pN",false],["b_xCvU1YwKmU1",false],["b_exitCyz0Jy0",false],["b_OIaq4IoQwTo",false],["b_JlPTHat61Ox",false],["b_eyRZTON8Tuh",false],["b_X9DC2GSJQ73",false]] a5:[["b_5ok2ZmZ43Tc","$undefined"],["b_RzNOBz4p8pN","$undefined"],["b_xCvU1YwKmU1",{"git":{"ref":"v0/main-e026860b","sha":"ba8cd1c97b50af983c3b8e201b07da1e8c4d18e4","type":"github","repoId":0,"repoName":"v0-ep-api-interface","ownerName":"alexcumbers","commitMessage":"feat: centralize data clearing in import wizard\n\nImplement clearAllWizardData() to reset all state variables on Generate/Import."},"deploymentId":"dpl_HRpH89CjjJgcDF75KUqQ7aebN9Lg"}],["b_exitCyz0Jy0","$undefined"],["b_OIaq4IoQwTo","$undefined"],["b_JlPTHat61Ox","$undefined"],["b_eyRZTON8Tuh","$undefined"],["b_X9DC2GSJQ73","$undefined"]] a6:[["b_5ok2ZmZ43Tc",null],["b_RzNOBz4p8pN",null],["b_xCvU1YwKmU1",null],["b_exitCyz0Jy0",null],["b_OIaq4IoQwTo",null],["b_JlPTHat61Ox",null],["b_eyRZTON8Tuh",null],["b_X9DC2GSJQ73",null]] a7:[["b_5ok2ZmZ43Tc",true],["b_RzNOBz4p8pN",true],["b_xCvU1YwKmU1",true],["b_exitCyz0Jy0",true],["b_OIaq4IoQwTo",true],["b_JlPTHat61Ox",true],["b_eyRZTON8Tuh",true],["b_X9DC2GSJQ73",true]] a8:[["b_5ok2ZmZ43Tc",true],["b_RzNOBz4p8pN",true],["b_xCvU1YwKmU1",true],["b_exitCyz0Jy0",true],["b_OIaq4IoQwTo",true],["b_JlPTHat61Ox",true],["b_eyRZTON8Tuh",true],["b_X9DC2GSJQ73",true]] a9:[] aa:T4f9,The user wants me to design a robust import wizard workflow that clears all data across all tabs when clicking 'Generate' or 'Import' buttons on the data tab. Let me understand the requirements: 1. When user clicks "Generate" (generate test data) or uploads a file on the Data tab, all previous data should be cleared 2. This includes data from Import, Test, Report, and Logs tabs 3. The clearing should happen automatically 4. Users should be able to run multiple imports consecutively without data interference 5. Need to maintain stability and responsiveness Let me first understand the current state management and data flow: From my previous analysis: - Data Tab: csvRows, selectedRowIds, rowLimit, selectedLocationId - Import Tab: importResults, importStats, isProcessing - Test Tab: testResults, devices, selectedDeviceId - Report Tab: Uses importResults, importStats, testResults - Logs Tab: debugLogs I need to: 1. Find where the Generate and Import buttons are 2. Identify all state variables that need to be cleared 3. Create a clearAllData function that resets everything 4. Call this function when Generate or file upload happens 5. Ensure the UI reflects the cleared state properly Let me read the import wizard dialog to understand the state management.ab:T8b158,[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # API interface with Postman *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/alexcumbers-9492s-projects/v0-api-interface-with-postman) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/mYDQYG4gvhu) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/alexcumbers-9492s-projects/v0-api-interface-with-postman](https://vercel.com/alexcumbers-9492s-projects/v0-api-interface-with-postman)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/mYDQYG4gvhu](https://v0.app/chat/projects/mYDQYG4gvhu)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const badgeVariants = cva( 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span' return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Input({ className, type, ...props }: React.ComponentProps<'input'>) { return ( ) } export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" 'use client' import * as React from 'react' import * as LabelPrimitive from '@radix-ui/react-label' import { cn } from '@/lib/utils' function Label({ className, ...props }: React.ComponentProps) { return ( ) } export { Label } [V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Table = React.forwardRef>( ({ className, ...props }, ref) => (

), ) Table.displayName = "Table" const TableHeader = React.forwardRef>( ({ className, ...props }, ref) => , ) TableHeader.displayName = "TableHeader" const TableBody = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableBody.displayName = "TableBody" const TableFooter = React.forwardRef>( ({ className, ...props }, ref) => ( tr]:last:border-b-0", className)} {...props} /> ), ) TableFooter.displayName = "TableFooter" const TableRow = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableRow.displayName = "TableRow" const TableHead = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableHead.displayName = "TableHead" const TableCell = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableCell.displayName = "TableCell" const TableCaption = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableCaption.displayName = "TableCaption" export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]typescript:file="next.config.ts" isMerged="true" import type { NextConfig } from "next" const nextConfig: NextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, /* config options here */ } export default nextConfig [V0_FILE]javascript:file="postcss.config.mjs" isMerged="true" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_taRAcXXhPvx9vRC68ZGXTkFhKtxH/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_taRAcXXhPvx9vRC68ZGXTkFhKtxH/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_taRAcXXhPvx9vRC68ZGXTkFhKtxH/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_taRAcXXhPvx9vRC68ZGXTkFhKtxH/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_taRAcXXhPvx9vRC68ZGXTkFhKtxH/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true" [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import type * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" function Tabs({ className, ...props }: React.ComponentProps) { return } function TabsList({ className, ...props }: React.ComponentProps) { return ( ) } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ) } function TabsContent({ className, ...props }: React.ComponentProps) { return } export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescript:file="components/request-response-logger.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Timer } from "lucide-react" interface RequestDetails { method: string url: string headers: Record body?: any } interface RequestResponseLoggerProps { requestDetails: RequestDetails | null response: any } export function RequestResponseLogger({ requestDetails, response }: RequestResponseLoggerProps) { return (

Request API request details {requestDetails ? (

{requestDetails.method}

URL

{requestDetails.url}

Headers

                  {JSON.stringify(requestDetails.headers, null, 2)}

{requestDetails.body && (

Body

                    {JSON.stringify(requestDetails.body, null, 2)}

)}

) : (

No request yet. Make a request to see details.

)} Response API response details {response ? (

{response.status && ( Status: {response.status} )} {response.duration !== undefined && ( {response.duration}ms )}

                {JSON.stringify(
                  (() => {
                    const { duration, ...responseWithoutDuration } = response
                    return responseWithoutDuration
                  })(),
                  null,
                  2,
                )}

) : (

No response yet. Make a request to see results.

)}

) } [V0_FILE]typescript:file="lib/logs-context.tsx" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" interface RequestDetails { method: string url: string headers: Record body?: any } interface LogsContextType { requestDetails: RequestDetails | null response: any setRequestDetails: (details: RequestDetails | null) => void setResponse: (response: any) => void } const LogsContext = createContext(undefined) export function LogsProvider({ children }: { children: ReactNode }) { const [requestDetails, setRequestDetails] = useState(null) const [response, setResponse] = useState(null) return ( {children} ) } export function useLogs() { const context = useContext(LogsContext) if (context === undefined) { throw new Error("useLogs must be used within a LogsProvider") } return context } [V0_FILE]typescript:file="components/ui/button.tsx" isQuickEdit="true" isMerged="true" import type * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm dark:shadow-primary/20", destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive shadow-sm dark:shadow-destructive/20", outline: "border-2 bg-background shadow-xs hover:bg-accent hover:text-accent-foreground hover:border-accent dark:bg-card dark:border-border dark:hover:bg-accent dark:hover:border-accent", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm dark:bg-secondary/80 dark:hover:bg-secondary/60", ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/70 dark:text-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", icon: "size-9", "icon-sm": "size-8", "icon-lg": "size-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "button" return } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/sonner.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useTheme } from "@/components/theme-provider" import { Toaster as Sonner, type ToasterProps } from "sonner" const Toaster = ({ ...props }: ToasterProps) => { const { theme = "system" } = useTheme() return ( ) } export { Toaster } [V0_FILE]typescriptreact:file="app/help/page.tsx" isMerged="true" "use client" import { Navigation } from "@/components/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Key, Lock, Smartphone, BarChart3, FileText, ArrowLeftRight, CheckCircle2, Clock, Upload, Trash2, } from "lucide-react" export default function HelpPage() { return (

Help & Documentation

Comprehensive guide to using the ControlFreq Management Application

{/* Authentication Section */}

Authentication

Secure access to the EasyPIN API

The application automatically authenticates on startup using stored credentials. You can also manually authenticate from the Home page.

Features:

Automatic authentication on app startup
Secure token-based authentication
Automatic location data fetching after authentication
Session management across all pages

{/* Barrier Control Section */}

Barrier Control

Open and close access barriers remotely

Control physical barriers at your locations using device IDs. Available from the Home page.

How to use:

Enter the Device ID for the barrier you want to control
Click "Open Barrier" to trigger the barrier opening
View the response status and details in the Logs page

{/* Devices Section */}

Device Management

View and manage locations and devices

Access comprehensive information about your locations and associated devices.

Features:

Locations: View all locations with IDs, names, and addresses
Devices: Browse devices with filtering and search capabilities
Auto-refresh: Locations are automatically loaded after authentication
Manual refresh: Update data on demand with the refresh button

{/* PIN Management Section */}

PIN Management

Create, manage, and organize access PINs

Comprehensive PIN management with multiple operations and filtering options.

Create PINs

Generate new PINs with custom names and locations
Set start and end dates for time-limited access
Choose between static and dynamic PIN types

Import PINs

Import existing PINs from other systems
Specify PIN value, location, and validity period

Extend PINs

Extend expiration dates for existing PINs
Bulk extend multiple PINs at once
Only available for PINs with existing date ranges

Delete PINs

Remove individual or multiple PINs
Bulk delete with multi-select functionality
Confirmation dialog prevents accidental deletion

List & Filter PINs

Search: Find PINs by name, value, or location
Filter by Type: View All, Static (no dates), or Dynamic (with dates) PINs
Sort: Order by name, location, start date, or end date
Multi-select: Select multiple rows for bulk operations
Export: Download PIN list as CSV file

{/* Migration Section */}

Migration

Data migration and transfer tools

Migration tools for transferring data between systems. This feature is currently under development and will be available in a future update.

{/* Usage Section */}

Usage Statistics

Monitor API usage and activity

View usage statistics and analytics for your API operations. This feature is currently under development and will provide insights into API calls, PIN usage, and system activity.

{/* Logs Section */}

Request & Response Logs

View detailed API interaction logs

Monitor all API requests and responses in real-time for debugging and verification.

Features:

View request details including endpoint, method, headers, and body
See response status, data, and timing information
Logs persist across page navigation
Useful for troubleshooting API issues

{/* Tips & Best Practices */} Tips & Best Practices

General Tips:

The application automatically authenticates on startup - no manual login required
Location data is fetched automatically after authentication
Use the Logs page to troubleshoot any API errors
The dark/light mode toggle persists your preference

PIN Management Tips:

Use the Type filter to quickly find Static or Dynamic PINs
Export your PIN list regularly for backup purposes
The Extend button is only enabled when all selected PINs have date ranges
Use multi-select for efficient bulk operations

) } [V0_FILE]typescriptreact:file="app/devices/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescript:file="app/api/zoho-webhook/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const body = await request.json() const apiKey = process.env.ZOHO_API_KEY if (!apiKey) { console.error("[v0] ZOHO_API_KEY environment variable is not set") return NextResponse.json({ error: "Zoho API key not configured" }, { status: 500 }) } const webhookUrl = `https://flow.zoho.com/681240712/flow/webhook/incoming?zapikey=${apiKey}` console.log("[v0] Calling Zoho webhook:", webhookUrl) console.log("[v0] Payload:", JSON.stringify(body, null, 2)) const response = await fetch(webhookUrl, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(body), }) console.log("[v0] Zoho webhook response status:", response.status) const responseData = await response.text() console.log("[v0] Zoho webhook response:", responseData) if (!response.ok) { return NextResponse.json( { error: "Webhook call failed", status: response.status, details: responseData }, { status: response.status }, ) } return NextResponse.json({ success: true, status: response.status, data: responseData }) } catch (error: any) { console.error("[v0] Error calling Zoho webhook:", error) return NextResponse.json({ error: error.message || "Failed to call webhook" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/device-management-section.tsx" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent, CardDescription, 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Lock, DoorOpen, Settings } from "lucide-react" interface DeviceManagementSectionProps { token: string username: string password: string deviceID: string loading: boolean managementTab: string onUsernameChange: (value: string) => void onPasswordChange: (value: string) => void onDeviceIDChange: (value: string) => void onManagementTabChange: (value: string) => void onAuth: () => void onOpenBarrier: () => void } export function DeviceManagementSection({ token, username, password, deviceID, loading, managementTab, onUsernameChange, onPasswordChange, onDeviceIDChange, onManagementTabChange, onAuth, onOpenBarrier, }: DeviceManagementSectionProps) { return ( Access Control Access Management Operations Authorise Barrier

Retrieve Access Token

Username (Email) onUsernameChange(e.target.value)} placeholder="Enter email address" />

Password onPasswordChange(e.target.value)} placeholder="Enter password" />

{token && (

Token: {token}

)}

Trigger Hardware Operation

Device ID onDeviceIDChange(e.target.value)} placeholder="74500" />

) } [V0_FILE]typescriptreact:file="app/logs/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isQuickEdit="true" isMerged="true" import type * as React from "react" import { cn } from "@/lib/utils" function Card({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return

} function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return

} function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return

} function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return

} function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return

} export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } [V0_FILE]xml:file="public/favicon.ico" isMerged="true" [V0_FILE]xml:file="public/favicon.svg" isMerged="true" [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.98 0 0); --foreground: oklch(0.15 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.55 0.19 145); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.95 0 0); --secondary-foreground: oklch(0.15 0 0); --muted: oklch(0.95 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.88 0.15 95); --accent-foreground: oklch(0.15 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.88 0 0); --input: oklch(0.88 0 0); --ring: oklch(0.55 0.19 145); --chart-1: oklch(0.55 0.19 145); --chart-2: oklch(0.55 0.22 25); --chart-3: oklch(0.88 0.15 95); --chart-4: oklch(0.45 0.15 265); --chart-5: oklch(0.7 0.18 35); --radius: 0.5rem; --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.15 0 0); --sidebar-primary: oklch(0.55 0.19 145); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.95 0 0); --sidebar-accent-foreground: oklch(0.15 0 0); --sidebar-border: oklch(0.88 0 0); --sidebar-ring: oklch(0.55 0.19 145); } .dark { --background: oklch(0.12 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.16 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.16 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.65 0.19 145); --primary-foreground: oklch(0.12 0 0); --secondary: oklch(0.22 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.22 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.88 0.15 95); --accent-foreground: oklch(0.12 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.65 0.19 145); --chart-1: oklch(0.65 0.19 145); --chart-2: oklch(0.55 0.22 25); --chart-3: oklch(0.88 0.15 95); --chart-4: oklch(0.45 0.15 265); --chart-5: oklch(0.7 0.18 35); --sidebar: oklch(0.16 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.65 0.19 145); --sidebar-primary-foreground: oklch(0.12 0 0); --sidebar-accent: oklch(0.22 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.65 0.19 145); } @theme inline { /* Fixed font variable names to match layout.tsx exports */ --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/startup-logger.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" const VERSION_NUMBER = process.env.NEXT_PUBLIC_VERSION_NUMBER || "dev" const BUILD_DATE = process.env.NEXT_PUBLIC_BUILD_DATE || "N/A" let hasLogged = false export function StartupLogger() { const hasLoggedRef = useRef(false) useEffect(() => { if (!hasLogged && !hasLoggedRef.current) { console.log(`ControlFreq Management Application v${VERSION_NUMBER} (${BUILD_DATE})`) hasLogged = true hasLoggedRef.current = true } }, []) return null } [V0_FILE]typescript:file="app/api/pin-list/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { captureServerLog, addServerLogsToHeaders, clearServerLogs } from "@/lib/server-log-middleware" export async function GET(request: NextRequest) { clearServerLogs() const startTime = Date.now() try { const { searchParams } = new URL(request.url) const locationId = searchParams.get("locationId") const token = request.headers.get("authorization") captureServerLog(`[v0] PIN LIST API: Request received for location ${locationId}`) if (!token) { captureServerLog("[v0] PIN LIST API: FAILURE - No authorization token provided") const response = NextResponse.json({ error: "Authorization token required" }, { status: 401 }) addServerLogsToHeaders(response.headers) return response } if (!locationId) { captureServerLog("[v0] PIN LIST API: FAILURE - No location ID provided") const response = NextResponse.json({ error: "Location ID required" }, { status: 400 }) addServerLogsToHeaders(response.headers) return response } const externalUrl = `https://www.controlfreq.co/easypin/rest/register-plate/?location=${locationId}` captureServerLog(`[v0] PIN LIST API: Calling external API - ${externalUrl}`) const apiResponse = await fetch(externalUrl, { method: "GET", headers: { Authorization: token, Accept: "application/json", }, }) const duration = Date.now() - startTime captureServerLog(`[v0] PIN LIST API: External API responded with status ${apiResponse.status} in ${duration}ms`) const data = await apiResponse.json() if (apiResponse.ok) { const pinCount = Array.isArray(data) ? data.length : (data.results ? data.results.length : 0) captureServerLog(`[v0] PIN LIST API: SUCCESS - Retrieved ${pinCount} PIN(s) in ${duration}ms`) } else { captureServerLog(`[v0] PIN LIST API: FAILURE - Status ${apiResponse.status} in ${duration}ms`) } const response = NextResponse.json(data, { status: apiResponse.status }) addServerLogsToHeaders(response.headers) return response } catch (error: any) { const duration = Date.now() - startTime captureServerLog(`[v0] PIN LIST API: ERROR after ${duration}ms - ${error.message}`) const response = NextResponse.json({ error: error.message || "Failed to fetch PIN list" }, { status: 500 }) addServerLogsToHeaders(response.headers) return response } } [V0_FILE]typescriptreact:file="components/storage-checker.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" export function StorageChecker({ children }: { children: React.ReactNode }) { const [isStorageAvailable, setIsStorageAvailable] = useState(null) useEffect(() => { // Check if localStorage is available try { const test = "__localStorage_test__" localStorage.setItem(test, test) localStorage.removeItem(test) setIsStorageAvailable(true) } catch { setIsStorageAvailable(false) } }, []) // Show loading state while checking if (isStorageAvailable === null) { return (

) } // Block app if localStorage is not available if (!isStorageAvailable) { return (

⚠️

Storage Required

This application requires browser storage to function properly. Please disable private browsing mode or use a different browser.

Browser storage is needed for:

Authentication
User preferences
Application data

) } // localStorage is available, render the app return <>{children} } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isQuickEdit="true" isMerged="true" "use client" import type * as React from "react" import { createContext, useContext, useEffect, useState } from "react" type Theme = "dark" | "light" | "system" type ThemeProviderProps = { children: React.ReactNode defaultTheme?: Theme storageKey?: string attribute?: string enableSystem?: boolean disableTransitionOnChange?: boolean } type ThemeProviderState = { theme: Theme setTheme: (theme: Theme) => void } const ThemeProviderContext = createContext(undefined) export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", attribute, enableSystem, disableTransitionOnChange, }: ThemeProviderProps) { const [theme, setTheme] = useState(defaultTheme) useEffect(() => { const stored = localStorage.getItem(storageKey) as Theme | null if (stored) { setTheme(stored) } }, [storageKey]) useEffect(() => { const root = window.document.documentElement root.classList.remove("light", "dark") if (theme === "system") { const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" root.classList.add(systemTheme) return } root.classList.add(theme) }, [theme]) const value = { theme, setTheme: (theme: Theme) => { localStorage.setItem(storageKey, theme) setTheme(theme) }, } return ( {children} ) } export const useTheme = () => { const context = useContext(ThemeProviderContext) if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider") return context } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isQuickEdit="true" isMerged="true" 'use client' import * as React from 'react' import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react' import { cn } from '@/lib/utils' function DropdownMenu({ ...props }: React.ComponentProps) { return } function DropdownMenuPortal({ ...props }: React.ComponentProps) { return ( ) } function DropdownMenuTrigger({ ...props }: React.ComponentProps) { return ( ) } function DropdownMenuContent({ className, sideOffset = 4, ...props }: React.ComponentProps) { return ( ) } function DropdownMenuGroup({ ...props }: React.ComponentProps) { return ( ) } function DropdownMenuItem({ className, inset, variant = 'default', ...props }: React.ComponentProps & { inset?: boolean variant?: 'default' | 'destructive' }) { return ( ) } function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps) { return ( {children} ) } function DropdownMenuRadioGroup({ ...props }: React.ComponentProps) { return ( ) } function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps & { inset?: boolean }) { return ( ) } function DropdownMenuSeparator({ className, ...props }: React.ComponentProps) { return ( ) } function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) { return ( ) } function DropdownMenuSub({ ...props }: React.ComponentProps) { return } function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps & { inset?: boolean }) { return ( {children} ) } function DropdownMenuSubContent({ className, ...props }: React.ComponentProps) { return ( ) } export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from 'lucide-react' import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( { const target = e.target as HTMLElement if ( target.closest('[data-slot="popover-content"]') || target.closest('[data-radix-popper-content-wrapper]') || target.closest('[data-radix-portal]') ) { e.preventDefault() } }} {...props} > {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/popover.tsx" isQuickEdit="true" isMerged="true" 'use client' import * as React from 'react' import * as PopoverPrimitive from '@radix-ui/react-popover' import { cn } from '@/lib/utils' function Popover({ ...props }: React.ComponentProps) { return } function PopoverTrigger({ ...props }: React.ComponentProps) { return } function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }: React.ComponentProps) { return ( ) } function PopoverAnchor({ ...props }: React.ComponentProps) { return } export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } [V0_FILE]typescript:file="lib/app-context.tsx" isQuickEdit="true" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" interface Location { id: number title: string time_zone: string | null address?: string | null } interface AppContextType { token: string setToken: (token: string) => void username: string setUsername: (username: string) => void password: string setPassword: (password: string) => void locations: Location[] setLocations: (locations: Location[]) => void locationsLoading: boolean setLocationsLoading: (loading: boolean) => void fetchLocations: (force?: boolean) => Promise logout: () => void instanceId: string } const AppContext = createContext(undefined) const TOKEN_STORAGE_KEY = "easypin_auth_token" const USERNAME_STORAGE_KEY = "easypin_username" const PASSWORD_STORAGE_KEY = "easypin_password" const LOCATIONS_STORAGE_KEY = "easypin_locations" const LOCATIONS_TIMESTAMP_KEY = "easypin_locations_timestamp" const LOCATIONS_DURATION_KEY = "easypin_locations_duration" const INSTANCE_ID_STORAGE_KEY = "easypin_instance_id" export function AppProvider({ children }: { children: ReactNode }) { const [token, setTokenState] = useState("") const [username, setUsernameState] = useState("") const [password, setPasswordState] = useState("") const [locations, setLocations] = useState([]) const [locationsLoading, setLocationsLoading] = useState(false) const [instanceId, setInstanceId] = useState("") useEffect(() => { if (typeof window !== "undefined") { console.log("[v0] AppContext: Initializing - checking localStorage for stored data") let currentInstanceId = sessionStorage.getItem(INSTANCE_ID_STORAGE_KEY) if (!currentInstanceId) { const fullUUID = window.crypto.randomUUID() currentInstanceId = fullUUID.replace(/-/g, "").substring(0, 10) sessionStorage.setItem(INSTANCE_ID_STORAGE_KEY, currentInstanceId) console.log("[v0] AppContext: Generated new instance ID:", currentInstanceId) } else { console.log("[v0] AppContext: Retrieved existing instance ID:", currentInstanceId) } setInstanceId(currentInstanceId) const storedToken = localStorage.getItem(TOKEN_STORAGE_KEY) const storedUsername = localStorage.getItem(USERNAME_STORAGE_KEY) const storedPassword = localStorage.getItem(PASSWORD_STORAGE_KEY) const storedLocations = localStorage.getItem(LOCATIONS_STORAGE_KEY) if (storedToken) { console.log("[v0] AppContext: Found stored token in localStorage") setTokenState(storedToken) } else { console.log("[v0] AppContext: No token found in localStorage") } if (storedUsername) { console.log("[v0] AppContext: Found stored username in localStorage") setUsernameState(storedUsername) } if (storedPassword) { console.log("[v0] AppContext: Found stored password in localStorage") setPasswordState(storedPassword) } if (storedLocations) { try { const parsedLocations = JSON.parse(storedLocations) if (Array.isArray(parsedLocations)) { setLocations(parsedLocations) console.log(`[v0] AppContext: Restored ${parsedLocations.length} locations from localStorage`) } } catch (error) { console.error("[v0] AppContext: Failed to parse stored locations", error) localStorage.removeItem(LOCATIONS_STORAGE_KEY) } } console.log("[v0] AppContext: Initialization complete") } }, []) const setToken = (newToken: string) => { console.log("[v0] AppContext: setToken called with:", newToken ? "TOKEN_VALUE" : "EMPTY") setTokenState(newToken) if (typeof window !== "undefined") { if (newToken) { localStorage.setItem(TOKEN_STORAGE_KEY, newToken) console.log("[v0] AppContext: Token saved to localStorage with key:", TOKEN_STORAGE_KEY) const verification = localStorage.getItem(TOKEN_STORAGE_KEY) if (verification === newToken) { console.log("[v0] AppContext: Token storage verified successfully") } else { console.error("[v0] AppContext: ERROR - Token verification failed! Expected:", newToken, "Got:", verification) } } else { console.log("[v0] AppContext: Removing token from localStorage") localStorage.removeItem(TOKEN_STORAGE_KEY) localStorage.removeItem(LOCATIONS_STORAGE_KEY) } } } const setUsername = (newUsername: string) => { setUsernameState(newUsername) if (typeof window !== "undefined") { if (newUsername) { localStorage.setItem(USERNAME_STORAGE_KEY, newUsername) } else { localStorage.removeItem(USERNAME_STORAGE_KEY) } } } const setPassword = (newPassword: string) => { setPasswordState(newPassword) if (typeof window !== "undefined") { if (newPassword) { localStorage.setItem(PASSWORD_STORAGE_KEY, newPassword) } else { localStorage.removeItem(PASSWORD_STORAGE_KEY) } } } const logout = () => { console.log("[v0] AppContext: Clearing state variables...") setTokenState("") setUsernameState("") setPasswordState("") setLocations([]) if (typeof window !== "undefined") { console.log("[v0] AppContext: Removing all items from localStorage...") localStorage.removeItem(TOKEN_STORAGE_KEY) localStorage.removeItem(USERNAME_STORAGE_KEY) localStorage.removeItem(PASSWORD_STORAGE_KEY) localStorage.removeItem(LOCATIONS_STORAGE_KEY) localStorage.removeItem(LOCATIONS_TIMESTAMP_KEY) localStorage.removeItem(LOCATIONS_DURATION_KEY) } console.log("[v0] AppContext: Logout completed") } const fetchLocations = async (force = false) => { if (!token) { return } if (typeof window !== "undefined" && !force) { const cachedLocations = localStorage.getItem(LOCATIONS_STORAGE_KEY) if (cachedLocations) { try { const parsedLocations = JSON.parse(cachedLocations) if (Array.isArray(parsedLocations) && parsedLocations.length > 0) { console.log(`[v0] AppContext: Using ${parsedLocations.length} cached locations from localStorage`) setLocations(parsedLocations) return } } catch (error) { console.error("[v0] AppContext: Failed to parse cached locations", error) localStorage.removeItem(LOCATIONS_STORAGE_KEY) } } } console.log(`[v0] AppContext: Fetching locations from API (force=${force})`) setLocationsLoading(true) const startTime = Date.now() try { console.log("[v0] AppContext: Using token for /api/location request") const res = await fetch("/api/location", { method: "GET", headers: { Authorization: `Token ${token}`, Accept: "application/json", }, }) if (res.status === 401 || res.status === 403) { console.error("[v0] AppContext: Token expired or invalid (status: " + res.status + "), clearing auth data") logout() return } const data = await res.json() const duration = Date.now() - startTime const timestamp = new Date().toISOString() if (res.ok && Array.isArray(data)) { const locationsWithAddresses = data.filter((loc: Location) => loc.address && loc.address.trim() !== "") console.log(`[v0] AppContext: Filtered ${data.length} locations to ${locationsWithAddresses.length} with addresses`) setLocations(locationsWithAddresses) localStorage.setItem(LOCATIONS_STORAGE_KEY, JSON.stringify(locationsWithAddresses)) localStorage.setItem(LOCATIONS_TIMESTAMP_KEY, timestamp) localStorage.setItem(LOCATIONS_DURATION_KEY, duration.toString()) console.log( `[v0] AppContext: Saved ${locationsWithAddresses.length} locations to localStorage with timestamp ${timestamp} and duration ${duration}ms`, ) } else if (res.ok && data.results && Array.isArray(data.results)) { const locationsWithAddresses = data.results.filter((loc: Location) => loc.address && loc.address.trim() !== "") console.log( `[v0] AppContext: Filtered ${data.results.length} locations to ${locationsWithAddresses.length} with addresses`, ) setLocations(locationsWithAddresses) localStorage.setItem(LOCATIONS_STORAGE_KEY, JSON.stringify(locationsWithAddresses)) localStorage.setItem(LOCATIONS_TIMESTAMP_KEY, timestamp) localStorage.setItem(LOCATIONS_DURATION_KEY, duration.toString()) console.log( `[v0] AppContext: Saved ${locationsWithAddresses.length} locations to localStorage with timestamp ${timestamp} and duration ${duration}ms`, ) } } catch (error: any) { console.error("Error fetching locations:", error) } finally { setLocationsLoading(false) } } return ( {children} ) } export function useApp() { const context = useContext(AppContext) if (context === undefined) { throw new Error("useApp must be used within an AppProvider") } return context } [V0_FILE]typescript:file="lib/modal-cleanup.ts" isMerged="true" /** * Modal Cleanup Utility * * Handles aggressive multi-stage cleanup for Radix Dialog pointer-events bug. * Required due to React 19.2.x / Radix UI timing issues where pointer-events: none * can persist after modal close, causing UI freeze. * * Bug context: https://github.com/radix-ui/primitives/issues/3445 */ export function forceModalCleanup(source = "unknown") { const cleanup = () => { const currentPointerEvents = window.getComputedStyle(document.body).pointerEvents console.log(`[v0] Modal cleanup executing; From ${source}; pointer-events:`, currentPointerEvents) document.body.style.pointerEvents = "" document.body.style.overflow = "" document.body.removeAttribute("data-scroll-locked") } // Stage 1: Immediate cleanup // cleanup() // Stage 2-5: Staggered cleanup to override Radix timing // Radix Dialog close animation takes ~150-300ms and may set pointer-events // at any point during animation. Multiple cleanups ensure we "win". // setTimeout(cleanup, 50) setTimeout(cleanup, 100) setTimeout(cleanup, 200) setTimeout(() => { cleanup() const finalPointerEvents = window.getComputedStyle(document.body).pointerEvents console.log(`[v0] Final pointer-events after cleanup:`, finalPointerEvents) }, 300) } [V0_FILE]typescript:file="lib/pin-utils.ts" isMerged="true" /** * PIN Management Utility Functions * * Date and time formatting utilities for PIN management displays. */ /** * Formats a date string to datetime-local input format (YYYY-MM-DDTHH:MM) */ export function formatDateTimeLocal(dateString: string): string { if (!dateString) return "" const date = new Date(dateString) const year = date.getFullYear() const month = String(date.getMonth() + 1).padStart(2, "0") const day = String(date.getDate()).padStart(2, "0") const hours = String(date.getHours()).padStart(2, "0") const minutes = String(date.getMinutes()).padStart(2, "0") return `${year}-${month}-${day}T${hours}:${minutes}` } /** * Formats a timestamp with contextual date label and time * * Returns an object with: * - datePart: "Just Now", "Today", "Yesterday", day name, or "DD-MON-YY" * - timePart: "HH:MM:SS" */ export function formatContextualTimestamp(dateString: string): { datePart: string timePart: string } { if (!dateString) return { datePart: "", timePart: "" } const date = new Date(dateString) const now = new Date() const diffMs = now.getTime() - date.getTime() const diffSeconds = Math.floor(diffMs / 1000) // Format time part (HH:MM:SS) const hours = String(date.getHours()).padStart(2, "0") const minutes = String(date.getMinutes()).padStart(2, "0") const seconds = String(date.getSeconds()).padStart(2, "0") const timePart = `${hours}:${minutes}:${seconds}` // Just Now - within last 60 seconds if (diffSeconds >= 0 && diffSeconds < 60) { return { datePart: "Just Now".padEnd(9, " "), timePart } } // Reset time to midnight for date comparisons const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()) const yesterday = new Date(today) yesterday.setDate(yesterday.getDate() - 1) const tomorrow = new Date(today) tomorrow.setDate(tomorrow.getDate() + 1) const weekAgo = new Date(today) weekAgo.setDate(weekAgo.getDate() - 7) const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate()) // Today if (dateOnly.getTime() === today.getTime()) { return { datePart: "Today".padEnd(9, " "), timePart } } // Tomorrow if (dateOnly.getTime() === tomorrow.getTime()) { return { datePart: "Tomorrow".padEnd(9, " "), timePart } } // Yesterday if (dateOnly.getTime() === yesterday.getTime()) { return { datePart: "Yesterday".padEnd(9, " "), timePart } } // Within past week (excluding today and yesterday) if (dateOnly >= weekAgo && dateOnly < yesterday) { const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] const dayName = days[date.getDay()] return { datePart: dayName.padEnd(9, " "), timePart } } // Older dates: DD-MON-YY HH:MM:SS (9 characters, no padding needed) const day = String(date.getDate()).padStart(2, "0") const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"] const month = months[date.getMonth()] const year = String(date.getFullYear()).slice(-2) // Last 2 digits of year return { datePart: `${day}-${month}-${year}`, timePart } } [V0_FILE]typescript:file="components/ui/select.tsx" isQuickEdit="true" isMerged="true" "use client" import type * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react" import { cn } from "@/lib/utils" function Select({ ...props }: React.ComponentProps) { return } function SelectGroup({ ...props }: React.ComponentProps) { return } function SelectValue({ ...props }: React.ComponentProps) { return } function SelectTrigger({ className, size = "default", children, ...props }: React.ComponentProps & { size?: "sm" | "default" }) { return ( {children} ) } function SelectContent({ className, children, position = "popper", ...props }: React.ComponentProps) { return ( {children} ) } function SelectLabel({ className, ...props }: React.ComponentProps) { return ( ) } function SelectItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function SelectSeparator({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollUpButton({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollDownButton({ className, ...props }: React.ComponentProps) { return ( ) } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } [V0_FILE]png:file="public/ControlFreq.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ControlFreq-liGkqPHkrBZHK1Q8iuUCCSauZWNcix.png" isMerged="true" [V0_FILE]plaintext:file="public/ControlFreqLogo.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ControlFreqLogo-CBFNPYBGZlFV9LqYOgfDBSNNbFVce0.webp" isMerged="true" [V0_FILE]typescriptreact:file="components/import-wizard/csv-data-table.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { AlertCircle, CheckCircle2 } from "lucide-react" import { useRef } from "react" import type { CSVRow } from "@/types/import-wizard" import { validateCSVRow } from "@/lib/import-wizard-utils" import { cn } from "@/lib/utils" interface CSVDataTableProps { csvRows: CSVRow[] selectedRowIds: number[] onRowSelectionChange: (selectedIds: number[]) => void } export function CSVDataTable({ csvRows, selectedRowIds, onRowSelectionChange }: CSVDataTableProps) { const lastSelectedIndexRef = useRef(null) const handleRowClick = (rowIndex: number, event: React.MouseEvent) => { const rowNumber = csvRows[rowIndex].row if (event.shiftKey && lastSelectedIndexRef.current !== null) { const start = Math.min(lastSelectedIndexRef.current, rowIndex) const end = Math.max(lastSelectedIndexRef.current, rowIndex) const rangeIds = csvRows.slice(start, end + 1).map((r) => r.row) const newSelection = Array.from(new Set([...selectedRowIds, ...rangeIds])) onRowSelectionChange(newSelection) } else if (event.ctrlKey || event.metaKey) { if (selectedRowIds.includes(rowNumber)) { onRowSelectionChange(selectedRowIds.filter((id) => id !== rowNumber)) } else { onRowSelectionChange([...selectedRowIds, rowNumber]) } lastSelectedIndexRef.current = rowIndex } else { if (selectedRowIds.length === 1 && selectedRowIds[0] === rowNumber) { onRowSelectionChange([]) lastSelectedIndexRef.current = null } else { onRowSelectionChange([rowNumber]) lastSelectedIndexRef.current = rowIndex } } } return (

Status Row Name PIN Start Time End Time {csvRows.map((row, index) => { const validation = validateCSVRow(row) const isSelected = selectedRowIds.includes(row.row) const isEven = index % 2 === 0 return ( handleRowClick(index, e)} className={cn( "cursor-pointer transition-colors", isSelected && "bg-primary/10 hover:bg-primary/15 dark:bg-primary/20 dark:hover:bg-primary/25", !isSelected && isEven && "hover:bg-muted/30", !isSelected && !isEven && "bg-muted/70 hover:bg-muted/80", )} aria-selected={isSelected} > {validation.valid ? ( ) : (

{validation.errors.map((error, idx) => (

• {error}

))}

)} {row.row} {row.name} {row.pin || Auto} {row.start_at || "-"} {row.end_at || "-"} ) })}

) } [V0_FILE]typescriptreact:file="components/datetime-picker.tsx" isMerged="true" "use client" import * as React from "react" import { Calendar } from "@/components/ui/calendar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { CalendarIcon, Clock } from "lucide-react" import { cn } from "@/lib/utils" interface DateTimePickerProps { value: string // ISO datetime string (YYYY-MM-DDTHH:MM) onChange: (value: string) => void placeholder?: string disabled?: boolean } export function DateTimePicker({ value, onChange, placeholder = "Select date and time", disabled, }: DateTimePickerProps) { const [open, setOpen] = React.useState(false) const [displayMonth, setDisplayMonth] = React.useState() const dateValue = value ? new Date(value) : undefined const timeValue = value ? value.split("T")[1] || "00:00" : "00:00" const [hours, minutes] = timeValue.split(":") const hoursNum = Number.parseInt(hours) || 0 const minutesNum = Number.parseInt(minutes) || 0 React.useEffect(() => { if (open) { setDisplayMonth(dateValue || new Date()) } }, [open]) const handleDateSelect = (date: Date | undefined) => { if (!date) return const year = date.getFullYear() const month = String(date.getMonth() + 1).padStart(2, "0") const day = String(date.getDate()).padStart(2, "0") const newValue = `${year}-${month}-${day}T${timeValue}` onChange(newValue) } const handleHourChange = (newHours: string) => { const h = Math.max(0, Math.min(23, Number.parseInt(newHours) || 0)) const formattedHours = String(h).padStart(2, "0") const formattedMinutes = String(minutesNum).padStart(2, "0") const newTime = `${formattedHours}:${formattedMinutes}` if (!value) { const today = new Date() const year = today.getFullYear() const month = String(today.getMonth() + 1).padStart(2, "0") const day = String(today.getDate()).padStart(2, "0") onChange(`${year}-${month}-${day}T${newTime}`) } else { const datePart = value.split("T")[0] onChange(`${datePart}T${newTime}`) } } const handleMinuteChange = (newMinutes: string) => { const m = Math.max(0, Math.min(59, Number.parseInt(newMinutes) || 0)) const formattedHours = String(hoursNum).padStart(2, "0") const formattedMinutes = String(m).padStart(2, "0") const newTime = `${formattedHours}:${formattedMinutes}` if (!value) { const today = new Date() const year = today.getFullYear() const month = String(today.getMonth() + 1).padStart(2, "0") const day = String(today.getDate()).padStart(2, "0") onChange(`${year}-${month}-${day}T${newTime}`) } else { const datePart = value.split("T")[0] onChange(`${datePart}T${newTime}`) } } const formatDisplayValue = () => { if (!value) return placeholder const date = new Date(value) return date.toLocaleString("en-GB", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false, }) } return (

Time

handleHourChange(e.target.value)} className="w-16 text-center font-mono" placeholder="HH" /> : handleMinuteChange(e.target.value)} className="w-16 text-center font-mono" placeholder="MM" />

) } [V0_FILE]plaintext:file="scripts/.gitkeep" isMerged="true" [V0_FILE]javascript:file="scripts/set-build-info.js" isMerged="true" const fs = require('fs'); const packageVersion = require('../package.json').version; const buildDate = new Date().toISOString(); fs.writeFileSync('.env.local', `NEXT_PUBLIC_VERSION_NUMBER=${packageVersion}\nNEXT_PUBLIC_BUILD_DATE=${buildDate}\n` ); [V0_FILE]typescript:file="app/api/generate-test-data/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import type { CSVRow, GenerateConfig } from "@/types/import-wizard" function generateTestData(config: GenerateConfig): CSVRow[] { const { rowCount, locationId, temporary, pinLength, generateStartDate, generateEndDate, startingRow = 0, namePrefix = "IMPORT", } = config const rows: CSVRow[] = [] for (let i = 0; i < rowCount; i++) { const timestamp = Date.now() const random = Math.random().toString(36).substring(2, 8).toUpperCase() const name = `${namePrefix}_${timestamp}_${random}_${i + 1}` let pin = "" if (pinLength > 0) { pin = Math.floor(Math.random() * Math.pow(10, pinLength)) .toString() .padStart(pinLength, "0") } let start_at = "" let end_at = "" if (temporary && generateStartDate) { const startDate = new Date() startDate.setDate(startDate.getDate() + Math.floor(Math.random() * 30)) startDate.setHours(Math.floor(Math.random() * 24)) startDate.setMinutes(Math.floor(Math.random() * 60)) const year = startDate.getFullYear() const month = String(startDate.getMonth() + 1).padStart(2, "0") const day = String(startDate.getDate()).padStart(2, "0") const hours = String(startDate.getHours()).padStart(2, "0") const minutes = String(startDate.getMinutes()).padStart(2, "0") start_at = `${year}-${month}-${day}T${hours}:${minutes}` if (generateEndDate) { const endDate = new Date(startDate) endDate.setHours(endDate.getHours() + Math.floor(Math.random() * 12) + 1) const endYear = endDate.getFullYear() const endMonth = String(endDate.getMonth() + 1).padStart(2, "0") const endDay = String(endDate.getDate()).padStart(2, "0") const endHours = String(endDate.getHours()).padStart(2, "0") const endMinutes = String(endDate.getMinutes()).padStart(2, "0") end_at = `${endYear}-${endMonth}-${endDay}T${endHours}:${endMinutes}` } } rows.push({ row: startingRow + i + 2, location: locationId, name, temporary, pin, start_at, end_at, }) } return rows } export async function POST(request: NextRequest) { try { const body = await request.json() const { rowCount, staticCount, dynamicCount, namePrefix } = body console.log(`[v0] Import Wizard: Data Tab: Starting generation of ${rowCount} rows`) // Generate static PINs (no start/end dates) const staticRows = generateTestData({ rowCount: staticCount, locationId: "", temporary: false, pinLength: 0, generateStartDate: false, generateEndDate: false, namePrefix, }) // Generate dynamic PINs (with start/end dates) const dynamicRows = generateTestData({ rowCount: dynamicCount, locationId: "", temporary: true, pinLength: 0, generateStartDate: true, generateEndDate: true, startingRow: staticCount, namePrefix, }) // Combine both sets of rows const rows = [...staticRows, ...dynamicRows] console.log( `[v0] Import Wizard: Data Tab: Generated ${rows.length} rows (${staticCount} static, ${dynamicCount} dynamic)`, ) return NextResponse.json({ rows, count: rows.length }, { status: 200 }) } catch (error: any) { console.error(`[v0] Server: /api/generate-test-data - Error: ${error.message}`) return NextResponse.json({ error: error.message || "Failed to generate test data" }, { status: 500 }) } } [V0_FILE]typescript:file="lib/debug-logs-context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useLayoutEffect, useState, useRef } from "react" interface LogEntry { id: number timestamp: Date message: string level: "log" | "warn" | "error" | "info" source: "CLIENT" | "SERVER" } interface DebugLogsContextType { logs: LogEntry[] clearLogs: () => void addLog: (message: string, level?: "log" | "warn" | "error" | "info", source?: "CLIENT" | "SERVER") => void warningCount: number errorCount: number } const DebugLogsContext = createContext(undefined) const MAX_LOGS = 1000 const originalConsole = { log: console.log.bind(console), warn: console.warn.bind(console), error: console.error.bind(console), info: console.info.bind(console), } const formatArgs = (args: any[]): string => { return args.map((arg) => (typeof arg === "object" ? JSON.stringify(arg, null, 2) : String(arg))).join(" ") } export function DebugLogsProvider({ children }: { children: React.ReactNode }) { const [logs, setLogs] = useState([]) const [warningCount, setWarningCount] = useState(0) const [errorCount, setErrorCount] = useState(0) const logIdCounter = useRef(0) const originalFetch = useRef() const addLogEntry = ( message: string, level: "log" | "warn" | "error" | "info" = "log", source: "CLIENT" | "SERVER" = "CLIENT", timestamp?: Date, ) => { setLogs((prev) => { const newLog: LogEntry = { id: logIdCounter.current++, timestamp: timestamp || new Date(), message, level, source, } const updated = [...prev, newLog] return updated.slice(-MAX_LOGS) }) if (level === "warn") { setWarningCount((prev) => prev + 1) } else if (level === "error") { setErrorCount((prev) => prev + 1) } } useLayoutEffect(() => { if (typeof window === "undefined") return // Override console methods to capture logs console.log = (...args: any[]) => { const message = formatArgs(args) addLogEntry(message, "log", "CLIENT") originalConsole.log(...args) } console.warn = (...args: any[]) => { const message = formatArgs(args) addLogEntry(message, "warn", "CLIENT") originalConsole.warn(...args) } console.error = (...args: any[]) => { const message = formatArgs(args) addLogEntry(message, "error", "CLIENT") originalConsole.error(...args) } console.info = (...args: any[]) => { const message = formatArgs(args) addLogEntry(message, "info", "CLIENT") originalConsole.info(...args) } return () => { // Restore original console methods on unmount console.log = originalConsole.log console.warn = originalConsole.warn console.error = originalConsole.error console.info = originalConsole.info } }, []) useEffect(() => { if (typeof window === "undefined") return originalFetch.current = window.fetch.bind(window) window.fetch = async (...args: Parameters) => { try { const response = await originalFetch.current!(...args) const serverLogsHeader = response.headers.get("X-Server-Logs") if (serverLogsHeader) { try { const decoded = atob(serverLogsHeader) const serverLogs: string[] = JSON.parse(decoded) serverLogs.forEach((logEntry) => { const [timestamp, message] = logEntry.split("|") addLogEntry(message, "log", "SERVER", new Date(timestamp)) }) } catch (e) { // Ignore parsing errors } } return response } catch (error) { throw error } } return () => { if (originalFetch.current) { window.fetch = originalFetch.current } } }, []) const addLog = ( message: string, level: "log" | "warn" | "error" | "info" = "log", source: "CLIENT" | "SERVER" = "CLIENT", ) => { addLogEntry(message, level, source) } const clearLogs = () => { setLogs([]) logIdCounter.current = 0 setWarningCount(0) setErrorCount(0) } return ( {children} ) } export function useDebugLogs() { const context = useContext(DebugLogsContext) if (context === undefined) { throw new Error("useDebugLogs must be used within a DebugLogsProvider") } return context } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Suspense } from "react" import { ThemeProvider } from "@/components/theme-provider" import { LogsProvider } from "@/lib/logs-context" import { AppProvider } from "@/lib/app-context" import { StartupLogger } from "@/components/startup-logger" import { StorageChecker } from "@/components/storage-checker" import { DebugLogsProvider } from "@/lib/debug-logs-context" import "./globals.css" const geistSans = Geist({ subsets: ["latin"], variable: "--font-sans", }) const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-mono", }) export const metadata: Metadata = { title: "Access Control Management System", description: "Remote resource management interface", generator: "v0.app", icons: { icon: "/ControlFreqLogo.webp", shortcut: "/ControlFreqLogo.webp", apple: "/ControlFreqLogo.webp", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...

}>{children} ) } [V0_FILE]typescript:file="types/import-wizard.ts" isMerged="true" export type WizardStep = "data" | "import" | "test" | "report" | "logs" export interface CSVRow { row: number location: string name: string temporary: boolean pin: string start_at: string end_at: string } export interface ImportResult { row: number name: string status: "pending" | "success" | "error" message?: string pinData?: any location: string temporary: boolean pin: string start_at: string end_at: string } export interface ImportStats { total: number processed: number accepted: number rejected: number duration: string } export interface Location { id: number title: string } export interface TestResult { row: number status: "success" | "error" message: string } export interface GenerateConfig { rowCount: number locationId: string temporary: boolean pinLength: number generateStartDate: boolean generateEndDate: boolean startingRow?: number namePrefix?: string } export interface LogEntry { id: number timestamp: Date message: string level: "log" | "warn" | "error" | "info" source: "CLIENT" | "SERVER" } [V0_FILE]typescriptreact:file="components/pin-table.tsx" isQuickEdit="true" isMerged="true" "use client" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip" import { Loader2, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react" import { cn } from "@/lib/utils" import { formatContextualTimestamp } from "@/lib/pin-utils" import { useRef } from "react" type SortField = "id" | "created_at" | "name" | "pin" | "start_at" | "end_at" | "location" type SortDirection = "asc" | "desc" interface SortConfig { key: SortField | null direction: SortDirection | null } interface PinListItem { id: number created_at: string name: string pin: string start_at: string end_at: string location: number counter_limit?: number | null } interface PinTableProps { pins: PinListItem[] selectedIds: number[] onSelectedIdsChange: (ids: number[]) => void sortConfig: SortConfig onSort: (field: SortField) => void loading: boolean extendingPin: boolean deletingPin: boolean batchProcessing: boolean actionNotification: { type: "success" | "error"; message: string } | null } export function PinTable({ pins, selectedIds, onSelectedIdsChange, sortConfig, onSort, loading, extendingPin, deletingPin, batchProcessing, actionNotification, }: PinTableProps) { const lastSelectedIndexRef = useRef(null) const SortIcon = ({ field }: { field: SortField }) => { if (sortConfig.key !== field) return return sortConfig.direction === "asc" ? ( ) : ( ) } const isLoading = loading || extendingPin || deletingPin || batchProcessing const selectRange = (fromIndex: number, toIndex: number) => { const start = Math.min(fromIndex, toIndex) const end = Math.max(fromIndex, toIndex) const rangeIds = pins.slice(start, end + 1).map((pin) => pin.id) const newSelection = Array.from(new Set([...selectedIds, ...rangeIds])) onSelectedIdsChange(newSelection) } return ( <>

onSort("id")}>

onSort("created_at")} >

Created

onSort("name")}>

Name

onSort("pin")}>

onSort("start_at")} >

Start

onSort("end_at")}>

End

{isLoading ? (

{loading && "Creating PIN..."} {extendingPin && "Extending PINs..."} {deletingPin && "Deleting PINs..."} {batchProcessing && "Processing import..."}

) : pins.length === 0 ? ( No matching results found ) : ( pins.map((pin, index) => { const isStatic = !pin.start_at && !pin.end_at const now = new Date() const isActiveDynamic = pin.start_at && pin.end_at && new Date(pin.start_at) <= now && now <= new Date(pin.end_at) const shouldHighlight = isStatic || isActiveDynamic return ( { if (e.shiftKey && lastSelectedIndexRef.current !== null) { e.preventDefault() selectRange(lastSelectedIndexRef.current, index) lastSelectedIndexRef.current = index } else if (e.ctrlKey || e.metaKey) { onSelectedIdsChange( selectedIds.includes(pin.id) ? selectedIds.filter((id) => id !== pin.id) : [...selectedIds, pin.id], ) lastSelectedIndexRef.current = index } else { if (selectedIds.includes(pin.id) && selectedIds.length === 1) { onSelectedIdsChange([]) lastSelectedIndexRef.current = null } else { onSelectedIdsChange([pin.id]) lastSelectedIndexRef.current = index } } }} className={cn( "cursor-pointer transition-colors", // Selection and zebra striping styles selectedIds.includes(pin.id) ? "bg-primary/10 hover:bg-primary/15 dark:bg-primary/20 dark:hover:bg-primary/25" : index % 2 === 0 ? "hover:bg-muted/30" : "bg-muted/70 hover:bg-muted/80", )} style={shouldHighlight ? { borderLeft: "4px solid rgb(34 197 94)" } : undefined} > {pin.id} {(() => { const formatted = formatContextualTimestamp(pin.created_at) return ( {formatted.datePart} {formatted.timePart} ) })()} {pin.name} {pin.pin}

Type:{" "} {!pin.start_at && !pin.end_at ? "Static" : "Dynamic"}

Uses:{" "} {pin.counter_limit === null || pin.counter_limit === undefined ? "Unlimited" : pin.counter_limit}

{isStatic ? (() => { const formatted = formatContextualTimestamp(pin.created_at) return ( {formatted.datePart} {formatted.timePart} ) })() : pin.start_at ? (() => { const formatted = formatContextualTimestamp(pin.start_at) return ( {formatted.datePart} {formatted.timePart} ) })() : ""} {isStatic ? "31-DEC-99 23:59:59" : pin.end_at ? (() => { const formatted = formatContextualTimestamp(pin.end_at) return ( {formatted.datePart} {formatted.timePart} ) })() : ""} ) }) )}

) } [V0_FILE]typescriptreact:file="app/devices/page.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useMemo } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { MapPin, Smartphone, RefreshCw, Loader2, Search, ArrowUpDown, ArrowUp, ArrowDown, X, Shield, } from "lucide-react" import { Navigation } from "@/components/navigation" import { useApp } from "@/lib/app-context" import { cn } from "@/lib/utils" import { useLogs } from "@/lib/logs-context" interface Device { id: number name: string phone_number: string hw_serial_no: string imei: string psw_fw: string psq_signal_strength: number location?: string } interface UsageStat { type: number name: string value: number } interface UsageStatsResponse { location_id: number location_name: string usage_date: string summary: UsageStat[] devices: Array<{ id: number name: string stats: UsageStat[] }> } type LocationSortConfig = { key: "id" | "title" | "time_zone" | "address" direction: "asc" | "desc" } | null type DeviceSortConfig = { key: "id" | "name" | "phone_number" | "hw_serial_no" | "imei" | "location" | "version" | "signal" direction: "asc" | "desc" } | null const renderSortIcon = (key: string, sortConfig: LocationSortConfig) => { if (!sortConfig || sortConfig.key !== key) { return } return sortConfig.direction === "asc" ? ( ) : ( ) } const renderDeviceSortIcon = (key: string, deviceSortConfig: DeviceSortConfig) => { if (!deviceSortConfig || deviceSortConfig.key !== key) { return } return deviceSortConfig.direction === "asc" ? ( ) : ( ) } export default function DevicesPage() { const { token, locations, locationsLoading, fetchLocations } = useApp() const { setRequestDetails, setResponse } = useLogs() const [isMounted, setIsMounted] = useState(false) const [devices, setDevices] = useState([]) const [devicesLoading, setDevicesLoading] = useState(false) const [deviceLocationId, setDeviceLocationId] = useState("") const [searchQuery, setSearchQuery] = useState("") const [sortConfig, setSortConfig] = useState({ key: "title", direction: "asc" }) const [deviceSearchQuery, setDeviceSearchQuery] = useState("") const [deviceSortConfig, setDeviceSortConfig] = useState({ key: "location", direction: "asc" }) const [selectedDeviceIds, setSelectedDeviceIds] = useState([]) const [selectedLocationIds, setSelectedLocationIds] = useState([]) const [locationsLastRefreshTime, setLocationsLastRefreshTime] = useState(null) const [locationsLastRefreshDuration, setLocationsLastRefreshDuration] = useState(null) const [devicesLastRefreshTime, setDevicesLastRefreshTime] = useState(null) const [devicesLastRefreshDuration, setDevicesLastRefreshDuration] = useState(null) const [devicesModalOpen, setDevicesModalOpen] = useState(false) const [mapModalOpen, setMapModalOpen] = useState(false) const [mapAddresses, setMapAddresses] = useState>([]) const [activeTab, setActiveTab] = useState("locations") const ALL_LOCATIONS_VALUE = "ALL" useEffect(() => { if (typeof window !== "undefined") { const storedTimestamp = localStorage.getItem("easypin_locations_timestamp") const storedDuration = localStorage.getItem("easypin_locations_duration") if (storedTimestamp) { setLocationsLastRefreshTime(new Date(storedTimestamp)) console.log("[v0] LOCATIONS: Restored timestamp from localStorage:", storedTimestamp) } if (storedDuration) { setLocationsLastRefreshDuration(Number.parseInt(storedDuration, 10)) console.log("[v0] LOCATIONS: Restored duration from localStorage:", storedDuration, "ms") } } }, []) useEffect(() => { if (token && locations.length === 0) { console.log("[v0] LOCATIONS: Initial load detected, token present, locations empty") const startTime = Date.now() console.log("[v0] LOCATIONS: Starting initial fetch at", new Date().toISOString()) fetchLocations(true) .then(() => { const duration = Date.now() - startTime console.log("[v0] LOCATIONS: Initial fetch completed in", duration, "ms") setLocationsLastRefreshTime(new Date()) setLocationsLastRefreshDuration(duration) localStorage.setItem("easypin_locations_timestamp", new Date().toISOString()) localStorage.setItem("easypin_locations_duration", duration.toString()) console.log("[v0] LOCATIONS: Timing state and localStorage updated") }) .catch((error) => { const duration = Date.now() - startTime console.error("[v0] LOCATIONS: Initial fetch failed after", duration, "ms", error) }) } else { console.log("[v0] LOCATIONS: Initial load skipped -", { hasToken: !!token, locationsCount: locations.length, }) } }, [token]) useEffect(() => { if (token && locations.length > 0 && !deviceLocationId) { setDeviceLocationId(locations[0].id.toString()) } }, [token, locations, deviceLocationId]) useEffect(() => { if (token && deviceLocationId && devicesModalOpen) { fetchDevices() } }, [token, deviceLocationId, devicesModalOpen]) useEffect(() => { setSelectedDeviceIds([]) }, [deviceLocationId]) useEffect(() => { setIsMounted(true) }, []) const filteredAndSortedLocations = useMemo(() => { let result = [...locations] if (searchQuery) { result = result.filter((location: any) => location.title.toLowerCase().includes(searchQuery.toLowerCase())) } if (sortConfig) { result.sort((a: any, b: any) => { const aValue = a[sortConfig.key] || "" const bValue = b[sortConfig.key] || "" if (sortConfig.key === "id") { return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue } const comparison = aValue.toString().localeCompare(bValue.toString()) return sortConfig.direction === "asc" ? comparison : -comparison }) } return result }, [locations, searchQuery, sortConfig]) const filteredAndSortedDevices = useMemo(() => { let filtered = devices if (deviceSearchQuery) { const query = deviceSearchQuery.toLowerCase() filtered = filtered.filter( (device) => device.id.toString().includes(query) || device.name.toLowerCase().includes(query) || device.phone_number.toLowerCase().includes(query) || device.hw_serial_no.toLowerCase().includes(query) || device.imei.toLowerCase().includes(query) || (deviceLocationId && locations .find((loc) => loc.id.toString() === deviceLocationId) ?.title.toLowerCase() .includes(query)) || device.psw_fw.toLowerCase().includes(query) || device.psq_signal_strength.toString().includes(query), ) } if (!deviceSortConfig) return filtered return [...filtered].sort((a, b) => { const { key, direction } = deviceSortConfig let aValue: any let bValue: any if (key === "location") { const locationTitle = locations.find((loc) => loc.id.toString() === deviceLocationId)?.title || "" aValue = locationTitle bValue = locationTitle } else if (key === "version") { aValue = a.psw_fw || "" bValue = b.psw_fw || "" } else if (key === "signal") { aValue = a.psq_signal_strength ?? -1 bValue = b.psq_signal_strength ?? -1 } else { aValue = a[key] bValue = b[key] } if (aValue < bValue) return direction === "asc" ? -1 : 1 if (aValue > bValue) return direction === "asc" ? 1 : -1 return 0 }) }, [devices, deviceSearchQuery, deviceSortConfig, deviceLocationId, locations]) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Ctrl+A or Cmd+A: Select all locations if ((e.ctrlKey || e.metaKey) && e.key === "a") { e.preventDefault() const allLocationIds = filteredAndSortedLocations.map((location: any) => location.id) setSelectedLocationIds(allLocationIds) } // ESC: Clear location selection if (e.key === "Escape") { setSelectedLocationIds([]) } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [filteredAndSortedLocations]) useEffect(() => { if (!devicesModalOpen) return const handleKeyDown = (e: KeyboardEvent) => { // Ctrl+A or Cmd+A: Select all devices if ((e.ctrlKey || e.metaKey) && e.key === "a") { e.preventDefault() const allDeviceIds = filteredAndSortedDevices.map((device) => device.id) setSelectedDeviceIds(allDeviceIds) } // ESC: Clear device selection if (e.key === "Escape") { setSelectedDeviceIds([]) } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [devicesModalOpen, filteredAndSortedDevices]) const handleSort = (key: "id" | "title" | "time_zone" | "address") => { setSortConfig((current) => { if (!current || current.key !== key) { return { key, direction: "asc" } } // Toggle between asc and desc return { key, direction: current.direction === "asc" ? "desc" : "asc" } }) } const handleDeviceSort = ( key: "id" | "name" | "phone_number" | "hw_serial_no" | "imei" | "location" | "version" | "signal", ) => { setDeviceSortConfig((current) => { if (!current || current.key !== key) { return { key, direction: "asc" } } // Toggle between asc and desc return { key, direction: current.direction === "asc" ? "desc" : "asc" } }) } const handleDeviceRowClick = (deviceId: number, event: React.MouseEvent) => { if (event.ctrlKey || event.metaKey) { setSelectedDeviceIds((prev) => { if (prev.includes(deviceId)) { return prev.filter((id) => id !== deviceId) } else { return [...prev, deviceId] } }) } else { // If clicking on the only selected row, deselect it setSelectedDeviceIds((prev) => { if (prev.length === 1 && prev.includes(deviceId)) { return [] } return [deviceId] }) } } const handleSelectAllLocations = () => { const allLocationIds = filteredAndSortedLocations.map((location: any) => location.id) setSelectedLocationIds(allLocationIds) } const handleClearLocationSelection = () => { setSelectedLocationIds([]) } const handleLocationRowClick = (locationId: number, event: React.MouseEvent) => { if (event.ctrlKey || event.metaKey) { setSelectedLocationIds((prev) => { if (prev.includes(locationId)) { return prev.filter((id) => id !== locationId) } else { return [...prev, locationId] } }) } else { setSelectedLocationIds((prev) => { if (prev.length === 1 && prev.includes(locationId)) { return [] } return [locationId] }) } } const fetchDevices = async () => { if (!token || !deviceLocationId) return setDevicesLoading(true) setResponse(null) const startTime = Date.now() try { if (deviceLocationId === "-1") { // Fetch devices from all locations in parallel const fetchPromises = locations.map(async (location) => { const url = `/api/devices/${location.id}` const headers = { Authorization: `Token ${token}`, Accept: "application/json", } const res = await fetch(url, { method: "GET", headers, }) const data = await res.json() if (res.ok && Array.isArray(data)) { // Add location info to each device return data.map((device: Device) => ({ ...device, location: location.title, })) } else if (res.ok && data.results && Array.isArray(data.results)) { return data.results.map((device: Device) => ({ ...device, location: location.title, })) } return [] }) const allDevicesArrays = await Promise.all(fetchPromises) const combinedDevices = allDevicesArrays.flat() const duration = Date.now() - startTime setRequestDetails({ method: "GET", url: "/api/devices/[all-locations]", headers: { Authorization: `Token ${token}`, Accept: "application/json", }, }) setResponse({ status: 200, data: { message: `Fetched devices from ${locations.length} locations`, totalDevices: combinedDevices.length, }, duration, }) setDevices(combinedDevices) setDevicesLastRefreshTime(new Date()) setDevicesLastRefreshDuration(duration) } else { // Single location fetch (existing logic) const url = `/api/devices/${deviceLocationId}` const headers = { Authorization: `Token ${token}`, Accept: "application/json", } setRequestDetails({ method: "GET", url, headers }) const res = await fetch(url, { method: "GET", headers, }) const data = await res.json() const duration = Date.now() - startTime setResponse({ status: res.status, data, duration }) const selectedLocation = locations.find((loc) => loc.id.toString() === deviceLocationId) const locationTitle = selectedLocation?.title || "" if (res.ok && Array.isArray(data)) { const enrichedDevices = data.map((device: Device) => ({ ...device, location: locationTitle, })) setDevices(enrichedDevices) setDevicesLastRefreshTime(new Date()) setDevicesLastRefreshDuration(duration) } else if (res.ok && data.results && Array.isArray(data.results)) { const enrichedDevices = data.results.map((device: Device) => ({ ...device, location: locationTitle, })) setDevices(enrichedDevices) setDevicesLastRefreshTime(new Date()) setDevicesLastRefreshDuration(duration) } } } catch (error: any) { const duration = Date.now() - startTime setResponse({ error: error.message, duration }) } finally { setDevicesLoading(false) } } const handleOpenDevicesModal = () => { if (selectedLocationIds.length > 0) { const firstSelectedLocation = locations.find((loc) => loc.id === selectedLocationIds[0]) if (firstSelectedLocation) { setDeviceLocationId(firstSelectedLocation.id.toString()) setDevicesModalOpen(true) setSelectedDeviceIds([]) setDeviceSearchQuery("") } } } const handleOpenMapModal = () => { if (selectedLocationIds.length > 0) { const selectedLocations = locations.filter((loc) => selectedLocationIds.includes(loc.id) && loc.address) if (selectedLocations.length > 0) { setMapAddresses( selectedLocations.map((loc) => ({ address: loc.address, title: loc.title, })), ) setMapModalOpen(true) } } } const handleFetchLocations = async () => { const startTime = Date.now() await fetchLocations(true) const duration = Date.now() - startTime const timestamp = new Date() setLocationsLastRefreshTime(timestamp) setLocationsLastRefreshDuration(duration) localStorage.setItem("easypin_locations_timestamp", timestamp.toISOString()) localStorage.setItem("easypin_locations_duration", duration.toString()) console.log("[v0] LOCATIONS: Manual refresh completed, localStorage updated") } const [barrierLoading, setBarrierLoading] = useState(false) const [barrierStatus, setBarrierStatus] = useState(null) const handleBarrier = async () => { if (!token || selectedDeviceIds.length === 0) return setBarrierLoading(true) setBarrierStatus(`Activating barrier for ${selectedDeviceIds.length} device(s)...`) console.log(`[v0] CLIENT: Barrier operation started for ${selectedDeviceIds.length} device(s)`) try { // If multiple devices selected, trigger barrier for each const barrierPromises = selectedDeviceIds.map(async (deviceId) => { console.log(`[v0] CLIENT: Triggering barrier for device ${deviceId}`) const url = `/api/barrier?deviceID=${deviceId}` const res = await fetch(url, { method: "GET", headers: { Authorization: `Token ${token}`, Accept: "application/json", }, }) const data = await res.json() if (res.ok) { console.log(`[v0] CLIENT: Barrier activated successfully for device ${deviceId}`) } else { console.error(`[v0] CLIENT: Barrier failed for device ${deviceId}:`, data.error) } return { deviceId, success: res.ok, data } }) const results = await Promise.all(barrierPromises) const successCount = results.filter((r) => r.success).length const failCount = results.length - successCount console.log(`[v0] CLIENT: Barrier operation completed - ${successCount} succeeded, ${failCount} failed`) if (successCount === results.length) { setBarrierStatus(`✓ Barrier activated successfully for ${successCount} device(s)`) } else if (successCount > 0) { setBarrierStatus(`⚠ Partially successful: ${successCount} succeeded, ${failCount} failed`) } else { setBarrierStatus(`✗ Barrier activation failed for all ${failCount} device(s)`) } setTimeout(() => { setBarrierStatus(null) }, 5000) } catch (error: any) { console.error("[v0] CLIENT: Barrier operation exception:", error) setBarrierStatus(`✗ Error: ${error.message}`) setTimeout(() => { setBarrierStatus(null) }, 5000) } finally { setBarrierLoading(false) } } if (!isMounted) { return (

Location Management

Manage locations and view registered devices

) } return (

Location Management

Manage locations and view registered devices

Location Management Manage your locations and devices

setSearchQuery(e.target.value)} className="pl-9 pr-9" /> {searchQuery && ( )}

{!token ? (

Authentication Required

Please authenticate on the Home page first

) : locationsLoading ? (

) : locations.length === 0 ? (

No locations found

Click Refresh to load locations

) : ( <>

handleSort("id")} >

ID {renderSortIcon("id", sortConfig)}

handleSort("title")} >

Location {renderSortIcon("title", sortConfig)}

handleSort("address")} >

Address {renderSortIcon("address", sortConfig)}

handleSort("time_zone")} >

Time Zone {renderSortIcon("time_zone", sortConfig)}

{filteredAndSortedLocations.length === 0 ? ( No locations match your search ) : ( filteredAndSortedLocations.map((location: any) => { const isSelected = selectedLocationIds.includes(location.id) return ( handleLocationRowClick(location.id, e)} className={`cursor-pointer ${ isSelected ? "bg-primary/10 hover:bg-primary/15 dark:bg-primary/20 dark:hover:bg-primary/25" : "hover:bg-muted/50" }`} > {location.id} {location.title} {location.address || "N/A"} {location.time_zone || "N/A"} ) }) )}

Showing {filteredAndSortedLocations.length} of {locations.length} location {locations.length !== 1 ? "s" : ""}

{selectedLocationIds.length} Row(s) Selected

Last Updated:{" "} {locationsLastRefreshTime ? ( <>{locationsLastRefreshTime.toLocaleTimeString()} ) : ( - )}

)}