{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "draggable-dashboard-view",
  "type": "registry:component",
  "title": "DraggableDashboard",
  "author": "codefellas <codefellasdd@gmail.com>",
  "description": "A draggable dashboard view component.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@fellasUI/card",
    "@fellasUI/draggable-dashboard"
  ],
  "files": [
    {
      "path": "registry/@fellas/block/draggable-dashboard-view/draggable-dashboard-view.tsx",
      "content": "\"use client\"\nimport React from 'react'\nimport DraggableDashboard, { DraggableWrapper } from '@/registry/@fellas/ui/draggable-dashboard/draggable-dashboard'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/@fellas/ui/card'\nimport {\n  TrendingUp,\n  TrendingDown,\n  Users,\n  DollarSign,\n  ShoppingCart,\n  Activity\n} from 'lucide-react'\n\nexport default function DraggableDashboardView() {\n  const RevenueCard = () => (\n    <Card className=\"h-full\">\n      <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle className=\"text-sm font-medium\">Total Revenue</CardTitle>\n        <DollarSign className=\"h-4 w-4 text-muted-foreground\" />\n      </CardHeader>\n      <CardContent>\n        <div className=\"text-2xl font-bold\">$45,231.89</div>\n        <div className=\"flex items-center text-xs text-muted-foreground\">\n          <TrendingUp className=\"mr-1 h-3 w-3 text-green-500\" />\n          +20.1% from last month\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  const UsersCard = () => (\n    <Card className=\"h-full\">\n      <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle className=\"text-sm font-medium\">Active Users</CardTitle>\n        <Users className=\"h-4 w-4 text-muted-foreground\" />\n      </CardHeader>\n      <CardContent>\n        <div className=\"text-2xl font-bold\">2,350</div>\n        <div className=\"flex items-center text-xs text-muted-foreground\">\n          <TrendingUp className=\"mr-1 h-3 w-3 text-green-500\" />\n          +180.1% from last month\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  const SalesCard = () => (\n    <Card className=\"h-full\">\n      <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle className=\"text-sm font-medium\">Sales</CardTitle>\n        <ShoppingCart className=\"h-4 w-4 text-muted-foreground\" />\n      </CardHeader>\n      <CardContent>\n        <div className=\"text-2xl font-bold\">12,234</div>\n        <div className=\"flex items-center text-xs text-muted-foreground\">\n          <TrendingDown className=\"mr-1 h-3 w-3 text-red-500\" />\n          -19% from last month\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  const PerformanceCard = () => (\n    <Card className=\"h-full\">\n      <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle className=\"text-sm font-medium\">Performance</CardTitle>\n        <Activity className=\"h-4 w-4 text-muted-foreground\" />\n      </CardHeader>\n      <CardContent>\n        <div className=\"text-2xl font-bold\">573</div>\n        <div className=\"flex items-center text-xs text-muted-foreground\">\n          <TrendingUp className=\"mr-1 h-3 w-3 text-green-500\" />\n          +201 since last hour\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  const SimpleChart = () => (\n    <Card className=\"h-full\">\n      <CardHeader>\n        <CardTitle>Revenue Overview</CardTitle>\n        <CardDescription>Last 6 months</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"h-[120px] flex items-end justify-between gap-2\">\n          {[65, 45, 78, 52, 89, 67].map((height, i) => (\n            <div key={i} className=\"flex-1 flex flex-col items-center gap-2\">\n              <div\n                className=\"w-full bg-primary rounded-t-sm transition-all hover:bg-primary/80\"\n                style={{ height: `${height}%` }}\n              />\n              <span className=\"text-xs text-muted-foreground\">\n                {['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'][i]}\n              </span>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  return (\n    <div className=\"w-full max-w-4xl mx-auto\">\n      <DraggableDashboard\n        showLockToggle={true}\n        showHandles={true}\n        gridCols={3}\n        gap={4}\n        defaultLocked={false}\n        persistenceKey=\"demo-dashboard\"\n      >\n        <DraggableWrapper id=\"revenue\" gridSize={{ cols: 1, rows: 1 }}>\n          <RevenueCard />\n        </DraggableWrapper>\n\n        <DraggableWrapper id=\"users\" gridSize={{ cols: 1, rows: 1 }}>\n          <UsersCard />\n        </DraggableWrapper>\n\n        <DraggableWrapper id=\"sales\" gridSize={{ cols: 1, rows: 1 }}>\n          <SalesCard />\n        </DraggableWrapper>\n        <DraggableWrapper id=\"performance\" gridSize={{ cols: 1, rows: 1 }}>\n          <PerformanceCard />\n        </DraggableWrapper>\n        <DraggableWrapper id=\"chart\" gridSize={{ cols: 2, rows: 1 }}>\n          <SimpleChart />\n        </DraggableWrapper>\n      </DraggableDashboard>\n    </div>\n  )\n}",
      "type": "registry:component",
      "target": "components/fellasUI/block/draggable-dashboard-view/draggable-dashboard-view.tsx"
    }
  ]
}