[V0_FILE]markdown:file="ADMIN_FEATURES.md" # Enhanced Admin Panel Features The admin dashboard now includes comprehensive configuration and management capabilities. ## Features Added ### 1. **Pages Management Tab** - View all pages (login, admin, etc.) - Edit page titles and content directly from the UI - Save changes to the database with a single click - Display last updated timestamps - Real-time updates across the app ### 2. **Database Information Tab** - View PostgreSQL version information - List all tables in the database - Display total table count - Monitor database structure ### 3. **App Settings Tab** - View app name and configuration - Display server port and environment - Show backend API URL - Display app version and metadata ### 4. **Enhanced UI Components** - Professional gradient header with logout button - Tabbed navigation for organized layout - Error handling with user-friendly messages - Loading states during data fetch - Clean, modern design with Tailwind CSS - Icons from lucide-react for better UX ### 5. **Logout Functionality** - Quick logout button in the header - Clears session and returns to home view - Secure session management ## New API Endpoints Added to `server/index.js`: - `GET /api/pages` - List all pages with metadata - `PUT /api/page/:type` - Update a specific page content - `GET /api/db-info` - Get database information and table list ## Backend Changes - Updated Express server with new management endpoints - Added support for updating page content via PUT requests - Added database info endpoint for diagnostics - Improved error handling and status codes ## How to Use 1. **Login**: Click LOGIN sidebar button 2. **Access Admin**: Click ADMIN sidebar button 3. **Manage Pages**: - Click "Edit" on any page - Modify title and content - Click "Save" to update database 4. **View Database Info**: Click Database tab to see schema 5. **Check Settings**: View app configuration in Settings tab 6. **Logout**: Click logout button in header ## Updated Components - `src/components/AdminPanel.tsx` - Complete rewrite with tabs - `server/index.js` - New management endpoints ## Updated Dependencies - Added `concurrently` to `devDependencies` for running server + dev in one command - Added `@types/express` and `@types/node` for better TypeScript support ## Updated Scripts New npm scripts available: \`\`\`bash npm run dev:all # Run server + frontend together npm run server:dev # Run server with file watching \`\`\` ## Next Steps (Optional) Future enhancements could include: - User authentication with passwords - Create/delete new pages - Database backup and restore - Real-time analytics - Application logs viewer - Email notification settings [V0_FILE]markdown:file="INSTRUCTION-daw.md" # Pano App - Complete Instructions A full-featured interactive panorama viewer and admin dashboard with Neon PostgreSQL backend. ## Table of Contents 1. [Quick Start](#quick-start) 2. [Prerequisites](#prerequisites) 3. [Installation](#installation) 4. [Configuration](#configuration) 5. [Running the App](#running-the-app) 6. [Features](#features) 7. [Admin Dashboard](#admin-dashboard) 8. [API Reference](#api-reference) 9. [Database Schema](#database-schema) 10. [Troubleshooting](#troubleshooting) 11. [Deployment](#deployment) --- ## Quick Start For experienced developers: \`\`\`bash # 1. Clone and install git clone cd pano npm install # 2. Set environment variables (copy from .env.example or use existing .env) export NEON_DATABASE_URL="your-neon-connection-string" # 3. Initialize database npm run migrate # 4. Run app (both server and frontend) npm run dev:all \`\`\` Then open http://localhost:5174 --- ## Prerequisites ### Required - **Node.js** 18+ ([download](https://nodejs.org/)) - **npm** 9+ (comes with Node.js) - **Neon Account** ([sign up free](https://console.neon.tech)) ### Optional - Git for version control - Docker for containerization - Postman or curl for API testing --- ## Installation ### Step 1: Clone the Repository \`\`\`bash git clone https://github.com/monpalapas/pano.git cd pano \`\`\` ### Step 2: Install Dependencies \`\`\`bash npm install \`\`\` This installs all required packages including: - React 18 & React DOM - Express.js (backend server) - PostgreSQL client (pg) - Leaflet (mapping library) - Tailwind CSS (styling) - Vite (build tool) ### Step 3: Verify Installation \`\`\`bash npm run typecheck # Check TypeScript npm run lint # Check code quality \`\`\` --- ## Configuration ### Step 1: Get Neon Connection String 1. Go to [console.neon.tech](https://console.neon.tech) 2. Sign in or create account 3. Create a new project 4. Copy the connection string (format: `postgresql://user:password@host/db?sslmode=require`) ### Step 2: Set Environment Variables Create or update `.env` file in project root: \`\`\`bash # Neon Database Connection NEON_DATABASE_URL=postgresql://neondb_owner:your_password@ep-xxxxx.ap-southeast-1.aws.neon.tech/neondb?sslmode=require&channel_binding=require # Supabase (for other features) VITE_SUPABASE_URL=https://your-project.supabase.co VITE_SUPABASE_ANON_KEY=your-anon-key # Google Drive (for image loading) GOOGLE_DRIVE_API_KEY=your-api-key # Optional: Custom ports PORT=9999 # Backend server (default) VITE_PORT=5174 # Frontend (default) \`\`\` ### Step 3: Initialize Database Run the migration script to create tables and seed data: \`\`\`bash npm run migrate \`\`\` Expected output: \`\`\` Connecting to Neon... ✓ Connected Running migration... ✓ Migration complete ✓ Table "pages" contains 2 rows: - login: "Login Page" - admin: "Admin Panel" \`\`\` --- ## Running the App ### Development Mode (Recommended) Run both server and frontend together: \`\`\`bash npm run dev:all \`\`\` This opens: - Frontend: http://localhost:5174 - Backend: http://localhost:9999 ### Individual Services Run frontend only: \`\`\`bash npm run dev \`\`\` Run backend only: \`\`\`bash npm run server \`\`\` Run backend with auto-reload on file changes: \`\`\`bash npm run server:dev \`\`\` ### Build for Production \`\`\`bash npm run build \`\`\` Creates `dist/` folder with optimized frontend build. ### Production Deployment \`\`\`bash npm run start \`\`\` Builds and runs the production server (backend + frontend). --- ## Features ### 🎨 Panorama Viewer - Interactive 360° panorama visualization - **Drag to Pan**: Click and drag to explore the image - **Scroll to Zoom**: Mouse wheel or trackpad for zoom - **Touch Support**: Swipe on mobile devices - **Location Selection**: Dropdown to switch between locations - Three sample locations: - Site A - Main Plaza - Site B - Emergency Center - Site C - Evacuation Point ### 🗺️ Maps - **Base Map**: Street, satellite, and terrain views - **Elevation Map**: Topographic visualization - **Evacuation Routes**: Pre-planned evacuation paths - **Hazard Zones**: Risk area mapping - **Boundary Maps**: Purok, Barangay, Municipal levels - **Interactive Features**: Layer toggling, zoom controls ### 📊 Dashboard - **Image Gallery**: Browse photos from locations - **Real-time Data**: Fetches from Google Drive - **Responsive Design**: Works on desktop, tablet, mobile ### 🔐 Authentication - **Login System**: Password-protected admin access - **Session Management**: Browser localStorage - **Logout**: Clear session and return to home ### ⚙️ Admin Dashboard - **Pages Management**: Edit login/admin content - **Database Info**: Monitor database structure - **App Settings**: View configuration - **Gradient Header**: Professional UI - **Tab Navigation**: Organized interface --- ## Admin Dashboard ### Accessing Admin Panel 1. Open http://localhost:5174 2. Click **LOGIN** in sidebar 3. Enter any password (demo mode) 4. Click **ADMIN** in sidebar ### Pages Tab Edit page content directly in the database: \`\`\` 1. Select page from list 2. Click "Edit" 3. Modify Title and Content 4. Click "Save" 5. Changes appear immediately app-wide \`\`\` ### Database Tab Monitor your Neon database: - **PostgreSQL Version**: View current version - **Table Count**: Number of tables in database - **Table List**: All tables with public schema - **Status**: Connection health indicator ### Settings Tab View current application configuration: - **App Name**: Pano Dashboard - **Server Port**: 9999 - **Environment**: development/production - **Backend URL**: http://localhost:9999 - **Status**: Running status ### Logout Click the **Logout** button in the top-right corner to: - Clear session - Return to home view - Remove admin access --- ## API Reference All endpoints are at `http://localhost:9999` ### Health Check \`\`\`bash GET /api/health \`\`\` Response: \`\`\`json { "ok": true } \`\`\` ### Get Single Page \`\`\`bash GET /api/page?type=login GET /api/page?type=admin \`\`\` Response: \`\`\`json { "success": true, "page": { "id": 1, "type": "login", "title": "Login Page", "content": "Welcome to Pano Dashboard..." } } \`\`\` ### List All Pages \`\`\`bash GET /api/pages \`\`\` Response: \`\`\`json { "success": true, "pages": [ { "id": 1, "type": "login", "title": "Login Page", "created_at": "2025-12-01T00:00:00Z", "updated_at": "2025-12-01T00:00:00Z" } ] } \`\`\` ### Update Page \`\`\`bash PUT /api/page/:type Content-Type: application/json { "title": "New Title", "content": "New content here" } \`\`\` Response: \`\`\`json { "success": true, "page": { /* updated page */ } } \`\`\` ### Get Database Info \`\`\`bash GET /api/db-info \`\`\` Response: \`\`\`json { "success": true, "version": "PostgreSQL 15.2", "tableCount": 3, "tables": ["pages", "users", "settings"] } \`\`\` ### Execute SQL Query (Dev Only) \`\`\`bash POST /api/query Content-Type: application/json { "sql": "SELECT * FROM pages", "params": [] } \`\`\` Response: \`\`\`json { "rows": [ /* query results */ ], "rowCount": 2 } \`\`\` --- ## Database Schema ### Pages Table \`\`\`sql CREATE TABLE pages ( id SERIAL PRIMARY KEY, type VARCHAR(50) UNIQUE NOT NULL, -- 'login', 'admin' title VARCHAR(255) NOT NULL, content TEXT NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); \`\`\` ### Sample Data \`\`\`sql INSERT INTO pages VALUES (1, 'login', 'Login Page', 'Welcome to Pano...', now(), now()), (2, 'admin', 'Admin Panel', 'Admin Dashboard...', now(), now()); \`\`\` ### Adding Custom Tables Connect to Neon and run: \`\`\`sql CREATE TABLE my_table ( id SERIAL PRIMARY KEY, name VARCHAR(255), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); \`\`\` --- ## Troubleshooting ### Issue: "NEON_DATABASE_URL not set" **Solution:** \`\`\`bash # Check if .env file exists ls -la .env # Set environment variable export NEON_DATABASE_URL="postgresql://..." # Or add to .env and restart echo "NEON_DATABASE_URL=postgresql://..." >> .env \`\`\` ### Issue: "Port 9999 already in use" **Solution:** \`\`\`bash # Kill process on port 9999 lsof -ti:9999 | xargs kill -9 # Or use different port PORT=9998 npm run server \`\`\` ### Issue: "Connection refused to localhost:9999" **Solution:** \`\`\`bash # Make sure server is running npm run server # Check if server is listening netstat -an | grep 9999 # View server logs for errors npm run server:dev \`\`\` ### Issue: "Failed to load page from database" **Solution:** \`\`\`bash # Run migration to create tables npm run migrate # Check database connection node -e " import('pg').then(m => { const { Client } = m; const client = new Client({ connectionString: process.env.NEON_DATABASE_URL }); client.connect().then(() => { console.log('✓ Connected to Neon'); return client.end(); }).catch(err => { console.error('✗ Connection failed:', err.message); }); }); " \`\`\` ### Issue: App falls back to public files instead of database **Reasons:** - Server is offline - Database query failed - Incorrect API endpoint **Solution:** - Verify server is running: `npm run server` - Check network tab in browser DevTools - View server logs for errors --- ## Deployment ### Deploy to Vercel (Frontend Only) 1. Push code to GitHub 2. Connect at [vercel.com](https://vercel.com) 3. Set `VITE_` environment variables 4. Deploy ### Deploy to Railway (Full Stack) 1. Connect GitHub repo at [railway.app](https://railway.app) 2. Add Neon PostgreSQL plugin 3. Set `NEON_DATABASE_URL` environment 4. Deploy Railway automatically: - Detects Node.js project - Installs dependencies - Runs migrations - Starts server ### Deploy to Docker Create `Dockerfile`: \`\`\`dockerfile FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build EXPOSE 9999 CMD ["npm", "run", "start"] \`\`\` Build and run: \`\`\`bash docker build -t pano-app . docker run -p 9999:9999 \ -e NEON_DATABASE_URL="postgresql://..." \ pano-app \`\`\` ### Environment Variables for Production \`\`\`env # Required NEON_DATABASE_URL=postgresql://user:pass@host/db?sslmode=require # Optional NODE_ENV=production PORT=9999 # Vite VITE_API_URL=https://api.yourdomain.com \`\`\` ### Pre-deployment Checklist - [ ] Environment variables configured - [ ] Database migrations run - [ ] Build succeeds: `npm run build` - [ ] Tests pass: `npm run lint` - [ ] No console errors in DevTools - [ ] Tested on multiple browsers - [ ] Images load correctly - [ ] Admin panel accessible - [ ] Database connection verified - [ ] CORS configured if needed --- ## Project Structure \`\`\` pano/ ├── src/ │ ├── components/ │ │ ├── AdminPanel.tsx # Admin dashboard │ │ ├── LoginPage.tsx # Login form │ │ ├── PanoramaViewer.tsx # 360° viewer │ │ ├── ImageGallery.tsx # Photo gallery │ │ ├── InteractiveMap.tsx # Map component │ │ ├── Sidebar.tsx # Navigation │ │ └── TopBar.tsx # Header │ ├── config/ │ │ └── driveFolders.ts # Google Drive config │ ├── utils/ │ │ └── driveImageLoader.ts # Image fetching │ ├── App.tsx # Main app │ ├── main.tsx # Entry point │ └── index.css # Global styles ├── server/ │ ├── index.js # Express server │ ├── migrate.js # Database migration │ └── init-db.sql # SQL schema ├── public/ │ ├── login.txt # Fallback login content │ └── admin.txt # Fallback admin content ├── package.json # Dependencies ├── .env # Environment variables ├── vite.config.ts # Vite config ├── tsconfig.json # TypeScript config └── tailwind.config.js # Tailwind config \`\`\` --- ## Available Scripts \`\`\`bash # Development npm run dev # Frontend dev server (5174) npm run server # Backend server (9999) npm run server:dev # Backend with auto-reload npm run dev:all # Both server + frontend together # Database npm run migrate # Initialize database schema # Production npm run build # Build for production npm run start # Build + run server npm run preview # Preview production build # Code Quality npm run lint # Run ESLint npm run typecheck # Check TypeScript # Utilities npm audit fix # Fix security vulnerabilities \`\`\` --- ## Support & Resources ### Documentation Files - `README.md` - Project overview - `NEON_SETUP.md` - Neon database setup - `ADMIN_FEATURES.md` - Admin panel features - `MIGRATION_STATUS.md` - Migration info - `server/README.md` - Server documentation ### External Resources - [Neon Documentation](https://neon.tech/docs) - [React Documentation](https://react.dev) - [Tailwind CSS](https://tailwindcss.com) - [Leaflet Maps](https://leafletjs.com) - [Express.js](https://expressjs.com) - [PostgreSQL Docs](https://www.postgresql.org/docs) ### Community - GitHub Issues: Report bugs or request features - Email: contact@example.com --- ## License This project is licensed under the MIT License. --- ## Quick Reference | Task | Command | |------|---------| | Start everything | `npm run dev:all` | | Just frontend | `npm run dev` | | Just backend | `npm run server` | | Setup database | `npm run migrate` | | Build for prod | `npm run build` | | Run in prod | `npm run start` | | Check code | `npm run lint` | | Check types | `npm run typecheck` | | Fix security | `npm audit fix` | --- **Last Updated:** December 1, 2025 **Version:** 1.0.0 [V0_FILE]markdown:file="MIGRATION_STATUS.md" # Pano App - Neon Database Migration Complete ✓ The app is now fully migrated to use Neon Postgres for storing login and admin page content. ## What's Running - **Frontend**: http://localhost:5174 (Vite dev server) - **Backend**: http://localhost:9999 (Express proxy server) - **Database**: Neon (connected via `NEON_DATABASE_URL` from `.env`) ## Database Schema The `pages` table contains: \`\`\` id (SERIAL PRIMARY KEY) type (VARCHAR UNIQUE) - 'login' or 'admin' title (VARCHAR) - Page title content (TEXT) - Page content created_at (TIMESTAMP) updated_at (TIMESTAMP) \`\`\` Current data: - **login**: "Login Page" - Welcome message for login - **admin**: "Admin Panel" - Admin dashboard content ## How It Works 1. **Frontend Components**: - `src/components/LoginPage.tsx` → fetches from `/api/page?type=login` - `src/components/AdminPanel.tsx` → fetches from `/api/page?type=admin` - Both have fallback to `public/*.txt` files if the server is offline 2. **Backend Endpoints**: - `GET /api/health` - Health check - `GET /api/page?type=` - Fetch page content - `POST /api/query` - Execute arbitrary SQL (dev only) 3. **Database Initialization**: - Run `npm run migrate` to create the schema and seed data ## Testing the App 1. Open http://localhost:5174 2. Click **LOGIN** in the sidebar 3. See the login content fetched from the database 4. Enter any password to log in 5. Click **ADMIN** to view admin content from the database ## Updating Page Content ### Via API \`\`\`bash curl -X POST http://localhost:9999/api/query \ -H "Content-Type: application/json" \ -d '{ "sql": "UPDATE pages SET content = $1 WHERE type = $2", "params": ["New admin content", "admin"] }' \`\`\` ### Via Neon Console Go to Neon dashboard → SQL Editor and run: \`\`\`sql UPDATE pages SET content = 'Your new content' WHERE type = 'admin'; \`\`\` ## Available Commands \`\`\`bash npm run dev # Start frontend dev server npm run server # Start backend proxy server npm run migrate # Initialize database schema npm run build # Build for production npm run lint # Run ESLint \`\`\` ## Production Deployment For production, you would: 1. Deploy the frontend to Vercel/Netlify (just the `dist/` folder) 2. Deploy the Express server to Railway, Render, or similar 3. Set `NEON_DATABASE_URL` environment variable on the hosting platform 4. Update API URLs in components to point to your production server ## Environment All sensitive variables are in `.env`: - `NEON_DATABASE_URL` - Your Neon connection string - Other Supabase/Google Drive credentials (existing) **Never commit `.env` to version control!** [V0_FILE]markdown:file="NEON_SETUP.md" # Supabase Database Setup Guide This app uses Supabase PostgreSQL for all database operations. ## Prerequisites - A Supabase account and project - Node.js and npm installed - `DATABASE_URL` environment variable set ## Setup Steps ### 1. Create Supabase Project and Get Connection String 1. Go to [supabase.com](https://supabase.com) and sign in 2. Create a new project (choose a strong password) 3. Wait for the project to be provisioned 4. Go to **Project Settings** > **Database** 5. Under "Connection string", select **Transaction pooler** mode 6. Copy the connection string (it should look like): - `postgresql://postgres.YOUR-REF:[YOUR-PASSWORD]@aws-0-ap-southeast-1.pooler.supabase.com:6543/postgres` 7. Go to **Project Settings** > **API** 8. Copy your `Project URL` (VITE_SUPABASE_URL) 9. Copy your `anon public` key (VITE_SUPABASE_ANON_KEY) ### 2. Initialize Database Schema Run the SQL migration to create the `pages` table with seed data: \`\`\`bash # Option A: Using Supabase SQL Editor (Recommended) # 1. Go to your Supabase Dashboard > SQL Editor # 2. Copy the contents of server/init-db.sql # 3. Paste and run in the SQL Editor # Option B: Using psql (if installed) psql $DATABASE_URL < server/init-db.sql # Option C: Using the migration script npm run migrate \`\`\` ### 3. Set Environment Variables Create a `.env` file in the project root: \`\`\`bash DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres VITE_SUPABASE_URL=https://[YOUR-PROJECT-REF].supabase.co VITE_SUPABASE_ANON_KEY=[YOUR-ANON-KEY] \`\`\` ### 4. Install Dependencies and Run \`\`\`bash npm install npm run migrate # Initialize database schema npm run dev:all # Start both frontend and backend \`\`\` ## Supabase Features - **Real-time subscriptions**: Enable real-time updates for your tables - **Row Level Security (RLS)**: Add security policies to your tables - **Storage**: Use Supabase Storage for file uploads - **Edge Functions**: Already configured in `supabase/functions/` ## Connection Pooling Supabase provides connection pooling through PgBouncer. The connection string format is: **Transaction pooler (Recommended):** \`\`\` postgresql://postgres.YOUR-REF:[YOUR-PASSWORD]@aws-0-region.pooler.supabase.com:6543/postgres \`\`\` **Direct connection (for migrations only):** \`\`\` postgresql://postgres:[YOUR-PASSWORD]@db.YOUR-REF.supabase.co:5432/postgres \`\`\` Note: Use port `6543` for pooled connections and `5432` for direct connections. [V0_FILE]markdown:file="README.md" # MapDirectory2 *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/astigkorn-ops-projects/v0-map-directory2) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/8UU30TAX5df) ## 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/astigkorn-ops-projects/v0-map-directory2](https://vercel.com/astigkorn-ops-projects/v0-map-directory2)** ## Build your app Continue building your app on: **[https://v0.app/chat/8UU30TAX5df](https://v0.app/chat/8UU30TAX5df)** ## 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]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import dynamic from "next/dynamic" // Dynamically import the React app to avoid SSR issues with client-side libraries const App = dynamic(() => import("@/src/App"), { ssr: false }) export default function Home() { return } [V0_FILE]json:file="components.json" { "$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/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" 'use client' import * as React from 'react' import * as AccordionPrimitive from '@radix-ui/react-accordion' import { ChevronDown } from 'lucide-react' import { cn } from '@/lib/utils' const Accordion = AccordionPrimitive.Root const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AccordionItem.displayName = 'AccordionItem' const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( svg]:rotate-180', className, )} {...props} > {children} )) AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName const AccordionContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => (

