[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import LicenseManagement from "@/components/license-management" export default function Home() { return } [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": "next lint" }, "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "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": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/license-management.tsx" isEdit="true" isQuickEdit="true" "use client" import { useMemo, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" import { toast } from "sonner" import { UserCircle2, PackageCheck, Undo2, Search, Loader2, ShieldCheck, Boxes, Clock, CheckCircle, XCircle, } from "lucide-react" import { format } from "date-fns" /** * Vercel v0 Prompt (copy/paste this block into v0.dev or keep as inline docs): * * Build a Microsoft Teams Admin Center UI for **Event Organizer** license management. * Pages/components: A single responsive page with three cards: (1) License Pool, (2) Assign License, (3) Current Assignments. * Data model: * LicensePool { total:number, used:number } (available = total - used) * Organizer { id:string, name:string, email:string } * Assignment { id:string, userId:string, packName:string, status:"active"|"revoked"|"pending", assignedAt:ISODate } * Interactions: * - Show pool totals and a progress indicator. * - Assign attendee pack license: choose organizer (searchable list) + choose pack type (e.g., Attendee Pack A/B/C). Disable assign if none available. * - Show table of assignments with user, pack, status, assigned date, and actions. * - Revoke ("take back") a license from a user with confirmation dialog. When revoked, update pool counts and mark status. * - Filter/search assignments by user or email; filter by status. * - Show empty states and optimistic toasts. * API (stub or wire to real): * GET /api/license/pool -> { total, used } * GET /api/license/organizers -> Organizer[] * GET /api/license/assignments -> Assignment[] * POST /api/license/assign -> { userId, packName } -> 201 + Assignment * POST /api/license/revoke -> { assignmentId } -> 200 * Visual style: Microsoft 365 admin vibes, clean cards, rounded-2xl, subtle shadows, badges for status, lucide icons. * Accessibility: proper labels, keyboard focusable controls, aria labels on action buttons. * * Deliver a single-file React component using Tailwind + shadcn/ui with the structure below. */ // ---- Demo data (replace with real fetch calls) ---- const DEMO_ORGANIZERS = [ { id: "u_1", name: "Alex Rivera", email: "alex.rivera@contoso.com" }, { id: "u_2", name: "Bri Chen", email: "bri.chen@contoso.com" }, { id: "u_3", name: "Chris Patel", email: "chris.patel@contoso.com" }, { id: "u_4", name: "Dana Smith", email: "dana.smith@contoso.com" }, ] const INITIAL_POOL = { total: 40, used: 15, breakdown: { "5K": { total: 20, used: 8 }, "10K": { total: 20, used: 7 }, }, } const INITIAL_ASSIGNMENTS = [ { id: "a_101", userId: "u_1", packName: "5K", status: "active" as const, assignedAt: new Date().toISOString(), }, { id: "a_102", userId: "u_2", packName: "10K", status: "active" as const, assignedAt: new Date(Date.now() - 86400000).toISOString(), }, { id: "a_103", userId: "u_3", packName: "5K", status: "revoked" as const, assignedAt: new Date(Date.now() - 3 * 86400000).toISOString(), }, { id: "a_105", userId: "u_1", packName: "10K", status: "active" as const, assignedAt: new Date(Date.now() - 5 * 86400000).toISOString(), }, ] const INITIAL_REQUESTS = [ { id: "req_001", userId: "u_1", eventName: "Tech Conference 2024", expectedAttendees: 3500, eventDate: "2024-12-15", requestedAt: new Date(Date.now() - 2 * 86400000).toISOString(), status: "pending" as const, notes: "Annual tech conference with keynote speakers", }, { id: "req_002", userId: "u_2", eventName: "Marketing Summit", expectedAttendees: 8000, eventDate: "2024-11-20", requestedAt: new Date(Date.now() - 86400000).toISOString(), status: "pending" as const, notes: "Large marketing event with multiple tracks", }, { id: "req_003", userId: "u_3", eventName: "Product Launch", expectedAttendees: 9500, eventDate: "2024-10-30", requestedAt: new Date(Date.now() - 3 * 86400000).toISOString(), status: "pending" as const, notes: "Major product launch event", }, { id: "req_004", userId: "u_4", eventName: "Workshop Series", expectedAttendees: 1200, eventDate: "2024-11-05", requestedAt: new Date(Date.now() - 4 * 86400000).toISOString(), status: "approved" as const, notes: "Small workshop series", }, ] // ---- Helpers ---- function OrganizerCell({ userId }: { userId: string }) { const org = useMemo(() => DEMO_ORGANIZERS.find((o) => o.id === userId), [userId]) if (!org) return Unknown user return (

{org.name}

{org.email}

) } function StatusBadge({ status }: { status: "active" | "revoked" | "pending" }) { const map: Record = { active: "bg-green-100 text-green-800", revoked: "bg-gray-200 text-gray-800", pending: "bg-yellow-100 text-yellow-800", } const label = status.charAt(0).toUpperCase() + status.slice(1) return {label} } function suggestPackForAttendees(attendees: number): string { if (attendees <= 5000) return "5K" return "10K" } function RequestStatusBadge({ status }: { status: "pending" | "approved" | "rejected" }) { const map: Record = { pending: { class: "bg-yellow-100 text-yellow-800", icon: Clock }, approved: { class: "bg-green-100 text-green-800", icon: CheckCircle }, rejected: { class: "bg-red-100 text-red-800", icon: XCircle }, } const config = map[status] const Icon = config.icon const label = status.charAt(0).toUpperCase() + status.slice(1) return ( {label} ) } export default function LicenseManagement() { const [pool, setPool] = useState(INITIAL_POOL) const [assignments, setAssignments] = useState(INITIAL_ASSIGNMENTS) const [requests, setRequests] = useState(INITIAL_REQUESTS) const [pack, setPack] = useState("5K") const [organizerQuery, setOrganizerQuery] = useState("") const [selectedOrganizerId, setSelectedOrganizerId] = useState("") const [search, setSearch] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [requestSearch, setRequestSearch] = useState("") const [requestStatusFilter, setRequestStatusFilter] = useState("pending") const [isSubmitting, setIsSubmitting] = useState(false) const [approvalPackSelection, setApprovalPackSelection] = useState>({}) const [purchaseQuantities, setPurchaseQuantities] = useState>({ "5K": 1, "10K": 1, }) const [isPurchasing, setIsPurchasing] = useState(false) const available = pool.total - pool.used const filteredOrganizers = useMemo(() => { const q = organizerQuery.trim().toLowerCase() if (!q) return DEMO_ORGANIZERS return DEMO_ORGANIZERS.filter((o) => `${o.name} ${o.email}`.toLowerCase().includes(q)) }, [organizerQuery]) const filteredAssignments = useMemo(() => { const q = search.trim().toLowerCase() return assignments.filter((a) => { const org = DEMO_ORGANIZERS.find((o) => o.id === a.userId) const hay = `${org?.name ?? ""} ${org?.email ?? ""} ${a.packName} ${a.status}`.toLowerCase() const matchesText = q ? hay.includes(q) : true const matchesStatus = statusFilter === "all" ? true : a.status === statusFilter return matchesText && matchesStatus }) }, [assignments, search, statusFilter]) const filteredRequests = useMemo(() => { const q = requestSearch.trim().toLowerCase() return requests.filter((r) => { const org = DEMO_ORGANIZERS.find((o) => o.id === r.userId) const hay = `${org?.name ?? ""} ${org?.email ?? ""} ${r.eventName} ${r.notes}`.toLowerCase() const matchesText = q ? hay.includes(q) : true const matchesStatus = requestStatusFilter === "all" ? true : r.status === requestStatusFilter return matchesText && matchesStatus }) }, [requests, requestSearch, requestStatusFilter]) const getPackAvailability = (packType: string) => { const packData = pool.breakdown[packType as keyof typeof pool.breakdown] return packData ? packData.total - packData.used : 0 } const canAssign = available > 0 && !!selectedOrganizerId && !!pack && !isSubmitting && getPackAvailability(pack) > 0 async function onAssign() { try { setIsSubmitting(true) await new Promise((r) => setTimeout(r, 600)) const newAssignment = { id: `a_${Math.random().toString(36).slice(2, 8)}`, userId: selectedOrganizerId, packName: pack, status: "active" as const, assignedAt: new Date().toISOString(), } setAssignments((prev) => [newAssignment, ...prev]) setPool((p) => ({ ...p, used: p.used + 1, breakdown: { ...p.breakdown, [pack]: { ...p.breakdown[pack as keyof typeof p.breakdown], used: p.breakdown[pack as keyof typeof p.breakdown].used + 1, }, }, })) toast.success("License assigned") setSelectedOrganizerId("") setOrganizerQuery("") } catch (e) { toast.error("Failed to assign license") } finally { setIsSubmitting(false) } } async function onRevoke(id: string) { const assignment = assignments.find((a) => a.id === id) if (!assignment) return setAssignments((prev) => prev.map((a) => (a.id === id ? { ...a, status: "revoked" as const } : a))) setPool((p) => ({ ...p, used: Math.max(0, p.used - 1), breakdown: { ...p.breakdown, [assignment.packName]: { ...p.breakdown[assignment.packName as keyof typeof p.breakdown], used: Math.max(0, p.breakdown[assignment.packName as keyof typeof p.breakdown].used - 1), }, }, })) toast.message("License revoked", { description: "The pack is now available in the pool." }) } async function onApproveRequest(requestId: string, packType: string) { const request = requests.find((r) => r.id === requestId) if (!request || getPackAvailability(packType) <= 0) return try { setIsSubmitting(true) await new Promise((r) => setTimeout(r, 600)) const newAssignment = { id: `a_${Math.random().toString(36).slice(2, 8)}`, userId: request.userId, packName: packType, status: "active" as const, assignedAt: new Date().toISOString(), } setAssignments((prev) => [newAssignment, ...prev]) setPool((p) => ({ ...p, used: p.used + 1, breakdown: { ...p.breakdown, [packType]: { ...p.breakdown[packType as keyof typeof p.breakdown], used: p.breakdown[packType as keyof typeof p.breakdown].used + 1, }, }, })) setRequests((prev) => prev.map((r) => (r.id === requestId ? { ...r, status: "approved" as const } : r))) setApprovalPackSelection((prev) => { const { [requestId]: _, ...rest } = prev return rest }) toast.success("Request approved and license assigned") } catch (e) { toast.error("Failed to approve request") } finally { setIsSubmitting(false) } } async function onRejectRequest(requestId: string) { setRequests((prev) => prev.map((r) => (r.id === requestId ? { ...r, status: "rejected" as const } : r))) toast.message("Request rejected") } async function onPurchasePacks() { try { setIsPurchasing(true) await new Promise((r) => setTimeout(r, 1000)) const totalPurchased = Object.values(purchaseQuantities).reduce((sum, qty) => sum + qty, 0) setPool((p) => ({ ...p, total: p.total + totalPurchased, breakdown: { "5K": { ...p.breakdown["5K"], total: p.breakdown["5K"].total + purchaseQuantities["5K"], }, "10K": { ...p.breakdown["10K"], total: p.breakdown["10K"].total + purchaseQuantities["10K"], }, }, })) toast.success(`Successfully purchased ${totalPurchased} license${totalPurchased === 1 ? "" : "s"}`) // Reset quantities to 1 setPurchaseQuantities({ "5K": 1, "10K": 1, }) } catch (e) { toast.error("Failed to purchase licenses") } finally { setIsPurchasing(false) } } return (

Event Organizer • License Management

Microsoft Teams admin center

Admin Pool: {available}/{pool.total} available

{/* License Pool */} License Pool

{pool.total}

Total

{pool.used}

Assigned

{available}

Available

{Math.round((pool.used / pool.total) * 100)}% in use

By Pack Type

{Object.entries(pool.breakdown).map(([packType, data]) => (

{packType}

{data.used}/{data.total}

))}

{/* Assign License */} Assign Attendee Pack

Organizer

setOrganizerQuery(e.target.value)} />

{filteredOrganizers.map((o) => ( ))} {filteredOrganizers.length === 0 && (

No organizers found.

)}

Pack

{pack && getPackAvailability(pack) > 0 ? `${getPackAvailability(pack)} ${pack} license${getPackAvailability(pack) === 1 ? "" : "s"} available` : pack ? `No ${pack} licenses available` : "Select a pack to see availability"}

{/* License Requests */} License Requests

setRequestSearch(e.target.value)} aria-label="Search requests" />

Status

Organizer Event Details Expected Attendees Status Requested Actions {filteredRequests.map((request) => { const suggestedPack = suggestPackForAttendees(request.expectedAttendees) const canApprove = request.status === "pending" && getPackAvailability(suggestedPack) > 0 return (

{request.eventName}

{format(new Date(request.eventDate), "PP")}

{request.notes && (

{request.notes}

)}

{request.expectedAttendees.toLocaleString()} {format(new Date(request.requestedAt), "PP p")} {request.status === "pending" && (

Approve License Request Select the attendee pack to assign for "{request.eventName}" with{" "} {request.expectedAttendees.toLocaleString()} expected attendees.

Select Attendee Pack

Suggested: {suggestedPack} based on {request.expectedAttendees.toLocaleString()}{" "} expected attendees

Cancel { const selectedPack = approvalPackSelection[request.id] || suggestedPack onApproveRequest(request.id, selectedPack) }} disabled={!canApprove} > Approve & Assign Reject License Request This will reject the license request from the organizer. This action can be undone later if needed. Cancel onRejectRequest(request.id)}> Reject Request

)} {request.status !== "pending" && ( {request.status === "approved" ? "Approved" : "Rejected"} )} ) })} {filteredRequests.length === 0 && ( No requests match your filters. )}

