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

{/* Header */}

{title}

{subtitle}

{/* Request New Access Modal Dialog */}