[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { AuthScreen } from "@/components/auth-screen" import { MainApp } from "@/components/main-app" export default function Page() { const [isAuthenticated, setIsAuthenticated] = useState(false) const [user, setUser] = useState(null) const handleLogin = (userData: any) => { setUser(userData) setIsAuthenticated(true) } const handleLogout = () => { setUser(null) setIsAuthenticated(false) } if (!isAuthenticated) { return } return } [V0_FILE]typescriptreact:file="components/auth-screen.tsx" "use client" import { useState } from "react" 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 { Shield, MapPin } from "lucide-react" interface AuthScreenProps { onLogin: (userData: any) => void } export function AuthScreen({ onLogin }: AuthScreenProps) { const [step, setStep] = useState<"welcome" | "id" | "phone" | "otp" | "location">("welcome") const [ghanaCardId, setGhanaCardId] = useState("") const [phoneNumber, setPhoneNumber] = useState("") const [otp, setOtp] = useState("") const [locationEnabled, setLocationEnabled] = useState(false) const handleNext = () => { if (step === "welcome") setStep("id") else if (step === "id") setStep("phone") else if (step === "phone") setStep("otp") else if (step === "otp") setStep("location") else if (step === "location") { // Simulate successful login onLogin({ name: "Kwame Asante", ghanaCardId: ghanaCardId, phoneNumber: phoneNumber, address: "Accra, Greater Accra Region", dateOfBirth: "1990-05-15", isPremium: false, }) } } const enableLocation = () => { setLocationEnabled(true) setTimeout(() => handleNext(), 1000) } if (step === "welcome") { return (

Ghana Digital ID Secure, convenient access to your national identity

• Access your digital Ghana Card

• Verify citizen information

• Manage linked services

• Renew your ID card

Your privacy and security are our top priority

) } if (step === "id") { return (

Enter Ghana Card ID Please enter your Ghana Card identification number

Ghana Card ID setGhanaCardId(e.target.value)} />

) } if (step === "phone") { return (

Verify Phone Number Enter the phone number registered with your Ghana Card

Phone Number setPhoneNumber(e.target.value)} />

) } if (step === "otp") { return (

Enter Verification Code We sent a 6-digit code to {phoneNumber}

Verification Code setOtp(e.target.value)} maxLength={6} />

) } if (step === "location") { return (

Enable Location Services Location access is required for security and to comply with Ghana's digital identity regulations

• Prevents unauthorized access

• Ensures compliance with local laws

• Protects your digital identity

{!locationEnabled ? ( ) : (

Verifying location...

)}

) } return null } [V0_FILE]typescriptreact:file="components/main-app.tsx" "use client" import { useState } from "react" import { DigitalIdScreen } from "@/components/digital-id-screen" import { SearchScreen } from "@/components/search-screen" import { ServicesScreen } from "@/components/services-screen" import { RenewalScreen } from "@/components/renewal-screen" import { SubscriptionScreen } from "@/components/subscription-screen" import { Button } from "@/components/ui/button" import { CreditCard, Home, Search, Settings, Shield, RefreshCw, LogOut } from "lucide-react" interface MainAppProps { user: any onLogout: () => void } export function MainApp({ user, onLogout }: MainAppProps) { const [activeTab, setActiveTab] = useState<"home" | "search" | "services" | "renewal" | "subscription">("home") const renderScreen = () => { switch (activeTab) { case "home": return case "search": return case "services": return case "renewal": return case "subscription": return default: return } } return (

{/* Header */}

Ghana Digital ID

{/* Content */}

{renderScreen()}

{/* Bottom Navigation */}

) } [V0_FILE]typescriptreact:file="components/digital-id-screen.tsx" "use client" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Shield, Eye, Download } from "lucide-react" import Image from "next/image" interface DigitalIdScreenProps { user: any } export function DigitalIdScreen({ user }: DigitalIdScreenProps) { return (

{/* Welcome Message */}

Welcome, {user.name}

Your digital Ghana Card is ready

{/* Digital Ghana Card */}

GHANA CARD

DIGITAL

Full Name

{user.name}

Ghana Card ID

{user.ghanaCardId}

Date of Birth

{user.dateOfBirth}

Phone

{user.phoneNumber}

Address

{user.address}

{/* Action Buttons */}

{/* Security Notice */}

Security Features Active

Your digital ID includes anti-forgery watermarks and location verification for maximum security.

) } [V0_FILE]typescriptreact:file="components/search-screen.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Label } from "@/components/ui/label" import { Search, Crown, Phone, MapPin, Calendar, User } from "lucide-react" interface SearchScreenProps { user: any } export function SearchScreen({ user }: SearchScreenProps) { const [phoneNumber, setPhoneNumber] = useState("") const [searchResult, setSearchResult] = useState(null) const [isSearching, setIsSearching] = useState(false) const handleSearch = async () => { if (!phoneNumber) return setIsSearching(true) // Simulate API call setTimeout(() => { setSearchResult({ name: "Ama Osei", phone: phoneNumber, address: "Kumasi, Ashanti Region", dateOfBirth: user.isPremium ? "1985-03-22" : null, partialId: user.isPremium ? "GHA-987***-*" : null, verified: true, }) setIsSearching(false) }, 1500) } return (

