{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cloud-backup-schedule",
  "title": "Cloud Backup Schedule",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/cloud-backup-schedule/CloudBackupSchedule.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  Cloud,\n  Database,\n  HardDrive,\n  Clock,\n  CheckCircle2,\n  AlertCircle,\n  RotateCw,\n  ShieldCheck,\n  Calendar,\n  Play,\n  ArrowUpRight,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { Progress } from '@/components/ui/progress'\nimport { Switch } from '@/components/ui/switch'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface BackupSnapshot {\n  id: string\n  label: string\n  size: string\n  timestamp: string\n  status: 'completed' | 'in_progress' | 'failed'\n  checksum: string\n}\n\nexport interface CloudBackupScheduleProps {\n  initialAutoBackup?: boolean\n  frequency?: string\n  retentionDays?: number\n  storageUsedGb?: number\n  storageTotalGb?: number\n  className?: string\n}\n\nexport function CloudBackupSchedule({\n  initialAutoBackup = true,\n  frequency = 'Everyday at 02:00 UTC',\n  retentionDays = 30,\n  storageUsedGb = 68.4,\n  storageTotalGb = 100,\n  className,\n}: CloudBackupScheduleProps) {\n  const [autoBackupEnabled, setAutoBackupEnabled] = React.useState(initialAutoBackup)\n  const [isBackingUp, setIsBackingUp] = React.useState(false)\n  const [lastBackupSuccess, setLastBackupSuccess] = React.useState('12 minutes ago')\n  const [snapshots, setSnapshots] = React.useState<BackupSnapshot[]>([\n    {\n      id: 'snap-9842',\n      label: 'Daily Scheduled Snapshot',\n      size: '14.2 GB',\n      timestamp: 'Today, 02:00 UTC',\n      status: 'completed',\n      checksum: 'sha256:7f9b...a1c3',\n    },\n    {\n      id: 'snap-9841',\n      label: 'Daily Scheduled Snapshot',\n      size: '14.1 GB',\n      timestamp: 'Yesterday, 02:00 UTC',\n      status: 'completed',\n      checksum: 'sha256:4d8e...90f2',\n    },\n    {\n      id: 'snap-9840',\n      label: 'Manual Pre-migration Checkpoint',\n      size: '13.9 GB',\n      timestamp: 'Sep 15, 14:22 UTC',\n      status: 'completed',\n      checksum: 'sha256:1a2b...3c4d',\n    },\n    {\n      id: 'snap-9839',\n      label: 'Automated Snapshot',\n      size: '13.8 GB',\n      timestamp: 'Sep 14, 02:00 UTC',\n      status: 'failed',\n      checksum: 'sha256:9e8f...5d2a',\n    },\n  ])\n\n  const usagePercentage = Math.round((storageUsedGb / storageTotalGb) * 100)\n\n  const handleTriggerBackup = () => {\n    if (isBackingUp) return\n    setIsBackingUp(true)\n\n    setTimeout(() => {\n      setIsBackingUp(false)\n      setLastBackupSuccess('Just now')\n      setSnapshots((prev) => [\n        {\n          id: `snap-${Math.floor(1000 + Math.random() * 9000)}`,\n          label: 'Manual On-demand Snapshot',\n          size: '14.3 GB',\n          timestamp: 'Just now',\n          status: 'completed',\n          checksum: `sha256:${Math.random().toString(36).substring(2, 6)}...${Math.random().toString(36).substring(2, 6)}`,\n        },\n        ...prev,\n      ])\n    }, 1200)\n  }\n\n  return (\n    <div className={cn('@container w-full max-w-4xl space-y-6', className)}>\n      {/* Main Backup Management Card */}\n      <Card className=\"border-border shadow-xs\">\n        <CardHeader className=\"flex flex-col justify-between gap-4 pb-4 @md:flex-row @md:items-center\">\n          <div className=\"min-w-0 space-y-1\">\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <div className=\"bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-lg\">\n                <Cloud className=\"size-4 shrink-0\" />\n              </div>\n              <CardTitle className=\"text-base font-semibold tracking-tight sm:text-lg\">\n                Cloud Backup & Recovery\n              </CardTitle>\n              <Badge variant=\"outline\" className=\"border-success/20 bg-success/10 text-success shrink-0 gap-1\">\n                <ShieldCheck className=\"size-3 shrink-0\" />\n                AES-256\n              </Badge>\n            </div>\n            <CardDescription className=\"text-xs sm:text-sm\">\n              Automated cluster snapshot schedules, retention policies, and disaster recovery replication.\n            </CardDescription>\n          </div>\n\n          <div className=\"flex shrink-0 items-center gap-2\">\n            <Button\n              size=\"sm\"\n              variant=\"default\"\n              className=\"w-full cursor-pointer gap-1.5 shadow-xs @md:w-auto\"\n              disabled={isBackingUp}\n              onClick={handleTriggerBackup}\n            >\n              {isBackingUp ? (\n                <RotateCw className=\"size-3.5 shrink-0 animate-spin\" />\n              ) : (\n                <Play className=\"size-3.5 shrink-0 fill-current\" />\n              )}\n              {isBackingUp ? 'Snapshotting...' : 'Backup Now'}\n            </Button>\n          </div>\n        </CardHeader>\n\n        <Separator />\n\n        <CardContent className=\"grid grid-cols-1 gap-4 p-4 pt-4 sm:gap-6 sm:p-6 sm:pt-6 @md:grid-cols-2\">\n          {/* Automation Schedule Tile */}\n          <div className=\"border-border bg-card min-w-0 space-y-4 rounded-lg border p-3.5 sm:p-4\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2.5\">\n                <Clock className=\"text-muted-foreground size-4 shrink-0\" />\n                <span className=\"text-sm font-medium\">Daily Automation</span>\n              </div>\n              <Switch\n                checked={autoBackupEnabled}\n                onCheckedChange={setAutoBackupEnabled}\n                aria-label=\"Toggle daily automated backup\"\n                className=\"shrink-0\"\n              />\n            </div>\n\n            <div className=\"text-muted-foreground space-y-2 text-xs\">\n              <div className=\"flex items-center justify-between gap-2\">\n                <span className=\"shrink-0\">Window:</span>\n                <span className=\"text-foreground truncate text-right font-medium\">{frequency}</span>\n              </div>\n              <div className=\"flex items-center justify-between gap-2\">\n                <span className=\"shrink-0\">Retention:</span>\n                <span className=\"text-foreground truncate text-right font-medium\">{retentionDays} days (rolling)</span>\n              </div>\n              <div className=\"flex items-center justify-between gap-2\">\n                <span className=\"shrink-0\">Target:</span>\n                <span className=\"text-foreground truncate text-right font-medium\">AWS S3 (us-east-1)</span>\n              </div>\n            </div>\n          </div>\n\n          {/* Storage Quota Gauge Tile */}\n          <div className=\"border-border bg-card min-w-0 space-y-4 rounded-lg border p-3.5 sm:p-4\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2\">\n                <HardDrive className=\"text-muted-foreground size-4 shrink-0\" />\n                <span className=\"truncate text-sm font-medium\">Vault Storage</span>\n              </div>\n              <span className=\"text-muted-foreground shrink-0 text-xs font-semibold tabular-nums\">\n                {usagePercentage}% used\n              </span>\n            </div>\n\n            <Progress value={usagePercentage} className=\"h-2\" />\n\n            <div className=\"text-muted-foreground flex items-center justify-between gap-2 text-xs tabular-nums\">\n              <span>{storageUsedGb} GB used</span>\n              <span className=\"text-right\">{storageTotalGb} GB total</span>\n            </div>\n          </div>\n        </CardContent>\n\n        <Separator />\n\n        {/* Recent Snapshot Ledger */}\n        <CardContent className=\"space-y-4 p-4 pt-4 sm:p-6 sm:pt-6\">\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <div className=\"flex items-center gap-2\">\n              <Database className=\"text-muted-foreground size-4 shrink-0\" />\n              <h4 className=\"text-sm font-semibold tracking-tight\">Recent Snapshots</h4>\n            </div>\n            <span className=\"text-muted-foreground text-xs\">Last verified: {lastBackupSuccess}</span>\n          </div>\n\n          <div className=\"divide-border border-border bg-card divide-y rounded-lg border\">\n            {snapshots.map((snap) => (\n              <div\n                key={snap.id}\n                className=\"hover:bg-muted/40 flex flex-col justify-between gap-2 p-3.5 text-sm transition-colors @md:flex-row @md:items-center\"\n              >\n                <div className=\"flex min-w-0 items-center gap-3\">\n                  {snap.status === 'completed' ? (\n                    <CheckCircle2 className=\"text-success size-4 shrink-0\" />\n                  ) : snap.status === 'failed' ? (\n                    <AlertCircle className=\"text-destructive size-4 shrink-0\" />\n                  ) : (\n                    <RotateCw className=\"text-primary size-4 shrink-0 animate-spin\" />\n                  )}\n                  <div className=\"min-w-0 flex-1 space-y-0.5\">\n                    <div className=\"text-foreground flex flex-wrap items-center gap-1.5 font-medium\">\n                      <span className=\"truncate\">{snap.label}</span>\n                      <span className=\"text-muted-foreground shrink-0 font-mono text-xs\">({snap.id})</span>\n                    </div>\n                    <div className=\"text-muted-foreground flex items-center gap-2 font-mono text-xs\">\n                      <span className=\"truncate font-mono\">{snap.checksum}</span>\n                      <span className=\"shrink-0\">•</span>\n                      <span className=\"shrink-0\">{snap.size}</span>\n                    </div>\n                  </div>\n                </div>\n\n                <div className=\"flex shrink-0 items-center justify-between gap-3 pl-7 @md:justify-end @md:pl-0\">\n                  <span className=\"text-muted-foreground text-xs whitespace-nowrap\">{snap.timestamp}</span>\n                  <Badge\n                    variant={\n                      snap.status === 'completed' ? 'secondary' : snap.status === 'failed' ? 'destructive' : 'outline'\n                    }\n                    className=\"shrink-0 text-xs whitespace-nowrap capitalize\"\n                  >\n                    {snap.status.replace('_', ' ')}\n                  </Badge>\n                </div>\n              </div>\n            ))}\n          </div>\n        </CardContent>\n\n        <CardFooter className=\"border-border text-muted-foreground flex flex-col items-start justify-between gap-3 border-t pt-4 text-xs @md:flex-row @md:items-center\">\n          <div className=\"flex items-center gap-2\">\n            <Calendar className=\"size-3.5 shrink-0\" />\n            <span>Next scheduled backup: Tonight at 02:00 UTC</span>\n          </div>\n          <a\n            href=\"#docs\"\n            className=\"text-primary inline-flex shrink-0 items-center gap-1 font-medium hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Disaster recovery runbook\n            <ArrowUpRight className=\"size-3 shrink-0\" />\n          </a>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CloudBackupSchedule.tsx"
    },
    {
      "path": "packages/registry-react/blocks/cloud-backup-schedule/index.ts",
      "content": "export { CloudBackupSchedule, type CloudBackupScheduleProps, type BackupSnapshot } from './CloudBackupSchedule'\n",
      "type": "registry:block",
      "target": "~/components/blocks/cloud-backup-schedule/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/switch.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Automated cloud snapshot scheduler with storage quota metering, encryption status, and recent snapshot timeline.",
  "categories": [
    "dashboard",
    "devops",
    "data"
  ]
}