{/* Assignments Table */} Current Assignments

setSearch(e.target.value)} aria-label="Search assignments" />

Status

User Pack Status Assigned Actions {filteredAssignments.map((a) => ( {a.packName} {format(new Date(a.assignedAt), "PP p")} Revoke license? This will take back the attendee pack from the selected organizer. You can reassign it later. Cancel onRevoke(a.id)}>Confirm ))} {filteredAssignments.length === 0 && ( No assignments match your filters. )}

{/* Purchase Attendee Packs */} Purchase Attendee Packs

Purchase additional attendee pack licenses to expand your pool capacity.

{Object.entries(pool.breakdown).map(([packType, data]) => (

{packType} Pack

{data.total - data.used} available

Current total: {data.total}

Quantity: setPurchaseQuantities((prev) => ({ ...prev, [packType]: Math.max(1, Number.parseInt(e.target.value) || 1), })) } className="w-20" />

New total: {data.total + purchaseQuantities[packType]}

))}

Total licenses to purchase: {Object.values(purchaseQuantities).reduce((sum, qty) => sum + qty, 0)}

Confirm License Purchase You are about to purchase the following licenses:

{Object.entries(purchaseQuantities).map(([packType, qty]) => (

{packType} Pack: {qty} license{qty === 1 ? "" : "s"}

))}

Total: {Object.values(purchaseQuantities).reduce((sum, qty) => sum + qty, 0)} licenses

Cancel Confirm Purchase

{/* Notes */} Implementation Notes

Wire the mocked handlers to your real APIs (see endpoints in the prompt header).
Enforce server-side validation: pool availability, organizer existence, idempotency keys for assign actions.
Consider role-based access control (RBAC) so only Teams admins can assign/revoke.
Add audit logging for compliance: who assigned/revoked, timestamps, and reason codes.
Extend with pagination for large orgs and export (CSV) of assignment history.

) }