("home")
+
+ const accountData = {
+ accountId: "123456789012",
+ accountName: "Production Account",
+ userName: "john.smith@company.com",
+ region: "us-east-1",
+ regionName: "US East (N. Virginia)",
+ organizationId: "o-abc123def456",
+ billingCurrency: "USD",
+ }
+
+ const recentlyVisited = [
+ { name: "S3", icon: Database, color: "bg-green-500", id: "s3" },
+ { name: "VPC", icon: Shield, color: "bg-purple-500", id: "vpc" },
+ { name: "EC2", icon: Server, color: "bg-orange-500", id: "ec2" },
+ { name: "RDS", icon: Database, color: "bg-blue-500", id: "rds" },
+ { name: "Lambda", icon: Zap, color: "bg-yellow-500", id: "lambda" },
+ { name: "CloudWatch", icon: BarChart3, color: "bg-indigo-500", id: "cloudwatch" },
+ { name: "IAM", icon: Users, color: "bg-red-500", id: "iam" },
+ ]
+
+ const serviceCategories = [
+ {
+ category: "Compute",
+ services: [
+ { name: "EC2", description: "Virtual Servers in the Cloud", id: "ec2", icon: Server },
+ { name: "Lambda", description: "Run Code without Thinking about Servers", id: "lambda", icon: Zap },
+ ],
+ },
+ {
+ category: "Storage",
+ services: [{ name: "S3", description: "Scalable Storage in the Cloud", id: "s3", icon: Database }],
+ },
+ {
+ category: "Database",
+ services: [{ name: "RDS", description: "Managed Relational Database Service", id: "rds", icon: Database }],
+ },
+ {
+ category: "Networking & Content Delivery",
+ services: [{ name: "VPC", description: "Isolated Cloud Resources", id: "vpc", icon: Network }],
+ },
+ {
+ category: "Management & Governance",
+ services: [
+ { name: "CloudWatch", description: "Monitoring and Observability", id: "cloudwatch", icon: BarChart3 },
+ ],
+ },
+ {
+ category: "Security, Identity, & Compliance",
+ services: [{ name: "IAM", description: "Identity and Access Management", id: "iam", icon: Users }],
+ },
+ ]
+
+ const handleServiceClick = (serviceId: string) => {
+ setCurrentView(serviceId)
+ }
+
+ const handleBackToHome = () => {
+ setCurrentView("home")
+ }
+
+ const renderCurrentView = () => {
+ switch (currentView) {
+ case "s3":
+ return
+ case "ec2":
+ return
+ case "vpc":
+ return
+ case "rds":
+ return
+ case "lambda":
+ return
+ case "cloudwatch":
+ return
+ case "iam":
+ return
+ default:
+ return renderDashboard()
+ }
+ }
+
+ const renderDashboard = () => (
+ <>
+ {/* Console Home Header */}
+
+
+
+
Console Home
+
+ beta
+
+
+
+
+
+
+
+
+
+ {/* Recently visited */}
+
+
+
+
+
Recently visited
+
+ info
+
+
handleServiceClick(service.id)}
+ >
+
+
+
+
{service.name}
+
+
+
+
+
+
+ {/* Applications */}
+
+
+
+
+
Applications (3)
+
+ info
+
+
+
+
+
+
+
+
+
+
+
web-app-prod
+
Running • 3 resources
+
+
+ Healthy
+
+
+
+
+
api-service
+
Running • 5 resources
+
+
+ Healthy
+
+
+
+
+
data-pipeline
+
Stopped • 2 resources
+
+
+ Stopped
+
+
+
+
+
+
+
+
+ {/* Quick Start */}
+
+
+
+
+
+
+
+
+
+
Launch a virtual server
+
Get started with EC2 instances for your applications.
+
+
+
+
+
Store and retrieve data
+
Use S3 for scalable object storage solutions.
+
+
+
+ {/* System Health */}
+
+
+
+
+
System Health
+
+ info
+
+
+
+ Open issues
+ Past 7 days
+
+
0
+
+
+ Scheduled maintenance
+ Upcoming
+
+
1
+
Network upgrade - Dec 15, 2024
+
+
+
+
+
+
+ {/* Cost and usage */}
+
+
+
+
+
Cost and usage
+
+ info
+
+
+
+
+ This month
+ Dec 2024
+
+
$247.83
+
↓ 12% from last month
+
+
+
+ Forecasted
+ End of month
+
+
$312.45
+
+
+
+
+
+
+ {/* Security Overview */}
+
+
+
+
+
Security Overview
+
+ info
+
+
+ Security alerts
+
+ All clear
+
+
+
+ Active policies
+ 12
+
+
+ MFA enabled users
+ 8/10
+
+
+
+
+
+
+
+
+ {/* Top Navigation Bar */}
+
+
+
+
+
+ homecloud
+
+
+
+
+
+
+ All services
+
+ {serviceCategories.map((category, categoryIndex) => (
+
+
+ {category.category}
+
+ {category.services.map((service, serviceIndex) => (
+
handleServiceClick(service.id)}
+ >
+
+
+
{service.name}
+
{service.description}
+
+ ))}
+ {categoryIndex < serviceCategories.length - 1 &&
}
+
+
+
+
setSearchQuery(e.target.value)}
+ className="pl-10 w-80 bg-gray-800 border-gray-700 text-white placeholder-gray-400"
+ />
+
[Alt+S]
+
+
+
+
+
+
+
+
+
+
+
+
+ Select Region
+
+ US East (N. Virginia) - us-east-1
+ US West (Oregon) - us-west-2
+ Europe (Ireland) - eu-west-1
+ Asia Pacific (Tokyo) - ap-northeast-1
+
+
+
+
+
+
+
+ Account Information
+
+
+
{accountData.accountName}
+
Account ID: {accountData.accountId}
+
User: {accountData.userName}
+
Organization: {accountData.organizationId}
+
+
+
+
+
+
+ {renderCurrentView()}
+
+
+
+
+
+
+
+
CloudWatch
+
+
+
+
+
+
+
+
+ {/* Quick Actions */}
+
+
+
+
+ Create alarm
+ Monitor metrics
+
+
+
+
+
+ Create dashboard
+ Visualize metrics
+
+
+
+
+
+ View logs
+ Browse log groups
+
+
+
+
+
+ Insights
+ Query and analyze
+
+
+
+
+ {/* Alarms List */}
+
+
+
+
Alarms
+
+
+
+
+
+
+
+
+
+
+
+ | Alarm name |
+ Status |
+ Metric |
+ Threshold |
+ Updated |
+ Actions |
+
+
+
+ {alarms.map((alarm, index) => (
+
+ |
+ {alarm.name}
+ |
+
+ {alarm.status}
+ |
+ {alarm.metric} |
+ {alarm.threshold} |
+ {alarm.updated} |
+
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+ {/* Monitoring Summary */}
+
+
+
+
+
+ Alarm Summary
+
+
+
+
+
+ Total alarms
+ 3
+
+
+ In alarm
+ 1
+
+
+ OK
+ 2
+
+
+
+
+
+
+
+ Dashboards
+
+
+
+
+
+ Custom dashboards
+ 2
+
+
+ Widgets
+ 12
+
+
+ Automatic dashboards
+ 5
+
+
+
+
+
+
+
+ Logs
+
+
+
+
+
+ Log groups
+ 8
+
+
+ Log streams
+ 24
+
+
+ Stored data
+ 2.1 GB
+
+
+
+
+
+
+
+
+
+
+
EC2
+
+
+
+
+
+
+
+
+ {/* Quick Actions */}
+
+
+
+
+ Launch instance
+ Create a new EC2 instance
+
+
+
+
+
+ Create volume
+ Create EBS volume
+
+
+
+
+
+ View metrics
+ Monitor performance
+
+
+
+
+
+ Security groups
+ Manage firewall rules
+
+
+
+
+ {/* Instances List */}
+
+
+
+
Instances
+
+
+
+
+
+
+
+
+
+
+
+ | Instance ID |
+ Name |
+ Instance type |
+ Instance state |
+ Availability Zone |
+ Public IPv4 |
+ Actions |
+
+
+
+ {instances.map((instance, index) => (
+
+ |
+
+ {instance.id}
+
+ |
+ {instance.name} |
+ {instance.type} |
+
+ {instance.state}
+ |
+ {instance.az} |
+ {instance.publicIp} |
+
+
+ {instance.state === "running" ? (
+
+ ) : (
+
+ )}
+
+
+ |
+
+ ))}
+
+
+
+
+ {/* Resource Summary */}
+
+
+
+
+
+ Instance Summary
+
+
+
+
+
+ Running instances
+ 2
+
+
+ Stopped instances
+ 1
+
+
+ Total instances
+ 3
+
+
+
+
+
+
+
+ Storage
+
+
+
+
+
+ EBS volumes
+ 5
+
+
+ Total storage
+ 250 GB
+
+
+ Snapshots
+ 12
+
+
+
+
+
+
+
+ Monitoring
+
+
+
+
+
+ CPU utilization
+ 23%
+
+
+ Network in
+ 1.2 MB/s
+
+
+ Network out
+ 0.8 MB/s
+
+
+
+
+
+
+
+
+
+
+
IAM
+
+
+
+
+
+
+
+
+ {/* Quick Actions */}
+
+
+
+
+ Create user
+ Add new IAM user
+
+
+
+
+
+ Create role
+ Define service permissions
+
+
+
+
+
+ Create policy
+ Define permissions
+
+
+
+
+
+ Access analyzer
+ Review permissions
+
+
+
+
+ {/* Users List */}
+
+
+
+
Users
+
+
+
+
+
+
+
+
+
+
+
+ | User name |
+ Groups |
+ Policies |
+ Access keys |
+ MFA |
+ Last activity |
+ Actions |
+
+
+
+ {users.map((user, index) => (
+
+ |
+ {user.name}
+ |
+ {user.groups.join(", ")} |
+ {user.policies} |
+ {user.accessKeys} |
+
+
+ {user.mfa ? "Enabled" : "Disabled"}
+
+ |
+ {user.lastActivity} |
+
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+ {/* Roles List */}
+
+
+
+
Roles
+
+
+
+
+
+ | Role name |
+ Type |
+ Policies |
+ Last used |
+ Actions |
+
+
+
+ {roles.map((role, index) => (
+
+ |
+ {role.name}
+ |
+ {role.type} |
+ {role.policies} |
+ {role.lastUsed} |
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+ {/* IAM Summary */}
+
+
+
+
+
+ Users & Groups
+
+
+
+
+
+ Total users
+ 3
+
+
+ Groups
+ 3
+
+
+ MFA enabled
+ 2/3
+
+
+
+
+
+
+
+ Roles & Policies
+
+
+
+
+
+ Total roles
+ 3
+
+
+ Custom policies
+ 8
+
+
+ AWS managed
+ 12
+
+
+
+
+
+
+
+ Security
+
+
+
+
+
+ Access keys
+ 3
+
+
+ Unused keys
+ 0
+
+
+ Password policy
+ Strong
+
+
+
+
+
+
+
+
+
+
+
Lambda
+
+
+
+
+
+
+
+
+ {/* Quick Actions */}
+
+
+
+
+ Create function
+ Build serverless function
+
+
+
+
+ Browse blueprints
+ Use pre-built templates
+
+
+
+
+
+ View metrics
+ Monitor performance
+
+
+
+
+
+ Layers
+ Manage shared code
+
+
+
+
+ {/* Functions List */}
+
+
+
+
Functions
+
+
+
+
+
+
+
+
+
+
+
+ | Function name |
+ Runtime |
+ Status |
+ Last modified |
+ Memory |
+ Invocations |
+ Actions |
+
+
+
+ {functions.map((func, index) => (
+
+ |
+ {func.name}
+ |
+ {func.runtime} |
+
+ {func.status}
+ |
+ {func.lastModified} |
+ {func.memory} |
+ {func.invocations} |
+
+
+ |
+
+ ))}
+
+
+
+
+ {/* Lambda Summary */}
+
+
+
+
+
+ Function Summary
+
+
+
+
+
+ Total functions
+ 3
+
+
+ Active functions
+ 2
+
+
+ Total invocations
+ 1,336
+
+
+
+
+
+
+
+ Performance
+
+
+
+
+
+ Avg duration
+ 245ms
+
+
+ Error rate
+ 0.2%
+
+
+ Throttles
+ 0
+
+
+
+
+
+
+
+ Resources
+
+
+
+
+
+ Layers
+ 2
+
+
+ Event sources
+ 5
+
+
+ Destinations
+ 1
+
+
+
+
+
+
+
+
+
+
+
RDS
+
+
+
+
+
+
+
+
+ {/* Quick Actions */}
+
+
+
+
+ Create database
+ Launch new RDS instance
+
+
+
+
+
+ Create snapshot
+ Backup your database
+
+
+
+
+
+ Performance insights
+ Monitor performance
+
+
+
+
+
+ Parameter groups
+ Manage configurations
+
+
+
+
+ {/* Databases List */}
+
+
+
+
Databases
+
+
+
+
+
+
+
+
+
+
+
+ | DB identifier |
+ Engine |
+ Status |
+ Instance class |
+ Storage |
+ Actions |
+
+
+
+ {databases.map((db, index) => (
+
+ |
+ {db.id}
+ |
+
+ {db.engine} {db.version}
+ |
+
+ {db.status}
+ |
+ {db.instanceClass} |
+ {db.storage} |
+
+
+ {db.status === "available" ? (
+
+ ) : (
+
+ )}
+
+
+ |
+
+ ))}
+
+
+
+
+ {/* Database Summary */}
+
+
+
+
+
+ Database Summary
+
+
+
+
+
+ Running databases
+ 2
+
+
+ Stopped databases
+ 1
+
+
+ Total storage
+ 601 GB
+
+
+
+
+
+
+
+ Backups
+
+
+
+
+
+ Automated backups
+ Enabled
+
+
+ Manual snapshots
+ 5
+
+
+ Backup retention
+ 7 days
+
+
+
+
+
+
+
+ Performance
+
+
+
+
+
+ CPU utilization
+ 15%
+
+
+ Connections
+ 12/100
+
+
+ Read IOPS
+ 245/sec
+
+
+
+
+
+
+
+
+
+
+
S3
+
+
+
+
+
+
+
+
+ {/* Quick Actions */}
+
+
+
+
+ Upload files
+ Upload files to S3
+
+
+
+
+
+ Create bucket
+ Create a new S3 bucket
+
+
+
+
+
+ Bucket policies
+ Manage access policies
+
+
+
+
+
+ Access logs
+ View access logs
+
+
+
+
+ {/* Buckets List */}
+
+
+
+
Buckets
+
+
+
+
+
+
+
+
+
+
+
+ | Name |
+ Region |
+ Date created |
+ Objects |
+ Size |
+ Actions |
+
+
+
+ {buckets.map((bucket, index) => (
+
+ |
+
+
+
+ {bucket.name}
+
+
+ |
+ {bucket.region} |
+ {bucket.created} |
+ {bucket.objects.toLocaleString()} |
+ {bucket.size} |
+
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+ {/* Storage Analytics */}
+
+
+
+ Storage usage
+
+
+
+
+ Total storage
+ 11.5 GB
+
+
+ Number of objects
+ 4,757
+
+
+ Number of buckets
+ 3
+
+
+
+
+
+ Recent activity
+
+
+
+
+
+
Uploaded 15 files to my-app-assets
+
2h ago
+
+
+
+
Created bucket backup-storage
+
1d ago
+
+
+
+
Updated bucket policy for logs-archive
+
3d ago
+
+
+
+
+
+
+
+
+
+
+
VPC
+
+
+
+
+
+
+
+
+ {/* Quick Actions */}
+
+
+
+
+ Create VPC
+ Create a new VPC
+
+
+
+
+
+ Create subnet
+ Add subnet to VPC
+
+
+
+
+
+ Route tables
+ Manage routing
+
+
+
+
+
+ Security groups
+ Configure firewall
+
+
+
+
+ {/* VPCs List */}
+
+
+
+
Your VPCs
+
+
+
+
+
+
+
+
+
+
+
+ | VPC ID |
+ Name |
+ IPv4 CIDR |
+ State |
+ Subnets |
+ Internet Gateway |
+ Actions |
+
+
+
+ {vpcs.map((vpc, index) => (
+
+ |
+ {vpc.id}
+ |
+ {vpc.name} |
+ {vpc.cidr} |
+
+ {vpc.state}
+ |
+ {vpc.subnets} |
+ {vpc.igw} |
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+ {/* Subnets List */}
+
+
+
+
Subnets
+
+
+
+
+
+ | Subnet ID |
+ Name |
+ VPC |
+ IPv4 CIDR |
+ Availability Zone |
+ Type |
+
+
+
+ {subnets.map((subnet, index) => (
+
+ |
+
+ {subnet.id}
+
+ |
+ {subnet.name} |
+ {subnet.vpc} |
+ {subnet.cidr} |
+ {subnet.az} |
+
+
+ {subnet.type}
+
+ |
+
+ ))}
+
+
+
+
+ {/* Network Summary */}
+
+
+
+
+
+ VPC Summary
+
+
+
+
+
+ Total VPCs
+ 3
+
+
+ Total subnets
+ 9
+
+
+ Internet gateways
+ 2
+
+
+
+
+
+
+
+ Security
+
+
+
+
+
+ Security groups
+ 8
+
+
+ Network ACLs
+ 3
+
+
+ NAT gateways
+ 2
+
+
+
+
+
+
+
+ Routing
+
+
+
+
+
+ Route tables
+ 4
+
+
+ VPC endpoints
+ 1
+
+
+ Peering connections
+ 0
+
+
+
+
{children}
+
+ )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/console/components/ui/alert-dialog.tsx b/console/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..0863e40
--- /dev/null
+++ b/console/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function AlertDialogTrigger({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogPortal({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogOverlay({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+ )
+}
+
+function AlertDialogHeader({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDialogFooter({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogDescription({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogAction({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogCancel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export {
+ AlertDialog,
+ AlertDialogPortal,
+ AlertDialogOverlay,
+ AlertDialogTrigger,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogFooter,
+ AlertDialogTitle,
+ AlertDialogDescription,
+ AlertDialogAction,
+ AlertDialogCancel,
+}
diff --git a/console/components/ui/alert.tsx b/console/components/ui/alert.tsx
new file mode 100644
index 0000000..1421354
--- /dev/null
+++ b/console/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+ "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+ {
+ variants: {
+ variant: {
+ default: "bg-card text-card-foreground",
+ destructive:
+ "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Alert({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
+ )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/console/components/ui/aspect-ratio.tsx b/console/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..3df3fd0
--- /dev/null
+++ b/console/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+function AspectRatio({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+export { AspectRatio }
diff --git a/console/components/ui/avatar.tsx b/console/components/ui/avatar.tsx
new file mode 100644
index 0000000..71e428b
--- /dev/null
+++ b/console/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AvatarImage({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AvatarFallback({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/console/components/ui/badge.tsx b/console/components/ui/badge.tsx
new file mode 100644
index 0000000..0205413
--- /dev/null
+++ b/console/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+ destructive:
+ "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Badge({
+ className,
+ variant,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"span"> &
+ VariantProps & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "span"
+
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/console/components/ui/breadcrumb.tsx b/console/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..eb88f32
--- /dev/null
+++ b/console/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+ return
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+ return (
+
+ )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+ return (
+
+ )
+}
+
+function BreadcrumbLink({
+ asChild,
+ className,
+ ...props
+}: React.ComponentProps<"a"> & {
+ asChild?: boolean
+}) {
+ const Comp = asChild ? Slot : "a"
+
+ return (
+
+ )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+
+ )
+}
+
+function BreadcrumbSeparator({
+ children,
+ className,
+ ...props
+}: React.ComponentProps<"li">) {
+ return (
+ svg]:size-3.5", className)}
+ {...props}
+ >
+ {children ?? }
+
+ )
+}
+
+function BreadcrumbEllipsis({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+
+
+ More
+
+ )
+}
+
+export {
+ Breadcrumb,
+ BreadcrumbList,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ BreadcrumbEllipsis,
+}
diff --git a/console/components/ui/button.tsx b/console/components/ui/button.tsx
new file mode 100644
index 0000000..a2df8dc
--- /dev/null
+++ b/console/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+ ghost:
+ "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2 has-[>svg]:px-3",
+ sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+ icon: "size-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+function Button({
+ className,
+ variant,
+ size,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot : "button"
+
+ return (
+
+ )
+}
+
+export { Button, buttonVariants }
diff --git a/console/components/ui/calendar.tsx b/console/components/ui/calendar.tsx
new file mode 100644
index 0000000..4d7c46a
--- /dev/null
+++ b/console/components/ui/calendar.tsx
@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import {
+ ChevronDownIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+ className,
+ classNames,
+ showOutsideDays = true,
+ captionLayout = "label",
+ buttonVariant = "ghost",
+ formatters,
+ components,
+ ...props
+}: React.ComponentProps & {
+ buttonVariant?: React.ComponentProps["variant"]
+}) {
+ const defaultClassNames = getDefaultClassNames()
+
+ return (
+ svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+ className
+ )}
+ captionLayout={captionLayout}
+ formatters={{
+ formatMonthDropdown: (date) =>
+ date.toLocaleString("default", { month: "short" }),
+ ...formatters,
+ }}
+ classNames={{
+ root: cn("w-fit", defaultClassNames.root),
+ months: cn(
+ "flex gap-4 flex-col md:flex-row relative",
+ defaultClassNames.months
+ ),
+ month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+ nav: cn(
+ "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+ defaultClassNames.nav
+ ),
+ button_previous: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+ defaultClassNames.button_previous
+ ),
+ button_next: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+ defaultClassNames.button_next
+ ),
+ month_caption: cn(
+ "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+ defaultClassNames.month_caption
+ ),
+ dropdowns: cn(
+ "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+ defaultClassNames.dropdowns
+ ),
+ dropdown_root: cn(
+ "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+ defaultClassNames.dropdown_root
+ ),
+ dropdown: cn(
+ "absolute bg-popover inset-0 opacity-0",
+ defaultClassNames.dropdown
+ ),
+ caption_label: cn(
+ "select-none font-medium",
+ captionLayout === "label"
+ ? "text-sm"
+ : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+ defaultClassNames.caption_label
+ ),
+ table: "w-full border-collapse",
+ weekdays: cn("flex", defaultClassNames.weekdays),
+ weekday: cn(
+ "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+ defaultClassNames.weekday
+ ),
+ week: cn("flex w-full mt-2", defaultClassNames.week),
+ week_number_header: cn(
+ "select-none w-(--cell-size)",
+ defaultClassNames.week_number_header
+ ),
+ week_number: cn(
+ "text-[0.8rem] select-none text-muted-foreground",
+ defaultClassNames.week_number
+ ),
+ day: cn(
+ "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+ defaultClassNames.day
+ ),
+ range_start: cn(
+ "rounded-l-md bg-accent",
+ defaultClassNames.range_start
+ ),
+ range_middle: cn("rounded-none", defaultClassNames.range_middle),
+ range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+ today: cn(
+ "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+ defaultClassNames.today
+ ),
+ outside: cn(
+ "text-muted-foreground aria-selected:text-muted-foreground",
+ defaultClassNames.outside
+ ),
+ disabled: cn(
+ "text-muted-foreground opacity-50",
+ defaultClassNames.disabled
+ ),
+ hidden: cn("invisible", defaultClassNames.hidden),
+ ...classNames,
+ }}
+ components={{
+ Root: ({ className, rootRef, ...props }) => {
+ return (
+
+ )
+ },
+ Chevron: ({ className, orientation, ...props }) => {
+ if (orientation === "left") {
+ return (
+
+ )
+ }
+
+ if (orientation === "right") {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+ },
+ DayButton: CalendarDayButton,
+ WeekNumber: ({ children, ...props }) => {
+ return (
+
+
+ {children}
+
+ |
+ )
+ },
+ ...components,
+ }}
+ {...props}
+ />
+ )
+}
+
+function CalendarDayButton({
+ className,
+ day,
+ modifiers,
+ ...props
+}: React.ComponentProps) {
+ const defaultClassNames = getDefaultClassNames()
+
+ const ref = React.useRef(null)
+ React.useEffect(() => {
+ if (modifiers.focused) ref.current?.focus()
+ }, [modifiers.focused])
+
+ return (
+