90:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zt6uezrjc89m.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3r5qyv0elhezz.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177"],"ExplicitChatIdProvider"] 91:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zt6uezrjc89m.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3r5qyv0elhezz.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177"],"SWRDataProvider"] 92:T21446,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Shield, Users, FileCheck, Globe, BarChart3, MapPin } from "lucide-react" export default function HomePage() { return (

{/* Hero Section */}

DRC • Zambia • Angola Regional Platform

ASM Digital ID & E-Governance System

Transforming artisanal mining from informal operations into a governed economic pillar through digital identity, transparency, and regional cooperation.

{/* Core Features */}

Platform Capabilities

A comprehensive system for identity management, compliance, and regional interoperability

Digital Identity Registry

Biometric-backed digital IDs for miners, cooperatives, and buyers with credential verification

Site & License Management

Geo-tagged mining sites with digital licensing, renewal tracking, and permit management

Production Tracking

Blockchain-anchored transaction logs for mineral traceability and supply chain transparency

Compliance & Inspection

Digital inspection protocols, safety assessments, and automated compliance scoring

Regional Interoperability

Cross-border API infrastructure for DRC, Zambia, and Angola data sharing

Analytics & Reporting

Real-time dashboards, tax collection tracking, and export-ready data insights

{/* Regional Stats */}

Countries Connected

100%

Digital Traceability

Real-time

Compliance Monitoring

{/* CTA Section */}

Ready to Transform Artisanal Mining?

Join the regional network of transparent, compliant, and governed mining operations

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true" import { RegisterForm } from "@/components/register-form" import { Card } from "@/components/ui/card" import Link from "next/link" export default function RegisterPage() { return (

Digital ID Registration

Already have an account?{" "} Login here

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" import { LoginForm } from "@/components/login-form" import { Card } from "@/components/ui/card" import Link from "next/link" export default function LoginPage() { return (

Welcome Back

Don't have an account?{" "} Register here

) } [V0_FILE]typescriptreact:file="components/register-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useRouter } from "next/navigation" import { Card } from "@/components/ui/card" import { User, Building2, ShoppingBag } from "lucide-react" type UserType = "miner" | "cooperative" | "buyer" | null export function RegisterForm() { const router = useRouter() const [userType, setUserType] = useState(null) const [formData, setFormData] = useState({ email: "", password: "", confirmPassword: "", fullName: "", idNumber: "", phoneNumber: "", country: "", region: "", organizationName: "", registrationNumber: "", tinNumber: "", }) const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate registration await new Promise((resolve) => setTimeout(resolve, 1500)) // Store user data in localStorage for demo localStorage.setItem( "asm_user", JSON.stringify({ ...formData, userType, id: Math.random().toString(36).substr(2, 9), digitalIdNumber: `ASM-${userType?.toUpperCase()}-${Math.random().toString(36).substr(2, 6).toUpperCase()}`, registeredAt: new Date().toISOString(), }), ) setIsLoading(false) router.push("/dashboard") } if (!userType) { return (

Select Your Registration Type

Choose the category that best describes you

setUserType("miner")} >

Individual Miner

Artisanal miner working independently

setUserType("cooperative")} >

Cooperative

Mining cooperative or association

setUserType("buyer")} >

Buyer/Trader

Mineral buyer or trading company

) } return (

{userType === "miner" && } {userType === "cooperative" && } {userType === "buyer" && } {userType} Registration

{userType === "miner" ? "Full Name" : "Contact Person Name"} setFormData({ ...formData, fullName: e.target.value })} />

National ID Number setFormData({ ...formData, idNumber: e.target.value })} />

{(userType === "cooperative" || userType === "buyer") && (

Organization Name setFormData({ ...formData, organizationName: e.target.value })} />

Registration Number setFormData({ ...formData, registrationNumber: e.target.value })} />

)}

Country

Region/Province setFormData({ ...formData, region: e.target.value })} />

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

TIN Number (Optional) setFormData({ ...formData, tinNumber: e.target.value })} />

Email Address setFormData({ ...formData, email: e.target.value })} />

Password setFormData({ ...formData, password: e.target.value })} />

Confirm Password setFormData({ ...formData, confirmPassword: e.target.value })} />

By registering, you agree to provide accurate information and comply with regional ASM regulations. Your digital ID will be verified by authorized government officials.

) } [V0_FILE]typescriptreact:file="components/login-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useRouter } from "next/navigation" export function LoginForm() { const router = useRouter() const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate login await new Promise((resolve) => setTimeout(resolve, 1000)) setIsLoading(false) router.push("/dashboard") } return ( ) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Shield, MapPin, FileText, TrendingUp, CheckCircle2, AlertCircle, User, Building2, ShoppingBag, } from "lucide-react" import Link from "next/link" export default function DashboardPage() { const [userData, setUserData] = useState(null) useEffect(() => { const stored = localStorage.getItem("asm_user") if (stored) { setUserData(JSON.parse(stored)) } }, []) if (!userData) { return (

Loading dashboard...

) } const getUserIcon = () => { switch (userData.userType) { case "miner": return case "cooperative": return case "buyer": return default: return } } return (

{/* Header */}

ASM

ASM Digital Platform

Regional E-Governance System

{/* User Profile Card */}

{getUserIcon()}

{userData.fullName}

{userData.organizationName &&

{userData.organizationName}

}

{userData.userType} {userData.country}

Digital ID Number

{userData.digitalIdNumber}

Verified

{/* Quick Actions */}

Sites & Licenses

Manage mining sites and permits

Production Log

Track mineral production

Compliance

View inspection reports

Analytics

View performance data

{/* Registration Status */}

Registration Complete

Email {userData.email}

Phone {userData.phoneNumber}

Region {userData.region}

Registered {new Date(userData.registeredAt).toLocaleDateString()}

Next Steps

Complete Biometric Verification

Visit nearest registration center

Add geo-tagged locations

Apply for Digital License

Submit required documents

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "ASM Digital ID & E-Governance System", description: "Regional artisanal mining platform for DRC, Zambia, and Angola", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); /* Updated to blue primary for government trust */ --primary: oklch(0.5 0.2 250); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); /* Added accent color for highlights */ --accent: oklch(0.65 0.15 150); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.5 0.2 250); --chart-1: oklch(0.5 0.2 250); --chart-2: oklch(0.65 0.15 150); --chart-3: oklch(0.6 0.15 200); --chart-4: oklch(0.7 0.18 100); --chart-5: oklch(0.55 0.22 280); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.5 0.2 250); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.6 0.2 250); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.7 0.15 150); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.6 0.2 250); --chart-1: oklch(0.6 0.2 250); --chart-2: oklch(0.7 0.15 150); --chart-3: oklch(0.65 0.15 200); --chart-4: oklch(0.75 0.18 100); --chart-5: oklch(0.65 0.22 280); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.6 0.2 250); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/dashboard/sites/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { MapPin, Plus, Search, FileText, Clock, CheckCircle2, AlertCircle, Calendar } from "lucide-react" import Link from "next/link" type Site = { id: string name: string coordinates: string status: "active" | "pending" | "expired" licenseNumber?: string licenseExpiry?: string area: string mineralType: string registeredDate: string } export default function SitesPage() { const [searchTerm, setSearchTerm] = useState("") const [sites] = useState([ { id: "1", name: "Kasai Mining Site A", coordinates: "-5.0369, 23.4294", status: "active", licenseNumber: "DRC-MIN-2024-001", licenseExpiry: "2025-12-31", area: "2.5 hectares", mineralType: "Cobalt, Copper", registeredDate: "2024-01-15", }, { id: "2", name: "Lualaba Artisanal Zone", coordinates: "-10.4342, 25.4742", status: "pending", area: "1.8 hectares", mineralType: "Copper", registeredDate: "2024-11-20", }, { id: "3", name: "Kolwezi Cooperative Site", coordinates: "-10.7153, 25.4667", status: "active", licenseNumber: "DRC-MIN-2023-045", licenseExpiry: "2025-06-30", area: "3.2 hectares", mineralType: "Cobalt", registeredDate: "2023-06-15", }, ]) const filteredSites = sites.filter((site) => site.name.toLowerCase().includes(searchTerm.toLowerCase())) const getStatusIcon = (status: string) => { switch (status) { case "active": return case "pending": return case "expired": return default: return null } } const getStatusColor = (status: string) => { switch (status) { case "active": return "default" case "pending": return "secondary" case "expired": return "destructive" default: return "outline" } } return (

Mining Sites & Licenses

Manage your registered mining sites and permits

{/* Stats Overview */}

Total Sites

{sites.length}

Active Licenses

{sites.filter((s) => s.status === "active").length}

Pending Review

{sites.filter((s) => s.status === "pending").length}

Total Area

7.5ha

{/* Search */}

setSearchTerm(e.target.value)} className="pl-10" />

{/* Sites List */}

{filteredSites.map((site) => (

{site.name}

{getStatusIcon(site.status)} {site.status} {site.licenseNumber && {site.licenseNumber}}

Coordinates

{site.coordinates}

Area

{site.area}

Mineral Type

{site.mineralType}

{site.licenseExpiry && (

License Expiry

{new Date(site.licenseExpiry).toLocaleDateString()}

)}

{site.status === "pending" && } {site.status === "active" && ( )}

))}

) } [V0_FILE]typescriptreact:file="app/dashboard/sites/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/sites/register/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { MapPin, Upload, AlertCircle } from "lucide-react" import { useRouter } from "next/navigation" export default function RegisterSitePage() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [formData, setFormData] = useState({ siteName: "", latitude: "", longitude: "", area: "", mineralType: "", landOwnership: "", description: "", nearestTown: "", accessRoute: "", }) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 1500)) setIsLoading(false) router.push("/dashboard/sites") } return (

