87:I[903690,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp"],"ExplicitChatIdProvider"] 88:I[838238,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp"],"SWRDataProvider"] 89:T71a0,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Sidebar } from "@/components/sidebar" import { RoleTemplateBuilder } from "@/components/role-template-builder" import { NewEmployeeSetup } from "@/components/new-employee-setup" import { AccessPreview } from "@/components/access-preview" export type Screen = "templates" | "onboard" | "preview" export interface Employee { name: string email: string team: string role: string } export default function Home() { const [activeScreen, setActiveScreen] = useState("templates") const [selectedEmployee, setSelectedEmployee] = useState(null) const handleEmployeeSubmit = (employee: Employee) => { setSelectedEmployee(employee) setActiveScreen("preview") } const handleConfirmAccess = () => { // In production, this would apply the access setSelectedEmployee(null) setActiveScreen("templates") } return (

{activeScreen === "templates" && } {activeScreen === "onboard" && } {activeScreen === "preview" && selectedEmployee && ( setActiveScreen("onboard")} /> )}

) } [V0_FILE]typescriptreact:file="components/role-template-builder.tsx" isMerged="true" "use client" import { useState } from "react" import { Plus, ChevronRight, Pencil, Check, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" interface AppPermission { app: string icon: string permissions: string[] } interface RoleTemplate { id: string name: string department: string apps: AppPermission[] } const mockTemplates: RoleTemplate[] = [ { id: "1", name: "Product Designer", department: "Design", apps: [ { app: "Figma", icon: "F", permissions: ["Editor", "Team Library Access"] }, { app: "Slack", icon: "S", permissions: ["Member", "#design", "#product"] }, { app: "Notion", icon: "N", permissions: ["Editor", "Design Workspace"] }, { app: "Linear", icon: "L", permissions: ["Member", "Design Team"] }, ], }, { id: "2", name: "Software Engineer", department: "Engineering", apps: [ { app: "GitHub", icon: "G", permissions: ["Write", "CI/CD Access"] }, { app: "Slack", icon: "S", permissions: ["Member", "#engineering", "#deploys"] }, { app: "AWS", icon: "A", permissions: ["Developer", "Staging Environment"] }, { app: "Linear", icon: "L", permissions: ["Member", "Engineering Team"] }, { app: "Datadog", icon: "D", permissions: ["Viewer", "APM Access"] }, ], }, { id: "3", name: "Marketing Manager", department: "Marketing", apps: [ { app: "HubSpot", icon: "H", permissions: ["Admin", "Campaigns"] }, { app: "Slack", icon: "S", permissions: ["Member", "#marketing", "#content"] }, { app: "Google Analytics", icon: "G", permissions: ["Editor", "All Properties"] }, { app: "Figma", icon: "F", permissions: ["Viewer"] }, ], }, ] export function RoleTemplateBuilder() { const [templates] = useState(mockTemplates) const [selectedTemplate, setSelectedTemplate] = useState(mockTemplates[0]) const [isEditing, setIsEditing] = useState(false) return (

{/* Template List */}

Role Templates

Define access patterns once, reuse during onboarding.

{templates.map((template) => ( ))}

{/* Template Detail */} {selectedTemplate && (

{isEditing ? ( ) : (

{selectedTemplate.name}

)}

{selectedTemplate.department} Department

{isEditing ? ( <> ) : ( )}

App Access

{isEditing && ( )}

{selectedTemplate.apps.map((app, index) => (

{app.icon}

{app.app}

{app.permissions.map((permission, pIndex) => ( {permission} ))}

))}

)}

) } [V0_FILE]typescriptreact:file="components/new-employee-setup.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { ArrowRight, UserPlus, Info } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { Employee } from "@/app/page" interface NewEmployeeSetupProps { onSubmit: (employee: Employee) => void } const roles = [ { value: "product-designer", label: "Product Designer", dept: "Design" }, { value: "software-engineer", label: "Software Engineer", dept: "Engineering" }, { value: "marketing-manager", label: "Marketing Manager", dept: "Marketing" }, ] const teams = [ { value: "design", label: "Design" }, { value: "engineering", label: "Engineering" }, { value: "marketing", label: "Marketing" }, { value: "product", label: "Product" }, { value: "operations", label: "Operations" }, ] export function NewEmployeeSetup({ onSubmit }: NewEmployeeSetupProps) { const [name, setName] = useState("") const [email, setEmail] = useState("") const [team, setTeam] = useState("") const [role, setRole] = useState("") const selectedRole = roles.find((r) => r.value === role) const isValid = name && email && team && role const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (isValid) { onSubmit({ name, email, team, role: selectedRole?.label || role }) } } return (

