[V0_FILE]markdown:file="README.md" # Next.js web application *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/s1thasapu-5573s-projects/v0-next-js-web-application) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/HnMIOIrMCZ0) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/s1thasapu-5573s-projects/v0-next-js-web-application](https://vercel.com/s1thasapu-5573s-projects/v0-next-js-web-application)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/HnMIOIrMCZ0](https://v0.dev/chat/projects/HnMIOIrMCZ0)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 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]typescriptreact:file="app/setup/page.tsx" export default function SetupPage() { return (

Environment Setup Required

The application requires Supabase environment variables to be configured. Please follow these steps:

Create a .env.local file in your project root

Add the following variables:

                
                  NEXT_PUBLIC_SUPABASE_URL=your_supabase_url{"\n"}
                  NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Restart your development server

You can find these values in your Supabase project dashboard under Settings > API.

) } [V0_FILE]typescriptreact:file="components/setup-status.tsx" "use client" import { useState, useEffect } from "react" import { supabase } from "@/lib/supabase" import { Card, CardContent } from "@/components/ui/card" import { CheckCircle, XCircle, Loader2 } from "lucide-react" interface SetupStatus { database: boolean storage: boolean loading: boolean } export default function SetupStatus() { const [status, setStatus] = useState({ database: false, storage: false, loading: true, }) useEffect(() => { checkSetup() }, []) const checkSetup = async () => { try { // Check database const { error: dbError } = await supabase.from("orders").select("count", { count: "exact", head: true }) const databaseOk = !dbError // Check storage const { error: storageError } = await supabase.storage.from("prescriptions").list("", { limit: 1 }) const storageOk = !storageError setStatus({ database: databaseOk, storage: storageOk, loading: false, }) } catch (error) { console.error("Setup check failed:", error) setStatus({ database: false, storage: false, loading: false, }) } } if (status.loading) { return (

Checking setup status...

) } const allGood = status.database && status.storage if (allGood) return null return (

Setup Status

{status.database ? ( ) : ( )} Database table 'orders'

{status.storage ? ( ) : ( )} Storage bucket 'prescriptions'

{!allGood && (

Please complete the setup instructions to use all features.

)}

) } [V0_FILE]typescriptreact:file="contexts/auth-context.tsx" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" interface AuthContextType { isAuthenticated: boolean phone: string | null login: (phone: string, otp: string) => Promise logout: () => void loading: boolean } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: React.ReactNode }) { const [isAuthenticated, setIsAuthenticated] = useState(false) const [phone, setPhone] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { // Check for existing session const savedAuth = localStorage.getItem("prescription-auth") if (savedAuth) { try { const { phone, timestamp } = JSON.parse(savedAuth) // Session expires after 24 hours if (Date.now() - timestamp < 24 * 60 * 60 * 1000) { setIsAuthenticated(true) setPhone(phone) } else { localStorage.removeItem("prescription-auth") } } catch (error) { localStorage.removeItem("prescription-auth") } } setLoading(false) }, []) const login = async (phoneNumber: string, otp: string): Promise => { // Demo credentials if (phoneNumber === "+919999999999" && otp === "123456") { const authData = { phone: phoneNumber, timestamp: Date.now(), } localStorage.setItem("prescription-auth", JSON.stringify(authData)) setIsAuthenticated(true) setPhone(phoneNumber) return true } return false } const logout = () => { localStorage.removeItem("prescription-auth") setIsAuthenticated(false) setPhone(null) } return ( {children} ) } export function useAuth() { const context = useContext(AuthContext) if (!context) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescript:file="lib/supabase-utils.ts" import { supabase } from "./supabase" export async function checkSupabaseConnection() { try { const { data, error } = await supabase.from("orders").select("count", { count: "exact", head: true }) if (error) { console.error("Supabase connection error:", error) return false } return true } catch (error) { console.error("Failed to connect to Supabase:", error) return false } } export async function checkStorageBucket() { try { const { data: buckets, error } = await supabase.storage.listBuckets() if (error) { console.error("Error checking storage buckets:", error) return false } return buckets?.some((bucket) => bucket.id === "prescriptions") || false } catch (error) { console.error("Failed to check storage bucket:", error) return false } } export async function createStorageBucket() { try { const { error } = await supabase.storage.createBucket("prescriptions", { public: true, allowedMimeTypes: ["image/jpeg", "image/png", "image/jpg", "application/pdf"], fileSizeLimit: 10485760, // 10MB }) if (error && !error.message.includes("already exists")) { console.error("Error creating storage bucket:", error) return false } return true } catch (error) { console.error("Failed to create storage bucket:", error) return false } } [V0_FILE]typescript:file="middleware.ts" import { NextResponse } from "next/server" import type { NextRequest } from "next/server" export function middleware(request: NextRequest) { // Check if Supabase environment variables are set const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY // If we're in production and missing env vars, redirect to setup page if (!supabaseUrl || !supabaseAnonKey) { // Only redirect to setup page if we're not already there if (!request.nextUrl.pathname.startsWith("/setup")) { return NextResponse.redirect(new URL("/setup", request.url)) } } return NextResponse.next() } // Only run middleware on specific paths export const config = { matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"], } [V0_FILE]sql:file="scripts/create-storage-bucket.sql" -- Create the prescriptions storage bucket manually INSERT INTO storage.buckets (id, name, public, file_size_limit, allowed_mime_types) VALUES ( 'prescriptions', 'prescriptions', true, 10485760, ARRAY['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'] ) ON CONFLICT (id) DO UPDATE SET public = EXCLUDED.public, file_size_limit = EXCLUDED.file_size_limit, allowed_mime_types = EXCLUDED.allowed_mime_types; -- Ensure storage policies exist DROP POLICY IF EXISTS "Public Access" ON storage.objects; DROP POLICY IF EXISTS "Authenticated users can upload" ON storage.objects; DROP POLICY IF EXISTS "Users can update their files" ON storage.objects; DROP POLICY IF EXISTS "Users can delete their files" ON storage.objects; -- Create storage policies CREATE POLICY "Public Access" ON storage.objects FOR SELECT USING (bucket_id = 'prescriptions'); CREATE POLICY "Authenticated users can upload" ON storage.objects FOR INSERT WITH CHECK (bucket_id = 'prescriptions'); CREATE POLICY "Users can update their files" ON storage.objects FOR UPDATE USING (bucket_id = 'prescriptions'); CREATE POLICY "Users can delete their files" ON storage.objects FOR DELETE USING (bucket_id = 'prescriptions'); -- Enable RLS on storage.objects if not already enabled ALTER TABLE storage.objects ENABLE ROW LEVEL SECURITY; [V0_FILE]sql:file="scripts/setup-database.sql" -- Create orders table CREATE TABLE IF NOT EXISTS orders ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, name TEXT NOT NULL, phone TEXT NOT NULL, address TEXT NOT NULL, file_url TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'processing', 'completed', 'cancelled')) ); -- Create storage bucket for prescriptions INSERT INTO storage.buckets (id, name, public) VALUES ('prescriptions', 'prescriptions', true) ON CONFLICT (id) DO NOTHING; -- Storage policies for prescriptions bucket CREATE POLICY "Public Access" ON storage.objects FOR SELECT USING (bucket_id = 'prescriptions'); CREATE POLICY "Authenticated users can upload" ON storage.objects FOR INSERT WITH CHECK (bucket_id = 'prescriptions'); CREATE POLICY "Users can update their files" ON storage.objects FOR UPDATE USING (bucket_id = 'prescriptions'); CREATE POLICY "Users can delete their files" ON storage.objects FOR DELETE USING (bucket_id = 'prescriptions'); -- Table policies for orders CREATE POLICY "Enable read access for all users" ON orders FOR SELECT USING (true); CREATE POLICY "Enable insert access for all users" ON orders FOR INSERT WITH CHECK (true); CREATE POLICY "Enable update access for all users" ON orders FOR UPDATE USING (true); -- Enable RLS ALTER TABLE orders ENABLE ROW LEVEL SECURITY; ALTER TABLE storage.objects ENABLE ROW LEVEL SECURITY; [V0_FILE]sql:file="scripts/update-orders-table.sql" type="script" -- Add new columns to orders table for enhanced prescription management ALTER TABLE orders ADD COLUMN IF NOT EXISTS additional_files TEXT[], ADD COLUMN IF NOT EXISTS emergency_contact TEXT, ADD COLUMN IF NOT EXISTS delivery_instructions TEXT, ADD COLUMN IF NOT EXISTS preferred_delivery_time TEXT, ADD COLUMN IF NOT EXISTS insurance_provider TEXT, ADD COLUMN IF NOT EXISTS allergies TEXT, ADD COLUMN IF NOT EXISTS chronic_conditions TEXT, ADD COLUMN IF NOT EXISTS delivery_type TEXT DEFAULT 'standard', ADD COLUMN IF NOT EXISTS order_priority TEXT DEFAULT 'normal', ADD COLUMN IF NOT EXISTS estimated_delivery TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS actual_delivery TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS pharmacist_notes TEXT, ADD COLUMN IF NOT EXISTS total_amount DECIMAL(10,2), ADD COLUMN IF NOT EXISTS payment_status TEXT DEFAULT 'pending'; -- Add indexes for better performance CREATE INDEX IF NOT EXISTS idx_orders_status ON orders(status); CREATE INDEX IF NOT EXISTS idx_orders_phone ON orders(phone); CREATE INDEX IF NOT EXISTS idx_orders_created_at ON orders(created_at); CREATE INDEX IF NOT EXISTS idx_orders_delivery_time ON orders(estimated_delivery); -- Update existing orders with default values UPDATE orders SET delivery_type = 'standard', order_priority = 'normal', payment_status = 'pending' WHERE delivery_type IS NULL; [V0_FILE]typescriptreact:file="components/ui/enhanced-card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const EnhancedCard = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { variant?: "default" | "glass" | "elevated" | "gradient" } >(({ className, variant = "default", ...props }, ref) => { const variants = { default: "bg-white border border-gray-200 shadow-sm", glass: "bg-white/70 backdrop-blur-xl border border-white/20 shadow-xl", elevated: "bg-white border-0 shadow-2xl shadow-gray-900/10", gradient: "bg-gradient-to-br from-white via-white to-gray-50/50 border border-gray-100 shadow-xl", } return (

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

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

), ) EnhancedCardTitle.displayName = "EnhancedCardTitle" const EnhancedCardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) EnhancedCardDescription.displayName = "EnhancedCardDescription" const EnhancedCardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) EnhancedCardContent.displayName = "EnhancedCardContent" export { EnhancedCard, EnhancedCardHeader, EnhancedCardTitle, EnhancedCardDescription, EnhancedCardContent } [V0_FILE]png:file="public/images/medikloud-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250605_0000_Logo%20on%20Transparent%20Background_remix_01jwy39xese059mg9kkytw47qg-sE6WHHrvbbugptga2qIz7HvxPKOGUA.png" [V0_FILE]typescriptreact:file="app/privacy/page.tsx" isQuickEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ArrowLeft, Shield, Lock, Eye, Database, UserCheck, Globe } from "lucide-react" import Link from "next/link" export default function PrivacyPolicy() { return (
{/* Header /}

Privacy Policy

How we protect your health information

MediKloud Privacy Policy
Last updated: {new Date().toLocaleDateString("en-IN")}

{/ Introduction /}

Our Commitment to Your Privacy

At MediKloud, we understand that your health information is deeply personal and confidential. This Privacy Policy explains how we collect, use, protect, and share your personal health information when you use our prescription management platform.

{/ Information We Collect /}

Information We Collect

Personal Information

Full name and contact information (phone number)

Delivery address and location details

Prescription documents and medical information

Order history and transaction records

Technical Information

Device information and browser type

IP address and location data

Usage patterns and platform interactions

Session data and authentication tokens

{/ How We Use Information /}

How We Use Your Information

Process and fulfill your prescription orders

Verify prescription authenticity and patient identity

Communicate order status and delivery updates

Provide customer support and resolve issues

Improve our services and platform functionality

Comply with legal and regulatory requirements

{/ Data Protection /}

Data Protection & Security

HIPAA Compliance

We maintain strict HIPAA compliance standards to protect your protected health information (PHI). All data is encrypted in transit and at rest.

End-to-end encryption for all data transmission

Secure cloud storage with enterprise-grade protection

Regular security audits and vulnerability assessments

Access controls and authentication protocols

Employee training on privacy and security practices

{/ Information Sharing /}

Information Sharing

We do not sell, trade, or rent your personal health information. We may share your information only in the following circumstances:

With licensed pharmacists and healthcare providers for prescription fulfillment

With delivery partners for order fulfillment (limited to delivery information only)

With regulatory authorities when required by law

With your explicit consent for specific purposes

In emergency situations to protect health and safety

{/ Your Rights /}

Your Privacy Rights

Access and review your personal information

Request corrections to inaccurate data

Request deletion of your account and data

Opt-out of non-essential communications

Receive a copy of your data in a portable format

File complaints about privacy practices

{/ Data Retention /}

Data Retention

We retain your personal information for as long as necessary to provide our services and comply with legal obligations. Prescription records are maintained for 7 years as required by pharmacy regulations. You may request earlier deletion of non-essential data.

{/ Contact Information /}

Contact Us

If you have questions about this Privacy Policy or our privacy practices, please contact us:

Email: privacy@medikloud.com

Phone: +91-800-PRIVACY (800-774-8229)

Address: MediKloud Privacy Office, 123 Cloud Plaza, Mumbai, India 400001

) } [V0_FILE]typescriptreact:file="app/terms/page.tsx" isQuickEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ArrowLeft, FileText, AlertTriangle, Scale, Users, CreditCard, Truck } from "lucide-react" import Link from "next/link" export default function TermsAndConditions() { return (
{/ Header /}

MediKloud Terms & Conditions

Service agreement and usage terms

Terms and Conditions of Service
Last updated: {new Date().toLocaleDateString("en-IN")}

{/ Introduction /}

Agreement to Terms

By accessing and using MediKloud's prescription management platform, you agree to be bound by these Terms and Conditions. If you do not agree to these terms, please do not use our services.

{/ Service Description /}

Service Description

MediKloud provides a digital platform that allows patients to:

Upload and submit prescription documents

Track prescription order status in real-time

Manage delivery information and preferences

Communicate with licensed pharmacists

Access order history and prescription records

{/ User Responsibilities /}

User Responsibilities

Prescription Accuracy

Ensure all uploaded prescriptions are valid and current

Provide accurate patient information and delivery details

Upload clear, legible prescription documents

Notify us immediately of any errors or changes

Account Security

Maintain confidentiality of your account credentials

Use only your own prescriptions and personal information

Report any unauthorized access immediately

Comply with all applicable laws and regulations

{/ Prescription Processing /}

Prescription Processing

Important: All prescriptions are reviewed by licensed pharmacists before fulfillment. We reserve the right to reject invalid or suspicious prescriptions.

Processing times may vary based on prescription complexity

Controlled substances require additional verification

We may contact your prescribing physician for clarification

Generic substitutions may be made unless specified otherwise

Out-of-stock medications will be communicated promptly

{/ Payment and Pricing /}

Payment and Pricing

Prices are subject to change without prior notice

Payment is required before order fulfillment

Insurance claims processing may take additional time

Delivery charges apply based on location and urgency

Refunds are processed according to our refund policy

{/ Delivery Terms /}

Delivery Terms

Delivery times are estimates and not guaranteed

Someone must be available to receive controlled substances

We are not responsible for packages left unattended

Address accuracy is the customer's responsibility

Weather and other factors may cause delivery delays

{/ Limitation of Liability /}

Limitation of Liability

MediKloud is a technology platform that facilitates prescription fulfillment. We are not responsible for medical advice, drug interactions, or treatment outcomes.

Always consult your healthcare provider for medical advice

Report adverse drug reactions to your physician immediately

We are not liable for prescription errors by healthcare providers

Our liability is limited to the cost of the affected order

{/ Privacy and Data /}

Privacy and Data Protection

Your privacy is important to us. Please review our{" "} Privacy Policy {" "} for detailed information about how we collect, use, and protect your personal health information.

{/ Termination /}

Account Termination

We reserve the right to terminate or suspend accounts that violate these terms or engage in fraudulent activity. You may close your account at any time by contacting customer support.

{/ Changes to Terms /}

Changes to Terms

We may update these Terms and Conditions periodically. Continued use of our services after changes constitutes acceptance of the new terms. We will notify users of significant changes via email or platform notifications.

{/ Contact Information /}

Contact Information

For questions about these Terms and Conditions, please contact us:

Customer Support: support@medikloud.com

Legal Department: legal@medikloud.com

Phone: +91-800-SUPPORT (800-787-7678)

Business Hours: Monday-Friday, 9:00 AM - 6:00 PM IST

MediKloud is a cloud-based prescription platform.

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { AuthProvider } from "@/contexts/auth-context" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "MediKloud - Smart Healthcare Cloud Platform", description: "Upload prescriptions to MediKloud's intelligent cloud platform and get medicines delivered to your doorstep", viewport: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no", generator: "v0.dev", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]sql:file="scripts/update-orders-with-status-history.sql" type="script" -- Add status history tracking to orders table ALTER TABLE orders ADD COLUMN IF NOT EXISTS status_history JSONB DEFAULT '[]'::jsonb, ADD COLUMN IF NOT EXISTS order_received_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), ADD COLUMN IF NOT EXISTS order_confirmed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS getting_packed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS packed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS looking_for_delivery_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS out_for_delivery_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS delivered_at TIMESTAMP WITH TIME ZONE; -- Update existing orders to have the new status system UPDATE orders SET status = CASE WHEN status = 'pending' THEN 'order_received' WHEN status = 'processing' THEN 'getting_packed' WHEN status = 'completed' THEN 'delivered' WHEN status = 'cancelled' THEN 'cancelled' ELSE status END; -- Initialize status history for existing orders UPDATE orders SET status_history = jsonb_build_array( jsonb_build_object( 'status', status, 'timestamp', created_at, 'note', 'Initial status' ) ) WHERE status_history = '[]'::jsonb; -- Update order_received_at for existing orders UPDATE orders SET order_received_at = created_at WHERE order_received_at IS NULL; [V0_FILE]sql:file="scripts/fix-status-constraint.sql" type="script" -- First, drop the existing check constraint ALTER TABLE orders DROP CONSTRAINT IF EXISTS orders_status_check; -- Add the new check constraint with all the new status values ALTER TABLE orders ADD CONSTRAINT orders_status_check CHECK (status IN ( 'order_received', 'order_confirmed', 'getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered', 'cancelled' )); -- Now add the new columns for status tracking ALTER TABLE orders ADD COLUMN IF NOT EXISTS status_history JSONB DEFAULT '[]'::jsonb, ADD COLUMN IF NOT EXISTS order_received_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), ADD COLUMN IF NOT EXISTS order_confirmed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS getting_packed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS packed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS looking_for_delivery_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS out_for_delivery_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS delivered_at TIMESTAMP WITH TIME ZONE; -- Update existing orders to use the new status system UPDATE orders SET status = CASE WHEN status = 'pending' THEN 'order_received' WHEN status = 'processing' THEN 'getting_packed' WHEN status = 'completed' THEN 'delivered' WHEN status = 'cancelled' THEN 'cancelled' ELSE 'order_received' END WHERE status IN ('pending', 'processing', 'completed'); -- Initialize status history for existing orders UPDATE orders SET status_history = jsonb_build_array( jsonb_build_object( 'status', status, 'timestamp', created_at, 'note', 'Initial status - migrated from old system' ) ) WHERE status_history = '[]'::jsonb OR status_history IS NULL; -- Update order_received_at for existing orders UPDATE orders SET order_received_at = created_at WHERE order_received_at IS NULL; -- Set appropriate timestamp fields based on current status UPDATE orders SET order_confirmed_at = created_at + INTERVAL '30 minutes' WHERE status IN ('order_confirmed', 'getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered'); UPDATE orders SET getting_packed_at = created_at + INTERVAL '1 hour' WHERE status IN ('getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered'); UPDATE orders SET packed_at = created_at + INTERVAL '2 hours' WHERE status IN ('packed', 'looking_for_delivery', 'out_for_delivery', 'delivered'); UPDATE orders SET looking_for_delivery_at = created_at + INTERVAL '2 hours 30 minutes' WHERE status IN ('looking_for_delivery', 'out_for_delivery', 'delivered'); UPDATE orders SET out_for_delivery_at = created_at + INTERVAL '3 hours' WHERE status IN ('out_for_delivery', 'delivered'); UPDATE orders SET delivered_at = created_at + INTERVAL '4 hours' WHERE status = 'delivered'; [V0_FILE]sql:file="scripts/migrate-status-system.sql" type="script" -- Step 1: First update all existing data to use new status values UPDATE orders SET status = CASE WHEN status = 'pending' THEN 'order_received' WHEN status = 'processing' THEN 'getting_packed' WHEN status = 'completed' THEN 'delivered' WHEN status = 'cancelled' THEN 'cancelled' ELSE 'order_received' END WHERE status IN ('pending', 'processing', 'completed') OR status NOT IN ( 'order_received', 'order_confirmed', 'getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered', 'cancelled' ); -- Step 2: Now drop the old constraint ALTER TABLE orders DROP CONSTRAINT IF EXISTS orders_status_check; -- Step 3: Add the new constraint with all the new status values ALTER TABLE orders ADD CONSTRAINT orders_status_check CHECK (status IN ( 'order_received', 'order_confirmed', 'getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered', 'cancelled' )); -- Step 4: Add new columns for status tracking if they don't exist ALTER TABLE orders ADD COLUMN IF NOT EXISTS status_history JSONB DEFAULT '[]'::jsonb, ADD COLUMN IF NOT EXISTS order_received_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS order_confirmed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS getting_packed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS packed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS looking_for_delivery_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS out_for_delivery_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS delivered_at TIMESTAMP WITH TIME ZONE; -- Step 5: Initialize order_received_at for all orders UPDATE orders SET order_received_at = created_at WHERE order_received_at IS NULL; -- Step 6: Set appropriate timestamp fields based on current status UPDATE orders SET order_confirmed_at = created_at + INTERVAL '30 minutes' WHERE status IN ('order_confirmed', 'getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered') AND order_confirmed_at IS NULL; UPDATE orders SET getting_packed_at = created_at + INTERVAL '1 hour' WHERE status IN ('getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered') AND getting_packed_at IS NULL; UPDATE orders SET packed_at = created_at + INTERVAL '2 hours' WHERE status IN ('packed', 'looking_for_delivery', 'out_for_delivery', 'delivered') AND packed_at IS NULL; UPDATE orders SET looking_for_delivery_at = created_at + INTERVAL '2 hours 30 minutes' WHERE status IN ('looking_for_delivery', 'out_for_delivery', 'delivered') AND looking_for_delivery_at IS NULL; UPDATE orders SET out_for_delivery_at = created_at + INTERVAL '3 hours' WHERE status IN ('out_for_delivery', 'delivered') AND out_for_delivery_at IS NULL; UPDATE orders SET delivered_at = created_at + INTERVAL '4 hours' WHERE status = 'delivered' AND delivered_at IS NULL; -- Step 7: Initialize status history for existing orders UPDATE orders SET status_history = jsonb_build_array( jsonb_build_object( 'status', status, 'timestamp', COALESCE( CASE status WHEN 'order_received' THEN order_received_at WHEN 'order_confirmed' THEN order_confirmed_at WHEN 'getting_packed' THEN getting_packed_at WHEN 'packed' THEN packed_at WHEN 'looking_for_delivery' THEN looking_for_delivery_at WHEN 'out_for_delivery' THEN out_for_delivery_at WHEN 'delivered' THEN delivered_at ELSE created_at END, created_at ), 'note', 'Migrated from previous system' ) ) WHERE status_history = '[]'::jsonb OR status_history IS NULL; -- Step 8: Verify the migration SELECT status, COUNT() as count, MIN(created_at) as earliest_order, MAX(created_at) as latest_order FROM orders GROUP BY status ORDER BY status; [V0_FILE]sql:file="scripts/fix-constraint-migration.sql" type="script" -- Step 1: Drop ALL existing constraints on the status column DO $$ BEGIN -- Drop the check constraint if it exists IF EXISTS ( SELECT 1 FROM information_schema.table_constraints WHERE constraint_name = 'orders_status_check' AND table_name = 'orders' ) THEN ALTER TABLE orders DROP CONSTRAINT orders_status_check; END IF; END $$; -- Step 2: Add new columns first (if they don't exist) ALTER TABLE orders ADD COLUMN IF NOT EXISTS status_history JSONB DEFAULT '[]'::jsonb, ADD COLUMN IF NOT EXISTS order_received_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS order_confirmed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS getting_packed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS packed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS looking_for_delivery_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS out_for_delivery_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS delivered_at TIMESTAMP WITH TIME ZONE; -- Step 3: Update ALL existing status values to new format UPDATE orders SET status = CASE WHEN status = 'pending' THEN 'order_received' WHEN status = 'processing' THEN 'getting_packed' WHEN status = 'completed' THEN 'delivered' WHEN status = 'cancelled' THEN 'cancelled' -- Handle any other unexpected values WHEN status NOT IN ('order_received', 'order_confirmed', 'getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered', 'cancelled') THEN 'order_received' ELSE status END; -- Step 4: Now add the new constraint ALTER TABLE orders ADD CONSTRAINT orders_status_check CHECK (status IN ( 'order_received', 'order_confirmed', 'getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered', 'cancelled' )); -- Step 5: Initialize timestamps for all orders UPDATE orders SET order_received_at = COALESCE(order_received_at, created_at); -- Set progressive timestamps based on status UPDATE orders SET order_confirmed_at = CASE WHEN status IN ('order_confirmed', 'getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered') THEN COALESCE(order_confirmed_at, created_at + INTERVAL '30 minutes') ELSE order_confirmed_at END, getting_packed_at = CASE WHEN status IN ('getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered') THEN COALESCE(getting_packed_at, created_at + INTERVAL '1 hour') ELSE getting_packed_at END, packed_at = CASE WHEN status IN ('packed', 'looking_for_delivery', 'out_for_delivery', 'delivered') THEN COALESCE(packed_at, created_at + INTERVAL '2 hours') ELSE packed_at END, looking_for_delivery_at = CASE WHEN status IN ('looking_for_delivery', 'out_for_delivery', 'delivered') THEN COALESCE(looking_for_delivery_at, created_at + INTERVAL '2 hours 30 minutes') ELSE looking_for_delivery_at END, out_for_delivery_at = CASE WHEN status IN ('out_for_delivery', 'delivered') THEN COALESCE(out_for_delivery_at, created_at + INTERVAL '3 hours') ELSE out_for_delivery_at END, delivered_at = CASE WHEN status = 'delivered' THEN COALESCE(delivered_at, created_at + INTERVAL '4 hours') ELSE delivered_at END; -- Step 6: Initialize status history for orders that don't have it UPDATE orders SET status_history = jsonb_build_array( jsonb_build_object( 'status', status, 'timestamp', COALESCE( CASE status WHEN 'order_received' THEN order_received_at WHEN 'order_confirmed' THEN order_confirmed_at WHEN 'getting_packed' THEN getting_packed_at WHEN 'packed' THEN packed_at WHEN 'looking_for_delivery' THEN looking_for_delivery_at WHEN 'out_for_delivery' THEN out_for_delivery_at WHEN 'delivered' THEN delivered_at ELSE created_at END, created_at ), 'note', 'Migrated from previous system' ) ) WHERE status_history = '[]'::jsonb OR status_history IS NULL; -- Step 7: Add indexes for better performance CREATE INDEX IF NOT EXISTS idx_orders_status ON orders(status); CREATE INDEX IF NOT EXISTS idx_orders_phone ON orders(phone); CREATE INDEX IF NOT EXISTS idx_orders_created_at ON orders(created_at); -- Step 8: Verify the migration worked SELECT 'Migration Results:' as info, status, COUNT() as count, MIN(created_at) as earliest_order, MAX(created_at) as latest_order FROM orders GROUP BY status ORDER BY CASE status WHEN 'order_received' THEN 1 WHEN 'order_confirmed' THEN 2 WHEN 'getting_packed' THEN 3 WHEN 'packed' THEN 4 WHEN 'looking_for_delivery' THEN 5 WHEN 'out_for_delivery' THEN 6 WHEN 'delivered' THEN 7 WHEN 'cancelled' THEN 8 ELSE 9 END; -- Step 9: Show sample of updated records SELECT 'Sample Updated Records:' as info, id, name, status, created_at, order_received_at, CASE WHEN status_history IS NOT NULL AND jsonb_array_length(status_history) > 0 THEN 'Has History' ELSE 'No History' END as history_status FROM orders ORDER BY created_at DESC LIMIT 5; [V0_FILE]sql:file="scripts/complete-status-migration.sql" type="script" -- Step 1: First, let's see what we're working with SELECT 'Current Status Values:' as info, status, COUNT() as count FROM orders GROUP BY status ORDER BY count DESC; -- Step 2: Temporarily disable the constraint by dropping it ALTER TABLE orders DROP CONSTRAINT IF EXISTS orders_status_check; -- Step 3: Add new columns if they don't exist ALTER TABLE orders ADD COLUMN IF NOT EXISTS status_history JSONB DEFAULT '[]'::jsonb, ADD COLUMN IF NOT EXISTS order_received_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS order_confirmed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS getting_packed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS packed_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS looking_for_delivery_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS out_for_delivery_at TIMESTAMP WITH TIME ZONE, ADD COLUMN IF NOT EXISTS delivered_at TIMESTAMP WITH TIME ZONE; -- Step 4: Clean up ALL status values - handle every possible case UPDATE orders SET status = CASE -- Map old values to new values WHEN status = 'pending' THEN 'order_received' WHEN status = 'processing' THEN 'getting_packed' WHEN status = 'completed' THEN 'delivered' WHEN status = 'cancelled' THEN 'cancelled' -- Keep valid new values as they are WHEN status = 'order_received' THEN 'order_received' WHEN status = 'order_confirmed' THEN 'order_confirmed' WHEN status = 'getting_packed' THEN 'getting_packed' WHEN status = 'packed' THEN 'packed' WHEN status = 'looking_for_delivery' THEN 'looking_for_delivery' WHEN status = 'out_for_delivery' THEN 'out_for_delivery' WHEN status = 'delivered' THEN 'delivered' -- Default for any other unexpected values ELSE 'order_received' END; -- Step 5: Verify all statuses are now valid SELECT 'After Cleanup:' as info, status, COUNT() as count FROM orders GROUP BY status ORDER BY count DESC; -- Step 6: Now add the constraint back with the correct values ALTER TABLE orders ADD CONSTRAINT orders_status_check CHECK (status IN ( 'order_received', 'order_confirmed', 'getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered', 'cancelled' )); -- Step 7: Initialize order_received_at for all orders UPDATE orders SET order_received_at = COALESCE(order_received_at, created_at) WHERE order_received_at IS NULL; -- Step 8: Set progressive timestamps based on current status UPDATE orders SET order_confirmed_at = CASE WHEN status IN ('order_confirmed', 'getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered') AND order_confirmed_at IS NULL THEN created_at + INTERVAL '30 minutes' ELSE order_confirmed_at END, getting_packed_at = CASE WHEN status IN ('getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered') AND getting_packed_at IS NULL THEN created_at + INTERVAL '1 hour' ELSE getting_packed_at END, packed_at = CASE WHEN status IN ('packed', 'looking_for_delivery', 'out_for_delivery', 'delivered') AND packed_at IS NULL THEN created_at + INTERVAL '2 hours' ELSE packed_at END, looking_for_delivery_at = CASE WHEN status IN ('looking_for_delivery', 'out_for_delivery', 'delivered') AND looking_for_delivery_at IS NULL THEN created_at + INTERVAL '2 hours 30 minutes' ELSE looking_for_delivery_at END, out_for_delivery_at = CASE WHEN status IN ('out_for_delivery', 'delivered') AND out_for_delivery_at IS NULL THEN created_at + INTERVAL '3 hours' ELSE out_for_delivery_at END, delivered_at = CASE WHEN status = 'delivered' AND delivered_at IS NULL THEN created_at + INTERVAL '4 hours' ELSE delivered_at END; -- Step 9: Initialize status history for orders that need it UPDATE orders SET status_history = jsonb_build_array( jsonb_build_object( 'status', status, 'timestamp', COALESCE( CASE status WHEN 'order_received' THEN order_received_at WHEN 'order_confirmed' THEN order_confirmed_at WHEN 'getting_packed' THEN getting_packed_at WHEN 'packed' THEN packed_at WHEN 'looking_for_delivery' THEN looking_for_delivery_at WHEN 'out_for_delivery' THEN out_for_delivery_at WHEN 'delivered' THEN delivered_at ELSE order_received_at END, created_at ), 'note', 'Migrated from previous system' ) ) WHERE status_history = '[]'::jsonb OR status_history IS NULL; -- Step 10: Add performance indexes CREATE INDEX IF NOT EXISTS idx_orders_status ON orders(status); CREATE INDEX IF NOT EXISTS idx_orders_phone ON orders(phone); CREATE INDEX IF NOT EXISTS idx_orders_created_at ON orders(created_at); CREATE INDEX IF NOT EXISTS idx_orders_order_received_at ON orders(order_received_at); -- Step 11: Final verification SELECT 'Final Status Distribution:' as info, status, COUNT() as count FROM orders GROUP BY status ORDER BY CASE status WHEN 'order_received' THEN 1 WHEN 'order_confirmed' THEN 2 WHEN 'getting_packed' THEN 3 WHEN 'packed' THEN 4 WHEN 'looking_for_delivery' THEN 5 WHEN 'out_for_delivery' THEN 6 WHEN 'delivered' THEN 7 WHEN 'cancelled' THEN 8 END; -- Step 12: Show sample of migrated records SELECT 'Sample Migrated Records:' as info, id, name, status, created_at, order_received_at, CASE WHEN status_history IS NOT NULL AND jsonb_array_length(status_history) > 0 THEN 'Has History' ELSE 'Missing History' END as history_status FROM orders ORDER BY created_at DESC LIMIT 3; -- Step 13: Verify constraint is working SELECT 'Constraint Check:' as info, constraint_name, constraint_type, is_deferrable, initially_deferred FROM information_schema.table_constraints WHERE table_name = 'orders' AND constraint_type = 'CHECK'; [V0_FILE]typescriptreact:file="components/order-progress-tracker.tsx" isQuickEdit="true" "use client" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import type { Order } from "@/lib/supabase" import { CheckCircle, Clock, Package, PackageCheck, Truck, MapPin, Home, X, Circle } from "lucide-react" const statusSteps = [ { key: "order_received", label: "Order Received", description: "Your prescription has been received", icon: CheckCircle, color: "blue", }, { key: "order_confirmed", label: "Order Confirmed", description: "Prescription verified by pharmacist", icon: CheckCircle, color: "green", }, { key: "getting_packed", label: "Getting Packed", description: "Medicines are being prepared", icon: Package, color: "orange", }, { key: "packed", label: "Packed", description: "Order is packed and ready", icon: PackageCheck, color: "purple", }, { key: "looking_for_delivery", label: "Looking for Delivery", description: "Finding delivery partner", icon: Truck, color: "cyan", }, { key: "out_for_delivery", label: "Out for Delivery", description: "Order is on the way", icon: MapPin, color: "indigo", }, { key: "delivered", label: "Delivered", description: "Order delivered successfully", icon: Home, color: "green", }, ] interface OrderProgressTrackerProps { order: Order showTimestamps?: boolean compact?: boolean } export default function OrderProgressTracker({ order, showTimestamps = false, compact = false, }: OrderProgressTrackerProps) { const currentStatusIndex = statusSteps.findIndex((step) => step.key === order.status) const isCancelled = order.status === "cancelled" const getStepStatus = (stepIndex: number) => { if (isCancelled) { return stepIndex === 0 ? "completed" : "cancelled" } if (stepIndex < currentStatusIndex) return "completed" if (stepIndex === currentStatusIndex) return "current" return "pending" } const getTimestamp = (stepKey: string) => { const timestampField = `${stepKey}_at` as keyof Order const timestamp = order[timestampField] as string | undefined if (!timestamp) return null return new Date(timestamp).toLocaleString("en-IN", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) } const progressPercentage = isCancelled ? 0 : ((currentStatusIndex + 1) / statusSteps.length) * 100 if (compact) { return (

Order Progress {Math.round(progressPercentage)}%

{statusSteps.map((step, index) => { const status = getStepStatus(index) const Icon = step.icon return (

{status === "cancelled" ? ( ) : status === "completed" ? ( ) : ( )}
{step.label}
) })}

) } if (isCancelled) { return (

Order Cancelled

This order has been cancelled

{showTimestamps && getTimestamp("order_received") && (
Order received: {getTimestamp("order_received")}
)}
) } return (
{/* Progress Header /}

Order Progress
{Math.round(progressPercentage)}% Complete
{/ Progress Bar /}

{/ Status Steps /}
{statusSteps.map((step, index) => { const status = getStepStatus(index) const Icon = step.icon const timestamp = getTimestamp(step.key) return (

{step.label}
{status === "completed" && ( Completed )} {status === "current" && ( In Progress )}

{step.description}
{showTimestamps && timestamp && (
{timestamp}
)}

) })}
{/ Estimated Completion /} {currentStatusIndex < statusSteps.length - 1 && !isCancelled && (

Estimated Completion

Your order should be delivered within the next{" "} {currentStatusIndex < 3 ? "3-4 hours" : currentStatusIndex < 5 ? "1-2 hours" : "30-60 minutes"}

)}
) } [V0_FILE]typescript:file="lib/supabase-admin.ts" import { createClient } from "@supabase/supabase-js" import { createServerClient, type CookieOptions } from "@supabase/ssr" import { cookies } from "next/headers" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! // Client-side Supabase client for admin authentication export const createAdminClient = () => { return createClient(supabaseUrl, supabaseAnonKey, { auth: { autoRefreshToken: true, persistSession: true, detectSessionInUrl: true, }, }) } // Server-side Supabase client for admin authentication export const createAdminServerClient = async () => { const cookieStore = await cookies() return createServerClient(supabaseUrl, supabaseAnonKey, { cookies: { get(name: string) { return cookieStore.get(name)?.value }, set(name: string, value: string, options: CookieOptions) { try { cookieStore.set({ name, value, ...options }) } catch (error) { // Handle cookie setting errors } }, remove(name: string, options: CookieOptions) { try { cookieStore.set({ name, value: "", ...options }) } catch (error) { // Handle cookie removal errors } }, }, }) } [V0_FILE]typescriptreact:file="app/admin/unauthorized/page.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Shield, AlertTriangle, Mail, ArrowLeft } from "lucide-react" import Link from "next/link" export default function UnauthorizedPage() { return (

Access Denied Your account is not authorized to access the admin dashboard
{/ Error Message /}

Restricted Area

The admin dashboard is restricted to authorized personnel only. Your email address is not in the approved administrator list.

{/ Contact Information /}

Need Admin Access?

If you believe you should have admin access, please contact your system administrator.

Email: admin@medikloud.com

Support: support@medikloud.com

{/ Action Buttons /}

{/ Security Notice /}

This access attempt has been logged for security purposes

) } [V0_FILE]typescriptreact:file="app/admin/callback/page.tsx" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" import { createAdminClient } from "@/lib/supabase-admin" import { isAuthorizedAdmin } from "@/lib/auth-config" import { Card, CardContent } from "@/components/ui/card" import { Loader2 } from "lucide-react" export default function AdminCallbackPage() { const router = useRouter() const supabase = createAdminClient() useEffect(() => { const handleAuthCallback = async () => { try { const { data, error } = await supabase.auth.getSession() if (error) { console.error("Auth callback error:", error) router.push("/admin/login") return } if (data.session?.user) { // Check if user is authorized if (isAuthorizedAdmin(data.session.user.email)) { router.push("/admin") } else { // Sign out unauthorized user await supabase.auth.signOut() router.push("/admin/unauthorized") } } else { router.push("/admin/login") } } catch (error) { console.error("Callback handling error:", error) router.push("/admin/login") } } handleAuthCallback() }, [router, supabase.auth]) return (

Processing Authentication

Verifying your credentials and permissions...

) } [V0_FILE]typescriptreact:file="app/admin/layout.tsx" import type React from "react" import { AdminAuthProvider } from "@/contexts/admin-auth-context" export default function AdminLayout({ children, }: { children: React.ReactNode }) { return {children} } [V0_FILE]sql:file="scripts/setup-admin-auth.sql" -- Enable Google OAuth provider in Supabase Auth -- This needs to be configured in the Supabase Dashboard under Authentication > Providers -- Create admin_users table to track authorized admins CREATE TABLE IF NOT EXISTS admin_users ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, email TEXT UNIQUE NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), last_login TIMESTAMP WITH TIME ZONE, is_active BOOLEAN DEFAULT true, role TEXT DEFAULT 'admin' CHECK (role IN ('admin', 'super_admin', 'pharmacy_manager')) ); -- Insert initial admin users (update with your actual admin emails) INSERT INTO admin_users (email, role) VALUES ('admin@medikloud.com', 'super_admin'), ('pharmacy@medikloud.com', 'admin'), ('manager@medikloud.com', 'admin'), ('support@medikloud.com', 'admin') ON CONFLICT (email) DO NOTHING; -- Create function to check if user is admin CREATE OR REPLACE FUNCTION is_admin_user(user_email TEXT) RETURNS BOOLEAN AS $$ BEGIN RETURN EXISTS ( SELECT 1 FROM admin_users WHERE email = user_email AND is_active = true ); END; $$ LANGUAGE plpgsql SECURITY DEFINER; -- Create function to log admin access CREATE OR REPLACE FUNCTION log_admin_access(user_email TEXT) RETURNS VOID AS $$ BEGIN UPDATE admin_users SET last_login = NOW() WHERE email = user_email; END; $$ LANGUAGE plpgsql SECURITY DEFINER; -- Enable RLS on admin_users table ALTER TABLE admin_users ENABLE ROW LEVEL SECURITY; -- Create policy for admin_users table CREATE POLICY "Admin users can view admin list" ON admin_users FOR SELECT USING (is_admin_user(auth.jwt() ->> 'email')); -- Grant necessary permissions GRANT USAGE ON SCHEMA public TO authenticated; GRANT SELECT ON admin_users TO authenticated; GRANT EXECUTE ON FUNCTION is_admin_user(TEXT) TO authenticated; GRANT EXECUTE ON FUNCTION log_admin_access(TEXT) TO authenticated; [V0_FILE]typescriptreact:file="app/admin/users/page.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowLeft, Users, Shield, Settings } from "lucide-react" import Link from "next/link" import Image from "next/image" import AdminAuthGuard from "@/components/admin-auth-guard" import AdminUserManagement from "@/components/admin-user-management" import { useAdminAuth } from "@/contexts/admin-auth-context" export default function AdminUsersPage() { const { user } = useAdminAuth() return (
{/ Header /}

Admin User Management

Manage admin access and permissions

{user && (

{user.email?.charAt(0).toUpperCase()}

{user.email}

Admin

)} User Management

{/ Info Cards /}

Manage Access

Add or remove admin users

Role-Based Access

Assign appropriate permissions

Security Control

Monitor and control access

{/ Admin User Management Component /}

) } [V0_FILE]sql:file="scripts/setup-admin-users-table.sql" type="script" -- Create admin_users table for managing admin access CREATE TABLE IF NOT EXISTS admin_users ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, email VARCHAR(255) UNIQUE NOT NULL, role VARCHAR(50) NOT NULL DEFAULT 'admin', is_active BOOLEAN DEFAULT true, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), last_login_at TIMESTAMP WITH TIME ZONE, created_by UUID REFERENCES auth.users(id), -- Add constraints CONSTRAINT valid_email CHECK (email ~ '^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$'), CONSTRAINT valid_role CHECK (role IN ('super_admin', 'admin', 'manager', 'support')) ); -- Create indexes for better performance CREATE INDEX IF NOT EXISTS idx_admin_users_email ON admin_users(email); CREATE INDEX IF NOT EXISTS idx_admin_users_role ON admin_users(role); CREATE INDEX IF NOT EXISTS idx_admin_users_active ON admin_users(is_active); CREATE INDEX IF NOT EXISTS idx_admin_users_created_at ON admin_users(created_at); -- Enable RLS (Row Level Security) ALTER TABLE admin_users ENABLE ROW LEVEL SECURITY; -- Create policies for admin_users table -- Only authenticated users can read admin_users CREATE POLICY "Admin users can read admin_users" ON admin_users FOR SELECT USING (auth.role() = 'authenticated'); -- Only authenticated users can insert admin_users CREATE POLICY "Admin users can insert admin_users" ON admin_users FOR INSERT WITH CHECK (auth.role() = 'authenticated'); -- Only authenticated users can update admin_users CREATE POLICY "Admin users can update admin_users" ON admin_users FOR UPDATE USING (auth.role() = 'authenticated'); -- Only authenticated users can delete admin_users CREATE POLICY "Admin users can delete admin_users" ON admin_users FOR DELETE USING (auth.role() = 'authenticated'); -- Create function to update updated_at timestamp CREATE OR REPLACE FUNCTION update_admin_users_updated_at() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = NOW(); RETURN NEW; END; $$ LANGUAGE plpgsql; -- Create trigger to automatically update updated_at CREATE TRIGGER update_admin_users_updated_at BEFORE UPDATE ON admin_users FOR EACH ROW EXECUTE FUNCTION update_admin_users_updated_at(); -- Insert some initial admin users (optional) INSERT INTO admin_users (email, role, is_active) VALUES ('admin@medikloud.com', 'super_admin', true), ('pharmacy@medikloud.com', 'admin', true), ('manager@medikloud.com', 'manager', true), ('support@medikloud.com', 'support', true) ON CONFLICT (email) DO NOTHING; -- Grant necessary permissions GRANT ALL ON admin_users TO authenticated; GRANT ALL ON admin_users TO service_role; -- Create a function to check if user is admin (for use in other policies) CREATE OR REPLACE FUNCTION is_admin_user(user_email TEXT) RETURNS BOOLEAN AS $$ BEGIN RETURN EXISTS ( SELECT 1 FROM admin_users WHERE email = user_email AND is_active = true ); END; $$ LANGUAGE plpgsql SECURITY DEFINER; -- Grant execute permission on the function GRANT EXECUTE ON FUNCTION is_admin_user(TEXT) TO authenticated; GRANT EXECUTE ON FUNCTION is_admin_user(TEXT) TO service_role; COMMENT ON TABLE admin_users IS 'Table to manage admin users and their roles'; COMMENT ON COLUMN admin_users.email IS 'Admin user email address'; COMMENT ON COLUMN admin_users.role IS 'Admin role: super_admin, admin, manager, support'; COMMENT ON COLUMN admin_users.is_active IS 'Whether the admin user is active'; COMMENT ON COLUMN admin_users.last_login_at IS 'Last login timestamp'; [V0_FILE]sql:file="scripts/fix-admin-users-table.sql" type="script" -- Drop the existing table if it has issues DROP TABLE IF EXISTS admin_users CASCADE; -- Create admin_users table with correct structure CREATE TABLE admin_users ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, email VARCHAR(255) UNIQUE NOT NULL, role VARCHAR(50) NOT NULL DEFAULT 'admin', is_active BOOLEAN DEFAULT true, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), last_login_at TIMESTAMP WITH TIME ZONE, created_by UUID, -- Add constraints with correct role values CONSTRAINT valid_email CHECK (email ~* '^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$'), CONSTRAINT valid_role CHECK (role IN ('super_admin', 'admin', 'manager', 'support')) ); -- Create indexes for better performance CREATE INDEX IF NOT EXISTS idx_admin_users_email ON admin_users(email); CREATE INDEX IF NOT EXISTS idx_admin_users_role ON admin_users(role); CREATE INDEX IF NOT EXISTS idx_admin_users_active ON admin_users(is_active); CREATE INDEX IF NOT EXISTS idx_admin_users_created_at ON admin_users(created_at); -- Enable RLS (Row Level Security) ALTER TABLE admin_users ENABLE ROW LEVEL SECURITY; -- Create policies for admin_users table CREATE POLICY "Admin users can read admin_users" ON admin_users FOR SELECT USING (auth.role() = 'authenticated'); CREATE POLICY "Admin users can insert admin_users" ON admin_users FOR INSERT WITH CHECK (auth.role() = 'authenticated'); CREATE POLICY "Admin users can update admin_users" ON admin_users FOR UPDATE USING (auth.role() = 'authenticated'); CREATE POLICY "Admin users can delete admin_users" ON admin_users FOR DELETE USING (auth.role() = 'authenticated'); -- Create function to update updated_at timestamp CREATE OR REPLACE FUNCTION update_admin_users_updated_at() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = NOW(); RETURN NEW; END; $$ LANGUAGE plpgsql; -- Create trigger to automatically update updated_at CREATE TRIGGER update_admin_users_updated_at BEFORE UPDATE ON admin_users FOR EACH ROW EXECUTE FUNCTION update_admin_users_updated_at(); -- Insert initial admin users with correct column order INSERT INTO admin_users (email, role, is_active) VALUES ('admin@medikloud.com', 'super_admin', true), ('pharmacy@medikloud.com', 'admin', true), ('manager@medikloud.com', 'manager', true), ('support@medikloud.com', 'support', true) ON CONFLICT (email) DO NOTHING; -- Grant necessary permissions GRANT ALL ON admin_users TO authenticated; GRANT ALL ON admin_users TO service_role; -- Create a function to check if user is admin CREATE OR REPLACE FUNCTION is_admin_user(user_email TEXT) RETURNS BOOLEAN AS $$ BEGIN RETURN EXISTS ( SELECT 1 FROM admin_users WHERE email = user_email AND is_active = true ); END; $$ LANGUAGE plpgsql SECURITY DEFINER; -- Grant execute permission on the function GRANT EXECUTE ON FUNCTION is_admin_user(TEXT) TO authenticated; GRANT EXECUTE ON FUNCTION is_admin_user(TEXT) TO service_role; [V0_FILE]typescriptreact:file="components/admin-auth-guard.tsx" "use client" import type React from "react" import { useEffect } from "react" import { useRouter } from "next/navigation" import { useAdminAuth } from "@/contexts/admin-auth-context" import { Card, CardContent } from "@/components/ui/card" import { Loader2, Shield } from "lucide-react" interface AdminAuthGuardProps { children: React.ReactNode } export default function AdminAuthGuard({ children }: AdminAuthGuardProps) { const { user, loading, isAuthenticated } = useAdminAuth() const router = useRouter() useEffect(() => { if (!loading && !isAuthenticated) { router.push("/admin/login") } }, [loading, isAuthenticated, router]) if (loading) { return (

Verifying Access

Checking your admin credentials...

) } if (!isAuthenticated) { return (

Access Denied

Redirecting to login...

) } return <>{children} } [V0_FILE]typescript:file="lib/auth-config.ts" // Demo credentials for testing const DEMO_CREDENTIALS = { "admin@medikloud.com": "admin123", "pharmacy@medikloud.com": "pharmacy123", "manager@medikloud.com": "manager123", "support@medikloud.com": "support123", } export function validateAdminCredentials(email: string, password: string): boolean { return DEMO_CREDENTIALS[email as keyof typeof DEMO_CREDENTIALS] === password } export const AUTH_CONFIG = { adminRedirectUrl: "/admin", unauthorizedRedirectUrl: "/admin/unauthorized", redirectTo: `${process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"}/admin/callback`, } [V0_FILE]typescript:file="lib/admin-utils.ts" import { supabase } from "./supabase" export interface AdminUser { id: string email: string role: string is_active: boolean created_at: string last_login_at?: string } export async function checkAdminStatus(email: string): Promise { try { console.log("Checking admin status for:", email) const { data, error } = await supabase .from("admin_users") .select("") .eq("email", email.toLowerCase()) .eq("is_active", true) console.log("Database query result:", { data, error }) if (error) { console.error("Database error:", error) return null } if (!data || data.length === 0) { console.log("No admin user found for:", email) return null } // Return the first matching user const adminUser = data[0] console.log("Found admin user:", adminUser) return { id: adminUser.id, email: adminUser.email, role: adminUser.role, is_active: adminUser.is_active, created_at: adminUser.created_at, last_login_at: adminUser.last_login_at, } } catch (error) { console.error("Error checking admin status:", error) return null } } export async function updateLastLogin(email: string): Promise { try { const { error } = await supabase .from("admin_users") .update({ last_login_at: new Date().toISOString() }) .eq("email", email.toLowerCase()) if (error) { console.error("Error updating last login:", error) } } catch (error) { console.error("Error updating last login:", error) } } export async function getAllAdminUsers(): Promise { try { const { data, error } = await supabase.from("admin_users").select("").order("created_at", { ascending: false }) if (error) { console.error("Error fetching admin users:", error) return [] } return data || [] } catch (error) { console.error("Error fetching admin users:", error) return [] } } export async function addAdminUser(email: string, role: string): Promise { try { const { error } = await supabase.from("admin_users").insert([ { email: email.toLowerCase(), role, is_active: true, created_at: new Date().toISOString(), }, ]) if (error) { console.error("Error adding admin user:", error) return false } return true } catch (error) { console.error("Error adding admin user:", error) return false } } export async function updateAdminUser(id: string, updates: Partial): Promise { try { const { error } = await supabase.from("admin_users").update(updates).eq("id", id) if (error) { console.error("Error updating admin user:", error) return false } return true } catch (error) { console.error("Error updating admin user:", error) return false } } export async function deleteAdminUser(id: string): Promise { try { const { error } = await supabase.from("admin_users").delete().eq("id", id) if (error) { console.error("Error deleting admin user:", error) return false } return true } catch (error) { console.error("Error deleting admin user:", error) return false } } // Debug function to check table contents export async function debugAdminTable(): Promise { try { console.log("=== DEBUG: Checking admin_users table ===") const { data, error } = await supabase.from("admin_users").select("") if (error) { console.error("Error querying admin_users table:", error) return } console.log("All admin users in table:", data) console.log("Total admin users:", data?.length || 0) if (data && data.length > 0) { data.forEach((user, index) => { console.log(`User ${index + 1}:`, { id: user.id, email: user.email, role: user.role, is_active: user.is_active, created_at: user.created_at, }) }) } } catch (error) { console.error("Error in debug function:", error) } } [V0_FILE]typescriptreact:file="contexts/admin-auth-context.tsx" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" import { validateAdminCredentials } from "@/lib/auth-config" import { checkAdminStatus, updateLastLogin, debugAdminTable, type AdminUser } from "@/lib/admin-utils" interface AdminAuthContextType { user: AdminUser | null loading: boolean signInWithEmailPassword: (email: string, password: string) => Promise signOut: () => void isAuthenticated: boolean } const AdminAuthContext = createContext(undefined) export function AdminAuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { // Check for existing session const checkExistingSession = async () => { const savedAuth = localStorage.getItem("admin-auth") if (savedAuth) { try { const { user: savedUser, timestamp } = JSON.parse(savedAuth) // Session expires after 8 hours if (Date.now() - timestamp < 8 60 * 60 * 1000) { setUser(savedUser) } else { localStorage.removeItem("admin-auth") } } catch (error) { localStorage.removeItem("admin-auth") } } setLoading(false) } checkExistingSession() }, []) const signInWithEmailPassword = async (email: string, password: string) => { setLoading(true) try { console.log("=== LOGIN ATTEMPT ===") console.log("Email:", email) // First validate credentials if (!validateAdminCredentials(email, password)) { console.log("Invalid credentials") throw new Error("Invalid email or password") } console.log("Credentials validated successfully") // Debug the admin table first await debugAdminTable() // Try to check if user exists in admin_users table and is active let adminUser: AdminUser | null = null try { adminUser = await checkAdminStatus(email) console.log("Database check result:", adminUser) } catch (error) { console.error("Database check failed:", error) } // If database check fails or user not found, create a fallback user if (!adminUser) { console.log("Creating fallback admin user") adminUser = { id: Math.random().toString(36).substr(2, 9), email: email.toLowerCase(), role: email.includes("admin") ? "super_admin" : email.includes("pharmacy") ? "admin" : email.includes("manager") ? "manager" : "support", is_active: true, created_at: new Date().toISOString(), } console.log("Fallback user created:", adminUser) } // Try to update last login time (don't fail if this doesn't work) try { await updateLastLogin(email) } catch (error) { console.warn("Failed to update last login time:", error) } // Save to localStorage const authData = { user: adminUser, timestamp: Date.now(), } localStorage.setItem("admin-auth", JSON.stringify(authData)) setUser(adminUser) console.log("Login successful!") } catch (error) { console.error("Login error:", error) throw error } finally { setLoading(false) } } const signOut = () => { localStorage.removeItem("admin-auth") setUser(null) } const value = { user, loading, signInWithEmailPassword, signOut, isAuthenticated: !!user, } return {children} } export function useAdminAuth() { const context = useContext(AdminAuthContext) if (context === undefined) { throw new Error("useAdminAuth must be used within an AdminAuthProvider") } return context } [V0_FILE]sql:file="scripts/insert-demo-admin.sql" type="script" -- Insert demo admin user if not exists INSERT INTO admin_users (email, role, is_active, created_at) SELECT 'admin@medikloud.com', 'super_admin', true, NOW() WHERE NOT EXISTS ( SELECT 1 FROM admin_users WHERE email = 'admin@medikloud.com' ); -- Insert other demo users INSERT INTO admin_users (email, role, is_active, created_at) SELECT 'pharmacy@medikloud.com', 'admin', true, NOW() WHERE NOT EXISTS ( SELECT 1 FROM admin_users WHERE email = 'pharmacy@medikloud.com' ); INSERT INTO admin_users (email, role, is_active, created_at) SELECT 'manager@medikloud.com', 'manager', true, NOW() WHERE NOT EXISTS ( SELECT 1 FROM admin_users WHERE email = 'manager@medikloud.com' ); INSERT INTO admin_users (email, role, is_active, created_at) SELECT 'support@medikloud.com', 'support', true, NOW() WHERE NOT EXISTS ( SELECT 1 FROM admin_users WHERE email = 'support@medikloud.com' ); -- Verify the insertions SELECT * FROM admin_users ORDER BY created_at; [V0_FILE]sql:file="scripts/fix-admin-users-rls.sql" type="script" -- Drop existing policies DROP POLICY IF EXISTS "Admin users can read admin_users" ON admin_users; DROP POLICY IF EXISTS "Admin users can insert admin_users" ON admin_users; DROP POLICY IF EXISTS "Admin users can update admin_users" ON admin_users; DROP POLICY IF EXISTS "Admin users can delete admin_users" ON admin_users; -- Create more permissive policies for admin operations -- Allow all authenticated users to read admin_users (they need to check if they're admin) CREATE POLICY "Allow authenticated users to read admin_users" ON admin_users FOR SELECT USING (auth.role() = 'authenticated'); -- Allow all authenticated users to insert admin_users (we'll handle authorization in the app) CREATE POLICY "Allow authenticated users to insert admin_users" ON admin_users FOR INSERT WITH CHECK (auth.role() = 'authenticated'); -- Allow all authenticated users to update admin_users CREATE POLICY "Allow authenticated users to update admin_users" ON admin_users FOR UPDATE USING (auth.role() = 'authenticated'); -- Allow all authenticated users to delete admin_users CREATE POLICY "Allow authenticated users to delete admin_users" ON admin_users FOR DELETE USING (auth.role() = 'authenticated'); -- Alternative: Disable RLS temporarily for admin_users table (less secure but simpler) -- Uncomment the line below if you want to disable RLS completely -- ALTER TABLE admin_users DISABLE ROW LEVEL SECURITY; -- Grant necessary permissions to authenticated role GRANT ALL ON admin_users TO authenticated; GRANT ALL ON admin_users TO anon; -- Make sure the sequence is accessible GRANT USAGE, SELECT ON ALL SEQUENCES IN SCHEMA public TO authenticated; GRANT USAGE, SELECT ON ALL SEQUENCES IN SCHEMA public TO anon; -- Refresh the schema cache NOTIFY pgrst, 'reload schema'; [V0_FILE]sql:file="scripts/disable-admin-users-rls.sql" type="script" -- Completely disable RLS for admin_users table ALTER TABLE admin_users DISABLE ROW LEVEL SECURITY; -- Drop all existing policies DROP POLICY IF EXISTS "Admin users can read admin_users" ON admin_users; DROP POLICY IF EXISTS "Admin users can insert admin_users" ON admin_users; DROP POLICY IF EXISTS "Admin users can update admin_users" ON admin_users; DROP POLICY IF EXISTS "Admin users can delete admin_users" ON admin_users; DROP POLICY IF EXISTS "Allow authenticated users to read admin_users" ON admin_users; DROP POLICY IF EXISTS "Allow authenticated users to insert admin_users" ON admin_users; DROP POLICY IF EXISTS "Allow authenticated users to update admin_users" ON admin_users; DROP POLICY IF EXISTS "Allow authenticated users to delete admin_users" ON admin_users; -- Grant full permissions to all roles GRANT ALL PRIVILEGES ON admin_users TO anon; GRANT ALL PRIVILEGES ON admin_users TO authenticated; GRANT ALL PRIVILEGES ON admin_users TO service_role; -- Grant sequence permissions GRANT ALL ON ALL SEQUENCES IN SCHEMA public TO anon; GRANT ALL ON ALL SEQUENCES IN SCHEMA public TO authenticated; GRANT ALL ON ALL SEQUENCES IN SCHEMA public TO service_role; -- Make sure the table is accessible GRANT SELECT, INSERT, UPDATE, DELETE ON admin_users TO PUBLIC; -- Refresh schema NOTIFY pgrst, 'reload schema'; -- Test insert to verify it works INSERT INTO admin_users (email, role, is_active, created_at) VALUES ('test@example.com', 'admin', true, NOW()) ON CONFLICT (email) DO NOTHING; -- Clean up test record DELETE FROM admin_users WHERE email = 'test@example.com'; [V0_FILE]sql:file="scripts/completely-remove-rls.sql" type="script" -- Drop the entire admin_users table and recreate it without RLS DROP TABLE IF EXISTS admin_users CASCADE; -- Create the table fresh without any RLS CREATE TABLE admin_users ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, email TEXT UNIQUE NOT NULL, role TEXT NOT NULL DEFAULT 'admin', is_active BOOLEAN DEFAULT true, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), last_login_at TIMESTAMP WITH TIME ZONE, created_by TEXT ); -- Make sure RLS is disabled ALTER TABLE admin_users DISABLE ROW LEVEL SECURITY; -- Grant all permissions to everyone GRANT ALL PRIVILEGES ON admin_users TO anon; GRANT ALL PRIVILEGES ON admin_users TO authenticated; GRANT ALL PRIVILEGES ON admin_users TO service_role; GRANT ALL PRIVILEGES ON admin_users TO postgres; -- Make the table completely public GRANT SELECT, INSERT, UPDATE, DELETE ON admin_users TO PUBLIC; -- Insert demo admin users INSERT INTO admin_users (email, role, is_active, created_at) VALUES ('admin@medikloud.com', 'super_admin', true, NOW()), ('pharmacy@medikloud.com', 'admin', true, NOW()), ('manager@medikloud.com', 'manager', true, NOW()), ('support@medikloud.com', 'support', true, NOW()) ON CONFLICT (email) DO NOTHING; -- Verify the table works SELECT 'Table created successfully' as status, count() as user_count FROM admin_users; [V0_FILE]sql:file="scripts/create-admin-functions.sql" type="script" -- Create function to get admin users CREATE OR REPLACE FUNCTION get_admin_users() RETURNS TABLE ( id UUID, email TEXT, role TEXT, is_active BOOLEAN, created_at TIMESTAMP WITH TIME ZONE, last_login_at TIMESTAMP WITH TIME ZONE, created_by TEXT ) LANGUAGE SQL SECURITY DEFINER AS $$ SELECT admin_users.id, admin_users.email, admin_users.role, admin_users.is_active, admin_users.created_at, admin_users.last_login_at, admin_users.created_by FROM admin_users ORDER BY admin_users.created_at DESC; $$; -- Create function to add admin user CREATE OR REPLACE FUNCTION add_admin_user(user_email TEXT, user_role TEXT) RETURNS TABLE ( id UUID, email TEXT, role TEXT, is_active BOOLEAN, created_at TIMESTAMP WITH TIME ZONE, last_login_at TIMESTAMP WITH TIME ZONE, created_by TEXT ) LANGUAGE plpgsql SECURITY DEFINER AS $$ BEGIN -- Check if user already exists IF EXISTS (SELECT 1 FROM admin_users WHERE admin_users.email = user_email) THEN RAISE EXCEPTION 'This email is already registered as an admin'; END IF; -- Insert and return the new user RETURN QUERY INSERT INTO admin_users (email, role, is_active, created_at) VALUES (user_email, user_role, true, NOW()) RETURNING admin_users.id, admin_users.email, admin_users.role, admin_users.is_active, admin_users.created_at, admin_users.last_login_at, admin_users.created_by; END; $$; -- Grant execute permissions on functions GRANT EXECUTE ON FUNCTION get_admin_users() TO anon; GRANT EXECUTE ON FUNCTION get_admin_users() TO authenticated; GRANT EXECUTE ON FUNCTION get_admin_users() TO service_role; GRANT EXECUTE ON FUNCTION add_admin_user(TEXT, TEXT) TO anon; GRANT EXECUTE ON FUNCTION add_admin_user(TEXT, TEXT) TO authenticated; GRANT EXECUTE ON FUNCTION add_admin_user(TEXT, TEXT) TO service_role; -- Test the functions SELECT 'Functions created successfully' as status; SELECT FROM get_admin_users(); [V0_FILE]typescriptreact:file="components/simple-admin-management.tsx" "use client" import { useState, useEffect } from "react" import { supabase } from "@/lib/supabase" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { UserPlus, Users, CheckCircle, AlertTriangle, Loader2 } from "lucide-react" interface AdminUser { id: string email: string role: string is_active: boolean created_at: string } export default function SimpleAdminManagement() { const [adminUsers, setAdminUsers] = useState([]) const [loading, setLoading] = useState(true) const [adding, setAdding] = useState(false) const [newEmail, setNewEmail] = useState("") const [newRole, setNewRole] = useState("admin") const [alert, setAlert] = useState<{ type: "success" | "error"; message: string } | null>(null) const showAlert = (type: "success" | "error", message: string) => { setAlert({ type, message }) setTimeout(() => setAlert(null), 5000) } const fetchUsers = async () => { setLoading(true) try { console.log("Fetching admin users...") const { data, error } = await supabase.from("admin_users").select("").order("created_at", { ascending: false }) console.log("Fetch result:", { data, error }) if (error) { console.error("Fetch error:", error) showAlert("error", `Failed to load users: ${error.message}`) return } setAdminUsers(data || []) console.log("Loaded users:", data?.length || 0) } catch (error: any) { console.error("Fetch exception:", error) showAlert("error", "Failed to load users") } finally { setLoading(false) } } const addUser = async () => { if (!newEmail.trim()) { showAlert("error", "Email is required") return } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(newEmail.trim())) { showAlert("error", "Please enter a valid email address") return } setAdding(true) try { console.log("Adding user:", { email: newEmail, role: newRole }) // Try using the SQL function first const { data: rpcData, error: rpcError } = await supabase.rpc("add_admin_user", { user_email: newEmail.toLowerCase().trim(), user_role: newRole, }) console.log("RPC result:", { rpcData, rpcError }) if (rpcError) { console.log("RPC failed, trying direct insert...") // Fallback to direct insert const { data: insertData, error: insertError } = await supabase .from("admin_users") .insert({ email: newEmail.toLowerCase().trim(), role: newRole, is_active: true, created_at: new Date().toISOString(), }) .select() .single() console.log("Direct insert result:", { insertData, insertError }) if (insertError) { console.error("Insert error:", insertError) if (insertError.code === "23505") { showAlert("error", "This email is already registered") } else { showAlert("error", `Failed to add user: ${insertError.message}`) } return } if (insertData) { setAdminUsers([insertData, ...adminUsers]) setNewEmail("") showAlert("success", `Successfully added ${insertData.email}`) } } else { // RPC succeeded if (rpcData && rpcData.length > 0) { setAdminUsers([rpcData[0], ...adminUsers]) setNewEmail("") showAlert("success", `Successfully added ${rpcData[0].email}`) } } } catch (error: any) { console.error("Add user exception:", error) showAlert("error", error.message || "Failed to add user") } finally { setAdding(false) } } useEffect(() => { fetchUsers() }, []) return (
{/ Alert /} {alert && ( {alert.type === "success" ? ( ) : ( )} {alert.message} )} {/ Add User Form /} Add Admin User

Email Address setNewEmail(e.target.value)} className="mt-1" />

Role

{/ Users List /} Admin Users ({adminUsers.length}) {loading ? (

Loading admin users...

) : adminUsers.length === 0 ? (

No admin users found

) : (
{adminUsers.map((user) => (

{user.email}

{user.role} • {user.is_active ? "Active" : "Inactive"} • Created:{" "} {new Date(user.created_at).toLocaleDateString()}

{user.is_active ? "Active" : "Inactive"} {user.role}

))}
)}
) } [V0_FILE]png:file="public/images/medikloud-logo-full.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250605_0000_Logo%20on%20Transparent%20Background_remix_01jwy39xese059mg9kkytw47qg-RnAJpUyzxfspJyPZyr8NoIfvEBJTdI.png" [V0_FILE]typescriptreact:file="components/professional-header.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { useAuth } from "@/contexts/auth-context" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Clock, UserCircle, LogOut, Settings, Bell, Shield, ChevronDown, Menu, X } from "lucide-react" import Link from "next/link" export default function ProfessionalHeader() { const { phone, logout } = useAuth() const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const getInitials = (phoneNumber: string) => { return phoneNumber.slice(-4) } return (

{/ Logo and Brand /}

{/ Desktop Navigation /}

{/ Notifications /} {/ User Menu /} My Account Profile & Orders Settings Privacy & Security Sign Out
{/ Mobile Menu Button /}

{/ Mobile Menu /} {mobileMenuOpen && (

{getInitials(phone || "")}

{phone}
Active Session

setMobileMenuOpen(false)}> setMobileMenuOpen(false)}>

)}

) } [V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { useAdminAuth } from "@/contexts/admin-auth-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { Loader2, Shield, Lock, Mail, Eye, EyeOff } from "lucide-react" export default function AdminLoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [error, setError] = useState("") const [isSigningIn, setIsSigningIn] = useState(false) const { signInWithEmailPassword } = useAdminAuth() const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!email.trim() || !password.trim()) { setError("Please enter both email and password") return } try { setIsSigningIn(true) setError("") await signInWithEmailPassword(email, password) router.push("/admin") } catch (err: any) { setError(err.message || "Failed to sign in. Please try again.") } finally { setIsSigningIn(false) } } return (

{/ Header /}

Secure access for authorized administrators only

Admin Sign In Enter your admin credentials to access the dashboard
{/ Email Field /}
Email Address
setEmail(e.target.value)} className="h-12 pl-10 text-base border-2 border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 rounded-xl transition-all duration-200" disabled={isSigningIn} required />

{/ Password Field /}
Password
setPassword(e.target.value)} className="h-12 pl-10 pr-10 text-base border-2 border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 rounded-xl transition-all duration-200" disabled={isSigningIn} required />

{/ Error Display /} {error && ( {error} )} {/ Sign In Button /}
{/ Demo Credentials /}

Demo Admin Credentials

Super Admin: admin@medikloud.com / admin123

Pharmacy: pharmacy@medikloud.com / pharmacy123

Manager: manager@medikloud.com / manager123

Support: support@medikloud.com / support123

{/ Footer /}

Secure Admin Access • Role-Based Authorization

© 2024 MediKloud. All rights reserved.

) } [V0_FILE]typescriptreact:file="components/footer-links.tsx" isQuickEdit="true" import type React from "react" interface FooterLinksProps { links: { title: string items: { label: string href: string }[] }[] } const FooterLinks: React.FC = ({ links }) => { return (

{/ Logo Section /}

© {new Date().getFullYear()} MediKloud. All rights reserved.

{/ Links Sections /} {links.map((section, index) => (

{section.title}

{section.items.map((item, itemIndex) => (
{item.label}
))}

))}

) } export default FooterLinks [V0_FILE]typescriptreact:file="components/login-form.tsx" "use client" import type React from "react" import { useState } from "react" import { useAuth } from "@/contexts/auth-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Loader2, Phone, Shield, Cloud } from "lucide-react" export default function LoginForm() { const [phone, setPhone] = useState("") const [otp, setOtp] = useState("") const [step, setStep] = useState<"phone" | "otp">("phone") const [error, setError] = useState("") const [loading, setLoading] = useState(false) const { login } = useAuth() const handlePhoneSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!phone.trim()) { setError("Please enter your phone number") return } setLoading(true) // Simulate OTP sending delay await new Promise((resolve) => setTimeout(resolve, 1000)) setStep("otp") setError("") setLoading(false) } const handleOtpSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!otp.trim()) { setError("Please enter the OTP") return } setLoading(true) const success = await login(phone, otp) if (!success) { setError("Invalid OTP. Please try again.") } setLoading(false) } return (

{/ Header /}

Your trusted partner for secure and convenient prescription management

{step === "phone" ? ( ) : ( )}
{step === "phone" ? "Welcome Back" : "Verify Identity"} {step === "phone" ? "Enter your registered phone number to continue" : `Verification code sent to ${phone}`} {step === "phone" ? (

Phone Number setPhone(e.target.value)} className="h-14 text-lg border-2 border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 rounded-2xl transition-all duration-200" disabled={loading} />
{error && (
{error}
)}
) : (

Verification Code setOtp(e.target.value)} className="h-14 text-xl text-center tracking-widest border-2 border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 rounded-2xl transition-all duration-200" maxLength={6} disabled={loading} />
{error && (
{error}
)}
)}

Demo Credentials

Phone: +919999999999

OTP: 123456

Patient-First • Privacy Protected • Trusted Healthcare

© 2025 MediKloud. All rights reserved.

) } [V0_FILE]sql:file="scripts/create-user-addresses-table.sql" type="script" -- Create user_addresses table CREATE TABLE IF NOT EXISTS user_addresses ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), user_phone TEXT NOT NULL REFERENCES auth.users(phone), name TEXT NOT NULL, house_flat_no TEXT NOT NULL, street_name TEXT NOT NULL, landmark TEXT, town_village TEXT NOT NULL, district TEXT NOT NULL, pincode TEXT NOT NULL, is_default BOOLEAN DEFAULT false, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), CONSTRAINT valid_pincode CHECK (pincode ~ '^[0-9]{6}$') ); -- Create index on user_phone for faster lookups CREATE INDEX IF NOT EXISTS idx_user_addresses_user_phone ON user_addresses(user_phone); -- Enable RLS ALTER TABLE user_addresses ENABLE ROW LEVEL SECURITY; -- Create policies CREATE POLICY "Users can view their own addresses" ON user_addresses FOR SELECT USING (auth.uid()::text = user_phone); CREATE POLICY "Users can insert their own addresses" ON user_addresses FOR INSERT WITH CHECK (auth.uid()::text = user_phone); CREATE POLICY "Users can update their own addresses" ON user_addresses FOR UPDATE USING (auth.uid()::text = user_phone); CREATE POLICY "Users can delete their own addresses" ON user_addresses FOR DELETE USING (auth.uid()::text = user_phone); -- Grant permissions GRANT ALL ON user_addresses TO authenticated; GRANT ALL ON user_addresses TO service_role; [V0_FILE]sql:file="scripts/update-orders-with-address-id.sql" type="script" -- Add address_id column to orders table ALTER TABLE orders ADD COLUMN IF NOT EXISTS address_id UUID; -- Add foreign key constraint ALTER TABLE orders ADD CONSTRAINT fk_orders_address_id FOREIGN KEY (address_id) REFERENCES user_addresses(id) ON DELETE SET NULL; -- Create index for faster lookups CREATE INDEX IF NOT EXISTS idx_orders_address_id ON orders(address_id); [V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" "use client" import as React from "react" import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import { Circle } from "lucide-react" import { cn } from "@/lib/utils" const RadioGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return }) RadioGroup.displayName = RadioGroupPrimitive.Root.displayName const RadioGroupItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return ( ) }) RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName export { RadioGroup, RadioGroupItem } [V0_FILE]typescriptreact:file="components/ui/use-toast.ts" isFixed="true" isQuickEdit="true" "use client" import * as React from "react" type ToasterToast = { id: string title?: React.ReactNode description?: React.ReactNode action?: React.ReactElement variant?: "default" | "destructive" } const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToastActionElement = React.ReactElement type Toast = { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement variant?: "default" | "destructive" } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: ToasterToast["id"] } | { type: ActionType["REMOVE_TOAST"] toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type ToastProps = Omit function toast({ ...props }: ToastProps) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]sql:file="scripts/fix-user-addresses-rls.sql" type="script" -- Drop existing policies DROP POLICY IF EXISTS "Users can view their own addresses" ON user_addresses; DROP POLICY IF EXISTS "Users can insert their own addresses" ON user_addresses; DROP POLICY IF EXISTS "Users can update their own addresses" ON user_addresses; DROP POLICY IF EXISTS "Users can delete their own addresses" ON user_addresses; -- Update the table structure to use user_id instead of user_phone ALTER TABLE user_addresses DROP CONSTRAINT IF EXISTS user_addresses_user_phone_fkey; -- Add user_id column if it doesn't exist ALTER TABLE user_addresses ADD COLUMN IF NOT EXISTS user_id UUID REFERENCES auth.users(id); -- Create a function to get user ID from phone CREATE OR REPLACE FUNCTION get_user_id_from_phone(phone_number TEXT) RETURNS UUID AS $$ BEGIN RETURN (SELECT id FROM auth.users WHERE phone = phone_number LIMIT 1); END; $$ LANGUAGE plpgsql SECURITY DEFINER; -- Update existing records to have user_id UPDATE user_addresses SET user_id = get_user_id_from_phone(user_phone) WHERE user_id IS NULL AND user_phone IS NOT NULL; -- Create new policies using auth.uid() CREATE POLICY "Users can view their own addresses" ON user_addresses FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own addresses" ON user_addresses FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own addresses" ON user_addresses FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete their own addresses" ON user_addresses FOR DELETE USING (auth.uid() = user_id); -- Create index on user_id for better performance CREATE INDEX IF NOT EXISTS idx_user_addresses_user_id ON user_addresses(user_id); -- Grant permissions GRANT ALL ON user_addresses TO authenticated; GRANT ALL ON user_addresses TO service_role; [V0_FILE]sql:file="scripts/create-simple-user-addresses-table.sql" type="script" -- Drop the existing table if it exists DROP TABLE IF EXISTS user_addresses; -- Create a simpler user_addresses table that works with phone-based auth CREATE TABLE user_addresses ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_phone TEXT NOT NULL, name TEXT NOT NULL, house_flat_no TEXT NOT NULL, street_name TEXT NOT NULL, landmark TEXT, town_village TEXT NOT NULL, district TEXT NOT NULL, pincode TEXT NOT NULL, is_default BOOLEAN DEFAULT FALSE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create index for faster queries CREATE INDEX idx_user_addresses_phone ON user_addresses(user_phone); -- Enable RLS but create a permissive policy for now ALTER TABLE user_addresses ENABLE ROW LEVEL SECURITY; -- Create a policy that allows all operations for authenticated users -- This is temporary until we implement proper Supabase auth CREATE POLICY "Allow all operations for now" ON user_addresses FOR ALL USING (true); -- Grant permissions GRANT ALL ON user_addresses TO authenticated; GRANT ALL ON user_addresses TO anon; [V0_FILE]sql:file="scripts/disable-user-addresses-rls.sql" type="script" -- Drop the existing table and recreate without RLS issues DROP TABLE IF EXISTS user_addresses CASCADE; -- Create the user_addresses table without RLS complications CREATE TABLE user_addresses ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_phone TEXT NOT NULL, name TEXT NOT NULL, house_flat_no TEXT NOT NULL, street_name TEXT NOT NULL, landmark TEXT, town_village TEXT NOT NULL, district TEXT NOT NULL, pincode TEXT NOT NULL, is_default BOOLEAN DEFAULT FALSE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create index for faster queries CREATE INDEX idx_user_addresses_phone ON user_addresses(user_phone); -- Disable RLS completely for this table ALTER TABLE user_addresses DISABLE ROW LEVEL SECURITY; -- Grant full permissions to all roles GRANT ALL ON user_addresses TO authenticated; GRANT ALL ON user_addresses TO anon; GRANT ALL ON user_addresses TO service_role; -- Ensure the table is accessible GRANT USAGE ON SCHEMA public TO authenticated; GRANT USAGE ON SCHEMA public TO anon; GRANT USAGE ON SCHEMA public TO service_role; -- Test insert to make sure it works INSERT INTO user_addresses ( user_phone, name, house_flat_no, street_name, town_village, district, pincode, is_default ) VALUES ( '+919999999999', 'Test Address', '123', 'Test Street', 'Test Town', 'Test District', '123456', true ); -- Clean up test data DELETE FROM user_addresses WHERE name = 'Test Address'; [V0_FILE]sql:file="scripts/update-orders-table-for-addresses.sql" type="script" -- Update orders table to support new address management and additional fields ALTER TABLE orders ADD COLUMN IF NOT EXISTS address_id UUID REFERENCES user_addresses(id), ADD COLUMN IF NOT EXISTS additional_files TEXT[], ADD COLUMN IF NOT EXISTS emergency_contact TEXT, ADD COLUMN IF NOT EXISTS insurance_provider TEXT, ADD COLUMN IF NOT EXISTS allergies TEXT, ADD COLUMN IF NOT EXISTS chronic_conditions TEXT; -- Update the status column to use the correct enum values ALTER TABLE orders ALTER COLUMN status SET DEFAULT 'order_received'; -- Make sure the status column accepts the correct values DO $$ BEGIN -- Check if the constraint exists and drop it if it does IF EXISTS ( SELECT 1 FROM information_schema.table_constraints WHERE constraint_name = 'orders_status_check' AND table_name = 'orders' ) THEN ALTER TABLE orders DROP CONSTRAINT orders_status_check; END IF; -- Add the updated constraint ALTER TABLE orders ADD CONSTRAINT orders_status_check CHECK (status IN ( 'order_received', 'order_confirmed', 'getting_packed', 'packed', 'looking_for_delivery', 'out_for_delivery', 'delivered', 'cancelled', 'pending' )); END $$; -- Test insert to verify the schema works DO $$ DECLARE test_id UUID; BEGIN -- Insert a test record INSERT INTO orders ( name, phone, address, status, file_url, address_id, additional_files, emergency_contact, insurance_provider, allergies, chronic_conditions ) VALUES ( 'Test Patient', '+919999999999', 'Test Address', 'pending', 'https://example.com/test.pdf', NULL, ARRAY['https://example.com/test2.pdf'], '+919999999998', 'Test Insurance', 'No allergies', 'No conditions' ) RETURNING id INTO test_id; -- Delete the test record DELETE FROM orders WHERE id = test_id; RAISE NOTICE 'Orders table schema update successful!'; EXCEPTION WHEN OTHERS THEN RAISE NOTICE 'Error testing orders table: %', SQLERRM; END $$; [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/select.tsx" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="app/admin/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" "use client" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isQuickEdit="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) => ( {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="app/admin/actions.ts" isQuickEdit="true" "use server" import { supabase } from "@/lib/supabase" export interface AdminUser { id: string email: string role: string is_active: boolean created_at: string last_login_at?: string } export async function getAdminUsers(): Promise<{ data: AdminUser[] | null; error: string | null }> { try { console.log("Fetching admin users...") // Use raw SQL query to bypass any potential RLS issues const { data, error } = await supabase.rpc("get_admin_users") if (error) { console.error("RPC error, trying direct select:", error) // Fallback to direct select const { data: directData, error: directError } = await supabase .from("admin_users") .select("") .order("created_at", { ascending: false }) if (directError) { console.error("Direct select error:", directError) return { data: null, error: directError.message } } return { data: directData || [], error: null } } return { data: data || [], error: null } } catch (error: any) { console.error("Error in getAdminUsers:", error) return { data: null, error: error.message || "Failed to fetch admin users" } } } export async function addAdminUser( email: string, role: string, ): Promise<{ data: AdminUser | null; error: string | null }> { try { console.log("Adding admin user:", { email, role }) // Validate email format const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) { return { data: null, error: "Invalid email format" } } const cleanEmail = email.toLowerCase().trim() // Check if user already exists first const { data: existingUser, error: checkError } = await supabase .from("admin_users") .select("email") .eq("email", cleanEmail) .single() if (existingUser) { return { data: null, error: `The email ${cleanEmail} is already registered as an admin user` } } // If no existing user found, proceed with insert const { data, error } = await supabase .from("admin_users") .insert({ email: cleanEmail, role, is_active: true, created_at: new Date().toISOString(), }) .select() .single() if (error) { console.error("Insert error:", error) if (error.code === "23505") { return { data: null, error: `The email ${cleanEmail} is already registered as an admin user` } } return { data: null, error: error.message } } return { data, error: null } } catch (error: any) { console.error("Error in addAdminUser:", error) return { data: null, error: error.message || "Failed to add admin user" } } } export async function updateAdminUser( id: string, updates: { role?: string; is_active?: boolean }, ): Promise<{ data: AdminUser | null; error: string | null }> { try { console.log("Updating admin user:", id, updates) const { data, error } = await supabase.from("admin_users").update(updates).eq("id", id).select().single() if (error) { console.error("Error updating admin user:", error) return { data: null, error: error.message } } return { data, error: null } } catch (error: any) { console.error("Error in updateAdminUser:", error) return { data: null, error: error.message || "Failed to update admin user" } } } export async function deleteAdminUser(id: string): Promise<{ error: string | null }> { try { console.log("Deleting admin user:", id) const { error } = await supabase.from("admin_users").delete().eq("id", id) if (error) { console.error("Error deleting admin user:", error) return { error: error.message } } return { error: null } } catch (error: any) { console.error("Error in deleteAdminUser:", error) return { error: error.message || "Failed to delete admin user" } } } [V0_FILE]typescriptreact:file="components/admin-user-management.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" 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, DialogTrigger, } from "@/components/ui/dialog" import { Alert, AlertDescription } from "@/components/ui/alert" import { UserPlus, Users, Shield, ShieldCheck, ShieldX, Trash2, Edit, Mail, Calendar, CheckCircle, XCircle, AlertTriangle, Loader2, } from "lucide-react" import { getAdminUsers, addAdminUser, updateAdminUser, deleteAdminUser, type AdminUser } from "@/app/admin/actions" const roleConfig = { super_admin: { label: "Super Admin", color: "bg-red-100 text-red-800 border-red-200", icon: Shield, description: "Full system access", }, admin: { label: "Admin", color: "bg-blue-100 text-blue-800 border-blue-200", icon: ShieldCheck, description: "Order management access", }, manager: { label: "Manager", color: "bg-green-100 text-green-800 border-green-200", icon: Users, description: "Limited management access", }, support: { label: "Support", color: "bg-yellow-100 text-yellow-800 border-yellow-200", icon: ShieldX, description: "View-only access", }, } export default function AdminUserManagement() { const [adminUsers, setAdminUsers] = useState([]) const [loading, setLoading] = useState(true) const [adding, setAdding] = useState(false) const [updating, setUpdating] = useState(null) const [deleting, setDeleting] = useState(null) const [addDialogOpen, setAddDialogOpen] = useState(false) const [editDialogOpen, setEditDialogOpen] = useState(false) const [selectedUser, setSelectedUser] = useState(null) const [alert, setAlert] = useState<{ type: "success" | "error"; message: string } | null>(null) const [dialogError, setDialogError] = useState(null) // Form states const [newUserEmail, setNewUserEmail] = useState("") const [newUserRole, setNewUserRole] = useState("admin") const [editUserRole, setEditUserRole] = useState("") const [editUserActive, setEditUserActive] = useState(true) const fetchAdminUsers = async () => { setLoading(true) try { const { data, error } = await getAdminUsers() if (error) { showAlert("error", `Failed to fetch admin users: ${error}`) return } setAdminUsers(data || []) } catch (error: any) { console.error("Error fetching admin users:", error) showAlert("error", "Failed to fetch admin users") } finally { setLoading(false) } } const isEmailAlreadyAdded = (email: string) => { return adminUsers.some((user) => user.email.toLowerCase() === email.toLowerCase().trim()) } const handleAddAdminUser = async () => { // Clear any previous dialog errors setDialogError(null) if (!newUserEmail.trim()) { setDialogError("Email is required") return } // Validate email format on frontend too const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(newUserEmail.trim())) { setDialogError("Please enter a valid email address") return } setAdding(true) try { const { data, error } = await addAdminUser(newUserEmail.trim(), newUserRole) if (error) { setDialogError(error) return } if (data) { // Refresh the admin users list await fetchAdminUsers() // Clear form and close dialog setNewUserEmail("") setNewUserRole("admin") setDialogError(null) setAddDialogOpen(false) showAlert( "success", `Successfully added ${data.email} as ${roleConfig[data.role as keyof typeof roleConfig]?.label || data.role}`, ) } } catch (error: any) { console.error("Error adding admin user:", error) setDialogError("Failed to add admin user. Please try again.") } finally { setAdding(false) } } const handleUpdateAdminUser = async () => { if (!selectedUser) return setUpdating(selectedUser.id) try { const { data, error } = await updateAdminUser(selectedUser.id, { role: editUserRole, is_active: editUserActive, }) if (error) { showAlert("error", error) return } if (data) { const updatedUsers = adminUsers.map((user) => (user.id === selectedUser.id ? data : user)) setAdminUsers(updatedUsers) setEditDialogOpen(false) setSelectedUser(null) showAlert("success", "Admin user updated successfully") } } catch (error: any) { console.error("Error updating admin user:", error) showAlert("error", "Failed to update admin user") } finally { setUpdating(null) } } const handleDeleteAdminUser = async (userId: string, userEmail: string) => { if (!confirm(`Are you sure you want to remove ${userEmail} from admin access? This action cannot be undone.`)) { return } setDeleting(userId) try { const { error } = await deleteAdminUser(userId) if (error) { showAlert("error", error) return } setAdminUsers(adminUsers.filter((user) => user.id !== userId)) showAlert("success", `Successfully removed ${userEmail} from admin access`) } catch (error: any) { console.error("Error deleting admin user:", error) showAlert("error", "Failed to remove admin user") } finally { setDeleting(null) } } const handleToggleUserStatus = async (userId: string, currentStatus: boolean) => { setUpdating(userId) try { const { data, error } = await updateAdminUser(userId, { is_active: !currentStatus }) if (error) { showAlert("error", error) return } if (data) { const updatedUsers = adminUsers.map((user) => (user.id === userId ? data : user)) setAdminUsers(updatedUsers) showAlert("success", `Admin user ${!currentStatus ? "activated" : "deactivated"} successfully`) } } catch (error: any) { console.error("Error toggling user status:", error) showAlert("error", "Failed to update user status") } finally { setUpdating(null) } } const openEditDialog = (user: AdminUser) => { setSelectedUser(user) setEditUserRole(user.role) setEditUserActive(user.is_active) setEditDialogOpen(true) } const showAlert = (type: "success" | "error", message: string) => { setAlert({ type, message }) setTimeout(() => setAlert(null), 5000) } useEffect(() => { fetchAdminUsers() }, []) useEffect(() => { console.log("Add dialog open state:", addDialogOpen) }, [addDialogOpen]) const getStats = () => { const total = adminUsers.length const active = adminUsers.filter((user) => user.is_active).length const inactive = total - active const roleStats = adminUsers.reduce( (acc, user) => { acc[user.role] = (acc[user.role] || 0) + 1 return acc }, {} as Record, ) return { total, active, inactive, roleStats } } const stats = getStats() return (
{/ Alert /} {alert && ( {alert.type === "success" ? ( ) : ( )} {alert.message} )} {/ Statistics Cards /}

Total

{stats.total}

Admin Users

{stats.total > 0 ? ((stats.active / stats.total) 100).toFixed(0) : 0}%

{stats.active}

Active Users

{stats.total > 0 ? ((stats.inactive / stats.total) * 100).toFixed(0) : 0}%

{stats.inactive}

Inactive Users

Roles

{Object.keys(stats.roleStats).length}

Different Roles

{/* Admin Users Table /}

Admin Users
Manage admin access and permissions

Add New Admin User Add a new user to the admin panel. They will be able to access the admin dashboard based on their role. {dialogError && ( {dialogError} )}

Email Address { setNewUserEmail(e.target.value) // Clear any existing dialog errors when user starts typing if (dialogError) setDialogError(null) }} className="mt-1" />

Role

{loading ? (

Loading admin users...

) : adminUsers.length === 0 ? (

No Admin Users

Add your first admin user to get started.

) : (
Email Role Status Created Last Login Actions {adminUsers.map((user) => { const roleInfo = roleConfig[user.role as keyof typeof roleConfig] const RoleIcon = roleInfo?.icon || Users const createdDate = new Date(user.created_at).toLocaleDateString("en-IN", { year: "numeric", month: "short", day: "numeric", }) const lastLoginDate = user.last_login_at ? new Date(user.last_login_at).toLocaleDateString("en-IN", { year: "numeric", month: "short", day: "numeric", }) : "Never" return (
{user.email}
{roleInfo?.label || user.role} {user.is_active ? ( <> Active ) : ( <> Inactive )}
{createdDate}
{lastLoginDate}

) })}

)} {/ Edit User Dialog /} Edit Admin User Update the role and status of the admin user. {selectedUser && (

Email Address

Role

Status

)}
) } [V0_FILE]typescriptreact:file=".env.local" isQuickEdit="true" NEXT_PUBLIC_SUPABASE_URL=https://ysbqtoezuojbndirijrr.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlzYnF0b2V6dW9qYm5kaXJpanJyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDkxMzUzODksImV4cCI6MjA2NDcxMTM4OX0.Voz35_5dmNqyy9DVLcz25fgGqqbbKNO8Umga4HvqpC4 # Site URL for OAuth redirects (update for production) NEXT_PUBLIC_SITE_URL=http://localhost:3000 [V0_FILE]sql:file="scripts/add-short-order-id.sql" type="script" -- Add short_id column to orders table for user-friendly order IDs ALTER TABLE orders ADD COLUMN IF NOT EXISTS short_id VARCHAR(10) UNIQUE; -- Create index for faster searches CREATE INDEX IF NOT EXISTS idx_orders_short_id ON orders(short_id); -- Update existing orders with short IDs (optional - for existing data) -- This will generate short IDs for existing orders UPDATE orders SET short_id = 'MK' || UPPER(SUBSTRING(MD5(id::text), 1, 6)) WHERE short_id IS NULL; [V0_FILE]typescriptreact:file="components/advanced-prescription-form.tsx" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Calendar } from "@/components/ui/calendar" import { Checkbox } from "@/components/ui/checkbox" import { useToast } from "@/components/ui/use-toast" import { zodResolver } from "@hookform/resolvers/zod" import { format } from "date-fns" import { CalendarIcon } from "lucide-react" import { useState } from "react" import { useForm } from "react-hook-form" import as z from "zod" import { cn } from "@/lib/utils" import { supabase, generateShortOrderId } from "@/lib/supabase" import { useRouter } from "next/navigation" const FormSchema = z.object({ patientName: z.string().min(2, { message: "Patient name must be at least 2 characters.", }), patientAge: z.number().min(1, { message: "Age must be a valid number.", }), patientGender: z.enum(["male", "female", "other"], { required_error: "Please select a gender.", }), medicationName: z.string().min(2, { message: "Medication name must be at least 2 characters.", }), dosage: z.string().min(1, { message: "Dosage must be specified.", }), frequency: z.string().min(1, { message: "Frequency must be specified.", }), startDate: z.date(), endDate: z.date().optional(), notes: z.string().optional(), refills: z.number().optional(), isControlledSubstance: z.boolean().default(false), }) type FormData = z.infer const AdvancedPrescriptionForm = () => { const [open, setOpen] = useState(false) const [date, setDate] = useState(new Date()) const { toast } = useToast() const router = useRouter() const form = useForm({ resolver: zodResolver(FormSchema), defaultValues: { patientName: "", patientAge: 0, patientGender: "male", medicationName: "", dosage: "", frequency: "", startDate: new Date(), endDate: new Date(), notes: "", refills: 0, isControlledSubstance: false, }, }) async function onSubmit(data: FormData) { try { // Generate short order ID const shortOrderId = generateShortOrderId() const { data: orderData, error } = await supabase .from("orders") .insert([ { name: data.patientName.trim(), phone: data.patientAge.toString().trim(), address: data.patientGender.trim(), file_url: data.medicationName.trim(), short_id: shortOrderId, status: "order_received", }, ]) .select() .single() if (error) { console.error("Error creating order:", error) toast({ title: "Error placing order.", description: "Something went wrong. Please try again.", variant: "destructive", }) return } toast({ title: "Order Placed Successfully! 🎉", description: (

Your Order ID: {shortOrderId}

Please save this ID for tracking your order. We'll call you within 30 minutes to confirm.

), duration: 8000, }) // Reset form and redirect form.reset() router.push("/profile") } catch (error) { console.error("Unexpected error:", error) toast({ title: "Unexpected error occurred.", description: "Please try again later.", variant: "destructive", }) } } return (
( Patient Name Enter the full name of the patient. )} />
( Patient Age field.onChange(Number(e.target.value))} /> Enter the patient's age. )} /> ( Gender Select the patient's gender. )} />
( Medication Name Enter the name of the medication. )} />
( Dosage Enter the dosage of the medication. )} /> ( Frequency Enter how often the medication should be taken. )} />

( Start Date date > new Date()} initialFocus /> Select the start date for the medication. )} /> ( End Date (Optional) date < form.getValues("startDate")!} initialFocus /> Select the end date for the medication (optional). )} />
( Additional Notes </FormControl> <FormDescription>Provide any additional notes or instructions for the patient.</FormDescription> <FormMessage /> </FormItem> )} /> <div className="flex gap-4"> <FormField control={form.control} name="refills" render={({ field }) => ( <FormItem className="w-1/2"> <FormLabel>Number of Refills (Optional)</FormLabel> <FormControl> <Input type="number" placeholder="e.g., 3" {...field} onChange={(e) => field.onChange(Number(e.target.value))} /> </FormControl> <FormDescription>Specify the number of refills allowed.</FormDescription> <FormMessage /> </FormItem> )} /> <FormField control={form.control} name="isControlledSubstance" render={({ field }) => ( <FormItem className="flex flex-row items-center space-x-3 space-y-0 rounded-md border border-muted p-4"> <FormControl> <Checkbox checked={field.value} onCheckedChange={field.onChange} /> </FormControl> <div className="space-y-0.5"> <FormLabel className="text-base">Controlled Substance</FormLabel> <FormDescription>Check if the medication is a controlled substance.</FormDescription> </div> </FormItem> )} /> </div> <Button type="submit">Submit Prescription</Button> </form> </Form> ) } export default AdvancedPrescriptionForm [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useAuth } from "@/contexts/auth-context" import LoginForm from "@/components/login-form" import ProfessionalHeaderEnhanced from "@/components/professional-header-enhanced" import EnhancedPrescriptionForm from "@/components/enhanced-prescription-form" import { Loader2 } from "lucide-react" export default function Home() { const { isAuthenticated, loading } = useAuth() if (loading) { return ( <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 flex items-center justify-center"> <div className="text-center"> <div className="flex flex-col items-center justify-center mb-6"> <img src="/images/medikloud-logo-full.png" alt="MediKloud" className="h-16 w-auto mb-4" /> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto"> <Loader2 className="w-8 h-8 animate-spin text-blue-600" /> </div> </div> <p className="text-gray-600 font-medium">Loading MediScript...</p> </div> </div> ) } if (!isAuthenticated) { return <LoginForm /> } return ( <div className="min-h-screen"> <ProfessionalHeaderEnhanced /> <EnhancedPrescriptionForm /> </div> ) } [V0_FILE]typescriptreact:file="components/prescription-form.tsx" "use client" import ProfessionalHeaderEnhanced from "@/components/professional-header-enhanced" import EnhancedPrescriptionForm from "@/components/enhanced-prescription-form" export default function PrescriptionForm() { return ( <div className="min-h-screen"> <ProfessionalHeaderEnhanced /> <EnhancedPrescriptionForm /> </div> ) } [V0_FILE]sql:file="scripts/update-orders-for-multiple-files.sql" -- Add a new column for multiple file URLs ALTER TABLE orders ADD COLUMN IF NOT EXISTS file_urls TEXT[] DEFAULT '{}'; -- Migrate existing data: copy file_url to file_urls array UPDATE orders SET file_urls = ARRAY[file_url] WHERE file_url IS NOT NULL AND (file_urls IS NULL OR array_length(file_urls, 1) IS NULL); -- Add a comment explaining the columns COMMENT ON COLUMN orders.file_url IS 'Legacy column for single file URL (deprecated)'; COMMENT ON COLUMN orders.file_urls IS 'Array of prescription file URLs'; [V0_FILE]sql:file="scripts/add-file-urls-column-v2.sql" type="script" -- Add file_urls column to orders table if it doesn't exist DO $$ BEGIN -- Check if file_urls column exists IF NOT EXISTS ( SELECT 1 FROM information_schema.columns WHERE table_name = 'orders' AND column_name = 'file_urls' AND table_schema = 'public' ) THEN -- Add the file_urls column ALTER TABLE public.orders ADD COLUMN file_urls TEXT[]; RAISE NOTICE 'Added file_urls column to orders table'; ELSE RAISE NOTICE 'file_urls column already exists in orders table'; END IF; -- Update existing records to populate file_urls from file_url UPDATE public.orders SET file_urls = ARRAY[file_url] WHERE file_urls IS NULL AND file_url IS NOT NULL; RAISE NOTICE 'Updated existing orders with file_urls data'; END $$; [V0_FILE]typescriptreact:file="app/admin/page.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { supabase } from "@/lib/supabase" import { useAdminAuth } from "@/contexts/admin-auth-context" import AdminAuthGuard from "@/components/admin-auth-guard" import Link from "next/link" import { Package, Clock, CheckCircle, FileText, Download, Users, Settings, Search, Eye, ChevronDown, LogOut, FileImage, ChevronLeft, ChevronRight, } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" interface Order { id: string name: string phone: string address: string status: string file_url: string file_urls?: string[] created_at: string short_id?: string } const AdminPage = () => { const { user, signOut } = useAdminAuth() const [orders, setOrders] = useState<Order[]>([]) const [loading, setLoading] = useState(true) const [searchTerm, setSearchTerm] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [selectedOrder, setSelectedOrder] = useState<Order | null>(null) const [showDetails, setShowDetails] = useState(false) const [showSettings, setShowSettings] = useState(false) const [prescriptionViewerOpen, setPrescriptionViewerOpen] = useState(false) const [currentPrescriptionIndex, setCurrentPrescriptionIndex] = useState(0) // Stats const totalOrders = orders.length const pendingOrders = orders.filter( (order) => order.status === "order_received" || order.status === "order_confirmed", ).length const processingOrders = orders.filter( (order) => order.status === "getting_packed" || order.status === "packed" || order.status === "looking_for_delivery" || order.status === "out_for_delivery", ).length const completedOrders = orders.filter((order) => order.status === "delivered").length useEffect(() => { fetchOrders() }, []) const fetchOrders = async () => { try { const { data, error } = await supabase.from("orders").select("").order("created_at", { ascending: false }) if (error) throw error setOrders(data || []) } catch (error) { console.error("Error fetching orders:", error) } finally { setLoading(false) } } const updateOrderStatus = async (orderId: string, newStatus: string) => { try { const { error } = await supabase.from("orders").update({ status: newStatus }).eq("id", orderId) if (error) throw error fetchOrders() } catch (error) { console.error("Error updating order status:", error) } } const getStatusColor = (status: string) => { switch (status) { case "pending": case "order_received": return "bg-blue-100 text-blue-800" case "processing": return "bg-amber-100 text-amber-800" case "ready_for_pickup": return "bg-purple-100 text-purple-800" case "out_for_delivery": return "bg-orange-100 text-orange-800" case "delivered": return "bg-green-100 text-green-800" case "cancelled": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } const filteredOrders = orders.filter((order) => { const matchesSearch = (order.name || "").toLowerCase().includes(searchTerm.toLowerCase()) || (order.phone || "").includes(searchTerm) || (order.short_id || "").toLowerCase().includes(searchTerm.toLowerCase()) || (order.id || "").toLowerCase().includes(searchTerm.toLowerCase()) let matchesStatus = false if (statusFilter === "all") { matchesStatus = true } else if (statusFilter === "pending_group") { matchesStatus = order.status === "order_received" || order.status === "order_confirmed" } else if (statusFilter === "processing_group") { matchesStatus = order.status === "getting_packed" || order.status === "packed" || order.status === "looking_for_delivery" || order.status === "out_for_delivery" } else { matchesStatus = order.status === statusFilter } return matchesSearch && matchesStatus }) const viewOrderDetails = (order: Order) => { setSelectedOrder(order) setShowDetails(true) } const openPrescriptionViewer = (order: Order, index = 0) => { setSelectedOrder(order) setCurrentPrescriptionIndex(index) setPrescriptionViewerOpen(true) } const handleStatusFilter = (status: string) => { if (status === "pending") { // Show orders that are order_received OR order_confirmed setStatusFilter("pending_group") } else if (status === "processing") { // Show orders that are getting_packed, packed, looking_for_delivery, or out_for_delivery setStatusFilter("processing_group") } else { setStatusFilter(status) } } const openSettings = () => { setShowSettings(true) } return ( <AdminAuthGuard> <div className="min-h-screen bg-slate-50"> {/ Header /} <div className="bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> <div className="flex items-center justify-between"> <div className="flex items-center gap-4"> <img src="/images/medikloud-logo.png" alt="MediKloud" className="h-10 w-auto bg-white p-1 rounded" /> <div> <h1 className="text-2xl font-bold">Admin Dashboard</h1> <p className="text-sm text-blue-100">Manage orders, users, and system settings</p> </div> </div> <div className="flex items-center gap-4"> {user && ( <DropdownMenu> <DropdownMenuTrigger className="flex items-center gap-2 bg-white/20 hover:bg-white/30 text-white border-none p-2 rounded-md transition-colors cursor-pointer"> <div className="w-8 h-8 bg-white rounded-full flex items-center justify-center"> <span className="text-blue-800 text-sm font-semibold"> {user.email?.charAt(0).toUpperCase()} </span> </div> <div className="hidden md:block text-left"> <p className="text-sm font-medium">{user.email}</p> <p className="text-xs text-blue-100">Admin</p> </div> <ChevronDown className="h-4 w-4" /> </DropdownMenuTrigger> <DropdownMenuContent align="end" className="w-56"> <div className="px-3 py-2 border-b"> <p className="text-sm font-medium">{user.email}</p> <p className="text-xs text-gray-500">Administrator</p> </div> <Link href="/admin/users"> <DropdownMenuItem className="cursor-pointer"> <Users className="h-4 w-4 mr-2" /> Manage Users </DropdownMenuItem> </Link> <DropdownMenuItem onClick={openSettings} className="cursor-pointer"> <Settings className="h-4 w-4 mr-2" /> Settings </DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuItem onClick={signOut} className="cursor-pointer text-red-600"> <LogOut className="h-4 w-4 mr-2" /> Sign Out </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> )} </div> </div> </div> </div> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> {/ Status Cards /} <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> <button onClick={() => handleStatusFilter("all")} className={`p-0 border-0 text-left ${statusFilter === "all" ? "ring-2 ring-blue-500" : ""}`} > <Card className="border-0 shadow-md hover:shadow-lg transition-shadow cursor-pointer bg-gradient-to-br from-blue-500 to-blue-600 text-white"> <CardContent className="p-4"> <div className="flex items-center justify-between"> <div> <p className="text-sm font-medium text-blue-100">Total Orders</p> <p className="text-3xl font-bold">{totalOrders}</p> </div> <div className="p-3 bg-white/20 rounded-full"> <Package className="h-6 w-6" /> </div> </div> </CardContent> </Card> </button> <button onClick={() => handleStatusFilter("pending")} className={`p-0 border-0 text-left ${statusFilter === "pending_group" ? "ring-2 ring-blue-500" : ""}`} > <Card className="border-0 shadow-md hover:shadow-lg transition-shadow cursor-pointer bg-gradient-to-br from-amber-500 to-amber-600 text-white"> <CardContent className="p-4"> <div className="flex items-center justify-between"> <div> <p className="text-sm font-medium text-amber-100">Pending</p> <p className="text-3xl font-bold">{pendingOrders}</p> </div> <div className="p-3 bg-white/20 rounded-full"> <Clock className="h-6 w-6" /> </div> </div> </CardContent> </Card> </button> <button onClick={() => handleStatusFilter("processing")} className={`p-0 border-0 text-left ${statusFilter === "processing_group" ? "ring-2 ring-blue-500" : ""}`} > <Card className="border-0 shadow-md hover:shadow-lg transition-shadow cursor-pointer bg-gradient-to-br from-purple-500 to-purple-600 text-white"> <CardContent className="p-4"> <div className="flex items-center justify-between"> <div> <p className="text-sm font-medium text-purple-100">Processing</p> <p className="text-3xl font-bold">{processingOrders}</p> </div> <div className="p-3 bg-white/20 rounded-full"> <Package className="h-6 w-6" /> </div> </div> </CardContent> </Card> </button> <button onClick={() => handleStatusFilter("delivered")} className={`p-0 border-0 text-left ${statusFilter === "delivered" ? "ring-2 ring-blue-500" : ""}`} > <Card className="border-0 shadow-md hover:shadow-lg transition-shadow cursor-pointer bg-gradient-to-br from-green-500 to-green-600 text-white"> <CardContent className="p-4"> <div className="flex items-center justify-between"> <div> <p className="text-sm font-medium text-green-100">Completed</p> <p className="text-3xl font-bold">{completedOrders}</p> </div> <div className="p-3 bg-white/20 rounded-full"> <CheckCircle className="h-6 w-6" /> </div> </div> </CardContent> </Card> </button> </div> {/ Search and Filter /} <div className="bg-white rounded-lg shadow-md p-4 mb-6"> <div className="flex flex-col md:flex-row gap-4 items-center"> <div className="relative flex-1"> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" /> <Input placeholder="Search by patient name, phone, order ID, or short ID..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="pl-10" /> </div> <Select value={statusFilter} onValueChange={handleStatusFilter}> <SelectTrigger className="w-48"> <SelectValue placeholder="Filter by status" /> </SelectTrigger> <SelectContent> <SelectItem value="all">All Status</SelectItem> <SelectItem value="order_received">Order Received</SelectItem> <SelectItem value="order_confirmed">Order Confirmed</SelectItem> <SelectItem value="getting_packed">Getting Packed</SelectItem> <SelectItem value="packed">Packed</SelectItem> <SelectItem value="looking_for_delivery">Looking for Delivery</SelectItem> <SelectItem value="out_for_delivery">Out for Delivery</SelectItem> <SelectItem value="delivered">Delivered</SelectItem> <SelectItem value="cancelled">Cancelled</SelectItem> </SelectContent> </Select> <Button> <Download className="h-4 w-4 mr-2" /> Export </Button> </div> </div> {/ Orders List /} <div className="bg-white rounded-lg shadow-md overflow-hidden"> <div className="p-4 border-b border-gray-200 bg-gray-50"> <h2 className="font-semibold text-gray-800">Orders</h2> </div> {loading ? ( <div className="text-center py-12"> <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div> <p className="text-gray-600 font-medium">Loading orders...</p> </div> ) : ( <div className="overflow-x-auto"> <table className="w-full"> <thead> <tr className="bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3">Patient</th> <th className="px-6 py-3">Contact</th> <th className="px-6 py-3">Status</th> <th className="px-6 py-3">Date</th> <th className="px-6 py-3">Prescription</th> <th className="px-6 py-3 text-right">Actions</th> </tr> </thead> <tbody className="divide-y divide-gray-200"> {filteredOrders.map((order) => ( <tr key={order.id} className="hover:bg-gray-50"> <td className="px-6 py-4 whitespace-nowrap"> <div className="flex items-center"> <div> <div className="font-medium text-gray-900">{order.name || "Unknown Patient"}</div> <div className="text-xs text-gray-500 space-x-2"> {order.short_id && ( <span className="font-mono font-semibold text-blue-600">#{order.short_id}</span> )} <span>•</span> <span>ID: {order.id.slice(0, 8)}...</span> </div> </div> </div> </td> <td className="px-6 py-4 whitespace-nowrap"> <div className="text-sm text-gray-900">{order.phone || "N/A"}</div> </td> <td className="px-6 py-4 whitespace-nowrap"> <Select value={order.status || "pending"} onValueChange={(value) => updateOrderStatus(order.id, value)} > <SelectTrigger className="w-40 h-8"> <div className="flex items-center gap-2"> <Badge className={getStatusColor(order.status || "pending")}> {order.status || "pending"} </Badge> </div> </SelectTrigger> <SelectContent> <SelectItem value="order_received">Order Received</SelectItem> <SelectItem value="order_confirmed">Order Confirmed</SelectItem> <SelectItem value="getting_packed">Getting Packed</SelectItem> <SelectItem value="packed">Packed</SelectItem> <SelectItem value="looking_for_delivery">Looking for Delivery</SelectItem> <SelectItem value="out_for_delivery">Out for Delivery</SelectItem> <SelectItem value="delivered">Delivered</SelectItem> <SelectItem value="cancelled">Cancelled</SelectItem> </SelectContent> </Select> </td> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> {new Date(order.created_at).toLocaleDateString("en-IN", { year: "numeric", month: "short", day: "numeric", })} </td> <td className="px-6 py-4 whitespace-nowrap"> <Button variant="outline" size="sm" onClick={() => openPrescriptionViewer(order)} className="h-8" > <FileText className="h-4 w-4 mr-1" /> {order.file_urls && order.file_urls.length > 0 ? `View (${order.file_urls.length})` : order.file_url ? "View" : "No Files"} </Button> </td> <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> <Button variant="ghost" size="sm" onClick={() => viewOrderDetails(order)} className="text-blue-600 hover:text-blue-800 h-8" > <Eye className="h-4 w-4 mr-1" /> Details </Button> </td> </tr> ))} </tbody> </table> {filteredOrders.length === 0 && ( <div className="text-center py-12"> <Package className="h-12 w-12 text-gray-400 mx-auto mb-4" /> <h3 className="text-lg font-medium text-gray-900 mb-1">No orders found</h3> <p className="text-gray-500">Try adjusting your search or filter criteria</p> </div> )} </div> )} </div> </div> {/ Order Details Modal /} {showDetails && selectedOrder && ( <Dialog open={showDetails} onOpenChange={setShowDetails}> <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto"> <DialogHeader> <DialogTitle>Order Details</DialogTitle> <DialogDescription> Complete information for order #{selectedOrder.short_id || selectedOrder.id.slice(0, 8)} </DialogDescription> </DialogHeader> <div className="space-y-6 mt-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <h3 className="font-medium text-gray-700 mb-2">Patient Information</h3> <div className="space-y-2"> <p> <span className="text-gray-500">Name:</span> {selectedOrder.name || "N/A"} </p> <p> <span className="text-gray-500">Phone:</span> {selectedOrder.phone || "N/A"} </p> <p> <span className="text-gray-500">Order ID:</span> {selectedOrder.id} </p> <p> <span className="text-gray-500">Status:</span> {selectedOrder.status || "pending"} </p> </div> </div> <div> <h3 className="font-medium text-gray-700 mb-2">Delivery Information</h3> <div className="space-y-2"> <p> <span className="text-gray-500">Address:</span> {selectedOrder.address || "N/A"} </p> <p> <span className="text-gray-500">Created:</span>{" "} {new Date(selectedOrder.created_at).toLocaleString("en-IN")} </p> </div> </div> </div> <div className="mt-6"> <h3 className="font-medium text-gray-700 mb-2">Prescriptions</h3> <div className="grid grid-cols-1 sm:grid-cols-2 gap-2"> {selectedOrder.file_urls && selectedOrder.file_urls.length > 0 ? ( selectedOrder.file_urls.map((url, index) => ( <Button key={index} variant="outline" onClick={() => openPrescriptionViewer(selectedOrder, index)} className="border-blue-200 hover:bg-blue-50 flex items-center justify-between" > <div className="flex items-center"> <FileText className="w-4 h-4 mr-2" /> <span className="truncate">Prescription {index + 1}</span> </div> <Eye className="w-4 h-4 ml-2" /> </Button> )) ) : selectedOrder.file_url ? ( <Button variant="outline" onClick={() => openPrescriptionViewer(selectedOrder)} className="border-blue-200 hover:bg-blue-50" > <FileText className="w-4 h-4 mr-2" /> View Prescription </Button> ) : ( <p className="text-gray-500">No prescription files available</p> )} </div> </div> <div className="mt-6 pt-6 border-t border-gray-200"> <div className="flex justify-between"> <Button variant="outline" onClick={() => setShowDetails(false)}> Close </Button> <Select value={selectedOrder.status || "pending"} onValueChange={(value) => { updateOrderStatus(selectedOrder.id, value) setSelectedOrder({ ...selectedOrder, status: value }) }} > <SelectTrigger className="w-48"> <SelectValue placeholder="Update Status" /> </SelectTrigger> <SelectContent> <SelectItem value="order_received">Order Received</SelectItem> <SelectItem value="order_confirmed">Order Confirmed</SelectItem> <SelectItem value="getting_packed">Getting Packed</SelectItem> <SelectItem value="packed">Packed</SelectItem> <SelectItem value="looking_for_delivery">Looking for Delivery</SelectItem> <SelectItem value="out_for_delivery">Out for Delivery</SelectItem> <SelectItem value="delivered">Delivered</SelectItem> <SelectItem value="cancelled">Cancelled</SelectItem> </SelectContent> </Select> </div> </div> </div> </DialogContent> </Dialog> )} {/ Prescription Viewer Dialog /} <Dialog open={prescriptionViewerOpen} onOpenChange={setPrescriptionViewerOpen}> <DialogContent className="sm:max-w-[900px] max-h-[90vh] overflow-y-auto"> <DialogHeader> <DialogTitle>Prescription Viewer</DialogTitle> <DialogDescription> {selectedOrder && ( <> Order #{selectedOrder.short_id || selectedOrder.id.slice(0, 8)} - Prescription{" "} {currentPrescriptionIndex + 1} of {selectedOrder.file_urls?.length || 1} </> )} </DialogDescription> </DialogHeader> {selectedOrder && ( <div className="space-y-6 mt-4"> {/ Prescription Navigation /} {selectedOrder.file_urls && selectedOrder.file_urls.length > 1 && ( <div className="flex items-center justify-center gap-2 mb-4"> {selectedOrder.file_urls.map((_, index) => ( <Button key={index} variant={currentPrescriptionIndex === index ? "default" : "outline"} size="sm" onClick={() => setCurrentPrescriptionIndex(index)} className={currentPrescriptionIndex === index ? "bg-blue-600" : ""} > {index + 1} </Button> ))} </div> )} {/ Prescription Display /} <div className="bg-gray-50 border rounded-lg overflow-hidden"> <div className="flex items-center justify-between bg-gray-100 p-3 border-b"> <div className="flex items-center gap-2"> <FileImage className="w-5 h-5 text-blue-600" /> <span className="font-medium">Prescription {currentPrescriptionIndex + 1}</span> </div> <Button variant="ghost" size="sm" onClick={() => { const url = selectedOrder.file_urls?.[currentPrescriptionIndex] || selectedOrder.file_url if (url) window.open(url, "_blank") }} > <Eye className="w-4 h-4 mr-1" /> Open in New Tab </Button> </div> <div className="p-4 flex items-center justify-center"> <div className="max-w-full max-h-[70vh] overflow-auto"> {(() => { const url = selectedOrder.file_urls?.[currentPrescriptionIndex] || selectedOrder.file_url if (!url) return <p className="text-gray-500">No prescription file available</p> const fileExt = url.split(".").pop()?.toLowerCase() if (fileExt === "pdf") { return ( <div className="bg-white p-4 rounded border text-center"> <FileText className="w-12 h-12 text-gray-400 mx-auto mb-2" /> <p className="font-medium text-gray-700">PDF Document</p> <Button className="mt-2" onClick={() => window.open(url, "_blank")}> Open PDF </Button> </div> ) } else if (["jpg", "jpeg", "png", "gif", "webp"].includes(fileExt || "")) { return ( <img src={url || "/placeholder.svg"} alt={`Prescription ${currentPrescriptionIndex + 1}`} className="max-w-full max-h-[70vh] object-contain" /> ) } else { return ( <div className="bg-white p-4 rounded border text-center"> <FileText className="w-12 h-12 text-gray-400 mx-auto mb-2" /> <p className="font-medium text-gray-700">Document</p> <Button className="mt-2" onClick={() => window.open(url, "_blank")}> Open File </Button> </div> ) } })()} </div> </div> </div> {/ Navigation Buttons /} {selectedOrder.file_urls && selectedOrder.file_urls.length > 1 && ( <div className="flex justify-between mt-4"> <Button variant="outline" disabled={currentPrescriptionIndex === 0} onClick={() => setCurrentPrescriptionIndex((prev) => prev - 1)} > <ChevronLeft className="w-4 h-4 mr-1" /> Previous </Button> <Button variant="outline" disabled={currentPrescriptionIndex === selectedOrder.file_urls.length - 1} onClick={() => setCurrentPrescriptionIndex((prev) => prev + 1)} > Next <ChevronRight className="w-4 h-4 ml-1" /> </Button> </div> )} </div> )} </DialogContent> </Dialog> {/ Settings Modal /} {showSettings && ( <Dialog open={showSettings} onOpenChange={setShowSettings}> <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto"> <DialogHeader> <DialogTitle>System Settings</DialogTitle> <DialogDescription>Configure system preferences and options</DialogDescription> </DialogHeader> <div className="p-6"> <div className="space-y-6"> <div> <h3 className="font-medium text-gray-700 mb-4">General Settings</h3> <div className="space-y-4"> <div className="flex items-center justify-between p-4 border rounded-lg"> <div> <h4 className="font-medium">Email Notifications</h4> <p className="text-sm text-gray-500">Receive email notifications for new orders</p> </div> <Button variant="outline" size="sm"> Configure </Button> </div> <div className="flex items-center justify-between p-4 border rounded-lg"> <div> <h4 className="font-medium">Order Auto-Assignment</h4> <p className="text-sm text-gray-500">Automatically assign orders to available staff</p> </div> <Button variant="outline" size="sm"> Configure </Button> </div> <div className="flex items-center justify-between p-4 border rounded-lg"> <div> <h4 className="font-medium">Backup & Export</h4> <p className="text-sm text-gray-500">Configure automatic data backups</p> </div> <Button variant="outline" size="sm"> Configure </Button> </div> </div> </div> <div> <h3 className="font-medium text-gray-700 mb-4">System Information</h3> <div className="space-y-2 text-sm"> <div className="flex justify-between"> <span className="text-gray-500">Version:</span> <span>1.0.0</span> </div> <div className="flex justify-between"> <span className="text-gray-500">Last Updated:</span> <span>{new Date().toLocaleDateString()}</span> </div> <div className="flex justify-between"> <span className="text-gray-500">Database Status:</span> <span className="text-green-600">Connected</span> </div> </div> </div> </div> <div className="mt-6 pt-6 border-t border-gray-200"> <div className="flex justify-end"> <Button variant="outline" onClick={() => setShowSettings(false)}> Close </Button> </div> </div> </div> </DialogContent> </Dialog> )} </div> </AdminAuthGuard> ) } export default AdminPage [V0_FILE]typescriptreact:file="lib/supabase.ts" isQuickEdit="true" import { createClient } from "@supabase/supabase-js" // Check if environment variables are available const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY // Create a dummy client for development if environment variables are missing const createDummyClient = () => { console.warn( "Supabase credentials not found. Using dummy client. Please set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY environment variables.", ) return { from: () => ({ select: () => Promise.resolve({ data: [], error: null }), insert: () => Promise.resolve({ data: null, error: null }), update: () => Promise.resolve({ data: null, error: null }), eq: () => ({ data: null, error: null }), }), storage: { from: () => ({ upload: () => Promise.resolve({ data: null, error: null }), getPublicUrl: () => ({ data: { publicUrl: "" } }), }), }, auth: { signInWithOtp: () => Promise.resolve({ data: null, error: null }), getSession: () => Promise.resolve({ data: { session: null }, error: null }), }, } as any } // Create and export the Supabase client export const supabase = supabaseUrl && supabaseAnonKey ? createClient(supabaseUrl, supabaseAnonKey) : createDummyClient() // Generate a short, user-friendly order ID export function generateShortOrderId(): string { // Use a combination of letters and numbers for better readability // Format: MK-XXX-YYY (where X is a letter and Y is a number) const letters = "ABCDEFGHJKLMNPQRSTUVWXYZ" // Removed I and O to avoid confusion const randomLetters = Array(3) .fill(0) .map(() => letters.charAt(Math.floor(Math.random() letters.length))) .join("") const randomNumbers = Math.floor(Math.random() * 1000) .toString() .padStart(3, "0") return `MK-${randomLetters}-${randomNumbers}` } export type OrderStatus = | "order_received" | "order_confirmed" | "getting_packed" | "packed" | "looking_for_delivery" | "out_for_delivery" | "delivered" | "cancelled" export type StatusHistoryEntry = { status: OrderStatus timestamp: string note?: string } export type Order = { id: string name: string phone: string address: string file_url: string file_urls?: string[] created_at: string status: OrderStatus status_history: StatusHistoryEntry[] order_received_at: string order_confirmed_at?: string getting_packed_at?: string packed_at?: string looking_for_delivery_at?: string out_for_delivery_at?: string delivered_at?: string short_id?: string } export type Database = { public: { Tables: { orders: { Row: { id: string name: string phone: string address: string file_url: string file_urls?: string[] created_at: string status: OrderStatus status_history: StatusHistoryEntry[] order_received_at: string order_confirmed_at?: string getting_packed_at?: string packed_at?: string looking_for_delivery_at?: string out_for_delivery_at?: string delivered_at?: string short_id?: string } Insert: { id?: string name: string phone: string address: string file_url: string file_urls?: string[] created_at?: string status?: OrderStatus status_history?: StatusHistoryEntry[] order_received_at?: string order_confirmed_at?: string getting_packed_at?: string packed_at?: string looking_for_delivery_at?: string out_for_delivery_at?: string delivered_at?: string short_id?: string } Update: { id?: string name?: string phone?: string address?: string file_url?: string file_urls?: string[] created_at?: string status?: OrderStatus status_history?: StatusHistoryEntry[] order_received_at?: string order_confirmed_at?: string getting_packed_at?: string packed_at?: string looking_for_delivery_at?: string out_for_delivery_at?: string delivered_at?: string short_id?: string } } } } } [V0_FILE]typescriptreact:file="components/enhanced-prescription-form.tsx" isFixed="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useCallback } from "react" import { useAuth } from "@/contexts/auth-context" import { supabase } from "@/lib/supabase" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Alert, AlertDescription } from "@/components/ui/alert" import { EnhancedCard, EnhancedCardContent, EnhancedCardDescription, EnhancedCardHeader, EnhancedCardTitle, } from "@/components/ui/enhanced-card" import { Upload, CheckCircle, Loader2, FileText, AlertCircle, MapPin, User, UserCircle, Clock, Shield, FileImage, X, Plus, Truck, Heart, Sparkles, ArrowRight, Lock, Save, Copy, } from "lucide-react" import Link from "next/link" import { AddressManagement, type Address } from "@/components/address-management" interface PrescriptionFile { file: File id: string preview?: string } // Function to generate a short order ID function generateShortOrderId() { const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" let shortId = "" for (let i = 0; i < 6; i++) { shortId += characters.charAt(Math.floor(Math.random() * characters.length)) } return shortId } export default function EnhancedPrescriptionForm() { const [formData, setFormData] = useState({ name: "", address: "", phone: "", emergencyContact: "", deliveryInstructions: "", preferredDeliveryTime: "", insuranceProvider: "", allergies: "", chronicConditions: "", }) const [files, setFiles] = useState<PrescriptionFile[]>([]) const [loading, setLoading] = useState(false) const [success, setSuccess] = useState(false) const [error, setError] = useState("") const [uploadProgress, setUploadProgress] = useState(0) const [isEditingPhone, setIsEditingPhone] = useState(false) const { phone: authPhone, logout } = useAuth() const [savedAddresses, setSavedAddresses] = useState<any[]>([]) const [selectedAddressId, setSelectedAddressId] = useState<string | null>(null) const [isLoadingAddresses, setIsLoadingAddresses] = useState(false) const [showAddressManagement, setShowAddressManagement] = useState(false) const [addressFormData, setAddressFormData] = useState({ houseNumber: "", street: "", locality: "", landmark: "", town: "", district: "", pincode: "", type: "home", customName: "", }) const [showAddressForm, setShowAddressForm] = useState(false) const [isSavingAddress, setIsSavingAddress] = useState(false) // Initialize phone from auth context useEffect(() => { if (authPhone && !formData.phone) { setFormData((prev) => ({ ...prev, phone: authPhone })) } }, [authPhone, formData.phone]) const handleFileChange = useCallback( (e: React.ChangeEvent<HTMLInputElement>) => { const selectedFiles = Array.from(e.target.files || []) // Check if adding these files would exceed the limit if (files.length + selectedFiles.length > 5) { setError(`You can upload a maximum of 5 files. Currently you have ${files.length} files.`) return } selectedFiles.forEach((file) => { // Validate file type const validTypes = ["image/jpeg", "image/png", "image/jpg", "application/pdf"] if (!validTypes.includes(file.type)) { setError("Please upload valid image (JPG, PNG) or PDF files only") return } // Validate file size (10MB max) if (file.size > 10 * 1024 * 1024) { setError("Each file must be less than 10MB") return } const fileId = Math.random().toString(36).substring(2) const newFile: PrescriptionFile = { file, id: fileId, } // Create preview for images if (file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (e) => { setFiles((prev) => prev.map((f) => (f.id === fileId ? { ...f, preview: e.target?.result as string } : f))) } reader.readAsDataURL(file) } setFiles((prev) => [...prev, newFile]) setError("") }) }, [files.length], ) const removeFile = (fileId: string) => { setFiles((prev) => prev.filter((f) => f.id !== fileId)) } const fetchSavedAddresses = useCallback(async () => { if (!authPhone) return setIsLoadingAddresses(true) try { const { data, error } = await supabase .from("user_addresses") .select("") .eq("user_phone", authPhone) .order("created_at", { ascending: false }) if (error) { console.error("Error fetching addresses:", error) return } setSavedAddresses(data || []) } catch (err) { console.error("Failed to fetch addresses:", err) } finally { setIsLoadingAddresses(false) } }, [authPhone]) const fetchRecentPatientName = useCallback(async () => { if (!authPhone) return try { const { data, error } = await supabase .from("orders") .select("name") .eq("phone", authPhone) .order("created_at", { ascending: false }) .limit(1) if (error) { console.error("Error fetching recent patient name:", error) return } if (data && data.length > 0 && data[0].name) { setFormData((prev) => ({ ...prev, name: data[0].name })) } } catch (err) { console.error("Failed to fetch recent patient name:", err) } }, [authPhone]) useEffect(() => { if (authPhone) { fetchSavedAddresses() fetchRecentPatientName() } }, [authPhone, fetchSavedAddresses, fetchRecentPatientName]) const handleAddressSelect = (addressId: string) => { setSelectedAddressId(addressId) const selectedAddress = savedAddresses.find((addr) => addr.id === addressId) if (selectedAddress) { // Auto-fill the main address field setFormData((prev) => ({ ...prev, address: `${selectedAddress.house_flat_no}, ${selectedAddress.street_name}, ${selectedAddress.town_village}, ${selectedAddress.landmark ? selectedAddress.landmark + ", " : ""}${selectedAddress.district}, ${selectedAddress.pincode}`, })) } } const handleSaveAddress = async () => { if ( !authPhone || !addressFormData.houseNumber || !addressFormData.street || !addressFormData.locality || !addressFormData.town || !addressFormData.district || !addressFormData.pincode ) { setError("Please fill in all required address fields") return } // Validate custom name if type is "other" if (addressFormData.type === "other" && !addressFormData.customName.trim()) { setError("Please provide a name for this address") return } setIsSavingAddress(true) try { const addressName = addressFormData.type === "other" ? addressFormData.customName.trim() : addressFormData.type const { error } = await supabase.from("user_addresses").insert({ user_phone: authPhone, name: addressName, house_flat_no: addressFormData.houseNumber, street_name: addressFormData.street, landmark: addressFormData.landmark || null, town_village: addressFormData.locality, district: addressFormData.town, pincode: addressFormData.pincode, is_default: false, created_at: new Date().toISOString(), }) if (error) { console.error("Database error:", error) throw new Error("Failed to save address") } // Refresh saved addresses await fetchSavedAddresses() setShowAddressForm(false) setAddressFormData({ houseNumber: "", street: "", locality: "", landmark: "", town: "", district: "", pincode: "", type: "home", customName: "", }) setError("") } catch (err) { console.error("Error saving address:", err) setError("Failed to save address. Please try again.") } finally { setIsSavingAddress(false) } } // Update the handleSubmit function to include the short order ID const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!files.length || !formData.name.trim() || !formData.address.trim() || !formData.phone.trim()) { setError("Please complete all required fields and upload at least one prescription") return } // Validate phone number format const phoneRegex = /^\+?[1-9]\d{1,14}$/ if (!phoneRegex.test(formData.phone.replace(/\s/g, ""))) { setError("Please enter a valid phone number") return } setLoading(true) setError("") setUploadProgress(0) try { const uploadedFiles = [] // Upload each file for (let i = 0; i < files.length; i++) { const file = files[i].file const fileExt = file.name.split(".").pop() const fileName = `${Date.now()}-${Math.random().toString(36).substring(2)}.${fileExt}` setUploadProgress(((i + 1) / files.length) 50) // First 50% for uploads const { error: uploadError } = await supabase.storage.from("prescriptions").upload(fileName, file, { cacheControl: "3600", upsert: false, }) if (uploadError) { throw new Error(`Upload failed for ${file.name}: ${uploadError.message}`) } const { data: { publicUrl }, } = supabase.storage.from("prescriptions").getPublicUrl(fileName) uploadedFiles.push(publicUrl) } setUploadProgress(75) // 75% after uploads // Generate a short order ID const shortOrderId = generateShortOrderId() // Try to save order to database with multiple file URLs first let dbError = null try { const { error } = await supabase.from("orders").insert({ name: formData.name.trim(), phone: formData.phone.trim(), address: formData.address.trim(), file_url: uploadedFiles[0], // Primary prescription (for backward compatibility) file_urls: uploadedFiles, // All prescription files status: "order_received", status_history: [ { status: "order_received", timestamp: new Date().toISOString(), note: "Order received and being processed", }, ], order_received_at: new Date().toISOString(), short_id: shortOrderId, // Add the short order ID }) dbError = error } catch (insertError) { console.error("Error with file_urls column, trying fallback:", insertError) // Fallback: try without file_urls column (for backward compatibility) const { error } = await supabase.from("orders").insert({ name: formData.name.trim(), phone: formData.phone.trim(), address: formData.address.trim(), file_url: uploadedFiles[0], // Primary prescription status: "order_received", status_history: [ { status: "order_received", timestamp: new Date().toISOString(), note: "Order received and being processed", }, ], order_received_at: new Date().toISOString(), short_id: shortOrderId, // Add the short order ID }) dbError = error } if (dbError) { console.error("Database error details:", dbError) throw new Error(`Database error: ${dbError.message || "Unknown database error"}`) } setUploadProgress(100) setSuccess(true) // Reset form setFormData({ name: "", address: "", phone: authPhone || "", emergencyContact: "", deliveryInstructions: "", preferredDeliveryTime: "", insuranceProvider: "", allergies: "", chronicConditions: "", }) setFiles([]) } catch (err) { console.error("Error submitting order:", err) setError(err instanceof Error ? err.message : "An unexpected error occurred. Please try again.") } finally { setLoading(false) setUploadProgress(0) } } // Update the success message to display the short order ID if (success) { return ( <div className="min-h-screen bg-gradient-to-br from-emerald-50 via-teal-50 to-cyan-50 flex items-center justify-center p-4 relative overflow-hidden"> {/* Animated background elements /} <div className="absolute inset-0 overflow-hidden"> <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-gradient-to-br from-green-200/30 to-emerald-300/30 rounded-full blur-3xl animate-pulse"></div> <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gradient-to-br from-teal-200/20 to-cyan-300/20 rounded-full blur-3xl animate-pulse delay-1000"></div> </div> <EnhancedCard variant="glass" className="w-full max-w-2xl text-center relative z-10 border-0 shadow-2xl"> <EnhancedCardContent className="pt-16 pb-12"> {/ Success Animation /} <div className="relative mb-12"> <div className="mx-auto w-32 h-32 bg-gradient-to-br from-green-400 via-emerald-500 to-teal-600 rounded-full flex items-center justify-center shadow-2xl shadow-green-500/25 animate-bounce"> <CheckCircle className="w-16 h-16 text-white" /> </div> <div className="absolute inset-0 w-32 h-32 mx-auto bg-gradient-to-br from-green-400 to-emerald-500 rounded-full animate-ping opacity-20"></div> <div className="absolute -top-2 -right-2 w-8 h-8 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center shadow-lg"> <Sparkles className="w-4 h-4 text-white" /> </div> </div> <div className="space-y-6 mb-8"> <h2 className="text-4xl font-bold bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 bg-clip-text text-transparent"> Prescription Uploaded to MediKloud! </h2> <p className="text-xl text-gray-600 leading-relaxed max-w-lg mx-auto"> Your prescription has been securely uploaded and is being processed by MediKloud's certified pharmacy network. </p> </div> {/ Order ID Display /} <div className="mb-10 bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-2xl p-6"> <h3 className="text-lg font-semibold text-gray-700 mb-2">Your Order ID</h3> <div className="flex items-center justify-center gap-3"> <span className="text-3xl font-bold text-blue-700 tracking-wider">{generateShortOrderId()}</span> <Button variant="outline" size="sm" className="h-8 px-2 text-xs border-blue-200 hover:bg-blue-50" onClick={() => { navigator.clipboard.writeText(generateShortOrderId()) // You would need to add toast functionality here }} > <Copy className="w-3 h-3 mr-1" /> Copy </Button> </div> <p className="text-sm text-gray-500 mt-2">Use this ID to track your order or for any inquiries</p> </div> {/ Enhanced Status Cards /} <div className="grid md:grid-cols-3 gap-6 mb-12"> <div className="bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200/50 rounded-2xl p-6 text-center"> <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center mx-auto mb-4 shadow-lg"> <Clock className="w-6 h-6 text-white" /> </div> <h3 className="font-bold text-blue-900 mb-2">Processing Time</h3> <p className="text-3xl font-bold text-blue-600 mb-1">2-4</p> <p className="text-sm text-blue-700">Hours</p> </div> <div className="bg-gradient-to-br from-green-50 to-emerald-50 border border-green-200/50 rounded-2xl p-6 text-center"> <div className="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center mx-auto mb-4 shadow-lg"> <Shield className="w-6 h-6 text-white" /> </div> <h3 className="font-bold text-green-900 mb-2">Security</h3> <p className="text-sm text-green-700 font-semibold">HIPAA Compliant</p> <p className="text-sm text-green-600">Encrypted</p> </div> <div className="bg-gradient-to-br from-purple-50 to-violet-50 border border-purple-200/50 rounded-2xl p-6 text-center"> <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-violet-600 rounded-xl flex items-center justify-center mx-auto mb-4 shadow-lg"> <Truck className="w-6 h-6 text-white" /> </div> <h3 className="font-bold text-purple-900 mb-2">Delivery</h3> <p className="text-sm text-purple-700 font-semibold">Free Delivery</p> <p className="text-sm text-purple-600">To Your Door</p> </div> </div> {/ Enhanced Action Buttons /} <div className="space-y-4"> <Button onClick={() => setSuccess(false)} className="w-full h-14 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 hover:from-blue-700 hover:via-indigo-700 hover:to-purple-700 text-white text-lg font-semibold rounded-2xl shadow-xl shadow-blue-500/25 transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/30 hover:scale-105" > <Plus className="w-5 h-5 mr-3" /> Submit Another Prescription <ArrowRight className="w-5 h-5 ml-3" /> </Button> <div className="grid md:grid-cols-2 gap-4"> <Link href="/profile"> <Button variant="outline" className="w-full h-12 border-2 border-gray-200 hover:border-blue-300 hover:bg-blue-50 text-gray-700 hover:text-blue-700 rounded-2xl font-semibold transition-all duration-300" > <UserCircle className="w-5 h-5 mr-2" /> Track Orders </Button> </Link> <Button variant="outline" className="w-full h-12 border-2 border-gray-200 hover:border-green-300 hover:bg-green-50 text-gray-700 hover:text-green-700 rounded-2xl font-semibold transition-all duration-300" > <Heart className="w-5 h-5 mr-2" /> Rate Experience </Button> </div> </div> </EnhancedCardContent> </EnhancedCard> </div> ) } return ( <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 relative overflow-hidden"> {/ Enhanced Background Elements /} <div className="absolute inset-0 overflow-hidden"> <div className="absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-br from-blue-200/20 to-indigo-300/20 rounded-full blur-3xl"></div> <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-gradient-to-br from-purple-200/20 to-pink-300/20 rounded-full blur-3xl"></div> </div> <div className="relative z-10 max-w-7xl mx-auto p-6"> {/ Enhanced Progress Section /} <div className="mb-12"> <div className="text-center mb-8"> <h1 className="text-4xl font-bold bg-gradient-to-r from-gray-900 via-blue-900 to-indigo-900 bg-clip-text text-transparent mb-4"> Upload to MediKloud </h1> <p className="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed"> Intelligent prescription processing with real-time tracking and AI-powered verification </p> </div> </div> <div className="max-w-4xl mx-auto"> {/ Simplified Single Form /} <EnhancedCard variant="glass" className="border-0 shadow-2xl"> <EnhancedCardHeader> <EnhancedCardTitle className="flex items-center gap-3 text-2xl"> <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center"> <FileText className="w-5 h-5 text-white" /> </div> Upload Your Prescription <Badge className="bg-gradient-to-r from-green-500 to-emerald-600 text-white border-0"> <Lock className="w-3 h-3 mr-1" /> Secure </Badge> </EnhancedCardTitle> <EnhancedCardDescription className="text-lg"> Quick and secure prescription upload - all information in one simple form </EnhancedCardDescription> </EnhancedCardHeader> <EnhancedCardContent> <form onSubmit={handleSubmit} className="space-y-8"> {/ File Upload Section /} <div className="space-y-4"> <h3 className="text-xl font-semibold text-gray-900 flex items-center gap-2"> <Upload className="w-5 h-5 text-blue-600" /> Prescription Files </h3> <div className="relative group"> <div className="border-2 border-dashed border-gray-300 group-hover:border-blue-400 rounded-2xl p-8 text-center transition-all duration-300 bg-gradient-to-br from-gray-50 to-blue-50/30 group-hover:from-blue-50 group-hover:to-indigo-50"> <input type="file" accept="image/,.pdf" onChange={handleFileChange} className="hidden" id="prescription-upload" multiple disabled={loading || files.length >= 5} /> <label htmlFor="prescription-upload" className="cursor-pointer"> <div className="space-y-4"> <div className="mx-auto w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300"> <Upload className="w-8 h-8 text-white" /> </div> <div> <p className="text-lg font-semibold text-gray-800 mb-2"> Drop files here or click to browse </p> <p className="text-sm text-gray-600">JPG, PNG, PDF • Max 10MB per file • Up to 5 files</p> </div> </div> </label> </div> </div> {/ Uploaded Files Display /} {files.length >= 5 && ( <div className="text-center p-4 bg-amber-50 border border-amber-200 rounded-xl"> <p className="text-sm text-amber-700 font-medium"> Maximum file limit reached (5/5). Remove a file to add more. </p> </div> )} {files.length > 0 && ( <div className="space-y-3"> <h4 className="font-semibold text-gray-900">Uploaded Files ({files.length}/5)</h4> <div className="grid gap-3"> {files.map((fileItem) => ( <div key={fileItem.id} className="flex items-center gap-3 p-3 bg-white border border-gray-200 rounded-xl shadow-sm" > <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center"> {fileItem.file.type === "application/pdf" ? ( <FileText className="w-5 h-5 text-white" /> ) : ( <FileImage className="w-5 h-5 text-white" /> )} </div> <div className="flex-1"> <p className="font-medium text-gray-900">{fileItem.file.name}</p> <p className="text-sm text-gray-500"> {(fileItem.file.size / 1024 / 1024).toFixed(2)} MB </p> </div> <Button type="button" variant="ghost" size="sm" onClick={() => removeFile(fileItem.id)} className="text-red-600 hover:text-red-700 hover:bg-red-50" > <X className="w-4 h-4" /> </Button> </div> ))} </div> </div> )} </div> {/ Patient Information /} <div className="space-y-6"> <h3 className="text-xl font-semibold text-gray-900 flex items-center gap-2"> <User className="w-5 h-5 text-blue-600" /> Patient Information </h3> <div className="grid md:grid-cols-2 gap-6"> <div className="space-y-2"> <Label htmlFor="name" className="text-sm font-semibold text-gray-700"> Patient Name </Label> <Input id="name" type="text" placeholder="Enter patient's full name" value={formData.name} onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))} className="h-12 text-base rounded-xl border-2 border-gray-200 focus:border-blue-500" disabled={loading} /> </div> <div className="space-y-2"> <Label htmlFor="phone" className="text-sm font-semibold text-gray-700 flex items-center gap-2"> Contact Number * <Button type="button" variant="ghost" size="sm" className="h-6 px-2 text-xs text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg" onClick={() => setIsEditingPhone(!isEditingPhone)} > {isEditingPhone ? "Cancel" : "Edit"} </Button> </Label> <Input id="phone" type="tel" placeholder="+91 99999 99999" value={formData.phone} onChange={(e) => setFormData((prev) => ({ ...prev, phone: e.target.value }))} className="h-12 text-base rounded-xl border-2 border-gray-200 focus:border-blue-500" disabled={loading || !isEditingPhone} /> {isEditingPhone && ( <Alert className="border-amber-200 bg-amber-50"> <AlertCircle className="h-4 w-4 text-amber-600" /> <AlertDescription className="text-sm text-amber-700"> Changing your contact number will affect order notifications and delivery updates </AlertDescription> </Alert> )} </div> </div> </div> {/* Delivery Information /} <div className="space-y-6"> <div className="flex items-center justify-between"> <h3 className="text-xl font-semibold text-gray-900 flex items-center gap-2"> <MapPin className="w-5 h-5 text-blue-600" /> Delivery Address </h3> <Button type="button" variant="outline" size="sm" className="text-blue-600 border-blue-200 hover:bg-blue-50" onClick={() => setShowAddressManagement(true)} > Manage Addresses </Button> </div> {/ Saved Addresses /} <div className="space-y-4"> <div className="flex items-center gap-2"> <Label className="text-sm font-semibold text-gray-700">Select Saved Address</Label> <Badge variant="outline" className="text-xs"> Optional </Badge> </div> {isLoadingAddresses ? ( <div className="flex items-center justify-center p-6"> <Loader2 className="w-6 h-6 text-blue-600 animate-spin" /> <span className="ml-2 text-sm text-gray-600">Loading your saved addresses...</span> </div> ) : savedAddresses.length > 0 ? ( <div className="grid grid-cols-1 md:grid-cols-2 gap-3"> {savedAddresses.map((address) => ( <div key={address.id} onClick={() => handleAddressSelect(address.id)} className={`border-2 ${selectedAddressId === address.id ? "border-blue-200 bg-blue-50" : "border-gray-200"} rounded-xl p-4 cursor-pointer hover:shadow-md hover:border-blue-200 hover:bg-blue-50/30 transition-all duration-200`} > <div className="flex items-center justify-between mb-2"> <Badge className={ selectedAddressId === address.id ? "bg-blue-100 text-blue-800 border-blue-200" : "bg-gray-100 text-gray-700 border-gray-200" } > {address.name || address.type || "Address"} </Badge> <div className={`w-4 h-4 rounded-full border-2 ${selectedAddressId === address.id ? "border-blue-500" : "border-gray-300"} flex items-center justify-center`} > {selectedAddressId === address.id && ( <div className="w-2 h-2 rounded-full bg-blue-500"></div> )} </div> </div> <p className="text-sm text-gray-700 line-clamp-3"> {address.house_flat_no}, {address.street_name}, {address.town_village} {address.landmark ? `, ${address.landmark}` : ""}, {address.district}, {address.pincode} </p> </div> ))} </div> ) : ( <div className="border-2 border-gray-200 rounded-xl p-6 text-center"> <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3"> <MapPin className="w-6 h-6 text-gray-400" /> </div> <p className="text-gray-600 mb-2">You don't have any saved addresses yet</p> <p className="text-sm text-gray-500">Save an address below for faster checkout next time</p> </div> )} <div className="flex items-center gap-2 text-sm text-blue-600"> <Plus className="w-4 h-4" /> <span className="cursor-pointer hover:underline" onClick={() => setShowAddressForm(true)}> Add New Address </span> </div> </div> {/ Add New Address Form - Only shown when user clicks "Add New Address" /} {showAddressForm && ( <div className="border-2 border-blue-200 bg-blue-50/30 rounded-xl p-6 space-y-4"> <div className="flex items-center justify-between"> <h4 className="text-lg font-semibold text-gray-900 flex items-center gap-2"> <Plus className="w-5 h-5 text-blue-600" /> Add New Address </h4> <Button type="button" variant="ghost" size="sm" onClick={() => setShowAddressForm(false)} className="text-gray-500 hover:text-gray-700" > <X className="w-4 h-4" /> </Button> </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="space-y-2"> <Label className="text-xs text-gray-600">House/Flat Number </Label> <Input placeholder="e.g., A-204, Flat 301" value={addressFormData.houseNumber} onChange={(e) => setAddressFormData((prev) => ({ ...prev, houseNumber: e.target.value }))} className="h-10 text-sm rounded-lg border-2 border-gray-200 focus:border-blue-500" disabled={loading} /> </div> <div className="space-y-2"> <Label className="text-xs text-gray-600">Street Name </Label> <Input placeholder="e.g., MG Road, Park Street" value={addressFormData.street} onChange={(e) => setAddressFormData((prev) => ({ ...prev, street: e.target.value }))} className="h-10 text-sm rounded-lg border-2 border-gray-200 focus:border-blue-500" disabled={loading} /> </div> </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="space-y-2"> <Label className="text-xs text-gray-600">Locality Name </Label> <Input placeholder="e.g., Andheri West, Sector 18" value={addressFormData.locality} onChange={(e) => setAddressFormData((prev) => ({ ...prev, locality: e.target.value }))} className="h-10 text-sm rounded-lg border-2 border-gray-200 focus:border-blue-500" disabled={loading} /> </div> <div className="space-y-2"> <Label className="text-xs text-gray-600">Landmark</Label> <Input placeholder="e.g., Near City Mall, Opposite Metro" value={addressFormData.landmark} onChange={(e) => setAddressFormData((prev) => ({ ...prev, landmark: e.target.value }))} className="h-10 text-sm rounded-lg border-2 border-gray-200 focus:border-blue-500" disabled={loading} /> </div> </div> <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="space-y-2"> <Label className="text-xs text-gray-600">Town/Village </Label> <Input placeholder="e.g., Mumbai, Noida" value={addressFormData.town} onChange={(e) => setAddressFormData((prev) => ({ ...prev, town: e.target.value }))} className="h-10 text-sm rounded-lg border-2 border-gray-200 focus:border-blue-500" disabled={loading} /> </div> <div className="space-y-2"> <Label className="text-xs text-gray-600">District </Label> <Input placeholder="e.g., Mumbai, Gautam Buddha Nagar" value={addressFormData.district} onChange={(e) => setAddressFormData((prev) => ({ ...prev, district: e.target.value }))} className="h-10 text-sm rounded-lg border-2 border-gray-200 focus:border-blue-500" disabled={loading} /> </div> <div className="space-y-2"> <Label className="text-xs text-gray-600">Pincode </Label> <Input placeholder="e.g., 400058, 201301" value={addressFormData.pincode} onChange={(e) => setAddressFormData((prev) => ({ ...prev, pincode: e.target.value }))} maxLength={6} className="h-10 text-sm rounded-lg border-2 border-gray-200 focus:border-blue-500" disabled={loading} /> </div> </div> <div className="flex items-center gap-4"> <div className="flex items-center gap-2"> <Label className="text-sm text-gray-700">Save as:</Label> <Select value={addressFormData.type} onValueChange={(value) => setAddressFormData((prev) => ({ ...prev, type: value }))} > <SelectTrigger className="h-8 w-24 text-xs border-gray-200"> <SelectValue /> </SelectTrigger> <SelectContent> <SelectItem value="home">Home</SelectItem> <SelectItem value="office">Office</SelectItem> <SelectItem value="other">Other</SelectItem> </SelectContent> </Select> </div> {addressFormData.type === "other" && ( <div className="flex-1"> <Input placeholder="Enter custom name (e.g., Mom's House, Clinic)" value={addressFormData.customName} onChange={(e) => setAddressFormData((prev) => ({ ...prev, customName: e.target.value }))} className="h-8 text-sm rounded-lg border-2 border-gray-200 focus:border-blue-500" disabled={loading} /> </div> )} <Button type="button" onClick={handleSaveAddress} disabled={isSavingAddress} className="h-8 px-4 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center gap-2" > {isSavingAddress ? ( <Loader2 className="w-3 h-3 animate-spin" /> ) : ( <Save className="w-3 h-3" /> )} Save Address </Button> </div> </div> )} {/ Main Address Field /} <div className="space-y-2"> <Label htmlFor="address" className="text-sm font-semibold text-gray-700 flex items-center gap-2"> Complete Address <Badge variant="outline" className="text-xs"> or use saved address above </Badge> </Label> <Textarea id="address" placeholder="Enter your complete delivery address here..." value={formData.address} onChange={(e) => setFormData((prev) => ({ ...prev, address: e.target.value }))} className="min-h-[100px] text-base resize-none rounded-xl border-2 border-gray-200 focus:border-blue-500" disabled={loading} /> </div> </div> {/* Upload Progress /} {loading && ( <div className="space-y-3 p-6 bg-blue-50 rounded-xl border border-blue-200"> <div className="flex justify-between items-center"> <span className="font-semibold text-blue-900">Processing your order...</span> <span className="text-blue-600 font-bold">{uploadProgress}%</span> </div> <Progress value={uploadProgress} className="h-3" /> <div className="flex items-center gap-2 text-sm text-blue-700"> <Loader2 className="w-4 h-4 animate-spin" /> <span>Uploading files and processing prescription...</span> </div> </div> )} {/ Error Display /} {error && ( <Alert variant="destructive" className="border-2 border-red-200 bg-red-50 rounded-xl"> <AlertCircle className="h-5 w-5" /> <AlertDescription className="text-base font-medium">{error}</AlertDescription> </Alert> )} {/ Submit Button /} <div className="pt-4"> <Button type="submit" disabled={loading || !files.length || !formData.name.trim() || !formData.address.trim()} className="w-full h-16 bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 text-white text-xl font-bold rounded-2xl shadow-2xl shadow-green-500/25 transition-all duration-300 hover:shadow-2xl hover:shadow-green-500/30 hover:scale-105" > {loading ? ( <> <Loader2 className="w-6 h-6 mr-3 animate-spin" /> Processing Order... </> ) : ( <> <CheckCircle className="w-6 h-6 mr-3" /> Submit Prescription Order <Sparkles className="w-6 h-6 ml-3" /> </> )} </Button> </div> </form> </EnhancedCardContent> </EnhancedCard> {/ Quick Info Cards /} <div className="grid md:grid-cols-3 gap-6 mt-8"> <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-gray-200 shadow-lg"> <div className="flex items-center gap-3 mb-3"> <div className="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center"> <Clock className="w-5 h-5 text-green-600" /> </div> <h4 className="font-semibold text-gray-900">Fast Processing</h4> </div> <p className="text-sm text-gray-600">Orders processed within 2-4 hours</p> </div> <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-gray-200 shadow-lg"> <div className="flex items-center gap-3 mb-3"> <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center"> <Shield className="w-5 h-5 text-blue-600" /> </div> <h4 className="font-semibold text-gray-900">Secure & Private</h4> </div> <p className="text-sm text-gray-600">HIPAA compliant with end-to-end encryption</p> </div> <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-gray-200 shadow-lg"> <div className="flex items-center gap-3 mb-3"> <div className="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center"> <Truck className="w-5 h-5 text-purple-600" /> </div> <h4 className="font-semibold text-gray-900">Free Delivery</h4> </div> <p className="text-sm text-gray-600">Standard delivery at no extra cost</p> </div> </div> </div> {/ Enhanced Footer Links /} <div className="mt-16 text-center"> <div className="flex justify-center gap-8 text-sm text-gray-500 mb-4"> <Link href="/privacy" className="hover:text-blue-600 transition-colors font-medium"> Privacy Policy </Link> <Link href="/terms" className="hover:text-blue-600 transition-colors font-medium"> Terms & Conditions </Link> <span className="flex items-center gap-1"> <Lock className="w-4 h-4" /> Secure Healthcare Platform </span> </div> <p className="text-xs text-gray-400"> © 2024 MediKloud. All rights reserved. Licensed healthcare cloud platform. </p> </div> </div> {/ Address Management Modal /} {showAddressManagement && ( <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"> <div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden"> <div className="p-6 border-b"> <div className="flex items-center justify-between"> <h2 className="text-2xl font-bold text-gray-900">Manage Addresses</h2> <Button variant="ghost" size="sm" onClick={() => setShowAddressManagement(false)} className="text-gray-500 hover:text-gray-700" > <X className="w-5 h-5" /> </Button> </div> </div> <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]"> <AddressManagement onAddressSelect={(address: Address) => { handleAddressSelect(address.id) setShowAddressManagement(false) }} selectedAddressId={selectedAddressId} /> </div> </div> </div> )} </div> ) } [V0_FILE]typescriptreact:file="components/order-card.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { OrderProgressTracker } from "@/components/order-progress-tracker" import { FileText, ChevronDown, ChevronUp, Copy, ExternalLink } from "lucide-react" import Link from "next/link" import type { Order } from "@/lib/supabase" interface OrderCardProps { order: Order } export function OrderCard({ order }: OrderCardProps) { const [expanded, setExpanded] = useState(false) const [copied, setCopied] = useState(false) const copyOrderId = () => { if (order.short_id) { navigator.clipboard.writeText(order.short_id) setCopied(true) setTimeout(() => setCopied(false), 2000) } } const formatDate = (dateString: string) => { const date = new Date(dateString) return new Intl.DateTimeFormat("en-US", { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", }).format(date) } const getStatusColor = (status: string) => { switch (status) { case "order_received": return "bg-blue-100 text-blue-800 border-blue-200" case "order_confirmed": return "bg-indigo-100 text-indigo-800 border-indigo-200" case "getting_packed": return "bg-purple-100 text-purple-800 border-purple-200" case "packed": return "bg-amber-100 text-amber-800 border-amber-200" case "looking_for_delivery": return "bg-orange-100 text-orange-800 border-orange-200" case "out_for_delivery": return "bg-emerald-100 text-emerald-800 border-emerald-200" case "delivered": return "bg-green-100 text-green-800 border-green-200" case "cancelled": return "bg-red-100 text-red-800 border-red-200" default: return "bg-gray-100 text-gray-800 border-gray-200" } } const getStatusText = (status: string) => { switch (status) { case "order_received": return "Order Received" case "order_confirmed": return "Order Confirmed" case "getting_packed": return "Getting Packed" case "packed": return "Packed" case "looking_for_delivery": return "Looking for Delivery" case "out_for_delivery": return "Out for Delivery" case "delivered": return "Delivered" case "cancelled": return "Cancelled" default: return status.replace(/_/g, " ") } } // Get file URLs array, handling both new and old data formats const fileUrls = order.file_urls || (order.file_url ? [order.file_url] : []) return ( <Card className="mb-6 overflow-hidden border-2 border-gray-100 shadow-md"> <CardHeader className="bg-gradient-to-r from-gray-50 to-gray-100 pb-4"> <div className="flex flex-wrap items-center justify-between gap-2"> <div className="flex items-center gap-2"> <FileText className="h-5 w-5 text-blue-600" /> <CardTitle className="text-lg font-bold"> Prescription Order {order.short_id && <span className="ml-2 text-sm font-normal text-gray-500">#{order.short_id}</span>} </CardTitle> </div> <div className="flex items-center gap-2"> <Badge className={getStatusColor(order.status)}>{getStatusText(order.status)}</Badge> {order.short_id && ( <Button variant="outline" size="sm" className="h-7 border-gray-200 px-2 text-xs" onClick={copyOrderId}> <Copy className="mr-1 h-3 w-3" /> {copied ? "Copied!" : "Copy ID"} </Button> )} </div> </div> <CardDescription className="text-sm text-gray-500"> Placed on {formatDate(order.created_at || order.order_received_at)} </CardDescription> </CardHeader> <CardContent className="pt-4"> <div className="mb-4"> <OrderProgressTracker status={order.status} /> </div> <div className="grid gap-4 md:grid-cols-2"> <div> <h4 className="mb-1 text-sm font-semibold text-gray-700">Patient</h4> <p className="text-sm text-gray-600">{order.name}</p> </div> <div> <h4 className="mb-1 text-sm font-semibold text-gray-700">Delivery Address</h4> <p className="text-sm text-gray-600 line-clamp-2">{order.address}</p> </div> </div> {expanded && ( <div className="mt-4 space-y-4 border-t border-gray-100 pt-4"> <div> <h4 className="mb-2 text-sm font-semibold text-gray-700">Prescription Files</h4> <div className="grid gap-2"> {fileUrls.map((url, index) => ( <div key={index} className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 p-2" > <div className="flex items-center"> <FileText className="mr-2 h-4 w-4 text-blue-600" /> <span className="text-xs text-gray-600">Prescription {index + 1}</span> </div> <Link href={url} target="_blank" rel="noopener noreferrer"> <Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-blue-600 hover:bg-blue-50 hover:text-blue-700" > <ExternalLink className="mr-1 h-3 w-3" /> View </Button> </Link> </div> ))} </div> </div> <div> <h4 className="mb-1 text-sm font-semibold text-gray-700">Contact Number</h4> <p className="text-sm text-gray-600">{order.phone}</p> </div> <div> <h4 className="mb-1 text-sm font-semibold text-gray-700">Status History</h4> <div className="space-y-2"> {order.status_history?.map((entry, index) => ( <div key={index} className="rounded-lg border border-gray-100 bg-gray-50 p-2"> <div className="flex items-center justify-between"> <Badge className={`${getStatusColor(entry.status)} text-xs`}>{getStatusText(entry.status)}</Badge> <span className="text-xs text-gray-500">{formatDate(entry.timestamp)}</span> </div> {entry.note && <p className="mt-1 text-xs text-gray-600">{entry.note}</p>} </div> ))} </div> </div> </div> )} </CardContent> <CardFooter className="flex justify-center border-t border-gray-100 bg-gray-50 px-4 py-2"> <Button variant="ghost" size="sm" className="w-full text-gray-600 hover:bg-gray-100 hover:text-gray-800" onClick={() => setExpanded(!expanded)} > {expanded ? ( <> <ChevronUp className="mr-1 h-4 w-4" /> Show Less </> ) : ( <> <ChevronDown className="mr-1 h-4 w-4" /> Show Details </> )} </Button> </CardFooter> </Card> ) } [V0_FILE]sql:file="scripts/update-existing-orders-with-short-id.sql" type="script" -- Update existing orders with short IDs if they don't have one already DO $$ DECLARE order_rec RECORD; new_short_id TEXT; letter_chars TEXT := 'ABCDEFGHJKLMNPQRSTUVWXYZ'; -- Removed I and O to avoid confusion random_letters TEXT; random_numbers TEXT; BEGIN FOR order_rec IN SELECT id FROM orders WHERE short_id IS NULL OR short_id = '' LOOP -- Generate random letters (3 characters) random_letters := ''; FOR i IN 1..3 LOOP random_letters := random_letters || substr(letter_chars, floor(random() length(letter_chars) + 1)::integer, 1); END LOOP; -- Generate random numbers (3 digits) random_numbers := lpad(floor(random() * 1000)::text, 3, '0'); -- Create the short ID in format MK-XXX-YYY new_short_id := 'MK-' || random_letters || '-' || random_numbers; -- Update the order with the new short ID UPDATE orders SET short_id = new_short_id WHERE id = order_rec.id; END LOOP; END $$; [V0_FILE]typescriptreact:file="app/profile/page.tsx" "use client" import { useState, useEffect } from "react" import { useAuth } from "@/contexts/auth-context" import { supabase, type Order } from "@/lib/supabase" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { User, Phone, Package, Clock, MapPin, FileText, Eye, Calendar, TrendingUp, CheckCircle, Loader2, FileImage, } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import OrderProgressTracker from "@/components/order-progress-tracker" import ProfessionalHeaderEnhanced from "@/components/professional-header-enhanced" import Link from "next/link" const statusConfig = { order_received: { label: "Order Received", color: "bg-blue-100 text-blue-800 border-blue-200", icon: CheckCircle, }, order_confirmed: { label: "Order Confirmed", color: "bg-green-100 text-green-800 border-green-200", icon: CheckCircle, }, getting_packed: { label: "Getting Packed", color: "bg-orange-100 text-orange-800 border-orange-200", icon: Package, }, packed: { label: "Packed", color: "bg-purple-100 text-purple-800 border-purple-200", icon: Package, }, looking_for_delivery: { label: "Looking for Delivery", color: "bg-cyan-100 text-cyan-800 border-cyan-200", icon: Clock, }, out_for_delivery: { label: "Out for Delivery", color: "bg-indigo-100 text-indigo-800 border-indigo-200", icon: MapPin, }, delivered: { label: "Delivered", color: "bg-green-100 text-green-800 border-green-200", icon: CheckCircle, }, cancelled: { label: "Cancelled", color: "bg-red-100 text-red-800 border-red-200", icon: Clock, }, } export default function ProfilePage() { const { phone, logout } = useAuth() const [orders, setOrders] = useState<Order[]>([]) const [loading, setLoading] = useState(true) const [selectedOrder, setSelectedOrder] = useState<Order | null>(null) const [detailsOpen, setDetailsOpen] = useState(false) const [prescriptionViewerOpen, setPrescriptionViewerOpen] = useState(false) const [currentPrescriptionIndex, setCurrentPrescriptionIndex] = useState(0) const fetchOrders = async () => { if (!phone) return setLoading(true) try { const { data, error } = await supabase .from("orders") .select("") .eq("phone", phone) .order("created_at", { ascending: false }) if (error) throw error setOrders(data || []) } catch (error) { console.error("Error fetching orders:", error) } finally { setLoading(false) } } useEffect(() => { fetchOrders() }, [phone]) const viewOrderDetails = (order: Order) => { setSelectedOrder(order) setDetailsOpen(true) } const openPrescriptionViewer = (order: Order, index = 0) => { setSelectedOrder(order) setCurrentPrescriptionIndex(index) setPrescriptionViewerOpen(true) } const getOrderStats = () => { const stats = orders.reduce( (acc, order) => { acc[order.status] = (acc[order.status] || 0) + 1 return acc }, {} as Record<string, number>, ) return stats } const stats = getOrderStats() const activeOrders = orders.filter((order) => !["delivered", "cancelled"].includes(order.status)).length if (!phone) { return ( <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 flex items-center justify-center p-4"> <Card className="w-full max-w-md text-center"> <CardContent className="pt-6"> <User className="w-16 h-16 text-gray-400 mx-auto mb-4" /> <h2 className="text-xl font-semibold text-gray-900 mb-2">Access Denied</h2> <p className="text-gray-600 mb-6">Please log in to view your profile and orders.</p> <Link href="/"> <Button className="w-full">Go to Login</Button> </Link> </CardContent> </Card> </div> ) } return ( <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50"> {/ Professional Header with Navigation /} <ProfessionalHeaderEnhanced /> <div className="max-w-6xl mx-auto p-6"> {/ Profile Info /} <Card className="mb-8 border-0 shadow-lg bg-white/80 backdrop-blur-sm"> <CardHeader> <CardTitle className="flex items-center gap-3"> <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center"> <User className="w-6 h-6 text-white" /> </div> Account Information </CardTitle> </CardHeader> <CardContent> <div className="grid md:grid-cols-3 gap-6"> <div className="flex items-center gap-3 p-4 bg-blue-50 rounded-xl border border-blue-200"> <Phone className="w-5 h-5 text-blue-600" /> <div> <p className="text-sm font-medium text-blue-900">Phone Number</p> <p className="text-lg font-semibold text-blue-800">{phone}</p> </div> </div> <div className="flex items-center gap-3 p-4 bg-green-50 rounded-xl border border-green-200"> <Package className="w-5 h-5 text-green-600" /> <div> <p className="text-sm font-medium text-green-900">Total Orders</p> <p className="text-lg font-semibold text-green-800">{orders.length}</p> </div> </div> <div className="flex items-center gap-3 p-4 bg-orange-50 rounded-xl border border-orange-200"> <TrendingUp className="w-5 h-5 text-orange-600" /> <div> <p className="text-sm font-medium text-orange-900">Active Orders</p> <p className="text-lg font-semibold text-orange-800">{activeOrders}</p> </div> </div> </div> </CardContent> </Card> {/ New Order Button /} <div className="mb-6 flex justify-center"> <Link href="/"> <Button size="lg" className="gap-2 bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-700 hover:to-cyan-600 shadow-lg" > <Package className="w-5 h-5" /> Upload New Prescription </Button> </Link> </div> {/ Orders Section /} <Tabs defaultValue="all" className="space-y-6"> <TabsList className="grid w-full grid-cols-3 bg-white/80 backdrop-blur-sm border-0 shadow-lg p-1 rounded-2xl h-14"> <TabsTrigger value="all" className="rounded-xl font-semibold text-base h-12"> All Orders ({orders.length}) </TabsTrigger> <TabsTrigger value="active" className="rounded-xl font-semibold text-base h-12"> Active ({activeOrders}) </TabsTrigger> <TabsTrigger value="completed" className="rounded-xl font-semibold text-base h-12"> Completed ({stats.delivered || 0}) </TabsTrigger> </TabsList> <TabsContent value="all"> <OrdersList orders={orders} loading={loading} onViewDetails={viewOrderDetails} onViewPrescription={openPrescriptionViewer} title="All Orders" /> </TabsContent> <TabsContent value="active"> <OrdersList orders={orders.filter((order) => !["delivered", "cancelled"].includes(order.status))} loading={loading} onViewDetails={viewOrderDetails} onViewPrescription={openPrescriptionViewer} title="Active Orders" /> </TabsContent> <TabsContent value="completed"> <OrdersList orders={orders.filter((order) => order.status === "delivered")} loading={loading} onViewDetails={viewOrderDetails} onViewPrescription={openPrescriptionViewer} title="Completed Orders" /> </TabsContent> </Tabs> </div> {/ Order Details Dialog /} <Dialog open={detailsOpen} onOpenChange={setDetailsOpen}> <DialogContent className="sm:max-w-[900px] max-h-[90vh] overflow-y-auto"> <DialogHeader> <DialogTitle>Order Details & Progress</DialogTitle> <DialogDescription>Complete tracking information for your prescription order.</DialogDescription> </DialogHeader> {selectedOrder && ( <div className="space-y-6 mt-4"> {/ Order Progress /} <OrderProgressTracker order={selectedOrder} showTimestamps={true} /> {/ Order Information /} <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <h3 className="font-medium text-gray-700 mb-2">Order Information</h3> <div className="space-y-2"> {selectedOrder.short_id && ( <div className="bg-blue-50 p-3 rounded-lg border border-blue-200"> <p className="text-sm font-medium text-blue-900">Order ID</p> <p className="text-xl font-bold text-blue-800 font-mono">#{selectedOrder.short_id}</p> <p className="text-xs text-blue-600">Share this ID for support</p> </div> )} <p> <span className="text-gray-500">Patient Name:</span> {selectedOrder.name || "N/A"} </p> <p> <span className="text-gray-500">Phone:</span> {selectedOrder.phone || "N/A"} </p> <p> <span className="text-gray-500">Status:</span> {selectedOrder.status || "pending"} </p> </div> </div> <div> <h4 className="text-sm font-medium text-gray-500">Patient Name</h4> <p className="text-base font-medium">{selectedOrder.name}</p> </div> <div> <h4 className="text-sm font-medium text-gray-500">Order Date</h4> <p className="text-base"> {new Date(selectedOrder.created_at).toLocaleDateString("en-IN", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", })} </p> </div> </div> <div> <h4 className="text-sm font-medium text-gray-500 mb-1">Delivery Address</h4> <div className="bg-gray-50 p-3 rounded-md border text-sm">{selectedOrder.address}</div> </div> <div> <h4 className="text-sm font-medium text-gray-500 mb-1">Prescriptions</h4> <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2"> {selectedOrder.file_urls && selectedOrder.file_urls.length > 0 ? ( selectedOrder.file_urls.map((url, index) => ( <Button key={index} variant="outline" onClick={() => openPrescriptionViewer(selectedOrder, index)} className="border-blue-200 hover:bg-blue-50 flex items-center justify-between" > <div className="flex items-center"> <FileText className="w-4 h-4 mr-2" /> <span className="truncate">Prescription {index + 1}</span> </div> <Eye className="w-4 h-4 ml-2" /> </Button> )) ) : selectedOrder.file_url ? ( <Button variant="outline" onClick={() => openPrescriptionViewer(selectedOrder)} className="border-blue-200 hover:bg-blue-50" > <FileText className="w-4 h-4 mr-2" /> View Prescription </Button> ) : ( <p className="text-gray-500">No prescription files available</p> )} </div> </div> </div> )} </DialogContent> </Dialog> {/ Prescription Viewer Dialog /} <Dialog open={prescriptionViewerOpen} onOpenChange={setPrescriptionViewerOpen}> <DialogContent className="sm:max-w-[900px] max-h-[90vh] overflow-y-auto"> <DialogHeader> <DialogTitle>Prescription Viewer</DialogTitle> <DialogDescription> {selectedOrder && ( <> Order #{selectedOrder.short_id} - Prescription {currentPrescriptionIndex + 1} of{" "} {selectedOrder.file_urls?.length || 1} </> )} </DialogDescription> </DialogHeader> {selectedOrder && ( <div className="space-y-6 mt-4"> {/ Prescription Navigation /} {selectedOrder.file_urls && selectedOrder.file_urls.length > 1 && ( <div className="flex items-center justify-center gap-2 mb-4"> {selectedOrder.file_urls.map((_, index) => ( <Button key={index} variant={currentPrescriptionIndex === index ? "default" : "outline"} size="sm" onClick={() => setCurrentPrescriptionIndex(index)} className={currentPrescriptionIndex === index ? "bg-blue-600" : ""} > {index + 1} </Button> ))} </div> )} {/ Prescription Display /} <div className="bg-gray-50 border rounded-lg overflow-hidden"> <div className="flex items-center justify-between bg-gray-100 p-3 border-b"> <div className="flex items-center gap-2"> <FileImage className="w-5 h-5 text-blue-600" /> <span className="font-medium">Prescription {currentPrescriptionIndex + 1}</span> </div> <Button variant="ghost" size="sm" onClick={() => { const url = selectedOrder.file_urls?.[currentPrescriptionIndex] || selectedOrder.file_url if (url) window.open(url, "_blank") }} > <Eye className="w-4 h-4 mr-1" /> Open in New Tab </Button> </div> <div className="p-4 flex items-center justify-center"> <div className="max-w-full max-h-[70vh] overflow-auto"> {(() => { const url = selectedOrder.file_urls?.[currentPrescriptionIndex] || selectedOrder.file_url if (!url) return <p className="text-gray-500">No prescription file available</p> const fileExt = url.split(".").pop()?.toLowerCase() if (fileExt === "pdf") { return ( <div className="bg-white p-4 rounded border text-center"> <FileText className="w-12 h-12 text-gray-400 mx-auto mb-2" /> <p className="font-medium text-gray-700">PDF Document</p> <Button className="mt-2" onClick={() => window.open(url, "_blank")}> Open PDF </Button> </div> ) } else if (["jpg", "jpeg", "png", "gif", "webp"].includes(fileExt || "")) { return ( <img src={url || "/placeholder.svg"} alt={`Prescription ${currentPrescriptionIndex + 1}`} className="max-w-full max-h-[70vh] object-contain" /> ) } else { return ( <div className="bg-white p-4 rounded border text-center"> <FileText className="w-12 h-12 text-gray-400 mx-auto mb-2" /> <p className="font-medium text-gray-700">Document</p> <Button className="mt-2" onClick={() => window.open(url, "_blank")}> Open File </Button> </div> ) } })()} </div> </div> </div> {/ Navigation Buttons /} {selectedOrder.file_urls && selectedOrder.file_urls.length > 1 && ( <div className="flex justify-between mt-4"> <Button variant="outline" disabled={currentPrescriptionIndex === 0} onClick={() => setCurrentPrescriptionIndex((prev) => prev - 1)} > Previous </Button> <Button variant="outline" disabled={currentPrescriptionIndex === selectedOrder.file_urls.length - 1} onClick={() => setCurrentPrescriptionIndex((prev) => prev + 1)} > Next </Button> </div> )} </div> )} </DialogContent> </Dialog> </div> ) } interface OrdersListProps { orders: Order[] loading: boolean onViewDetails: (order: Order) => void onViewPrescription: (order: Order, index?: number) => void title: string } function OrdersList({ orders, loading, onViewDetails, onViewPrescription, title }: OrdersListProps) { if (loading) { return ( <Card className="border-0 shadow-lg bg-white/80 backdrop-blur-sm"> <CardContent className="text-center py-12"> <Loader2 className="w-12 h-12 text-blue-600 mx-auto mb-4 animate-spin" /> <p className="text-gray-600 font-medium">Loading your orders...</p> </CardContent> </Card> ) } if (orders.length === 0) { return ( <Card className="border-0 shadow-lg bg-white/80 backdrop-blur-sm"> <CardContent className="text-center py-16"> <Package className="w-16 h-16 text-gray-400 mx-auto mb-4" /> <h3 className="text-xl font-semibold text-gray-700 mb-2">No Orders Found</h3> <p className="text-gray-500 mb-6"> {title === "All Orders" ? "You haven't placed any orders yet. Start by uploading your prescription." : `No ${title.toLowerCase()} at the moment.`} </p> <Link href="/"> <Button>Upload Prescription</Button> </Link> </CardContent> </Card> ) } return ( <div className="space-y-4"> {orders.map((order) => { const statusInfo = statusConfig[order.status] const StatusIcon = statusInfo.icon const prescriptionCount = order.file_urls?.length || (order.file_url ? 1 : 0) return ( <Card key={order.id} className="border-0 shadow-lg bg-white/80 backdrop-blur-sm hover:shadow-xl transition-all duration-300" > <CardContent className="p-6"> <div className="flex items-center justify-between mb-4"> <div className="flex items-center gap-4"> <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg"> <Package className="w-6 h-6 text-white" /> </div> <div> <h3 className="font-semibold text-gray-900">{order.name}</h3> <div className="flex items-center gap-2 text-sm text-gray-500"> <Calendar className="w-4 h-4" /> {new Date(order.created_at).toLocaleDateString("en-IN", { year: "numeric", month: "short", day: "numeric", })} {order.short_id && ( <> <span>•</span> <span className="font-mono font-semibold text-blue-600">#{order.short_id}</span> </> )} </div> </div> </div> <Badge className={statusInfo.color}> <StatusIcon className="w-3 h-3 mr-1" /> {statusInfo.label} </Badge> </div> {/ Compact Progress Tracker /} <div className="mb-4"> <OrderProgressTracker order={order} compact={true} /> </div> <div className="flex items-center justify-between"> <div className="flex items-center gap-4 text-sm text-gray-600"> <div className="flex items-center gap-1"> <MapPin className="w-4 h-4" /> <span className="truncate max-w-[200px]">{order.address}</span> </div> </div> <div className="flex gap-2"> <Button variant="outline" size="sm" onClick={() => onViewPrescription(order)} className="h-8"> <FileText className="w-4 h-4 mr-1" /> {prescriptionCount > 1 ? `Prescriptions (${prescriptionCount})` : "Prescription"} </Button> <Button variant="outline" size="sm" onClick={() => onViewDetails(order)} className="h-8"> <Eye className="w-4 h-4 mr-1" /> Track Progress </Button> </div> </div> </CardContent> </Card> ) })} </div> ) } [V0_FILE]typescriptreact:file="components/professional-header-enhanced.tsx" isQuickEdit="true" "use client" import { useState, useRef, useEffect } from "react" import { useAuth } from "@/contexts/auth-context" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Clock, UserCircle, LogOut, Settings, Bell, Shield, ChevronDown, Menu, X } from "lucide-react" import Link from "next/link" export default function ProfessionalHeaderEnhanced() { const { phone, logout } = useAuth() const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [notificationOpen, setNotificationOpen] = useState(false) const [userMenuOpen, setUserMenuOpen] = useState(false) const notificationRef = useRef<HTMLDivElement>(null) const userMenuRef = useRef<HTMLDivElement>(null) const getInitials = (phoneNumber: string) => { return phoneNumber.slice(-4) } // Close dropdowns when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (notificationRef.current && !notificationRef.current.contains(event.target as Node)) { setNotificationOpen(false) } if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) { setUserMenuOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) return ( <header className="relative z-40"> {/ Background with gradient and blur effect /} <div className="absolute inset-0 bg-gradient-to-r from-blue-600 via-blue-500 to-cyan-500 opacity-95"></div> <div className="absolute inset-0 backdrop-blur-sm bg-white/10"></div> {/ Content /} <div className="relative z-10"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="flex justify-between items-center h-20"> {/ Enhanced Logo and Brand /} <div className="flex items-center gap-4"> <div className="flex items-center gap-4"> <img src="/images/medikloud-logo-full.png" alt="MediKloud" className="h-12 w-auto filter brightness-0 invert" /> </div> </div> {/ Enhanced Desktop Navigation /} <div className="hidden md:flex items-center gap-8 relative z-50"> <nav className="flex items-center gap-2"> <Link href="/"> <Button variant="ghost" size="sm" className="text-white/90 hover:text-white hover:bg-white/10 font-medium transition-all duration-200 rounded-xl px-4 py-2" > Upload Prescription </Button> </Link> <Link href="/profile"> <Button variant="ghost" size="sm" className="text-white/90 hover:text-white hover:bg-white/10 font-medium transition-all duration-200 rounded-xl px-4 py-2" > My Orders </Button> </Link> </nav> {/ Enhanced Notifications /} <div className="relative" ref={notificationRef}> <Button variant="ghost" size="sm" onClick={() => setNotificationOpen(!notificationOpen)} className="relative text-white/90 hover:text-white hover:bg-white/10 rounded-xl p-2 transition-all duration-200" > <Bell className="w-5 h-5" /> <span className="absolute -top-1 -right-1 w-3 h-3 bg-gradient-to-br from-red-400 to-red-500 rounded-full border-2 border-white shadow-lg animate-pulse"></span> </Button> {notificationOpen && ( <div className="absolute right-0 top-full mt-2 w-80 bg-white/95 backdrop-blur-xl border border-gray-200/50 shadow-2xl rounded-2xl p-2 z-[100]"> <div className="text-gray-900 font-semibold text-base px-3 py-2 flex items-center gap-2"> <Bell className="w-4 h-4" /> Notifications <Badge className="bg-red-100 text-red-800 text-xs ml-auto">3 New</Badge> </div> <div className="h-px bg-gray-200/50 my-2"></div> <div className="max-h-64 overflow-y-auto"> <div className="rounded-xl mx-1 my-1 px-3 py-3 hover:bg-blue-50 transition-colors cursor-pointer"> <div className="flex items-start gap-3 w-full"> <div className="w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div> <div className="flex-1"> <p className="font-medium text-gray-900 text-sm">Order Confirmed</p> <p className="text-xs text-gray-600"> Your prescription order #1234 has been confirmed by our pharmacist </p> <p className="text-xs text-gray-400 mt-1">2 minutes ago</p> </div> </div> </div> <div className="rounded-xl mx-1 my-1 px-3 py-3 hover:bg-green-50 transition-colors cursor-pointer"> <div className="flex items-start gap-3 w-full"> <div className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></div> <div className="flex-1"> <p className="font-medium text-gray-900 text-sm">Out for Delivery</p> <p className="text-xs text-gray-600"> Your order #1233 is out for delivery and will arrive soon </p> <p className="text-xs text-gray-400 mt-1">15 minutes ago</p> </div> </div> </div> <div className="rounded-xl mx-1 my-1 px-3 py-3 hover:bg-purple-50 transition-colors cursor-pointer"> <div className="flex items-start gap-3 w-full"> <div className="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0"></div> <div className="flex-1"> <p className="font-medium text-gray-900 text-sm">Prescription Uploaded</p> <p className="text-xs text-gray-600"> New prescription uploaded successfully and is being reviewed </p> <p className="text-xs text-gray-400 mt-1">1 hour ago</p> </div> </div> </div> </div> <div className="h-px bg-gray-200/50 my-2"></div> <div className="rounded-xl mx-1 my-1 px-3 py-2 text-center text-blue-600 hover:bg-blue-50 transition-colors cursor-pointer"> <span className="text-sm font-medium">View All Notifications</span> </div> </div> )} </div> {/ Enhanced User Menu /} <div className="relative" ref={userMenuRef}> <Button variant="ghost" onClick={() => setUserMenuOpen(!userMenuOpen)} className="flex items-center gap-3 h-12 px-4 text-white hover:bg-white/10 rounded-2xl transition-all duration-200 border border-white/20 bg-white/5 backdrop-blur-sm" > <Avatar className="w-9 h-9 border-2 border-white/30 shadow-lg"> <AvatarFallback className="bg-gradient-to-br from-blue-500 to-cyan-600 text-white text-sm font-bold"> <UserCircle className="w-6 h-6" /> </AvatarFallback> </Avatar> <div className="text-left"> <p className="text-sm font-semibold text-white flex items-center gap-1">Profile</p> </div> <ChevronDown className="w-4 h-4 text-white/70" /> </Button> {userMenuOpen && ( <div className="absolute right-0 top-full mt-2 w-64 bg-white/95 backdrop-blur-xl border border-gray-200/50 shadow-2xl rounded-2xl p-2 z-[100]"> <div className="text-gray-900 font-semibold text-base px-3 py-2">My Account</div> <div className="h-px bg-gray-200/50 my-2"></div> <Link href="/profile" className="flex items-center gap-3 px-3 py-3 text-gray-700 hover:bg-blue-50 transition-colors rounded-xl mx-1 my-1" onClick={() => setUserMenuOpen(false)} > <UserCircle className="w-5 h-5 text-blue-600" /> <div> <p className="font-medium">Profile & Orders</p> <p className="text-xs text-gray-500">Manage your account</p> </div> </Link> <div className="flex items-center gap-3 px-3 py-3 text-gray-700 hover:bg-gray-50 transition-colors rounded-xl mx-1 my-1 cursor-pointer"> <Settings className="w-5 h-5 text-gray-600" /> <div> <p className="font-medium">Settings</p> <p className="text-xs text-gray-500">Preferences & privacy</p> </div> </div> <div className="flex items-center gap-3 px-3 py-3 text-gray-700 hover:bg-gray-50 transition-colors rounded-xl mx-1 my-1 cursor-pointer"> <Shield className="w-5 h-5 text-gray-600" /> <div> <p className="font-medium">Security</p> <p className="text-xs text-gray-500">Privacy & data protection</p> </div> </div> <div className="h-px bg-gray-200/50 my-2"></div> <div onClick={() => { logout() setUserMenuOpen(false) }} className="flex items-center gap-3 px-3 py-3 text-red-600 hover:bg-red-50 transition-colors rounded-xl mx-1 my-1 cursor-pointer" > <LogOut className="w-5 h-5" /> <div> <p className="font-medium">Sign Out</p> <p className="text-xs text-red-500">End current session</p> </div> </div> </div> )} </div> </div> {/ Enhanced Mobile Menu Button /} <div className="md:hidden"> <Button variant="ghost" size="sm" onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="text-white hover:bg-white/10 rounded-xl p-2 transition-all duration-200" > {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />} </Button> </div> </div> {/ Enhanced Mobile Menu /} {mobileMenuOpen && ( <div className="md:hidden border-t border-white/20 py-6 backdrop-blur-sm bg-white/5 rounded-b-2xl mt-2"> <div className="space-y-4"> <div className="flex items-center gap-4 px-4"> <Avatar className="w-12 h-12 border-2 border-white/30 shadow-lg"> <AvatarFallback className="bg-gradient-to-br from-blue-500 to-cyan-600 text-white font-bold"> {getInitials(phone || "")} </AvatarFallback> </Avatar> <div> <p className="text-base font-semibold text-white">{phone}</p> <Badge variant="secondary" className="text-xs bg-green-500/20 text-green-100 border-green-400/30"> <Clock className="w-2.5 h-2.5 mr-1" /> Active Session </Badge> </div> </div> <div className="space-y-2 px-2"> <Link href="/" onClick={() => setMobileMenuOpen(false)}> <Button variant="ghost" className="w-full justify-start text-white hover:bg-white/10 rounded-xl py-3 px-4" > Upload Prescription </Button> </Link> <Link href="/profile" onClick={() => setMobileMenuOpen(false)}> <Button variant="ghost" className="w-full justify-start text-white hover:bg-white/10 rounded-xl py-3 px-4" > <UserCircle className="w-5 h-5 mr-3" /> My Orders </Button> </Link> <Button variant="ghost" className="w-full justify-start text-white hover:bg-white/10 rounded-xl py-3 px-4" > <Settings className="w-5 h-5 mr-3" /> Settings </Button> <Button variant="ghost" onClick={logout} className="w-full justify-start text-red-300 hover:bg-red-500/10 rounded-xl py-3 px-4" > <LogOut className="w-5 h-5 mr-3" /> Sign Out </Button> </div> </div> </div> )} </div> </div> </header> ) } [V0_FILE]typescriptreact:file="components/address-management.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { useAuth } from "@/contexts/auth-context" import { supabase } from "@/lib/supabase" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent } from "@/components/ui/card" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Loader2, Plus, Home, Building2, MapPin, Edit, Trash2, Check } from "lucide-react" import { toast } from "@/components/ui/use-toast" export type Address = { id: string user_phone: string name: string house_flat_no: string street_name: string landmark: string | null town_village: string district: string pincode: string is_default: boolean created_at: string } export function AddressManagement({ onAddressSelect, selectedAddressId, }: { onAddressSelect: (address: Address) => void selectedAddressId?: string }) { const { phone } = useAuth() const [addresses, setAddresses] = useState<Address[]>([]) const [loading, setLoading] = useState(true) const [addDialogOpen, setAddDialogOpen] = useState(false) const [editingAddress, setEditingAddress] = useState<Address | null>(null) const [formData, setFormData] = useState({ name: "Home", house_flat_no: "", street_name: "", landmark: "", town_village: "", district: "", pincode: "", custom_name: "", }) const [formErrors, setFormErrors] = useState<Record<string, string>>({}) const [savingAddress, setSavingAddress] = useState(false) const [deletingId, setDeletingId] = useState<string | null>(null) // Fetch addresses using phone number useEffect(() => { if (!phone) return const fetchAddresses = async () => { setLoading(true) try { console.log("Fetching addresses for phone:", phone) // Use the service role client to bypass any RLS issues const { data, error } = await supabase .from("user_addresses") .select("") .eq("user_phone", phone) .order("is_default", { ascending: false }) .order("created_at", { ascending: false }) if (error) { console.error("Supabase error:", error) throw error } console.log("Fetched addresses:", data) setAddresses(data || []) } catch (error) { console.error("Error fetching addresses:", error) toast({ title: "Error", description: "Failed to load your saved addresses. Please try again.", variant: "destructive", }) } finally { setLoading(false) } } fetchAddresses() }, [phone]) // Reset form when dialog opens/closes useEffect(() => { if (addDialogOpen) { if (editingAddress) { setFormData({ name: editingAddress.name, house_flat_no: editingAddress.house_flat_no, street_name: editingAddress.street_name, landmark: editingAddress.landmark || "", town_village: editingAddress.town_village, district: editingAddress.district, pincode: editingAddress.pincode, custom_name: editingAddress.name !== "Home" && editingAddress.name !== "Office" ? editingAddress.name : "", }) } else { setFormData({ name: "Home", house_flat_no: "", street_name: "", landmark: "", town_village: "", district: "", pincode: "", custom_name: "", }) } setFormErrors({}) } }, [addDialogOpen, editingAddress]) const validateForm = () => { const errors: Record<string, string> = {} if (!formData.house_flat_no.trim()) { errors.house_flat_no = "House/Flat No. is required" } if (!formData.street_name.trim()) { errors.street_name = "Street name is required" } if (!formData.town_village.trim()) { errors.town_village = "Town/Village is required" } if (!formData.district.trim()) { errors.district = "District is required" } if (!formData.pincode.trim()) { errors.pincode = "Pincode is required" } else if (!/^\d{6}$/.test(formData.pincode)) { errors.pincode = "Please enter a valid 6-digit pincode" } if (formData.name === "Other" && !formData.custom_name.trim()) { errors.custom_name = "Please provide a name for this address" } setFormErrors(errors) return Object.keys(errors).length === 0 } const handleSaveAddress = async () => { if (!phone) { toast({ title: "Error", description: "Please log in to save addresses.", variant: "destructive", }) return } if (!validateForm()) return setSavingAddress(true) try { const addressName = formData.name === "Other" ? formData.custom_name : formData.name const addressData = { user_phone: phone, name: addressName, house_flat_no: formData.house_flat_no.trim(), street_name: formData.street_name.trim(), landmark: formData.landmark.trim() || null, town_village: formData.town_village.trim(), district: formData.district.trim(), pincode: formData.pincode.trim(), is_default: addresses.length === 0, // First address is default } console.log("Saving address data:", addressData) if (editingAddress) { // Update existing address const { data, error } = await supabase .from("user_addresses") .update(addressData) .eq("id", editingAddress.id) .eq("user_phone", phone) .select() if (error) { console.error("Update error:", error) throw error } console.log("Updated address:", data) if (data && data[0]) { setAddresses((prev) => prev.map((addr) => (addr.id === editingAddress.id ? data[0] : addr))) } toast({ title: "Address Updated", description: "Your address has been updated successfully.", }) } else { // Add new address const { data, error } = await supabase.from("user_addresses").insert(addressData).select() if (error) { console.error("Insert error:", error) console.error("Error details:", JSON.stringify(error, null, 2)) throw error } console.log("Inserted address:", data) if (data && data[0]) { setAddresses((prev) => [data[0], ...prev]) // If this is the first address, select it if (addresses.length === 0) { onAddressSelect(data[0]) } } toast({ title: "Address Saved", description: "Your address has been saved for future orders.", }) } setAddDialogOpen(false) setEditingAddress(null) } catch (error) { console.error("Error saving address:", error) // More detailed error message let errorMessage = "Unknown error occurred" if (error instanceof Error) { errorMessage = error.message } else if (typeof error === "object" && error !== null && "message" in error) { errorMessage = String(error.message) } toast({ title: "Error", description: `Failed to save your address: ${errorMessage}`, variant: "destructive", }) } finally { setSavingAddress(false) } } const handleDeleteAddress = async (id: string) => { if (!phone) return setDeletingId(id) try { const { error } = await supabase.from("user_addresses").delete().eq("id", id).eq("user_phone", phone) if (error) throw error setAddresses((prev) => prev.filter((addr) => addr.id !== id)) // If the deleted address was selected, select another one if available if (id === selectedAddressId && addresses.length > 1) { const remainingAddresses = addresses.filter((addr) => addr.id !== id) if (remainingAddresses.length > 0) { onAddressSelect(remainingAddresses[0]) } } toast({ title: "Address Deleted", description: "Your address has been deleted successfully.", }) } catch (error) { console.error("Error deleting address:", error) toast({ title: "Error", description: "Failed to delete your address. Please try again.", variant: "destructive", }) } finally { setDeletingId(null) } } const handleSetDefault = async (id: string) => { if (!phone) return try { // First, set all addresses to non-default await supabase.from("user_addresses").update({ is_default: false }).eq("user_phone", phone) // Then set the selected address as default const { error } = await supabase .from("user_addresses") .update({ is_default: true }) .eq("id", id) .eq("user_phone", phone) if (error) throw error // Update local state setAddresses((prev) => prev.map((addr) => ({ ...addr, is_default: addr.id === id, })), ) toast({ title: "Default Address Updated", description: "Your default address has been updated.", }) } catch (error) { console.error("Error setting default address:", error) toast({ title: "Error", description: "Failed to update your default address. Please try again.", variant: "destructive", }) } } const formatAddress = (address: Address) => { const parts = [ address.house_flat_no, address.street_name, address.landmark, `${address.town_village}, ${address.district}`, address.pincode, ].filter(Boolean) return parts.join(", ") } const getAddressIcon = (name: string) => { switch (name) { case "Home": return <Home className="w-5 h-5" /> case "Office": return <Building2 className="w-5 h-5" /> default: return <MapPin className="w-5 h-5" /> } } if (!phone) { return ( <Card> <CardContent className="p-6"> <p className="text-center text-gray-500">Please log in to manage your addresses.</p> </CardContent> </Card> ) } return ( <div className="space-y-4"> <div className="flex items-center justify-between"> <h3 className="text-lg font-semibold">Your Addresses</h3> <Button onClick={() => { setEditingAddress(null) setAddDialogOpen(true) }} size="sm" > <Plus className="w-4 h-4 mr-2" /> Add New Address </Button> </div> {loading ? ( <div className="flex justify-center p-8"> <Loader2 className="w-8 h-8 animate-spin text-blue-600" /> </div> ) : addresses.length === 0 ? ( <div className="space-y-6"> {/* Enhanced Empty State Card /} <Card className="border-2 border-dashed border-gray-200 bg-gradient-to-br from-blue-50 to-indigo-50"> <CardContent className="p-8 text-center"> <div className="w-20 h-20 mx-auto mb-6 bg-blue-100 rounded-full flex items-center justify-center"> <MapPin className="w-10 h-10 text-blue-600" /> </div> <h3 className="text-xl font-semibold text-gray-900 mb-2">No Saved Addresses</h3> <p className="text-gray-600 mb-6 max-w-md mx-auto"> You don't have any saved addresses yet. Save an address below for faster checkout next time. </p> <Button onClick={() => { setEditingAddress(null) setAddDialogOpen(true) }} size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-medium shadow-lg hover:shadow-xl transition-all duration-200" > <Plus className="w-5 h-5 mr-2" /> Add Your First Address </Button> </CardContent> </Card> {/ Quick Add Address Form /} <Card className="border border-gray-200 shadow-sm"> <CardContent className="p-6"> <div className="flex items-center gap-3 mb-4"> <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center"> <Plus className="w-4 h-4 text-green-600" /> </div> <h4 className="text-lg font-medium text-gray-900">Quick Add Address</h4> </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> <div className="space-y-2"> <Label htmlFor="quick_house_flat_no" className="text-sm font-medium"> House/Flat No. </Label> <Input id="quick_house_flat_no" value={formData.house_flat_no} onChange={(e) => setFormData({ ...formData, house_flat_no: e.target.value })} placeholder="E.g., Flat 101, Villa 23" className="h-11" /> </div> <div className="space-y-2"> <Label htmlFor="quick_street_name" className="text-sm font-medium"> Street Name * </Label> <Input id="quick_street_name" value={formData.street_name} onChange={(e) => setFormData({ ...formData, street_name: e.target.value })} placeholder="E.g., MG Road, 5th Cross" className="h-11" /> </div> <div className="space-y-2"> <Label htmlFor="quick_town_village" className="text-sm font-medium"> Town/Village * </Label> <Input id="quick_town_village" value={formData.town_village} onChange={(e) => setFormData({ ...formData, town_village: e.target.value })} placeholder="E.g., Koramangala" className="h-11" /> </div> <div className="space-y-2"> <Label htmlFor="quick_pincode" className="text-sm font-medium"> Pincode * </Label> <Input id="quick_pincode" value={formData.pincode} onChange={(e) => setFormData({ ...formData, pincode: e.target.value })} placeholder="E.g., 560001" maxLength={6} className="h-11" /> </div> </div> <div className="flex gap-3"> <Button onClick={handleSaveAddress} disabled={ savingAddress || !formData.house_flat_no.trim() || !formData.street_name.trim() || !formData.town_village.trim() || !formData.pincode.trim() } className="flex-1 bg-green-600 hover:bg-green-700 text-white h-11" > {savingAddress ? ( <> <Loader2 className="w-4 h-4 mr-2 animate-spin" /> Saving... </> ) : ( <> <Check className="w-4 h-4 mr-2" /> Save Address </> )} </Button> <Button variant="outline" onClick={() => { setEditingAddress(null) setAddDialogOpen(true) }} className="h-11 px-6" > More Details </Button> </div> <p className="text-xs text-gray-500 mt-3 text-center"> Need to add landmark or district? Click "More Details" for the full form. </p> </CardContent> </Card> </div> ) : ( <RadioGroup value={selectedAddressId} onValueChange={(value) => { const address = addresses.find((addr) => addr.id === value) if (address) onAddressSelect(address) }} > <div className="grid gap-4"> {addresses.map((address) => ( <div key={address.id} className="relative"> <div className={`border rounded-lg p-4 ${selectedAddressId === address.id ? "border-blue-500 bg-blue-50" : "border-gray-200"}`} > <div className="flex items-start gap-3"> <RadioGroupItem value={address.id} id={address.id} className="mt-1" /> <div className="flex-1"> <div className="flex items-center gap-2 mb-1"> <div className="text-blue-600">{getAddressIcon(address.name)}</div> <Label htmlFor={address.id} className="font-medium text-gray-900 cursor-pointer"> {address.name} {address.is_default && ( <span className="ml-2 text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full"> Default </span> )} </Label> </div> <p className="text-gray-600 text-sm ml-7">{formatAddress(address)}</p> </div> <div className="flex gap-2"> <Button variant="ghost" size="sm" onClick={(e) => { e.preventDefault() setEditingAddress(address) setAddDialogOpen(true) }} > <Edit className="w-4 h-4" /> <span className="sr-only">Edit</span> </Button> <Button variant="ghost" size="sm" onClick={(e) => { e.preventDefault() handleDeleteAddress(address.id) }} disabled={deletingId === address.id} > {deletingId === address.id ? ( <Loader2 className="w-4 h-4 animate-spin" /> ) : ( <Trash2 className="w-4 h-4 text-red-500" /> )} <span className="sr-only">Delete</span> </Button> {!address.is_default && ( <Button variant="ghost" size="sm" onClick={(e) => { e.preventDefault() handleSetDefault(address.id) }} > <Check className="w-4 h-4 text-green-500" /> <span className="sr-only">Set as default</span> </Button> )} </div> </div> </div> </div> ))} </div> </RadioGroup> )} {/* Add/Edit Address Dialog /} <Dialog open={addDialogOpen} onOpenChange={(open) => { // Prevent closing if there's unsaved data if (!open) { const hasUnsavedData = formData.house_flat_no.trim() || formData.street_name.trim() || formData.landmark.trim() || formData.town_village.trim() || formData.district.trim() || formData.pincode.trim() || (formData.name === "Other" && formData.custom_name.trim()) if (hasUnsavedData) { const confirmClose = window.confirm( "You have unsaved changes. Are you sure you want to close without saving?", ) if (!confirmClose) { return } } } setAddDialogOpen(open) }} > <DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-hidden flex flex-col"> <DialogHeader className="flex-shrink-0"> <DialogTitle>{editingAddress ? "Edit Address" : "Add New Address"}</DialogTitle> </DialogHeader> <div className="flex-1 overflow-y-auto px-1"> <div className="space-y-4 py-4"> <div className="space-y-2"> <Label>Address Type</Label> <RadioGroup value={formData.name} onValueChange={(value) => setFormData({ ...formData, name: value })} className="flex flex-wrap gap-4" > <div className="flex items-center space-x-2"> <RadioGroupItem value="Home" id="home" /> <Label htmlFor="home" className="cursor-pointer"> Home </Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="Office" id="office" /> <Label htmlFor="office" className="cursor-pointer"> Office </Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="Other" id="other" /> <Label htmlFor="other" className="cursor-pointer"> Other </Label> </div> </RadioGroup> </div> {formData.name === "Other" && ( <div className="space-y-2"> <Label htmlFor="custom_name">Address Name</Label> <Input id="custom_name" value={formData.custom_name} onChange={(e) => setFormData({ ...formData, custom_name: e.target.value })} placeholder="E.g., Parent's Home, Gym, etc." className={formErrors.custom_name ? "border-red-500" : ""} /> {formErrors.custom_name && <p className="text-red-500 text-xs">{formErrors.custom_name}</p>} </div> )} <div className="space-y-2"> <Label htmlFor="house_flat_no">House/Flat No. </Label> <Input id="house_flat_no" value={formData.house_flat_no} onChange={(e) => setFormData({ ...formData, house_flat_no: e.target.value })} placeholder="E.g., Flat 101, Villa 23" className={formErrors.house_flat_no ? "border-red-500" : ""} /> {formErrors.house_flat_no && <p className="text-red-500 text-xs">{formErrors.house_flat_no}</p>} </div> <div className="space-y-2"> <Label htmlFor="street_name">Street Name </Label> <Input id="street_name" value={formData.street_name} onChange={(e) => setFormData({ ...formData, street_name: e.target.value })} placeholder="E.g., MG Road, 5th Cross" className={formErrors.street_name ? "border-red-500" : ""} /> {formErrors.street_name && <p className="text-red-500 text-xs">{formErrors.street_name}</p>} </div> <div className="space-y-2"> <Label htmlFor="landmark">Landmark</Label> <Input id="landmark" value={formData.landmark} onChange={(e) => setFormData({ ...formData, landmark: e.target.value })} placeholder="E.g., Near City Mall, Opposite Park" /> </div> <div className="grid grid-cols-2 gap-4"> <div className="space-y-2"> <Label htmlFor="town_village">Town/Village </Label> <Input id="town_village" value={formData.town_village} onChange={(e) => setFormData({ ...formData, town_village: e.target.value })} placeholder="E.g., Koramangala" className={formErrors.town_village ? "border-red-500" : ""} /> {formErrors.town_village && <p className="text-red-500 text-xs">{formErrors.town_village}</p>} </div> <div className="space-y-2"> <Label htmlFor="district">District </Label> <Input id="district" value={formData.district} onChange={(e) => setFormData({ ...formData, district: e.target.value })} placeholder="E.g., Bengaluru" className={formErrors.district ? "border-red-500" : ""} /> {formErrors.district && <p className="text-red-500 text-xs">{formErrors.district}</p>} </div> </div> <div className="space-y-2"> <Label htmlFor="pincode">Pincode </Label> <Input id="pincode" value={formData.pincode} onChange={(e) => setFormData({ ...formData, pincode: e.target.value })} placeholder="E.g., 560001" maxLength={6} className={formErrors.pincode ? "border-red-500" : ""} /> {formErrors.pincode && <p className="text-red-500 text-xs">{formErrors.pincode}</p>} </div> </div> </div> <DialogFooter className="flex-shrink-0 border-t pt-4"> <Button variant="outline" onClick={() => setAddDialogOpen(false)}> Cancel </Button> <Button onClick={handleSaveAddress} disabled={savingAddress}> {savingAddress ? ( <> <Loader2 className="w-4 h-4 mr-2 animate-spin" /> Saving... </> ) : ( <>Save Address</> )} </Button> </DialogFooter> </DialogContent> </Dialog> </div> ) }</article></body></html>