Register New Mining Site

Add a new geo-tagged mining site to your registry

{/* Site Information */}

Site Information

Site Name * setFormData({ ...formData, siteName: e.target.value })} />

Latitude * setFormData({ ...formData, latitude: e.target.value })} />

Longitude * setFormData({ ...formData, longitude: e.target.value })} />

GPS Coordinates Required

Use a GPS device or mobile app to get accurate coordinates. The site will be geo-tagged for verification and mapping purposes.

{/* Mining Details */}

Mining Details

Total Area (hectares) * setFormData({ ...formData, area: e.target.value })} />

Mineral Type * setFormData({ ...formData, mineralType: e.target.value })} />

Land Ownership Status *

Site Description

setFormData({ ...formData, description: e.target.value })}
                    />
                  </div>
                </div>
              </div>

{/* Location Access */}
              <div>
                <h2 className="text-lg font-semibold mb-4">Location & Access</h2>
                <div className="space-y-4">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="nearestTown">Nearest Town/City *</Label>
                      <Input
                        id="nearestTown"
                        required
                        placeholder="e.g., Kolwezi"
                        value={formData.nearestTown}
                        onChange={(e) => setFormData({ ...formData, nearestTown: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="accessRoute">Access Route</Label>
                      <Input
                        id="accessRoute"
                        placeholder="e.g., Via N39 Road, 15km north"
                        value={formData.accessRoute}
                        onChange={(e) => setFormData({ ...formData, accessRoute: e.target.value })}
                      />
                    </div>
                  </div>
                </div>
              </div>

{/* Supporting Documents */}
              <div>
                <h2 className="text-lg font-semibold mb-4">Supporting Documents</h2>
                <div className="space-y-4">
                  <div className="border-2 border-dashed rounded-lg p-6 text-center hover:border-primary/50 transition-colors cursor-pointer">
                    <Upload className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
                    <p className="text-sm font-medium mb-1">Upload Site Photos</p>
                    <p className="text-xs text-muted-foreground">PNG, JPG up to 10MB (optional)</p>
                    <input type="file" multiple accept="image/*" className="hidden" />
                  </div>

<div className="border-2 border-dashed rounded-lg p-6 text-center hover:border-primary/50 transition-colors cursor-pointer">
                    <Upload className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
                    <p className="text-sm font-medium mb-1">Upload Land Documentation</p>
                    <p className="text-xs text-muted-foreground">PDF, DOC up to 10MB (optional)</p>
                    <input type="file" multiple accept=".pdf,.doc,.docx" className="hidden" />
                  </div>
                </div>
              </div>

{/* Warning */}
              <div className="bg-amber-500/10 border border-amber-500/20 p-4 rounded-lg flex items-start gap-3">
                <AlertCircle className="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
                <div className="text-sm">
                  <p className="font-medium mb-1">Site Verification Required</p>
                  <p className="text-muted-foreground">
                    After registration, an authorized inspector will verify the site coordinates and documentation
                    before a license can be issued. This typically takes 5-10 business days.
                  </p>
                </div>
              </div>

{/* Submit */}
              <div className="flex gap-3 justify-end pt-4">
                <Button type="button" variant="outline" onClick={() => router.back()}>
                  Cancel
                </Button>
                <Button type="submit" disabled={isLoading}>
                  {isLoading ? "Registering Site..." : "Register Site"}
                </Button>
              </div>
            </form>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/production-log/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Package, Plus, Search, Hash, Calendar, TrendingUp, ArrowUpRight, CheckCircle2 } from "lucide-react"
import Link from "next/link"

type Transaction = {
  id: string
  date: string
  mineralType: string
  quantity: number
  unit: string
  buyer?: string
  site: string
  blockchainHash: string
  status: "verified" | "pending"
  price?: number
  currency?: string
}

export default function ProductionLogPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [transactions] = useState<Transaction[]>([
    {
      id: "TXN-001",
      date: "2024-12-15",
      mineralType: "Cobalt Ore",
      quantity: 250,
      unit: "kg",
      buyer: "Global Minerals Ltd",
      site: "Kasai Mining Site A",
      blockchainHash: "0x7f9fade1c0d57a7af66ab4ead79fade1c0d57a7af66ab4ead7c2c2eb7b11a91385",
      status: "verified",
      price: 12500,
      currency: "USD",
    },
    {
      id: "TXN-002",
      date: "2024-12-20",
      mineralType: "Copper Concentrate",
      quantity: 180,
      unit: "kg",
      site: "Kolwezi Cooperative Site",
      blockchainHash: "0x3c2c2eb7b11a91385f9fade1c0d57a7af66ab4ead79fade1c0d57a7af66ab4ea",
      status: "pending",
    },
    {
      id: "TXN-003",
      date: "2024-12-22",
      mineralType: "Cobalt Ore",
      quantity: 320,
      unit: "kg",
      buyer: "Regional Trading Co",
      site: "Kasai Mining Site A",
      blockchainHash: "0x91385f9fade1c0d57a7af66ab4ead79fade1c0d57a7af66ab4ead7c2c2eb7b11a",
      status: "verified",
      price: 16000,
      currency: "USD",
    },
  ])

const filteredTransactions = transactions.filter(
    (txn) =>
      txn.mineralType.toLowerCase().includes(searchTerm.toLowerCase()) ||
      txn.site.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const totalProduction = transactions.reduce((sum, txn) => sum + txn.quantity, 0)
  const totalRevenue = transactions.reduce((sum, txn) => sum + (txn.price || 0), 0)
  const verifiedCount = transactions.filter((t) => t.status === "verified").length

return (
    <div className="min-h-screen bg-background">
      <div className="border-b bg-card">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold">Production & Transaction Log</h1>
              <p className="text-sm text-muted-foreground">Track mineral production with blockchain verification</p>
            </div>
            <Button asChild>
              <Link href="/dashboard/production-log/new">
                <Plus className="h-4 w-4 mr-2" />
                Log Production
              </Link>
            </Button>
          </div>
        </div>
      </div>

<div className="container mx-auto px-4 py-8">
        {/* Stats Overview */}
        <div className="grid md:grid-cols-4 gap-4 mb-8">
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Total Production</p>
                <p className="text-2xl font-bold">
                  {totalProduction}
                  <span className="text-sm font-normal ml-1">kg</span>
                </p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
                <Package className="h-6 w-6 text-primary" />
              </div>
            </div>
          </Card>

<Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Total Revenue</p>
                <p className="text-2xl font-bold">
                  ${totalRevenue.toLocaleString()}
                  <span className="text-sm font-normal ml-1">USD</span>
                </p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-green-500/10 flex items-center justify-center">
                <TrendingUp className="h-6 w-6 text-green-600 dark:text-green-400" />
              </div>
            </div>
          </Card>

<Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Verified Entries</p>
                <p className="text-2xl font-bold">{verifiedCount}</p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center">
                <CheckCircle2 className="h-6 w-6 text-accent" />
              </div>
            </div>
          </Card>

<Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Transactions</p>
                <p className="text-2xl font-bold">{transactions.length}</p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
                <Hash className="h-6 w-6 text-primary" />
              </div>
            </div>
          </Card>
        </div>

{/* Search */}
        <div className="mb-6">
          <div className="relative max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search by mineral or site..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

{/* Transactions List */}
        <div className="space-y-4">
          {filteredTransactions.map((txn) => (
            <Card key={txn.id} className="p-6 hover:shadow-md transition-shadow">
              <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                <div className="flex-1">
                  <div className="flex items-start gap-3 mb-3">
                    <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                      <Package className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <div className="flex items-center gap-2 mb-1">
                        <h3 className="font-semibold text-lg">{txn.mineralType}</h3>
                        <Badge variant={txn.status === "verified" ? "default" : "secondary"} className="capitalize">
                          {txn.status === "verified" && <CheckCircle2 className="h-3 w-3 mr-1" />}
                          {txn.status}
                        </Badge>
                      </div>
                      <div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
                        <span className="flex items-center gap-1">
                          <Calendar className="h-3 w-3" />
                          {new Date(txn.date).toLocaleDateString()}
                        </span>
                        <span>•</span>
                        <span>{txn.site}</span>
                      </div>
                    </div>
                  </div>

<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-3">
                    <div>
                      <p className="text-xs text-muted-foreground mb-1">Quantity</p>
                      <p className="font-semibold">
                        {txn.quantity} {txn.unit}
                      </p>
                    </div>
                    <div>
                      <p className="text-xs text-muted-foreground mb-1">Transaction ID</p>
                      <p className="font-mono text-sm">{txn.id}</p>
                    </div>
                    {txn.buyer && (
                      <div>
                        <p className="text-xs text-muted-foreground mb-1">Buyer</p>
                        <p className="font-medium text-sm">{txn.buyer}</p>
                      </div>
                    )}
                    {txn.price && (
                      <div>
                        <p className="text-xs text-muted-foreground mb-1">Value</p>
                        <p className="font-semibold text-green-600 dark:text-green-400">
                          ${txn.price.toLocaleString()} {txn.currency}
                        </p>
                      </div>
                    )}
                  </div>

{/* Blockchain Hash */}
                  <div className="bg-muted/50 p-3 rounded-lg">
                    <div className="flex items-start gap-2">
                      <Hash className="h-4 w-4 text-muted-foreground flex-shrink-0 mt-0.5" />
                      <div className="flex-1 min-w-0">
                        <p className="text-xs text-muted-foreground mb-1">Blockchain Hash</p>
                        <p className="font-mono text-xs break-all">{txn.blockchainHash}</p>
                      </div>
                      <Button variant="ghost" size="sm" className="flex-shrink-0">
                        <ArrowUpRight className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </div>

<div className="flex gap-2">
                  <Button variant="outline" size="sm">
                    View Details
                  </Button>
                  {txn.status === "pending" && (
                    <Button size="sm" variant="secondary">
                      Verify
                    </Button>
                  )}
                </div>
              </div>
            </Card>
          ))}
        </div>

{filteredTransactions.length === 0 && (
          <Card className="p-12 text-center">
            <Package className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
            <h3 className="font-semibold mb-2">No transactions found</h3>
            <p className="text-sm text-muted-foreground mb-4">Start by logging your first production entry</p>
            <Button asChild>
              <Link href="/dashboard/production-log/new">Log Production</Link>
            </Button>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/production-log/loading.tsx" isEdit="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/production-log/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Package, AlertCircle, Hash } from "lucide-react"
import { useRouter } from "next/navigation"

export default function NewProductionPage() {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [formData, setFormData] = useState({
    site: "",
    mineralType: "",
    quantity: "",
    unit: "kg",
    productionDate: "",
    buyer: "",
    price: "",
    currency: "USD",
    notes: "",
  })

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

// Simulate blockchain anchoring
    await new Promise((resolve) => setTimeout(resolve, 2000))

setIsLoading(false)
    router.push("/dashboard/production-log")
  }

return (
    <div className="min-h-screen bg-background">
      <div className="border-b bg-card">
        <div className="container mx-auto px-4 py-4">
          <h1 className="text-2xl font-bold">Log New Production</h1>
          <p className="text-sm text-muted-foreground">Record mineral production with blockchain verification</p>
        </div>
      </div>

<div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <Card className="p-6 md:p-8">
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Production Details */}
              <div>
                <h2 className="text-lg font-semibold mb-4">Production Details</h2>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="site">Mining Site *</Label>
                    <select
                      id="site"
                      required
                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                      value={formData.site}
                      onChange={(e) => setFormData({ ...formData, site: e.target.value })}
                    >
                      <option value="">Select site</option>
                      <option value="Kasai Mining Site A">Kasai Mining Site A</option>
                      <option value="Lualaba Artisanal Zone">Lualaba Artisanal Zone</option>
                      <option value="Kolwezi Cooperative Site">Kolwezi Cooperative Site</option>
                    </select>
                  </div>

<div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="mineralType">Mineral Type *</Label>
                      <select
                        id="mineralType"
                        required
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                        value={formData.mineralType}
                        onChange={(e) => setFormData({ ...formData, mineralType: e.target.value })}
                      >
                        <option value="">Select mineral</option>
                        <option value="Cobalt Ore">Cobalt Ore</option>
                        <option value="Copper Ore">Copper Ore</option>
                        <option value="Copper Concentrate">Copper Concentrate</option>
                        <option value="Cobalt Concentrate">Cobalt Concentrate</option>
                        <option value="Gold">Gold</option>
                        <option value="Tantalum">Tantalum</option>
                      </select>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="productionDate">Production Date *</Label>
                      <Input
                        id="productionDate"
                        type="date"
                        required
                        value={formData.productionDate}
                        onChange={(e) => setFormData({ ...formData, productionDate: e.target.value })}
                      />
                    </div>
                  </div>

<div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="quantity">Quantity *</Label>
                      <Input
                        id="quantity"
                        type="number"
                        required
                        step="0.01"
                        placeholder="250"
                        value={formData.quantity}
                        onChange={(e) => setFormData({ ...formData, quantity: e.target.value })}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="unit">Unit *</Label>
                      <select
                        id="unit"
                        required
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                        value={formData.unit}
                        onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
                      >
                        <option value="kg">Kilograms (kg)</option>
                        <option value="g">Grams (g)</option>
                        <option value="ton">Tons</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>

{/* Transaction Details (Optional) */}
              <div>
                <h2 className="text-lg font-semibold mb-4">Transaction Details (Optional)</h2>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="buyer">Buyer/Trading Company</Label>
                    <Input
                      id="buyer"
                      placeholder="e.g., Global Minerals Ltd"
                      value={formData.buyer}
                      onChange={(e) => setFormData({ ...formData, buyer: e.target.value })}
                    />
                  </div>

<div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="price">Sale Price</Label>
                      <Input
                        id="price"
                        type="number"
                        step="0.01"
                        placeholder="12500"
                        value={formData.price}
                        onChange={(e) => setFormData({ ...formData, price: e.target.value })}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="currency">Currency</Label>
                      <select
                        id="currency"
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                        value={formData.currency}
                        onChange={(e) => setFormData({ ...formData, currency: e.target.value })}
                      >
                        <option value="USD">USD</option>
                        <option value="CDF">CDF (Congolese Franc)</option>
                        <option value="ZMW">ZMW (Zambian Kwacha)</option>
                        <option value="AOA">AOA (Angolan Kwanza)</option>
                        <option value="EUR">EUR</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>

{/* Additional Notes */}
              <div>
                <h2 className="text-lg font-semibold mb-4">Additional Information</h2>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="notes">Notes</Label>
                    <textarea
                      id="notes"
                      rows={4}
                      className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                      placeholder="Add any relevant notes about this production entry..."
                      value={formData.notes}
                      onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                    />
                  </div>
                </div>
              </div>

{/* Blockchain Info */}
              <div className="bg-primary/5 border border-primary/20 p-4 rounded-lg flex items-start gap-3">
                <Hash className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                <div className="text-sm">
                  <p className="font-medium mb-1">Blockchain Verification</p>
                  <p className="text-muted-foreground">
                    This production entry will be anchored to the blockchain for immutable traceability. A unique hash
                    will be generated to verify the authenticity of this record.
                  </p>
                </div>
              </div>

{/* Warning */}
              <div className="bg-amber-500/10 border border-amber-500/20 p-4 rounded-lg flex items-start gap-3">
                <AlertCircle className="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
                <div className="text-sm">
                  <p className="font-medium mb-1">Important</p>
                  <p className="text-muted-foreground">
                    All production data is permanent once logged. Ensure all information is accurate before submitting.
                    False reporting may result in license suspension.
                  </p>
                </div>
              </div>

{/* Submit */}
              <div className="flex gap-3 justify-end pt-4">
                <Button type="button" variant="outline" onClick={() => router.back()}>
                  Cancel
                </Button>
                <Button type="submit" disabled={isLoading}>
                  <Package className="h-4 w-4 mr-2" />
                  {isLoading ? "Anchoring to Blockchain..." : "Log Production"}
                </Button>
              </div>
            </form>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/compliance/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Shield, FileText, AlertTriangle, CheckCircle2, Calendar, User, TrendingUp, Award, XCircle } from "lucide-react"
import Link from "next/link"

type Inspection = {
  id: string
  date: string
  inspector: string
  site: string
  type: "safety" | "environmental" | "operational" | "labor"
  status: "passed" | "failed" | "conditional"
  score: number
  findings: number
  nextInspection?: string
}

export default function CompliancePage() {
  const [inspections] = useState<Inspection[]>([
    {
      id: "INS-001",
      date: "2024-11-15",
      inspector: "Jean Mukendi",
      site: "Kasai Mining Site A",
      type: "safety",
      status: "passed",
      score: 92,
      findings: 2,
      nextInspection: "2025-02-15",
    },
    {
      id: "INS-002",
      date: "2024-12-01",
      inspector: "Marie Kalala",
      site: "Kolwezi Cooperative Site",
      type: "environmental",
      status: "conditional",
      score: 75,
      findings: 5,
      nextInspection: "2025-01-15",
    },
    {
      id: "INS-003",
      date: "2024-12-10",
      inspector: "Joseph Tshisekedi",
      site: "Kasai Mining Site A",
      type: "operational",
      status: "passed",
      score: 88,
      findings: 3,
      nextInspection: "2025-03-10",
    },
  ])

const overallComplianceScore = Math.round(inspections.reduce((sum, insp) => sum + insp.score, 0) / inspections.length)
  const passedCount = inspections.filter((i) => i.status === "passed").length
  const conditionalCount = inspections.filter((i) => i.status === "conditional").length
  const totalFindings = inspections.reduce((sum, insp) => sum + insp.findings, 0)

const getStatusColor = (status: string) => {
    switch (status) {
      case "passed":
        return "default"
      case "conditional":
        return "secondary"
      case "failed":
        return "destructive"
      default:
        return "outline"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "passed":
        return <CheckCircle2 className="h-4 w-4" />
      case "conditional":
        return <AlertTriangle className="h-4 w-4" />
      case "failed":
        return <XCircle className="h-4 w-4" />
      default:
        return null
    }
  }

const getScoreColor = (score: number) => {
    if (score >= 85) return "text-green-600 dark:text-green-400"
    if (score >= 70) return "text-amber-600 dark:text-amber-400"
    return "text-red-600 dark:text-red-400"
  }

return (
    <div className="min-h-screen bg-background">
      <div className="border-b bg-card">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold">Compliance & Inspections</h1>
              <p className="text-sm text-muted-foreground">Track safety, environmental, and operational compliance</p>
            </div>
            <Button variant="outline" asChild>
              <Link href="/dashboard/compliance/request">Request Inspection</Link>
            </Button>
          </div>
        </div>
      </div>

<div className="container mx-auto px-4 py-8">
        {/* Overall Compliance Score */}
        <Card className="p-6 mb-8">
          <div className="flex flex-col md:flex-row gap-8">
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-4">
                <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
                  <Shield className="h-6 w-6 text-primary" />
                </div>
                <div>
                  <h2 className="text-lg font-semibold">Overall Compliance Score</h2>
                  <p className="text-sm text-muted-foreground">Based on recent inspections</p>
                </div>
              </div>
              <div className="flex items-end gap-4">
                <div className={`text-5xl font-bold ${getScoreColor(overallComplianceScore)}`}>
                  {overallComplianceScore}
                </div>
                <div className="pb-2">
                  <Badge variant={overallComplianceScore >= 85 ? "default" : "secondary"} className="mb-1">
                    {overallComplianceScore >= 85
                      ? "Excellent"
                      : overallComplianceScore >= 70
                        ? "Good"
                        : "Needs Improvement"}
                  </Badge>
                </div>
              </div>
              <Progress value={overallComplianceScore} className="mt-4 h-3" />
            </div>

<div className="grid grid-cols-3 gap-4">
              <div className="text-center p-4 bg-muted/50 rounded-lg">
                <div className="h-10 w-10 rounded-full bg-green-500/10 flex items-center justify-center mx-auto mb-2">
                  <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400" />
                </div>
                <p className="text-2xl font-bold">{passedCount}</p>
                <p className="text-xs text-muted-foreground">Passed</p>
              </div>
              <div className="text-center p-4 bg-muted/50 rounded-lg">
                <div className="h-10 w-10 rounded-full bg-amber-500/10 flex items-center justify-center mx-auto mb-2">
                  <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-400" />
                </div>
                <p className="text-2xl font-bold">{conditionalCount}</p>
                <p className="text-xs text-muted-foreground">Conditional</p>
              </div>
              <div className="text-center p-4 bg-muted/50 rounded-lg">
                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-2">
                  <FileText className="h-5 w-5 text-primary" />
                </div>
                <p className="text-2xl font-bold">{totalFindings}</p>
                <p className="text-xs text-muted-foreground">Findings</p>
              </div>
            </div>
          </div>
        </Card>

{/* Stats Cards */}
        <div className="grid md:grid-cols-4 gap-4 mb-8">
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Total Inspections</p>
                <p className="text-2xl font-bold">{inspections.length}</p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
                <FileText className="h-6 w-6 text-primary" />
              </div>
            </div>
          </Card>

<Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Pass Rate</p>
                <p className="text-2xl font-bold">{Math.round((passedCount / inspections.length) * 100)}%</p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-green-500/10 flex items-center justify-center">
                <TrendingUp className="h-6 w-6 text-green-600 dark:text-green-400" />
              </div>
            </div>
          </Card>

<Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Avg Score</p>
                <p className="text-2xl font-bold">{overallComplianceScore}</p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center">
                <Award className="h-6 w-6 text-accent" />
              </div>
            </div>
          </Card>

<Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Open Issues</p>
                <p className="text-2xl font-bold">{conditionalCount}</p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-amber-500/10 flex items-center justify-center">
                <AlertTriangle className="h-6 w-6 text-amber-600 dark:text-amber-400" />
              </div>
            </div>
          </Card>
        </div>

{/* Inspections List */}
        <div>
          <h2 className="text-xl font-semibold mb-4">Recent Inspections</h2>
          <div className="space-y-4">
            {inspections.map((inspection) => (
              <Card key={inspection.id} className="p-6 hover:shadow-md transition-shadow">
                <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                  <div className="flex-1">
                    <div className="flex items-start gap-3 mb-3">
                      <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                        <Shield className="h-5 w-5 text-primary" />
                      </div>
                      <div>
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="font-semibold text-lg">{inspection.site}</h3>
                          <Badge variant={getStatusColor(inspection.status) as any} className="capitalize">
                            {getStatusIcon(inspection.status)}
                            <span className="ml-1">{inspection.status}</span>
                          </Badge>
                          <Badge variant="outline" className="capitalize">
                            {inspection.type}
                          </Badge>
                        </div>
                        <div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
                          <span className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            {new Date(inspection.date).toLocaleDateString()}
                          </span>
                          <span>•</span>
                          <span className="flex items-center gap-1">
                            <User className="h-3 w-3" />
                            {inspection.inspector}
                          </span>
                        </div>
                      </div>
                    </div>

<div className="grid sm:grid-cols-3 gap-4">
                      <div>
                        <p className="text-xs text-muted-foreground mb-1">Compliance Score</p>
                        <p className={`text-2xl font-bold ${getScoreColor(inspection.score)}`}>{inspection.score}</p>
                        <Progress value={inspection.score} className="mt-1 h-2" />
                      </div>
                      <div>
                        <p className="text-xs text-muted-foreground mb-1">Findings</p>
                        <p className="text-lg font-semibold">
                          {inspection.findings} {inspection.findings === 1 ? "issue" : "issues"}
                        </p>
                      </div>
                      {inspection.nextInspection && (
                        <div>
                          <p className="text-xs text-muted-foreground mb-1">Next Inspection</p>
                          <p className="text-sm font-medium">
                            {new Date(inspection.nextInspection).toLocaleDateString()}
                          </p>
                        </div>
                      )}
                    </div>
                  </div>

<div className="flex gap-2">
                    <Button variant="outline" size="sm">
                      View Report
                    </Button>
                    {inspection.status === "conditional" && (
                      <Button size="sm" variant="secondary">
                        Action Plan
                      </Button>
                    )}
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>

{/* Compliance Categories */}
        <div className="mt-8">
          <h2 className="text-xl font-semibold mb-4">Compliance Categories</h2>
          <div className="grid md:grid-cols-2 gap-4">
            <Card className="p-6">
              <div className="flex items-start gap-3 mb-4">
                <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                  <Shield className="h-5 w-5 text-primary" />
                </div>
                <div>
                  <h3 className="font-semibold mb-1">Safety Compliance</h3>
                  <p className="text-sm text-muted-foreground">Worker safety, equipment, emergency protocols</p>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Score</span>
                <span className="text-lg font-bold text-green-600 dark:text-green-400">92/100</span>
              </div>
              <Progress value={92} className="mt-2 h-2" />
            </Card>

<Card className="p-6">
              <div className="flex items-start gap-3 mb-4">
                <div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center flex-shrink-0">
                  <TrendingUp className="h-5 w-5 text-accent" />
                </div>
                <div>
                  <h3 className="font-semibold mb-1">Environmental Compliance</h3>
                  <p className="text-sm text-muted-foreground">Land rehabilitation, waste management, water quality</p>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Score</span>
                <span className="text-lg font-bold text-amber-600 dark:text-amber-400">75/100</span>
              </div>
              <Progress value={75} className="mt-2 h-2" />
            </Card>

<Card className="p-6">
              <div className="flex items-start gap-3 mb-4">
                <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                  <FileText className="h-5 w-5 text-primary" />
                </div>
                <div>
                  <h3 className="font-semibold mb-1">Operational Compliance</h3>
                  <p className="text-sm text-muted-foreground">Licensing, documentation, production records</p>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Score</span>
                <span className="text-lg font-bold text-green-600 dark:text-green-400">88/100</span>
              </div>
              <Progress value={88} className="mt-2 h-2" />
            </Card>

<Card className="p-6">
              <div className="flex items-start gap-3 mb-4">
                <div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center flex-shrink-0">
                  <User className="h-5 w-5 text-accent" />
                </div>
                <div>
                  <h3 className="font-semibold mb-1">Labor Compliance</h3>
                  <p className="text-sm text-muted-foreground">Worker rights, child labor prevention, fair wages</p>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Score</span>
                <span className="text-lg font-bold text-green-600 dark:text-green-400">95/100</span>
              </div>
              <Progress value={95} className="mt-2 h-2" />
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/compliance/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/compliance/request/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Shield, Calendar, AlertCircle } from "lucide-react"
import { useRouter } from "next/navigation"

export default function RequestInspectionPage() {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [formData, setFormData] = useState({
    site: "",
    inspectionType: "",
    preferredDate: "",
    reason: "",
    urgency: "normal",
    contactPerson: "",
    contactPhone: "",
    additionalNotes: "",
  })

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

await new Promise((resolve) => setTimeout(resolve, 1500))

setIsLoading(false)
    router.push("/dashboard/compliance")
  }

return (
    <div className="min-h-screen bg-background">
      <div className="border-b bg-card">
        <div className="container mx-auto px-4 py-4">
          <h1 className="text-2xl font-bold">Request Inspection</h1>
          <p className="text-sm text-muted-foreground">Submit a request for site inspection</p>
        </div>
      </div>

<div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <Card className="p-6 md:p-8">
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Inspection Details */}
              <div>
                <h2 className="text-lg font-semibold mb-4">Inspection Details</h2>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="site">Mining Site *</Label>
                    <select
                      id="site"
                      required
                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                      value={formData.site}
                      onChange={(e) => setFormData({ ...formData, site: e.target.value })}
                    >
                      <option value="">Select site</option>
                      <option value="Kasai Mining Site A">Kasai Mining Site A</option>
                      <option value="Lualaba Artisanal Zone">Lualaba Artisanal Zone</option>
                      <option value="Kolwezi Cooperative Site">Kolwezi Cooperative Site</option>
                    </select>
                  </div>

<div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="inspectionType">Inspection Type *</Label>
                      <select
                        id="inspectionType"
                        required
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                        value={formData.inspectionType}
                        onChange={(e) => setFormData({ ...formData, inspectionType: e.target.value })}
                      >
                        <option value="">Select type</option>
                        <option value="safety">Safety Inspection</option>
                        <option value="environmental">Environmental Inspection</option>
                        <option value="operational">Operational Inspection</option>
                        <option value="labor">Labor Compliance</option>
                        <option value="comprehensive">Comprehensive Audit</option>
                      </select>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="urgency">Urgency Level *</Label>
                      <select
                        id="urgency"
                        required
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                        value={formData.urgency}
                        onChange={(e) => setFormData({ ...formData, urgency: e.target.value })}
                      >
                        <option value="normal">Normal (14-21 days)</option>
                        <option value="urgent">Urgent (7-10 days)</option>
                        <option value="emergency">Emergency (1-3 days)</option>
                      </select>
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="preferredDate">Preferred Date</Label>
                    <Input
                      id="preferredDate"
                      type="date"
                      value={formData.preferredDate}
                      onChange={(e) => setFormData({ ...formData, preferredDate: e.target.value })}
                    />
                    <p className="text-xs text-muted-foreground">Suggested date (subject to inspector availability)</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="reason">Reason for Request *</Label>
                    <textarea
                      id="reason"
                      required
                      rows={4}
                      className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                      placeholder="Explain why you are requesting this inspection..."
                      value={formData.reason}
                      onChange={(e) => setFormData({ ...formData, reason: e.target.value })}
                    />
                  </div>
                </div>
              </div>

{/* Contact Information */}
              <div>
                <h2 className="text-lg font-semibold mb-4">Contact Information</h2>
                <div className="space-y-4">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="contactPerson">Contact Person *</Label>
                      <Input
                        id="contactPerson"
                        required
                        placeholder="Full name"
                        value={formData.contactPerson}
                        onChange={(e) => setFormData({ ...formData, contactPerson: e.target.value })}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="contactPhone">Contact Phone *</Label>
                      <Input
                        id="contactPhone"
                        type="tel"
                        required
                        placeholder="+243 XXX XXX XXX"
                        value={formData.contactPhone}
                        onChange={(e) => setFormData({ ...formData, contactPhone: e.target.value })}
                      />
                    </div>
                  </div>
                </div>
              </div>

{/* Additional Notes */}
              <div>
                <h2 className="text-lg font-semibold mb-4">Additional Information</h2>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="additionalNotes">Additional Notes (Optional)</Label>
                    <textarea
                      id="additionalNotes"
                      rows={4}
                      className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                      placeholder="Any additional information or special requirements..."
                      value={formData.additionalNotes}
                      onChange={(e) => setFormData({ ...formData, additionalNotes: e.target.value })}
                    />
                  </div>
                </div>
              </div>

{/* Info Boxes */}
              <div className="space-y-4">
                <div className="bg-primary/5 border border-primary/20 p-4 rounded-lg flex items-start gap-3">
                  <Calendar className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <div className="text-sm">
                    <p className="font-medium mb-1">Inspection Timeline</p>
                    <p className="text-muted-foreground">
                      Normal requests are processed within 14-21 days. Urgent and emergency requests require additional
                      justification and may incur fees.
                    </p>
                  </div>
                </div>

<div className="bg-amber-500/10 border border-amber-500/20 p-4 rounded-lg flex items-start gap-3">
                  <AlertCircle className="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
                  <div className="text-sm">
                    <p className="font-medium mb-1">Preparation Required</p>
                    <p className="text-muted-foreground">
                      Ensure all documentation, licenses, and records are available on-site. Inspectors may request
                      access to work areas, equipment, and personnel.
                    </p>
                  </div>
                </div>
              </div>

{/* Submit */}
              <div className="flex gap-3 justify-end pt-4">
                <Button type="button" variant="outline" onClick={() => router.back()}>
                  Cancel
                </Button>
                <Button type="submit" disabled={isLoading}>
                  <Shield className="h-4 w-4 mr-2" />
                  {isLoading ? "Submitting Request..." : "Submit Request"}
                </Button>
              </div>
            </form>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/regional/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Globe, Database, Link2, CheckCircle2, AlertCircle, TrendingUp, ArrowRightLeft } from "lucide-react"

type CountryData = {
  code: string
  name: string
  flag: string
  status: "connected" | "pending" | "offline"
  lastSync: string
  miners: number
  sites: number
  transactions: number
}

type CrossBorderTransaction = {
  id: string
  date: string
  fromCountry: string
  toCountry: string
  mineralType: string
  quantity: number
  status: "verified" | "pending"
}

export default function RegionalDashboardPage() {
  const [countries] = useState<CountryData[]>([
    {
      code: "DRC",
      name: "Democratic Republic of Congo",
      flag: "🇨🇩",
      status: "connected",
      lastSync: "2024-12-28T14:30:00",
      miners: 4521,
      sites: 856,
      transactions: 12340,
    },
    {
      code: "ZMB",
      name: "Zambia",
      flag: "🇿🇲",
      status: "connected",
      lastSync: "2024-12-28T14:25:00",
      miners: 2834,
      sites: 523,
      transactions: 8750,
    },
    {
      code: "AGO",
      name: "Angola",
      flag: "🇦🇴",
      status: "connected",
      lastSync: "2024-12-28T14:20:00",
      miners: 1967,
      sites: 412,
      transactions: 5620,
    },
  ])

const [crossBorderTransactions] = useState<CrossBorderTransaction[]>([
    {
      id: "XB-001",
      date: "2024-12-20",
      fromCountry: "DRC",
      toCountry: "ZMB",
      mineralType: "Copper Ore",
      quantity: 500,
      status: "verified",
    },
    {
      id: "XB-002",
      date: "2024-12-22",
      fromCountry: "ZMB",
      toCountry: "AGO",
      mineralType: "Cobalt",
      quantity: 320,
      status: "verified",
    },
    {
      id: "XB-003",
      date: "2024-12-25",
      fromCountry: "DRC",
      toCountry: "AGO",
      mineralType: "Copper Concentrate",
      quantity: 750,
      status: "pending",
    },
  ])

const totalMiners = countries.reduce((sum, c) => sum + c.miners, 0)
  const totalSites = countries.reduce((sum, c) => sum + c.sites, 0)
  const totalTransactions = countries.reduce((sum, c) => sum + c.transactions, 0)
  const connectedCount = countries.filter((c) => c.status === "connected").length

const getStatusColor = (status: string) => {
    switch (status) {
      case "connected":
        return "text-green-600 dark:text-green-400"
      case "pending":
        return "text-amber-600 dark:text-amber-400"
      case "offline":
        return "text-red-600 dark:text-red-400"
      default:
        return "text-muted-foreground"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "connected":
        return <CheckCircle2 className="h-4 w-4" />
      case "pending":
        return <AlertCircle className="h-4 w-4" />
      case "offline":
        return <AlertCircle className="h-4 w-4" />
      default:
        return null
    }
  }

return (
    <div className="min-h-screen bg-background">
      <div className="border-b bg-card">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold">Regional Interoperability</h1>
              <p className="text-sm text-muted-foreground">Cross-border data sharing and API infrastructure</p>
            </div>
            <Button variant="outline">
              <Link2 className="h-4 w-4 mr-2" />
              API Documentation
            </Button>
          </div>
        </div>
      </div>

<div className="container mx-auto px-4 py-8">
        {/* Regional Overview */}
        <Card className="p-6 mb-8 bg-gradient-to-br from-primary/5 to-accent/5">
          <div className="flex items-center gap-3 mb-6">
            <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
              <Globe className="h-6 w-6 text-primary" />
            </div>
            <div>
              <h2 className="text-xl font-semibold">DRC-Zambia-Angola Regional Network</h2>
              <p className="text-sm text-muted-foreground">Real-time cross-border data synchronization</p>
            </div>
          </div>

<div className="grid md:grid-cols-4 gap-6">
            <div className="text-center">
              <div className="text-3xl font-bold text-primary mb-1">{connectedCount}/3</div>
              <div className="text-sm text-muted-foreground">Connected Countries</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-primary mb-1">{totalMiners.toLocaleString()}</div>
              <div className="text-sm text-muted-foreground">Total Registered Miners</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-primary mb-1">{totalSites.toLocaleString()}</div>
              <div className="text-sm text-muted-foreground">Total Mining Sites</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-primary mb-1">{totalTransactions.toLocaleString()}</div>
              <div className="text-sm text-muted-foreground">Total Transactions</div>
            </div>
          </div>
        </Card>

{/* Country Status */}
        <div className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Country Status</h2>
          <div className="grid md:grid-cols-3 gap-4">
            {countries.map((country) => (
              <Card key={country.code} className="p-6 hover:shadow-md transition-shadow">
                <div className="flex items-start justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <div className="text-4xl">{country.flag}</div>
                    <div>
                      <h3 className="font-semibold">{country.name}</h3>
                      <p className="text-xs text-muted-foreground">{country.code}</p>
                    </div>
                  </div>
                  <Badge
                    variant={country.status === "connected" ? "default" : "secondary"}
                    className={`${getStatusColor(country.status)} capitalize`}
                  >
                    {getStatusIcon(country.status)}
                    <span className="ml-1">{country.status}</span>
                  </Badge>
                </div>

<div className="space-y-3">
                  <div className="flex justify-between items-center py-2 border-b">
                    <span className="text-sm text-muted-foreground">Registered Miners</span>
                    <span className="font-semibold">{country.miners.toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between items-center py-2 border-b">
                    <span className="text-sm text-muted-foreground">Mining Sites</span>
                    <span className="font-semibold">{country.sites.toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between items-center py-2 border-b">
                    <span className="text-sm text-muted-foreground">Transactions</span>
                    <span className="font-semibold">{country.transactions.toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between items-center py-2">
                    <span className="text-sm text-muted-foreground">Last Sync</span>
                    <span className="text-xs font-mono">
                      {new Date(country.lastSync).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                    </span>
                  </div>
                </div>

<div className="mt-4 pt-4 border-t">
                  <Button variant="outline" size="sm" className="w-full bg-transparent">
                    View Details
                  </Button>
                </div>
              </Card>
            ))}
          </div>
        </div>

{/* API Infrastructure Stats */}
        <div className="grid md:grid-cols-4 gap-4 mb-8">
          <Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">API Endpoints</p>
                <p className="text-2xl font-bold">12</p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
                <Database className="h-6 w-6 text-primary" />
              </div>
            </div>
          </Card>

<Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Uptime</p>
                <p className="text-2xl font-bold">99.8%</p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-green-500/10 flex items-center justify-center">
                <TrendingUp className="h-6 w-6 text-green-600 dark:text-green-400" />
              </div>
            </div>
          </Card>

<Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Sync Frequency</p>
                <p className="text-2xl font-bold">5min</p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center">
                <ArrowRightLeft className="h-6 w-6 text-accent" />
              </div>
            </div>
          </Card>

<Card className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Data Integrity</p>
                <p className="text-2xl font-bold">100%</p>
              </div>
              <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
                <CheckCircle2 className="h-6 w-6 text-primary" />
              </div>
            </div>
          </Card>
        </div>

{/* Cross-Border Transactions */}
        <div>
          <h2 className="text-xl font-semibold mb-4">Recent Cross-Border Transactions</h2>
          <div className="space-y-4">
            {crossBorderTransactions.map((txn) => (
              <Card key={txn.id} className="p-6 hover:shadow-md transition-shadow">
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-3">
                      <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
                        <ArrowRightLeft className="h-5 w-5 text-primary" />
                      </div>
                      <div>
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="font-semibold">{txn.mineralType}</h3>
                          <Badge variant={txn.status === "verified" ? "default" : "secondary"} className="capitalize">
                            {txn.status === "verified" && <CheckCircle2 className="h-3 w-3 mr-1" />}
                            {txn.status}
                          </Badge>
                        </div>
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                          <span className="font-mono">{txn.id}</span>
                          <span>•</span>
                          <span>{new Date(txn.date).toLocaleDateString()}</span>
                        </div>
                      </div>
                    </div>

<div className="flex items-center gap-4 bg-muted/50 p-3 rounded-lg">
                      <div className="flex items-center gap-2">
                        <div className="text-2xl">
                          {txn.fromCountry === "DRC" ? "🇨🇩" : txn.fromCountry === "ZMB" ? "🇿🇲" : "🇦🇴"}
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">From</p>
                          <p className="font-medium text-sm">{txn.fromCountry}</p>
                        </div>
                      </div>

<div className="flex items-center gap-2">
                        <div className="text-2xl">
                          {txn.toCountry === "DRC" ? "🇨🇩" : txn.toCountry === "ZMB" ? "🇿🇲" : "🇦🇴"}
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">To</p>
                          <p className="font-medium text-sm">{txn.toCountry}</p>
                        </div>
                      </div>

<div className="ml-auto">
                        <p className="text-xs text-muted-foreground">Quantity</p>
                        <p className="font-semibold">{txn.quantity} kg</p>
                      </div>
                    </div>
                  </div>

<div>
                    <Button variant="outline" size="sm">
                      View Details
                    </Button>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>

{/* API Endpoints */}
        <div className="mt-8">
          <h2 className="text-xl font-semibold mb-4">Available API Endpoints</h2>
          <Card className="p-6">
            <div className="space-y-4">
              <div className="flex items-start justify-between py-3 border-b">
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <Badge variant="outline" className="font-mono">
                      GET
                    </Badge>
                    <code className="text-sm">/api/v1/miners</code>
                  </div>
                  <p className="text-sm text-muted-foreground">Retrieve miner registry data</p>
                </div>
                <Badge variant="default">Active</Badge>
              </div>

<div className="flex items-start justify-between py-3 border-b">
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <Badge variant="outline" className="font-mono">
                      GET
                    </Badge>
                    <code className="text-sm">/api/v1/sites</code>
                  </div>
                  <p className="text-sm text-muted-foreground">Access mining site information</p>
                </div>
                <Badge variant="default">Active</Badge>
              </div>

<div className="flex items-start justify-between py-3 border-b">
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <Badge variant="outline" className="font-mono">
                      GET
                    </Badge>
                    <code className="text-sm">/api/v1/transactions</code>
                  </div>
                  <p className="text-sm text-muted-foreground">Query production and transaction logs</p>
                </div>
                <Badge variant="default">Active</Badge>
              </div>

<div className="flex items-start justify-between py-3 border-b">
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <Badge variant="outline" className="font-mono">
                      POST
                    </Badge>
                    <code className="text-sm">/api/v1/verify</code>
                  </div>
                  <p className="text-sm text-muted-foreground">Verify blockchain-anchored records</p>
                </div>
                <Badge variant="default">Active</Badge>
              </div>

<div className="flex items-start justify-between py-3">
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <Badge variant="outline" className="font-mono">
                      GET
                    </Badge>
                    <code className="text-sm">/api/v1/compliance</code>
                  </div>
                  <p className="text-sm text-muted-foreground">Access compliance and inspection data</p>
                </div>
                <Badge variant="default">Active</Badge>
              </div>
            </div>

<div className="mt-6 pt-6 border-t">
              <Button className="w-full">
                <Link2 className="h-4 w-4 mr-2" />
                View Full API Documentation
              </Button>
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/regional/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/analytics/page.tsx"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  BarChart3,
  TrendingUp,
  Download,
  Calendar,
  DollarSign,
  Package,
  Users,
  MapPin,
  FileText,
  ArrowUp,
  ArrowDown,
} from "lucide-react"
import { Progress } from "@/components/ui/progress"

export default function AnalyticsPage() {
  const [timeRange, setTimeRange] = useState("month")

// Mock data for analytics
  const productionByMineral = [
    { name: "Cobalt", value: 45, color: "bg-primary" },
    { name: "Copper", value: 35, color: "bg-accent" },
    { name: "Gold", value: 15, color: "bg-chart-3" },
    { name: "Tantalum", value: 5, color: "bg-chart-4" },
  ]

const revenueByMonth = [
    { month: "Jul", amount: 45000 },
    { month: "Aug", amount: 52000 },
    { month: "Sep", amount: 48000 },
    { month: "Oct", amount: 61000 },
    { month: "Nov", amount: 58000 },
    { month: "Dec", amount: 72000 },
  ]

const topSites = [
    { name: "Kasai Mining Site A", production: 1250, revenue: 125000 },
    { name: "Kolwezi Cooperative Site", production: 980, revenue: 98000 },
    { name: "Lualaba Artisanal Zone", production: 756, revenue: 75600 },
  ]

return (
    <div className="min-h-screen bg-background">
      <div className="border-b bg-card">
        <div className="container mx-auto px-4 py-4">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <h1 className="text-2xl font-bold">Analytics & Reporting</h1>
              <p className="text-sm text-muted-foreground">Real-time insights and performance metrics</p>
            </div>
            <div className="flex gap-2">
              <select
                value={timeRange}
                onChange={(e) => setTimeRange(e.target.value)}
                className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm"
              >
                <option value="week">Last 7 Days</option>
                <option value="month">Last 30 Days</option>
                <option value="quarter">Last 90 Days</option>
                <option value="year">Last Year</option>
              </select>
              <Button>
                <Download className="h-4 w-4 mr-2" />
                Export Report
              </Button>
            </div>
          </div>
        </div>
      </div>

<div className="container mx-auto px-4 py-8">
        {/* Key Metrics */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <Card className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
                <DollarSign className="h-6 w-6 text-primary" />
              </div>
              <Badge variant="default" className="bg-green-500/10 text-green-600 dark:text-green-400 border-0">
                <ArrowUp className="h-3 w-3 mr-1" />
                12.5%
              </Badge>
            </div>
            <p className="text-sm text-muted-foreground mb-1">Total Revenue</p>
            <p className="text-3xl font-bold mb-1">$336,000</p>
            <p className="text-xs text-muted-foreground">Last 6 months</p>
          </Card>

<Card className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center">
                <Package className="h-6 w-6 text-accent" />
              </div>
              <Badge variant="default" className="bg-green-500/10 text-green-600 dark:text-green-400 border-0">
                <ArrowUp className="h-3 w-3 mr-1" />
                8.3%
              </Badge>
            </div>
            <p className="text-sm text-muted-foreground mb-1">Total Production</p>
            <p className="text-3xl font-bold mb-1">2,986 kg</p>
            <p className="text-xs text-muted-foreground">Last 6 months</p>
          </Card>

<Card className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
                <FileText className="h-6 w-6 text-primary" />
              </div>
              <Badge variant="secondary" className="bg-amber-500/10 text-amber-600 dark:text-amber-400 border-0">
                <ArrowDown className="h-3 w-3 mr-1" />
                2.1%
              </Badge>
            </div>
            <p className="text-sm text-muted-foreground mb-1">Transactions</p>
            <p className="text-3xl font-bold mb-1">124</p>
            <p className="text-xs text-muted-foreground">Last 30 days</p>
          </Card>

<Card className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center">
                <TrendingUp className="h-6 w-6 text-accent" />
              </div>
              <Badge variant="default" className="bg-green-500/10 text-green-600 dark:text-green-400 border-0">
                <ArrowUp className="h-3 w-3 mr-1" />
                5.7%
              </Badge>
            </div>
            <p className="text-sm text-muted-foreground mb-1">Avg Price/kg</p>
            <p className="text-3xl font-bold mb-1">$112</p>
            <p className="text-xs text-muted-foreground">USD per kilogram</p>
          </Card>
        </div>

{/* Charts Row */}
        <div className="grid lg:grid-cols-2 gap-6 mb-8">
          {/* Revenue Trend */}
          <Card className="p-6">
            <div className="flex items-center justify-between mb-6">
              <div>
                <h3 className="font-semibold text-lg mb-1">Revenue Trend</h3>
                <p className="text-sm text-muted-foreground">Monthly revenue over time</p>
              </div>
              <BarChart3 className="h-5 w-5 text-muted-foreground" />
            </div>

<div className="space-y-4">
              {revenueByMonth.map((item, index) => (
                <div key={item.month}>
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-medium">{item.month}</span>
                    <span className="text-sm font-semibold">${item.amount.toLocaleString()}</span>
                  </div>
                  <Progress value={(item.amount / 72000) * 100} className="h-2" />
                </div>
              ))}
            </div>

<div className="mt-6 pt-6 border-t">
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Average Monthly</span>
                <span className="text-lg font-bold">
                  $
                  {Math.round(
                    revenueByMonth.reduce((sum, m) => sum + m.amount, 0) / revenueByMonth.length,
                  ).toLocaleString()}
                </span>
              </div>
            </div>
          </Card>

{/* Production by Mineral */}
          <Card className="p-6">
            <div className="flex items-center justify-between mb-6">
              <div>
                <h3 className="font-semibold text-lg mb-1">Production Distribution</h3>
                <p className="text-sm text-muted-foreground">By mineral type</p>
              </div>
              <Package className="h-5 w-5 text-muted-foreground" />
            </div>

<div className="space-y-6">
              {productionByMineral.map((mineral) => (
                <div key={mineral.name}>
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <div className={`h-3 w-3 rounded-full ${mineral.color}`} />
                      <span className="text-sm font-medium">{mineral.name}</span>
                    </div>
                    <span className="text-sm font-semibold">{mineral.value}%</span>
                  </div>
                  <Progress value={mineral.value} className="h-2" />
                </div>
              ))}
            </div>

<div className="mt-6 pt-6 border-t">
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Total Minerals</span>
                <span className="text-lg font-bold">{productionByMineral.length} Types</span>
              </div>
            </div>
          </Card>
        </div>

{/* Top Performing Sites */}
        <Card className="p-6 mb-8">
          <div className="flex items-center justify-between mb-6">
            <div>
              <h3 className="font-semibold text-lg mb-1">Top Performing Sites</h3>
              <p className="text-sm text-muted-foreground">Ranked by production and revenue</p>
            </div>
            <MapPin className="h-5 w-5 text-muted-foreground" />
          </div>

<div className="space-y-4">
            {topSites.map((site, index) => (
              <div key={site.name} className="flex items-center gap-4 p-4 bg-muted/50 rounded-lg">
                <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                  <span className="text-lg font-bold text-primary">#{index + 1}</span>
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold mb-1">{site.name}</h4>
                  <div className="flex gap-4 text-sm text-muted-foreground">
                    <span>{site.production} kg produced</span>
                    <span>•</span>
                    <span className="text-green-600 dark:text-green-400 font-medium">
                      ${site.revenue.toLocaleString()} revenue
                    </span>
                  </div>
                </div>
                <Button variant="outline" size="sm">
                  View Details
                </Button>
              </div>
            ))}
          </div>
        </Card>

{/* Additional Stats */}
        <div className="grid md:grid-cols-3 gap-6">
          <Card className="p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
                <Users className="h-5 w-5 text-primary" />
              </div>
              <div>
                <h3 className="font-semibold">Active Miners</h3>
                <p className="text-xs text-muted-foreground">Registered participants</p>
              </div>
            </div>
            <p className="text-3xl font-bold mb-2">2,456</p>
            <Progress value={78} className="h-2 mb-2" />
            <p className="text-xs text-muted-foreground">78% with active licenses</p>
          </Card>

<Card className="p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center">
                <MapPin className="h-5 w-5 text-accent" />
              </div>
              <div>
                <h3 className="font-semibold">Mining Sites</h3>
                <p className="text-xs text-muted-foreground">Geo-tagged locations</p>
              </div>
            </div>
            <p className="text-3xl font-bold mb-2">1,791</p>
            <Progress value={92} className="h-2 mb-2" />
            <p className="text-xs text-muted-foreground">92% compliance rate</p>
          </Card>

<Card className="p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
                <Calendar className="h-5 w-5 text-primary" />
              </div>
              <div>
                <h3 className="font-semibold">Tax Collection</h3>
                <p className="text-xs text-muted-foreground">Government revenue</p>
              </div>
            </div>
            <p className="text-3xl font-bold mb-2">$42,400</p>
            <Progress value={85} className="h-2 mb-2" />
            <p className="text-xs text-muted-foreground">12.6% effective rate</p>
          </Card>
        </div>

{/* Export Options */}
        <Card className="p-6 mt-8">
          <h3 className="font-semibold text-lg mb-4">Export Reports</h3>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
            <Button variant="outline" className="justify-start bg-transparent">
              <FileText className="h-4 w-4 mr-2" />
              Production Report
            </Button>
            <Button variant="outline" className="justify-start bg-transparent">
              <DollarSign className="h-4 w-4 mr-2" />
              Revenue Report
            </Button>
            <Button variant="outline" className="justify-start bg-transparent">
              <Users className="h-4 w-4 mr-2" />
              Miner Registry
            </Button>
            <Button variant="outline" className="justify-start bg-transparent">
              <BarChart3 className="h-4 w-4 mr-2" />
              Compliance Report
            </Button>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/analytics/loading.tsx"
export default function Loading() {
  return null
}89:["$","$L90",null,{"chatId":"kDPKia65yzk","children":["$","$L91",null,{"data":{"@\"active-block\",\"kDPKia65yzk\",":{"id":"b_vNUXRq5gixc","messageId":"dNJ0h8qRM0KbDpNFStKLFEvjy4eygxiH","source":"$92","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Building Analytics System","taskNameComplete":"Built Analytics System"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"kDPKia65yzk\",":false,"":null},"children":"$L93"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This