{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "software-purchase-01",
  "description": "Software purchase approval card",
  "registryDependencies": [
    "software-purchase-card",
    "separator"
  ],
  "files": [
    {
      "path": "creative-tim/blocks/software-purchase-01/page.tsx",
      "content": "\"use client\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { SoftwarePurchaseCard } from \"@/components/ui/software-purchase-card\"\n\nexport default function Page() {\n  const handleApprove = () => {\n    console.log(\"Purchase approved\")\n  }\n\n  const handleDiscard = () => {\n    console.log(\"Purchase discarded\")\n  }\n\n  return (\n    <div className=\"flex min-h-screen w-full items-center justify-center p-6\">\n      <div className=\"flex w-full max-w-6xl flex-col gap-8 lg:flex-row\">\n        {/* Left side - Purchase Details */}\n        <div className=\"flex flex-1 flex-col gap-6\">\n          <div className=\"flex flex-col gap-2\">\n            <h1 className=\"text-3xl font-bold\">Software Purchase Request</h1>\n            <p className=\"text-muted-foreground\">\n              Review and approve the software purchase details below\n            </p>\n          </div>\n\n          <Separator />\n\n          <div className=\"flex flex-col gap-6\">\n            <div>\n              <h2 className=\"mb-4 text-xl font-semibold\">Purchase Details</h2>\n              <div className=\"grid gap-4\">\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">Software Name</span>\n                  <span className=\"text-muted-foreground\">\n                    Enterprise Cloud Suite\n                  </span>\n                </div>\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">Vendor</span>\n                  <span className=\"text-muted-foreground\">\n                    CloudTech Solutions Inc.\n                  </span>\n                </div>\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">License Type</span>\n                  <span className=\"text-muted-foreground\">\n                    Commercial License\n                  </span>\n                </div>\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">Contract Duration</span>\n                  <span className=\"text-muted-foreground\">12 months</span>\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            <div>\n              <h2 className=\"mb-4 text-xl font-semibold\">\n                Billing Information\n              </h2>\n              <div className=\"grid gap-4\">\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">Billing Cycle</span>\n                  <span className=\"text-muted-foreground\">Monthly</span>\n                </div>\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">Payment Method</span>\n                  <span className=\"text-muted-foreground\">\n                    Corporate Credit Card\n                  </span>\n                </div>\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">Cost Center</span>\n                  <span className=\"text-muted-foreground\">\n                    Engineering Department\n                  </span>\n                </div>\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">Annual Total</span>\n                  <span className=\"text-muted-foreground font-semibold\">\n                    $30,000\n                  </span>\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            <div>\n              <h2 className=\"mb-4 text-xl font-semibold\">\n                Additional Information\n              </h2>\n              <div className=\"grid gap-4\">\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">Requested By</span>\n                  <span className=\"text-muted-foreground\">\n                    John Smith (Engineering Manager)\n                  </span>\n                </div>\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">Request Date</span>\n                  <span className=\"text-muted-foreground\">\n                    December 28, 2024\n                  </span>\n                </div>\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">Status</span>\n                  <Badge variant=\"secondary\" className=\"w-fit\">\n                    Pending Approval\n                  </Badge>\n                </div>\n                <div className=\"flex flex-col gap-1.5\">\n                  <span className=\"text-sm font-medium\">Justification</span>\n                  <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                    This software is critical for our cloud infrastructure\n                    management and will enable the engineering team to scale\n                    operations more efficiently. The per-seat pricing model\n                    aligns with our team growth projections for Q1 2025.\n                  </p>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Right side - Software Purchase Card */}\n        <div className=\"flex items-start justify-center lg:sticky lg:top-6 lg:h-fit lg:w-[400px]\">\n          <SoftwarePurchaseCard\n            softwareName=\"Enterprise Cloud Suite\"\n            startDate=\"2025-01-15\"\n            seats={50}\n            pricingType=\"per-seat\"\n            price=\"$2,500\"\n            onApprove={handleApprove}\n            onDiscard={handleDiscard}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/software-purchase/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "900px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component",
    "details": "A comprehensive software purchase approval interface featuring company information, pricing tiers, and detailed cost breakdown with tax calculations."
  },
  "categories": [
    "forms"
  ],
  "type": "registry:block"
}