creativetimofficial--ui
Alexandru Paduraru
27 行
6.7 KiB
JSON
27 行
6.7 KiB
JSON
{
|
|
"$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"
|
|
} |