{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stocks-dashboard-shadcnui",
  "type": "registry:block",
  "title": "Stocks Dashboard",
  "description": "Interactive stock portfolio dashboard with status cards, data table, and detailed stock information modal",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/stocks-dashboard/stocks-dashboard.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { motion } from \"framer-motion\";\nimport {\n  Activity,\n  BarChart3,\n  Building2,\n  ChevronRight,\n  DollarSign,\n  TrendingDown,\n  TrendingUp,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface Stock {\n  id: string;\n  symbol: string;\n  name: string;\n  price: number;\n  change: number;\n  changePercent: number;\n  volume: number;\n  marketCap: string;\n  sector: string;\n  peRatio: number;\n}\n\nconst mockStocks: Stock[] = [\n  {\n    id: \"1\",\n    symbol: \"AAPL\",\n    name: \"Apple Inc.\",\n    price: 178.23,\n    change: 2.45,\n    changePercent: 1.39,\n    volume: 45234567,\n    marketCap: \"2.8T\",\n    sector: \"Technology\",\n    peRatio: 31.2,\n  },\n  {\n    id: \"2\",\n    symbol: \"GOOGL\",\n    name: \"Alphabet Inc.\",\n    price: 142.56,\n    change: -1.23,\n    changePercent: -0.85,\n    volume: 28345123,\n    marketCap: \"1.8T\",\n    sector: \"Technology\",\n    peRatio: 24.8,\n  },\n  {\n    id: \"3\",\n    symbol: \"MSFT\",\n    name: \"Microsoft Corporation\",\n    price: 378.91,\n    change: 5.67,\n    changePercent: 1.52,\n    volume: 19234567,\n    marketCap: \"2.9T\",\n    sector: \"Technology\",\n    peRatio: 35.4,\n  },\n  {\n    id: \"4\",\n    symbol: \"TSLA\",\n    name: \"Tesla, Inc.\",\n    price: 248.42,\n    change: -3.21,\n    changePercent: -1.28,\n    volume: 78234567,\n    marketCap: \"790B\",\n    sector: \"Automotive\",\n    peRatio: 62.5,\n  },\n  {\n    id: \"5\",\n    symbol: \"AMZN\",\n    name: \"Amazon.com Inc.\",\n    price: 148.76,\n    change: 1.89,\n    changePercent: 1.29,\n    volume: 45234567,\n    marketCap: \"1.5T\",\n    sector: \"E-commerce\",\n    peRatio: 48.3,\n  },\n];\n\nfunction formatNumber(num: number): string {\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + \"M\";\n  }\n  if (num >= 1000) {\n    return (num / 1000).toFixed(1) + \"K\";\n  }\n  return num.toString();\n}\n\nfunction StatusSection() {\n  const totalValue = mockStocks.reduce(\n    (sum, stock) => sum + stock.price * 100,\n    0\n  );\n  const totalChange = mockStocks.reduce(\n    (sum, stock) => sum + stock.change * 100,\n    0\n  );\n  const totalChangePercent = (totalChange / (totalValue - totalChange)) * 100;\n\n  return (\n    <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6\">\n      <motion.div\n        initial={{ opacity: 0, y: 20 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.4 }}\n      >\n        <Card className=\"relative overflow-hidden\">\n          <CardHeader className=\"flex flex-row items-center justify-between pb-2\">\n            <CardTitle className=\"text-xs sm:text-sm font-medium text-muted-foreground\">\n              Total Portfolio Value\n            </CardTitle>\n            <DollarSign className=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-xl sm:text-2xl font-bold\">\n              $\n              {totalValue.toLocaleString(\"en-US\", {\n                minimumFractionDigits: 2,\n                maximumFractionDigits: 2,\n              })}\n            </div>\n            <p className=\"text-xs text-muted-foreground mt-1\">\n              Based on current prices\n            </p>\n          </CardContent>\n        </Card>\n      </motion.div>\n\n      <motion.div\n        initial={{ opacity: 0, y: 20 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.4, delay: 0.1 }}\n      >\n        <Card className=\"relative overflow-hidden\">\n          <CardHeader className=\"flex flex-row items-center justify-between pb-2\">\n            <CardTitle className=\"text-xs sm:text-sm font-medium text-muted-foreground\">\n              Today's Change\n            </CardTitle>\n            {totalChange >= 0 ? (\n              <TrendingUp className=\"h-4 w-4 text-green-500\" />\n            ) : (\n              <TrendingDown className=\"h-4 w-4 text-red-500\" />\n            )}\n          </CardHeader>\n          <CardContent>\n            <div\n              className={`text-xl sm:text-2xl font-bold ${totalChange >= 0 ? \"text-green-500\" : \"text-red-500\"}`}\n            >\n              {totalChange >= 0 ? \"+\" : \"\"}$\n              {totalChange.toLocaleString(\"en-US\", {\n                minimumFractionDigits: 2,\n                maximumFractionDigits: 2,\n              })}\n            </div>\n            <p\n              className={`text-xs mt-1 ${totalChange >= 0 ? \"text-green-500\" : \"text-red-500\"}`}\n            >\n              {totalChangePercent >= 0 ? \"+\" : \"\"}\n              {totalChangePercent.toFixed(2)}%\n            </p>\n          </CardContent>\n        </Card>\n      </motion.div>\n\n      <motion.div\n        initial={{ opacity: 0, y: 20 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.4, delay: 0.2 }}\n      >\n        <Card className=\"relative overflow-hidden\">\n          <CardHeader className=\"flex flex-row items-center justify-between pb-2\">\n            <CardTitle className=\"text-xs sm:text-sm font-medium text-muted-foreground\">\n              Active Positions\n            </CardTitle>\n            <BarChart3 className=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-xl sm:text-2xl font-bold\">\n              {mockStocks.length}\n            </div>\n            <p className=\"text-xs text-muted-foreground mt-1\">\n              Stocks in portfolio\n            </p>\n          </CardContent>\n        </Card>\n      </motion.div>\n    </div>\n  );\n}\n\nfunction StockDetails({\n  stock,\n  isOpen,\n  onClose,\n}: {\n  stock: Stock | null;\n  isOpen: boolean;\n  onClose: () => void;\n}) {\n  if (!stock) return null;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={onClose}>\n      <DialogContent className=\"max-w-2xl mx-4 sm:mx-auto\">\n        <DialogHeader>\n          <div className=\"flex items-center gap-3\">\n            <div className=\"h-10 w-10 sm:h-12 sm:w-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0\">\n              <Building2 className=\"h-5 w-5 sm:h-6 sm:w-6 text-primary\" />\n            </div>\n            <div className=\"min-w-0\">\n              <DialogTitle className=\"text-xl sm:text-2xl truncate\">\n                {stock.symbol}\n              </DialogTitle>\n              <DialogDescription className=\"truncate\">\n                {stock.name}\n              </DialogDescription>\n            </div>\n          </div>\n        </DialogHeader>\n\n        <div className=\"space-y-4 sm:space-y-6 mt-4\">\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n            <Card>\n              <CardHeader className=\"pb-2\">\n                <CardTitle className=\"text-xs sm:text-sm font-medium text-muted-foreground\">\n                  Current Price\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div className=\"text-xl sm:text-2xl font-bold\">\n                  ${stock.price.toFixed(2)}\n                </div>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader className=\"pb-2\">\n                <CardTitle className=\"text-xs sm:text-sm font-medium text-muted-foreground\">\n                  Change\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div\n                  className={`text-xl sm:text-2xl font-bold ${stock.change >= 0 ? \"text-green-500\" : \"text-red-500\"}`}\n                >\n                  {stock.change >= 0 ? \"+\" : \"\"}${stock.change.toFixed(2)}\n                </div>\n                <div\n                  className={`text-xs sm:text-sm ${stock.change >= 0 ? \"text-green-500\" : \"text-red-500\"}`}\n                >\n                  {stock.change >= 0 ? \"+\" : \"\"}\n                  {stock.changePercent.toFixed(2)}%\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n            <Card>\n              <CardHeader className=\"pb-2\">\n                <CardTitle className=\"text-xs sm:text-sm font-medium text-muted-foreground\">\n                  Market Cap\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div className=\"text-lg sm:text-xl font-semibold\">\n                  ${stock.marketCap}\n                </div>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader className=\"pb-2\">\n                <CardTitle className=\"text-xs sm:text-sm font-medium text-muted-foreground\">\n                  Volume\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div className=\"text-lg sm:text-xl font-semibold\">\n                  {formatNumber(stock.volume)}\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n            <Card>\n              <CardHeader className=\"pb-2\">\n                <CardTitle className=\"text-xs sm:text-sm font-medium text-muted-foreground\">\n                  Sector\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <Badge variant=\"outline\">{stock.sector}</Badge>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader className=\"pb-2\">\n                <CardTitle className=\"text-xs sm:text-sm font-medium text-muted-foreground\">\n                  P/E Ratio\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div className=\"text-lg sm:text-xl font-semibold\">\n                  {stock.peRatio}\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction DataTable({ onRowClick }: { onRowClick: (stock: Stock) => void }) {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle className=\"flex items-center gap-2 text-lg sm:text-xl\">\n          <Activity className=\"h-4 w-4 sm:h-5 sm:w-5\" />\n          Stock Holdings\n        </CardTitle>\n      </CardHeader>\n      <CardContent className=\"p-0 sm:p-6\">\n        <div className=\"overflow-x-auto -mx-4 sm:mx-0\">\n          <div className=\"inline-block min-w-full align-middle px-4 sm:px-0\">\n            <table className=\"w-full min-w-[800px]\">\n              <thead>\n                <tr className=\"border-b border-border\">\n                  <th className=\"text-left py-3 px-3 sm:px-4 text-xs sm:text-sm font-medium text-muted-foreground whitespace-nowrap\">\n                    Symbol\n                  </th>\n                  <th className=\"text-left py-3 px-3 sm:px-4 text-xs sm:text-sm font-medium text-muted-foreground whitespace-nowrap\">\n                    Name\n                  </th>\n                  <th className=\"text-right py-3 px-3 sm:px-4 text-xs sm:text-sm font-medium text-muted-foreground whitespace-nowrap\">\n                    Price\n                  </th>\n                  <th className=\"text-right py-3 px-3 sm:px-4 text-xs sm:text-sm font-medium text-muted-foreground whitespace-nowrap\">\n                    Change\n                  </th>\n                  <th className=\"text-right py-3 px-3 sm:px-4 text-xs sm:text-sm font-medium text-muted-foreground whitespace-nowrap hidden md:table-cell\">\n                    Volume\n                  </th>\n                  <th className=\"text-right py-3 px-3 sm:px-4 text-xs sm:text-sm font-medium text-muted-foreground whitespace-nowrap hidden lg:table-cell\">\n                    Market Cap\n                  </th>\n                  <th className=\"text-right py-3 px-3 sm:px-4 text-xs sm:text-sm font-medium text-muted-foreground whitespace-nowrap hidden lg:table-cell\">\n                    Sector\n                  </th>\n                  <th className=\"text-right py-3 px-3 sm:px-4 text-xs sm:text-sm font-medium text-muted-foreground\">\n                    <span className=\"sr-only\">Actions</span>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                {mockStocks.map((stock, index) => (\n                  <motion.tr\n                    key={stock.id}\n                    initial={{ opacity: 0, x: -20 }}\n                    animate={{ opacity: 1, x: 0 }}\n                    transition={{ duration: 0.3, delay: index * 0.05 }}\n                    className=\"border-b border-border hover:bg-muted/50 cursor-pointer transition-colors\"\n                    onClick={() => onRowClick(stock)}\n                  >\n                    <td className=\"py-3 px-3 sm:px-4\">\n                      <div className=\"font-semibold text-sm sm:text-base\">\n                        {stock.symbol}\n                      </div>\n                    </td>\n                    <td className=\"py-3 px-3 sm:px-4\">\n                      <div className=\"text-xs sm:text-sm text-muted-foreground truncate max-w-[120px] sm:max-w-none\">\n                        {stock.name}\n                      </div>\n                    </td>\n                    <td className=\"py-3 px-3 sm:px-4 text-right\">\n                      <div className=\"font-semibold text-sm sm:text-base\">\n                        ${stock.price.toFixed(2)}\n                      </div>\n                    </td>\n                    <td className=\"py-3 px-3 sm:px-4 text-right\">\n                      <div\n                        className={`font-semibold flex items-center justify-end gap-1 text-sm sm:text-base ${stock.change >= 0 ? \"text-green-500\" : \"text-red-500\"}`}\n                      >\n                        {stock.change >= 0 ? (\n                          <TrendingUp className=\"h-3 w-3 flex-shrink-0\" />\n                        ) : (\n                          <TrendingDown className=\"h-3 w-3 flex-shrink-0\" />\n                        )}\n                        <span className=\"whitespace-nowrap\">\n                          {stock.change >= 0 ? \"+\" : \"\"}$\n                          {stock.change.toFixed(2)}\n                        </span>\n                      </div>\n                      <div\n                        className={`text-xs ${stock.change >= 0 ? \"text-green-500\" : \"text-red-500\"}`}\n                      >\n                        {stock.changePercent >= 0 ? \"+\" : \"\"}\n                        {stock.changePercent.toFixed(2)}%\n                      </div>\n                    </td>\n                    <td className=\"py-3 px-3 sm:px-4 text-right hidden md:table-cell\">\n                      <div className=\"text-xs sm:text-sm\">\n                        {formatNumber(stock.volume)}\n                      </div>\n                    </td>\n                    <td className=\"py-3 px-3 sm:px-4 text-right hidden lg:table-cell\">\n                      <div className=\"text-xs sm:text-sm\">\n                        ${stock.marketCap}\n                      </div>\n                    </td>\n                    <td className=\"py-3 px-3 sm:px-4 text-right hidden lg:table-cell\">\n                      <Badge variant=\"outline\" className=\"text-xs\">\n                        {stock.sector}\n                      </Badge>\n                    </td>\n                    <td className=\"py-3 px-3 sm:px-4 text-right\">\n                      <ChevronRight className=\"h-4 w-4 text-muted-foreground ml-auto\" />\n                    </td>\n                  </motion.tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n\nexport function StocksDashboard() {\n  const [selectedStock, setSelectedStock] = useState<Stock | null>(null);\n  const [isDetailsOpen, setIsDetailsOpen] = useState(false);\n\n  const handleRowClick = (stock: Stock) => {\n    setSelectedStock(stock);\n    setIsDetailsOpen(true);\n  };\n\n  const handleCloseDetails = () => {\n    setIsDetailsOpen(false);\n  };\n\n  return (\n    <div className=\"w-full px-3 sm:px-4 py-4 sm:py-8\">\n      <div className=\"mx-auto max-w-7xl\">\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          className=\"mb-6 sm:mb-8\"\n        >\n          <h1 className=\"text-2xl sm:text-3xl font-bold mb-2\">\n            Stock Portfolio Dashboard\n          </h1>\n          <p className=\"text-sm sm:text-base text-muted-foreground\">\n            Track your investments and monitor market performance\n          </p>\n        </motion.div>\n\n        <StatusSection />\n        <DataTable onRowClick={handleRowClick} />\n        <StockDetails\n          stock={selectedStock}\n          isOpen={isDetailsOpen}\n          onClose={handleCloseDetails}\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/stocks-dashboard-shadcnui.tsx"
    }
  ]
}