Citizen Search

Verify citizen information by phone number

{/* Premium Status */} {!user.isPremium && (

Upgrade for More Details

Premium subscribers get access to additional verified information

)} {/* Search Form */} Search by Phone Number

Phone Number setPhoneNumber(e.target.value)} />

{/* Search Results */} {searchResult && (

Search Results {searchResult.verified && Verified}

{searchResult.name}

Full Name

{searchResult.phone}

Phone Number

{searchResult.address}

Registered Address

{/* Premium Information */} {user.isPremium && searchResult.dateOfBirth && ( <>

{searchResult.dateOfBirth}

Date of Birth

{searchResult.partialId}

Partial Ghana Card ID

)} {/* Premium Upsell */} {!user.isPremium && (

Upgrade to see date of birth and partial ID

)} )} {/* Privacy Notice */}

Privacy & Usage

• Search results are provided with user consent
• All searches are logged for security purposes
• Misuse of search functionality may result in account suspension
• Only publicly available information is displayed

) } [V0_FILE]typescriptreact:file="components/services-screen.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { AlertTriangle, Building, Calendar, Flag, CheckCircle } from "lucide-react" interface ServicesScreenProps { user: any } const mockServices = [ { id: 1, name: "Ghana Commercial Bank", type: "Banking", registeredDate: "2023-08-15", status: "Active", description: "Account verification and KYC services", }, { id: 2, name: "MTN Ghana", type: "Telecommunications", registeredDate: "2023-06-20", status: "Active", description: "Mobile service registration", }, { id: 3, name: "Ghana Revenue Authority", type: "Government", registeredDate: "2023-01-10", status: "Active", description: "Tax identification and filing", }, { id: 4, name: "Unknown Service Provider", type: "Unknown", registeredDate: "2024-01-05", status: "Suspicious", description: "Unrecognized service registration", }, ] export function ServicesScreen({ user }: ServicesScreenProps) { const [services, setServices] = useState(mockServices) const [reportingService, setReportingService] = useState(null) const handleReportService = (serviceId: number) => { setReportingService(serviceId) setTimeout(() => { setServices( services.map((service) => (service.id === serviceId ? { ...service, status: "Under Review" } : service)), ) setReportingService(null) }, 2000) } const getStatusColor = (status: string) => { switch (status) { case "Active": return "bg-green-100 text-green-800" case "Suspicious": return "bg-red-100 text-red-800" case "Under Review": return "bg-yellow-100 text-yellow-800" default: return "bg-gray-100 text-gray-800" } } const getTypeIcon = (type: string) => { switch (type) { case "Banking": return case "Government": return case "Telecommunications": return default: return } } return (

Linked Services

Manage services connected to your Ghana Card

{/* Summary */}

Service Overview

{services.filter((s) => s.status === "Active").length} active services connected

{/* Services List */}

{services.map((service) => (

{getTypeIcon(service.type)}

{service.name}

{service.type}

{service.status}

{service.description}

Registered: {service.registeredDate}

{service.status === "Suspicious" && (

Suspicious Activity Detected

This service was not recognized. Please review and report if unauthorized.

)}

{service.status !== "Under Review" && ( )} {service.status === "Under Review" && ( Report Submitted )}

))}

{/* Help Section */}

Need Help?