{children}

)) AccordionContent.displayName = AccordionPrimitive.Content.displayName export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" 'use client' import * as React from 'react' import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog' import { cn } from '@/lib/utils' import { buttonVariants } from '@/components/ui/button' const AlertDialog = AlertDialogPrimitive.Root const AlertDialogTrigger = AlertDialogPrimitive.Trigger const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName const AlertDialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogHeader.displayName = 'AlertDialogHeader' const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogFooter.displayName = 'AlertDialogFooter' const AlertDialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName const AlertDialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName const AlertDialogAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName const AlertDialogCancel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const alertVariants = cva( 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', { variants: { variant: { default: 'bg-background text-foreground', destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive', }, }, defaultVariants: { variant: 'default', }, }, ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = 'Alert' const AlertTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) AlertTitle.displayName = 'AlertTitle' const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) AlertDescription.displayName = 'AlertDescription' export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" 'use client' import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio' const AspectRatio = AspectRatioPrimitive.Root export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" 'use client' import * as React from 'react' import * as AvatarPrimitive from '@radix-ui/react-avatar' import { cn } from '@/lib/utils' const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const badgeVariants = cva( 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', outline: 'text-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (
) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { ChevronRight, MoreHorizontal } from 'lucide-react' import { cn } from '@/lib/utils' const Breadcrumb = React.forwardRef< HTMLElement, React.ComponentPropsWithoutRef<'nav'> & { separator?: React.ReactNode } >(({ ...props }, ref) =>
) Breadcrumb.displayName = 'Breadcrumb' const BreadcrumbList = React.forwardRef< HTMLOListElement, React.ComponentPropsWithoutRef<'ol'> >(({ className, ...props }, ref) => (
)) BreadcrumbList.displayName = 'BreadcrumbList' const BreadcrumbItem = React.forwardRef< HTMLLIElement, React.ComponentPropsWithoutRef<'li'> >(({ className, ...props }, ref) => (
)) BreadcrumbItem.displayName = 'BreadcrumbItem' const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, React.ComponentPropsWithoutRef<'a'> & { asChild?: boolean } >(({ asChild, className, ...props }, ref) => { const Comp = asChild ? Slot : 'a' return ( ) }) BreadcrumbLink.displayName = 'BreadcrumbLink' const BreadcrumbPage = React.forwardRef< HTMLSpanElement, React.ComponentPropsWithoutRef<'span'> >(({ className, ...props }, ref) => ( )) BreadcrumbPage.displayName = 'BreadcrumbPage' const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (
) BreadcrumbSeparator.displayName = 'BreadcrumbSeparator' const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => ( ) BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis' export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } [V0_FILE]typescriptreact:file="components/ui/button-group.tsx" import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' import { Separator } from '@/components/ui/separator' const buttonGroupVariants = cva( "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>]:focus-visible:relative [&>]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class='w-'])]:w-fit [&>input]:flex-1", { variants: { orientation: { horizontal: '[&>:not(:first-child)]:rounded-l-none [&>:not(:first-child)]:border-l-0 [&>:not(:last-child)]:rounded-r-none', vertical: 'flex-col [&>:not(:first-child)]:rounded-t-none [&>:not(:first-child)]:border-t-0 [&>:not(:last-child)]:rounded-b-none', }, }, defaultVariants: { orientation: 'horizontal', }, }, ) function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps) { return (
) } function ButtonGroupText({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) { const Comp = asChild ? Slot : 'div' return ( ) } function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }: React.ComponentProps) { return ( ) } export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" 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 buttonVariants = cva( 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-10 px-4 py-2', sm: 'h-9 rounded-md px-3', lg: 'h-11 rounded-md px-8', icon: 'h-10 w-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : 'button' return ( ) }, ) Button.displayName = 'Button' export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" 'use client' import * as React from 'react' import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react' import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker' import { cn } from '@/lib/utils' import { Button, buttonVariants } from '@/components/ui/button' function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps['variant'] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className, )} captionLayout={captionLayout} formatters={{ formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }), ...formatters, }} classNames={{ root: cn('w-fit', defaultClassNames.root), months: cn( 'flex gap-4 flex-col md:flex-row relative', defaultClassNames.months, ), month: cn('flex flex-col w-full gap-4', defaultClassNames.month), nav: cn( 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav, ), button_previous: cn( buttonVariants({ variant: buttonVariant }), 'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous, ), button_next: cn( buttonVariants({ variant: buttonVariant }), 'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next, ), month_caption: cn( 'flex items-center justify-center h-[--cell-size] w-full px-[--cell-size]', defaultClassNames.month_caption, ), dropdowns: cn( 'w-full flex items-center text-sm font-medium justify-center h-[--cell-size] gap-1.5', defaultClassNames.dropdowns, ), dropdown_root: cn( 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root, ), dropdown: cn( 'absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown, ), caption_label: cn( 'select-none font-medium', captionLayout === 'label' ? 'text-sm' : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label, ), table: 'w-full border-collapse', weekdays: cn('flex', defaultClassNames.weekdays), weekday: cn( 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday, ), week: cn('flex w-full mt-2', defaultClassNames.week), week_number_header: cn( 'select-none w-[--cell-size]', defaultClassNames.week_number_header, ), week_number: cn( 'text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number, ), day: cn( 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day, ), range_start: cn( 'rounded-l-md bg-accent', defaultClassNames.range_start, ), range_middle: cn('rounded-none', defaultClassNames.range_middle), range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end), today: cn( 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today, ), outside: cn( 'text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside, ), disabled: cn( 'text-muted-foreground opacity-50', defaultClassNames.disabled, ), hidden: cn('invisible', defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return (
) }, Chevron: ({ className, orientation, ...props }) => { if (orientation === 'left') { return ( ) } if (orientation === 'right') { return ( ) } return ( ) }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (
{children}
) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return ( ) }) CarouselPrevious.displayName = 'CarouselPrevious' const CarouselNext = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = 'outline', size = 'icon', ...props }, ref) => { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) }) CarouselNext.displayName = 'CarouselNext' export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" 'use client' import * as React from 'react' import * as RechartsPrimitive from 'recharts' import { cn } from '@/lib/utils' // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: '', dark: '.dark' } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error('useChart must be used within a ') } return context } const ChartContainer = React.forwardRef< HTMLDivElement, React.ComponentProps<'div'> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >['children'] } >(({ id, className, children, config, ...props }, ref) => { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, '')}` return (
{children}
) }) ChartContainer.displayName = 'Chart' const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([_, config]) => config.theme || config.color, ) if (!colorConfig.length) { return null } return (

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This