{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "access-request-workflow", "title": "Access Request Workflow", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/access-request-workflow/AccessRequestWorkflow.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Check,\n Clock,\n Copy,\n FileText,\n History,\n Hourglass,\n KeyRound,\n Lock,\n MoreHorizontal,\n Plus,\n Search,\n Send,\n ShieldAlert,\n ShieldCheck,\n UserCheck,\n X,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge, type BadgeVariants } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Textarea } from '@/components/ui/textarea'\n\nexport interface AccessRequest {\n id: string\n requester: {\n name: string\n email: string\n team: string\n avatar: string\n }\n targetRole: string\n system: string\n duration: string\n timeLeftLabel: string\n secondsLeft: number\n justification: string\n ticketId: string\n approver: string\n status: 'active' | 'pending' | 'expired' | 'rejected'\n createdAt: string\n expiresAt: string\n}\n\nexport interface AccessRequestWorkflowProps {\n title?: string\n subtitle?: string\n className?: string\n}\n\nconst initialRequests: AccessRequest[] = [\n {\n id: 'req-1',\n requester: {\n name: 'Elena Rostova',\n email: 'elena.rostova@acme.corp',\n team: 'SecOps Team',\n avatar: 'ER',\n },\n targetRole: 'AWS Production Admin',\n system: 'AWS Cloud IAM (us-east-1)',\n duration: '4 Hours',\n timeLeftLabel: '2h 45m left',\n secondsLeft: 9918,\n justification: 'Investigating latency spike on payment gateway for incident #SEC-849',\n ticketId: 'SEC-849',\n approver: 'Marcus Vance',\n status: 'active',\n createdAt: '1h 15m ago',\n expiresAt: 'Today at 16:30',\n },\n {\n id: 'req-2',\n requester: {\n name: 'Marcus Vance',\n email: 'marcus.vance@acme.corp',\n team: 'DevOps & Infra',\n avatar: 'MV',\n },\n targetRole: 'Production DB Read-Only',\n system: 'PostgreSQL Aurora Primary',\n duration: '1 Hour (Emergency)',\n timeLeftLabel: '48m left',\n secondsLeft: 2892,\n justification: 'Emergency replica query check during PostgreSQL failover testing',\n ticketId: 'INC-2044',\n approver: 'Sarah Chen',\n status: 'active',\n createdAt: '12m ago',\n expiresAt: 'Today at 14:15',\n },\n {\n id: 'req-3',\n requester: {\n name: 'Sarah Chen',\n email: 'sarah.chen@acme.corp',\n team: 'Core Platform',\n avatar: 'SC',\n },\n targetRole: 'Customer PII Decryption',\n system: 'Customer Data Vault (KMS)',\n duration: '8 Hours (1 Shift)',\n timeLeftLabel: 'Pending Approval',\n secondsLeft: 28800,\n justification: 'GDPR user deletion verification request #COMP-1102',\n ticketId: 'COMP-1102',\n approver: 'Marcus Vance',\n status: 'pending',\n createdAt: '10m ago',\n expiresAt: 'Awaiting approval',\n },\n {\n id: 'req-4',\n requester: {\n name: 'David Kim',\n email: 'david.kim@acme.corp',\n team: 'Fintech Systems',\n avatar: 'DK',\n },\n targetRole: 'Stripe Dashboard Full Access',\n system: 'Stripe Merchant Gateway',\n duration: '1 Hour (Emergency)',\n timeLeftLabel: 'Pending Approval',\n secondsLeft: 3600,\n justification: 'Refunding disputed charges for compromised merchant accounts',\n ticketId: 'FIN-582',\n approver: 'Marcus Vance',\n status: 'pending',\n createdAt: '25m ago',\n expiresAt: 'Awaiting approval',\n },\n {\n id: 'req-5',\n requester: {\n name: 'Alex Morgan',\n email: 'alex.m@acme.corp',\n team: 'Data Platform',\n avatar: 'AM',\n },\n targetRole: 'Production DB Read-Only',\n system: 'Snowflake Core Analytics',\n duration: '4 Hours',\n timeLeftLabel: 'Expired',\n secondsLeft: 0,\n justification: 'Quarterly compliance metrics export and audit schema migration verification',\n ticketId: 'AUD-309',\n approver: 'Elena Rostova',\n status: 'expired',\n createdAt: 'Yesterday',\n expiresAt: 'Expired at 18:00',\n },\n]\n\nfunction formatSeconds(seconds: number): string {\n if (seconds <= 0) return '00:00:00'\n const h = Math.floor(seconds / 3600)\n const m = Math.floor((seconds % 3600) / 60)\n const s = seconds % 60\n return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`\n}\n\nfunction getRoleBadgeVariant(role: string): BadgeVariants['variant'] {\n if (role.includes('AWS') || role.includes('Admin')) return 'destructive'\n if (role.includes('PII') || role.includes('Decryption')) return 'warning'\n if (role.includes('DB') || role.includes('Read-Only')) return 'info'\n if (role.includes('Stripe')) return 'secondary'\n return 'default'\n}\n\nexport function AccessRequestWorkflow({\n title = 'Access Requests & Privilege Elevation',\n subtitle = 'Request temporary Just-In-Time production access with audit approval.',\n className,\n}: AccessRequestWorkflowProps) {\n const [requests, setRequests] = React.useState(initialRequests)\n\n // Timer ticker for active sessions\n React.useEffect(() => {\n const timer = setInterval(() => {\n setRequests((prev) =>\n prev.map((req) => {\n if (req.status === 'active' && req.secondsLeft > 0) {\n const nextSec = req.secondsLeft - 1\n if (nextSec <= 0) {\n return {\n ...req,\n secondsLeft: 0,\n status: 'expired',\n timeLeftLabel: 'Expired',\n }\n }\n const h = Math.floor(nextSec / 3600)\n const m = Math.floor((nextSec % 3600) / 60)\n return {\n ...req,\n secondsLeft: nextSec,\n timeLeftLabel: h > 0 ? `${h}h ${m}m left` : `${m}m left`,\n }\n }\n return req\n }),\n )\n }, 1000)\n\n return () => clearInterval(timer)\n }, [])\n\n // Governance KPI stats\n const activeCount = React.useMemo(() => requests.filter((r) => r.status === 'active').length, [requests])\n const pendingCount = React.useMemo(() => requests.filter((r) => r.status === 'pending').length, [requests])\n const expiringCount = React.useMemo(\n () => requests.filter((r) => r.status === 'active' && r.secondsLeft <= 3600 * 4).length,\n [requests],\n )\n const total30Day = React.useMemo(() => 42 + requests.filter((r) => r.id.startsWith('req-custom')).length, [requests])\n\n // Modal Form State\n const [isDialogOpen, setIsDialogOpen] = React.useState(false)\n const [formRole, setFormRole] = React.useState('AWS Production Admin')\n const [formDuration, setFormDuration] = React.useState('4 Hours')\n const [formApprover, setFormApprover] = React.useState('Security Lead: Marcus Vance')\n const [formJustification, setFormJustification] = React.useState(\n 'Investigating latency spike on payment gateway for incident #SEC-849',\n )\n\n const handleCreateRequest = (e: React.FormEvent) => {\n e.preventDefault()\n if (!formJustification.trim()) return\n\n let seconds = 3600 * 4\n if (formDuration.includes('1 Hour')) seconds = 3600\n else if (formDuration.includes('8 Hours')) seconds = 3600 * 8\n else if (formDuration.includes('24 Hours')) seconds = 3600 * 24\n\n let system = 'AWS Cloud IAM (us-east-1)'\n if (formRole.includes('DB')) system = 'PostgreSQL Aurora Primary'\n else if (formRole.includes('Stripe')) system = 'Stripe Merchant Gateway'\n else if (formRole.includes('PII')) system = 'Customer Data Vault (KMS)'\n\n const newReq: AccessRequest = {\n id: `req-custom-${Date.now()}`,\n requester: {\n name: 'Current Operator (You)',\n email: 'operator@acme.corp',\n team: 'Platform Engineering',\n avatar: 'OP',\n },\n targetRole: formRole,\n system,\n duration: formDuration,\n timeLeftLabel: 'Pending Approval',\n secondsLeft: seconds,\n justification: formJustification,\n ticketId: `SEC-${Math.floor(100 + Math.random() * 900)}`,\n approver: formApprover,\n status: 'pending',\n createdAt: 'Just now',\n expiresAt: 'Awaiting approval',\n }\n\n setRequests((prev) => [newReq, ...prev])\n setIsDialogOpen(false)\n }\n\n // Table Filters\n const [selectedTab, setSelectedTab] = React.useState<'all' | 'pending' | 'active' | 'expired'>('all')\n const [searchQuery, setSearchQuery] = React.useState('')\n\n const filteredRequests = React.useMemo(() => {\n return requests.filter((req) => {\n if (selectedTab !== 'all' && req.status !== selectedTab) {\n return false\n }\n if (searchQuery.trim()) {\n const q = searchQuery.toLowerCase()\n const matchName = req.requester.name.toLowerCase().includes(q)\n const matchRole = req.targetRole.toLowerCase().includes(q)\n const matchTicket = req.ticketId.toLowerCase().includes(q)\n const matchJust = req.justification.toLowerCase().includes(q)\n const matchSys = req.system.toLowerCase().includes(q)\n if (!matchName && !matchRole && !matchTicket && !matchJust && !matchSys) {\n return false\n }\n }\n return true\n })\n }, [requests, selectedTab, searchQuery])\n\n // Manager Actions\n const handleApprove = (id: string) => {\n setRequests((prev) =>\n prev.map((req) => {\n if (req.id === id) {\n const h = Math.floor(req.secondsLeft / 3600)\n const m = Math.floor((req.secondsLeft % 3600) / 60)\n return {\n ...req,\n status: 'active',\n timeLeftLabel: h > 0 ? `${h}h ${m}m left` : `${m}m left`,\n }\n }\n return req\n }),\n )\n }\n\n const handleReject = (id: string) => {\n setRequests((prev) =>\n prev.map((req) => {\n if (req.id === id) {\n return {\n ...req,\n status: 'rejected',\n timeLeftLabel: 'Rejected',\n }\n }\n return req\n }),\n )\n }\n\n const handleRevoke = (id: string) => {\n setRequests((prev) =>\n prev.map((req) => {\n if (req.id === id) {\n return {\n ...req,\n status: 'expired',\n secondsLeft: 0,\n timeLeftLabel: 'Revoked',\n }\n }\n return req\n }),\n )\n }\n\n const handleExtend = (id: string) => {\n setRequests((prev) =>\n prev.map((req) => {\n if (req.id === id && req.status === 'active') {\n const nextSec = req.secondsLeft + 1800\n const h = Math.floor(nextSec / 3600)\n const m = Math.floor((nextSec % 3600) / 60)\n return {\n ...req,\n secondsLeft: nextSec,\n timeLeftLabel: h > 0 ? `${h}h ${m}m left` : `${m}m left`,\n }\n }\n return req\n }),\n )\n }\n\n const handleReRequest = (id: string) => {\n setRequests((prev) =>\n prev.map((req) => {\n if (req.id === id) {\n return {\n ...req,\n status: 'pending',\n timeLeftLabel: 'Pending Approval',\n secondsLeft: 3600 * 4,\n }\n }\n return req\n }),\n )\n }\n\n const [copiedId, setCopiedId] = React.useState(null)\n const handleCopyToken = (id: string) => {\n setCopiedId(id)\n setTimeout(() => {\n setCopiedId((prev) => (prev === id ? null : prev))\n }, 2000)\n }\n\n return (\n
\n {/* Header */}\n
\n
\n
\n
\n \n
\n

{title}

\n
\n

{subtitle}

\n
\n\n {/* Request New Access Modal Dialog */}\n \n \n \n \n \n \n \n \n Request Temporary Access\n \n \n Submit a Just-In-Time (JIT) access request with duration and business justification.\n \n \n\n
\n
\n \n \n
\n\n
\n
\n \n \n
\n\n
\n \n \n
\n
\n\n
\n \n setFormJustification(v)}\n placeholder=\"Investigating latency spike on payment gateway for incident #SEC-849\"\n rows={3}\n className=\"resize-none text-xs\"\n />\n

\n All elevated actions are recorded and signed in the immutable IAM audit stream.\n

\n
\n\n \n \n \n \n
\n \n \n
\n\n {/* 4 Access Governance KPI Cards */}\n
\n \n \n Active Elevated Sessions\n
\n \n
\n \n \n
{activeCount}
\n

Expiring within 8h

\n \n \n\n \n \n Pending Approvals\n
\n \n
\n \n \n
{pendingCount}
\n

Requires security lead review

\n \n \n\n \n \n Requests Expiring Today\n
\n \n
\n \n \n
{expiringCount}
\n

Auto-revocation armed

\n \n \n\n \n \n 30-Day Total Requests\n
\n \n
\n \n \n
{total30Day}
\n

98.2% compliance audit pass

\n \n \n
\n\n {/* Pending & Active Requests Table Card */}\n \n \n
\n
\n Privilege Escalation Queue\n \n Review, approve, or reject active and pending privilege requests.\n \n
\n\n
\n {/* Search */}\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Search requester, role, ticket...\"\n className=\"h-8 pl-8 text-xs\"\n />\n
\n\n {/* Filter Tabs */}\n
\n setSelectedTab('all')}\n >\n All ({requests.length})\n \n setSelectedTab('pending')}\n >\n Pending ({pendingCount})\n \n setSelectedTab('active')}\n >\n Active ({activeCount})\n \n setSelectedTab('expired')}\n >\n Expired ({requests.filter((r) => r.status === 'expired' || r.status === 'rejected').length})\n \n
\n
\n
\n \n\n \n
\n \n \n \n Requester\n Target Role & System\n Duration & Timer\n Business Justification\n Status\n Actions\n \n \n \n {filteredRequests.length === 0 ? (\n \n \n No access requests match your filter.\n \n \n ) : (\n filteredRequests.map((req) => (\n \n {/* Requester */}\n \n
\n \n \n {req.requester.avatar}\n \n \n
\n
{req.requester.name}
\n
{req.requester.email}
\n
\n
\n \n\n {/* Target Role & System */}\n \n
\n \n {req.targetRole}\n \n {req.system}\n
\n \n\n {/* Duration & Timer */}\n \n
\n {req.duration}\n {req.status === 'active' ? (\n
\n \n {formatSeconds(req.secondsLeft)}\n
\n ) : req.status === 'pending' ? (\n
\n \n Awaiting start\n
\n ) : (\n
\n \n Session ended\n
\n )}\n
\n \n\n {/* Business Justification */}\n \n
\n
\n \n #{req.ticketId}\n \n \n Approver:{' '}\n {req.approver\n .replace('Security Lead: ', '')\n .replace('Infrastructure Team: ', '')\n .replace('Compliance Officer: ', '')\n .replace('On-Call Lead: ', '')}\n \n
\n

\n {req.justification}\n

\n
\n \n\n {/* Status Badge */}\n \n
\n {req.status === 'active' ? (\n \n \n \n \n \n Active - {req.timeLeftLabel}\n \n ) : req.status === 'pending' ? (\n \n \n Pending Approval\n \n ) : req.status === 'expired' ? (\n \n \n Expired\n \n ) : (\n \n \n Rejected\n \n )}\n
\n \n\n {/* Actions */}\n \n
\n {/* Pending Actions */}\n {req.status === 'pending' && (\n <>\n handleApprove(req.id)}\n >\n \n Approve\n \n handleReject(req.id)}\n >\n \n Reject\n \n \n )}\n\n {/* Active Actions */}\n {req.status === 'active' && (\n <>\n handleRevoke(req.id)}\n >\n \n Revoke\n \n\n \n \n \n \n \n Elevated Session\n \n handleExtend(req.id)}>\n \n Extend 30 Minutes\n \n handleCopyToken(req.id)}>\n \n {copiedId === req.id ? 'Copied Token!' : 'Copy Token'}\n \n \n handleRevoke(req.id)}\n >\n \n Revoke Immediately\n \n \n \n \n )}\n\n {/* Expired / Rejected Actions */}\n {req.status !== 'pending' && req.status !== 'active' && (\n <>\n handleReRequest(req.id)}\n >\n Re-request\n \n\n \n \n \n \n \n handleReRequest(req.id)}>\n \n Request Again\n \n \n \n View Audit Log\n \n \n \n \n )}\n
\n \n \n ))\n )}\n \n
\n
\n \n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/AccessRequestWorkflow.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/dropdown-menu.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/table.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "Just-In-Time (JIT) IAM temporary privilege escalation request modal and approval queue: governance metrics cards, elevated session countdown timers, approval form dialog, and active session manager with instant revoke and audit logging.", "categories": [ "security", "iam", "dashboard" ] }