• Report any services you don't recognize
• Review your linked services regularly
• Contact support if you need assistance
• Service removal requests are processed within 3 business days

) } [V0_FILE]typescriptreact:file="components/renewal-screen.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { RefreshCw, Upload, CheckCircle, Clock, Camera } from "lucide-react" interface RenewalScreenProps { user: any } export function RenewalScreen({ user }: RenewalScreenProps) { const [renewalStep, setRenewalStep] = useState<"check" | "form" | "photo" | "review" | "submitted">("check") const [formData, setFormData] = useState({ address: user.address, phone: user.phoneNumber, emergencyContact: "", emergencyPhone: "", }) const [photoUploaded, setPhotoUploaded] = useState(false) const handleNext = () => { if (renewalStep === "check") setRenewalStep("form") else if (renewalStep === "form") setRenewalStep("photo") else if (renewalStep === "photo") setRenewalStep("review") else if (renewalStep === "review") setRenewalStep("submitted") } const getProgressValue = () => { switch (renewalStep) { case "check": return 20 case "form": return 40 case "photo": return 60 case "review": return 80 case "submitted": return 100 default: return 0 } } if (renewalStep === "check") { return (

Renew Ghana Card

Check your renewal eligibility

Current Card Status

Card ID

{user.ghanaCardId}

Issue Date

2019-03-15

Expiry Date

2024-03-15

Status

Expires Soon

Renewal Required

Your Ghana Card expires in 2 months. Renew now to avoid service interruptions.

) } if (renewalStep === "form") { return (

Update Information

Personal Information

Current Address setFormData({ ...formData, address: e.target.value })} />

Phone Number setFormData({ ...formData, phone: e.target.value })} />

Emergency Contact Name setFormData({ ...formData, emergencyContact: e.target.value })} />

Emergency Contact Phone setFormData({ ...formData, emergencyPhone: e.target.value })} />

) } if (renewalStep === "photo") { return (

Update Photo

New Photo Required

{photoUploaded ? ( ) : ( )}

{!photoUploaded ? (

Please upload a recent passport-style photo

) : (

Photo uploaded successfully

)}

Photo Requirements

• Recent photo (taken within 6 months)
• Clear, well-lit, facing forward
• Plain background
• No hats or sunglasses

) } if (renewalStep === "review") { return (

Review & Submit

Review Your Information

Name

{user.name}

Address

{formData.address}

Phone

{formData.phone}

Emergency Contact

{formData.emergencyContact}

{formData.emergencyPhone}

Photo

Uploaded

Processing Fee

A processing fee of GHS 25.00 will be collected upon card pickup.

) } if (renewalStep === "submitted") { return (

Application Submitted

Your renewal request has been received

What's Next?

Application Review

Your application will be reviewed within 5-7 business days

Card Production

Your new card will be printed and prepared for pickup

Pickup Notification

You'll receive an SMS when your card is ready for collection

Reference Number

REN-2024-{Math.random().toString(36).substr(2, 9).toUpperCase()}

Save this number for tracking your application

) } return null } [V0_FILE]typescriptreact:file="components/subscription-screen.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Crown, Check, Star, CreditCard, Calendar } from "lucide-react" interface SubscriptionScreenProps { user: any } export function SubscriptionScreen({ user }: SubscriptionScreenProps) { const [selectedPlan, setSelectedPlan] = useState<"monthly" | "yearly">("monthly") const [isUpgrading, setIsUpgrading] = useState(false) const handleUpgrade = () => { setIsUpgrading(true) setTimeout(() => { setIsUpgrading(false) // Simulate successful upgrade user.isPremium = true }, 2000) } const plans = { monthly: { price: "GHS 15", period: "per month", savings: null, }, yearly: { price: "GHS 150", period: "per year", savings: "Save GHS 30", }, } if (user.isPremium) { return (

Premium Active

You're enjoying all premium features

Premium Member

Premium Subscription

Next billing: March 15, 2024

GHS 15/month

Your Premium Features

Enhanced citizen search with additional details

Priority customer support

Advanced service management tools

Early access to new features

Manage Subscription

) } return (

Upgrade to Premium

Unlock enhanced features and capabilities

{/* Plan Selection */}

{/* Features Comparison */} Premium Features

Basic citizen search

Enhanced search details

Date of birth in search

Partial ID display

Priority support

Free Premium

{/* Upgrade Button */}

Ready to Upgrade?

Get {plans[selectedPlan].price} {plans[selectedPlan].period} {plans[selectedPlan].savings && ( {plans[selectedPlan].savings} )}

{/* FAQ */}

Frequently Asked Questions

Can I cancel anytime?

Yes, you can cancel your subscription at any time.

What payment methods are accepted?

We accept mobile money, bank cards, and bank transfers.

Is my data secure?

Yes, all premium features maintain the same security standards.

) }