New Employee Setup

Enter employee details and assign a role template to configure their access.

Full Name setName(e.target.value)} />

Work Email setEmail(e.target.value)} />

Team

Role Template

{selectedRole && (

Access from {selectedRole.label}

This employee will receive all app permissions defined in the {selectedRole.label} template. You can review before confirming.

)}

) } [V0_FILE]typescriptreact:file="components/access-preview.tsx" isMerged="true" "use client" import { ArrowLeft, Check, Shield, User, Mail, Building2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import type { Employee } from "@/app/page" interface AccessPreviewProps { employee: Employee onConfirm: () => void onBack: () => void } const accessByRole: Record = { "Product Designer": [ { app: "Figma", icon: "F", permissions: ["Editor", "Team Library Access"] }, { app: "Slack", icon: "S", permissions: ["Member", "#design", "#product"] }, { app: "Notion", icon: "N", permissions: ["Editor", "Design Workspace"] }, { app: "Linear", icon: "L", permissions: ["Member", "Design Team"] }, ], "Software Engineer": [ { app: "GitHub", icon: "G", permissions: ["Write", "CI/CD Access"] }, { app: "Slack", icon: "S", permissions: ["Member", "#engineering", "#deploys"] }, { app: "AWS", icon: "A", permissions: ["Developer", "Staging Environment"] }, { app: "Linear", icon: "L", permissions: ["Member", "Engineering Team"] }, { app: "Datadog", icon: "D", permissions: ["Viewer", "APM Access"] }, ], "Marketing Manager": [ { app: "HubSpot", icon: "H", permissions: ["Admin", "Campaigns"] }, { app: "Slack", icon: "S", permissions: ["Member", "#marketing", "#content"] }, { app: "Google Analytics", icon: "G", permissions: ["Editor", "All Properties"] }, { app: "Figma", icon: "F", permissions: ["Viewer"] }, ], } export function AccessPreview({ employee, onConfirm, onBack }: AccessPreviewProps) { const access = accessByRole[employee.role] || [] const totalPermissions = access.reduce((sum, app) => sum + app.permissions.length, 0) return (

Access Preview

Review the access that will be granted before confirming.

{/* Employee Summary */}

Employee

Name

{employee.name}

{employee.email}

Role

{employee.role}

{/* Access Summary */}

Access to be Granted

{access.length} apps · {totalPermissions} permissions

{access.map((app, index) => (

{app.icon}

{app.app}

{app.permissions.map((permission, pIndex) => ( {permission} ))}

))}

{/* Confirmation Notice */}

This action is reversible. Access can be modified or revoked at any time from the employee's profile.

{/* Actions */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const _inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Orio · Access Management", description: "Role-based access management for IT teams", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.99 0 0); --foreground: oklch(0.13 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.13 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.13 0 0); --primary: oklch(0.13 0 0); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.96 0 0); --secondary-foreground: oklch(0.13 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.96 0 0); --accent-foreground: oklch(0.13 0 0); --destructive: oklch(0.55 0.2 25); --destructive-foreground: oklch(0.55 0.2 25); --border: oklch(0.91 0 0); --input: oklch(0.91 0 0); --ring: oklch(0.65 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --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.985 0 0); --primary-foreground: oklch(0.205 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.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --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 { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --font-sans: "Inter", "Inter Fallback", system-ui, sans-serif; --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="components/sidebar.tsx" isEdit="true" isQuickEdit="true" "use client" import { Shield, Users, FolderKey } from "lucide-react" import type { Screen } from "@/app/page" interface SidebarProps { activeScreen: Screen onNavigate: (screen: Screen) => void } export function Sidebar({ activeScreen, onNavigate }: SidebarProps) { const navItems = [ { id: "templates" as Screen, label: "Role Templates", icon: FolderKey }, { id: "onboard" as Screen, label: "New Employee", icon: Users }, ] return ( ) }7f:["$","$L87",null,{"chatId":"m4BIox6bjB3","children":["$","$L88",null,{"data":{"@\"active-block\",\"m4BIox6bjB3\",":{"id":"b_mFNNwqnlXtu","messageId":"mrvk0dwD5NgyGEm0OGvLlyaPQbQnqYxI","source":"$89","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Aligning dividers","taskNameComplete":"Aligned dividers"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"m4BIox6bjB3\",":false,"":null},"children":"$L8a"}]}]

About

Tags

Share

About

Tags

Share

More from lfgraf

More Templates Like This