{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-shadcnui",
  "type": "registry:block",
  "title": "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/dashboard.tsx",
      "content": "\"use client\";\n\nimport type React from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { motion, type Variants } from \"framer-motion\";\nimport {\n  Activity,\n  BarChart3,\n  ChevronRight,\n  Clock,\n  DollarSign,\n  Download,\n  Menu,\n  Percent,\n  Settings,\n  TrendingDown,\n  TrendingUp,\n  Users,\n  Zap,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  CartesianGrid,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\n\n// ============================================================================\n// TYPES & INTERFACES\n// ============================================================================\n\ninterface MetricCardProps {\n  label: string;\n  value: string;\n  change: string;\n  trend: \"up\" | \"down\";\n  icon: React.ReactNode;\n}\n\ninterface ChartCardProps {\n  title: string;\n  description: string;\n  data: Array<{ name: string; value: number }>;\n  dataKey: string;\n  height?: number;\n}\n\ninterface DetailItem {\n  label: string;\n  value: string;\n  subtitle: string;\n}\n\ninterface DetailedCardProps {\n  title: string;\n  items: DetailItem[];\n}\n\n// ============================================================================\n// STATIC CHART DATA - EXTENSIVE DUMMY DATA FOR PROPER RENDERING\n// ============================================================================\n\nconst USER_GROWTH_DATA = [\n  { name: \"Week 1\", value: 2400 },\n  { name: \"Week 2\", value: 3210 },\n  { name: \"Week 3\", value: 2290 },\n  { name: \"Week 4\", value: 2000 },\n  { name: \"Week 5\", value: 2181 },\n  { name: \"Week 6\", value: 2500 },\n  { name: \"Week 7\", value: 2100 },\n  { name: \"Week 8\", value: 2200 },\n  { name: \"Week 9\", value: 2290 },\n  { name: \"Week 10\", value: 2000 },\n  { name: \"Week 11\", value: 2181 },\n  { name: \"Week 12\", value: 2500 },\n  { name: \"Week 13\", value: 2100 },\n];\n\nconst REVENUE_TREND_DATA = [\n  { name: \"Week 1\", value: 4000 },\n  { name: \"Week 2\", value: 3000 },\n  { name: \"Week 3\", value: 2000 },\n  { name: \"Week 4\", value: 2780 },\n  { name: \"Week 5\", value: 1890 },\n  { name: \"Week 6\", value: 2390 },\n  { name: \"Week 7\", value: 3490 },\n  { name: \"Week 8\", value: 4000 },\n  { name: \"Week 9\", value: 3500 },\n  { name: \"Week 10\", value: 4200 },\n  { name: \"Week 11\", value: 3800 },\n  { name: \"Week 12\", value: 4500 },\n  { name: \"Week 13\", value: 4100 },\n];\n\n// ============================================================================\n// ANIMATION VARIANTS\n// ============================================================================\n\nconst containerVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.1,\n      delayChildren: 0.2,\n    },\n  },\n};\n\nconst itemVariants: Variants = {\n  hidden: { opacity: 0, y: 20 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.4 },\n  },\n};\n\n// ============================================================================\n// COMPONENTS\n// ============================================================================\n\n// Metric Card Component\nfunction MetricCard({ label, value, change, trend, icon }: MetricCardProps) {\n  const isPositive = trend === \"up\";\n  const TrendIcon = isPositive ? TrendingUp : TrendingDown;\n\n  return (\n    <motion.div\n      whileHover={{ y: -4 }}\n      transition={{ duration: 0.2 }}\n      className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\"\n      role=\"article\"\n      aria-label={`${label}: ${value}, ${change} ${trend === \"up\" ? \"increase\" : \"decrease\"}`}\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n      <div className=\"relative space-y-4\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"text-2xl\" aria-hidden=\"true\">\n            {icon}\n          </div>\n          <div\n            className={`flex items-center gap-1 text-xs font-semibold px-2 py-1 rounded-full ${\n              isPositive\n                ? \"bg-emerald-500/20 text-emerald-600 dark:text-emerald-400\"\n                : \"bg-red-500/20 text-red-600 dark:text-red-400\"\n            }`}\n            aria-live=\"polite\"\n            aria-label={`${change} ${trend === \"up\" ? \"increase\" : \"decrease\"}`}\n          >\n            <TrendIcon className=\"h-3 w-3\" aria-hidden=\"true\" />\n            {change}\n          </div>\n        </div>\n\n        <div className=\"space-y-1\">\n          <p className=\"text-xs font-semibold uppercase tracking-[0.25em] text-foreground/40\">\n            {label}\n          </p>\n          <p className=\"text-2xl font-semibold tracking-tight text-foreground\">\n            {value}\n          </p>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\n// Chart Card Component\nfunction ChartCard({\n  title,\n  description,\n  data,\n  dataKey,\n  height = 300,\n}: ChartCardProps) {\n  return (\n    <motion.div\n      whileHover={{ y: -4 }}\n      transition={{ duration: 0.2 }}\n      className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\"\n      role=\"article\"\n      aria-label={`${title} chart: ${description}`}\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n      <div className=\"relative space-y-4\">\n        <div className=\"flex items-start justify-between\">\n          <div className=\"space-y-1\">\n            <h3 className=\"text-sm font-semibold uppercase tracking-[0.25em] text-foreground\">\n              {title}\n            </h3>\n            <p className=\"text-xs text-foreground/60\">{description}</p>\n          </div>\n          <button\n            className=\"text-foreground/40 hover:text-foreground/70 transition-colors p-2 hover:bg-background/50 rounded-lg\"\n            aria-label={`View details for ${title}`}\n          >\n            <TrendingUp className=\"h-4 w-4\" aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        {/* Chart Container with proper sizing */}\n        <div style={{ width: \"100%\", height: height }} className=\"relative\">\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            <LineChart\n              data={data}\n              margin={{ top: 5, right: 10, left: -25, bottom: 5 }}\n            >\n              <defs>\n                <linearGradient\n                  id={`colorGradient-${title}`}\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"0\"\n                  y2=\"1\"\n                >\n                  <stop\n                    offset=\"5%\"\n                    stopColor=\"var(--primary)\"\n                    stopOpacity={0.5}\n                  />\n                  <stop\n                    offset=\"95%\"\n                    stopColor=\"var(--primary)\"\n                    stopOpacity={0.05}\n                  />\n                </linearGradient>\n              </defs>\n              <CartesianGrid\n                strokeDasharray=\"3 3\"\n                stroke=\"var(--border)\"\n                opacity={0.3}\n                vertical={false}\n              />\n              <XAxis\n                dataKey=\"name\"\n                stroke=\"var(--foreground)\"\n                opacity={0.6}\n                style={{ fontSize: \"11px\" }}\n              />\n              <YAxis\n                stroke=\"var(--foreground)\"\n                opacity={0.6}\n                style={{ fontSize: \"11px\" }}\n                width={35}\n              />\n              <Tooltip\n                contentStyle={{\n                  backgroundColor: \"var(--background)\",\n                  opacity: 0.95,\n                  border: `1px solid var(--border)`,\n                  borderRadius: \"8px\",\n                  backdropFilter: \"blur(12px)\",\n                  padding: \"8px 12px\",\n                }}\n                labelStyle={{ color: \"var(--foreground)\" }}\n                cursor={{ stroke: \"var(--primary)\", strokeOpacity: 0.2 }}\n              />\n              <Line\n                type=\"natural\"\n                dataKey={dataKey}\n                stroke=\"var(--primary)\"\n                strokeWidth={2.5}\n                dot={false}\n                activeDot={{ r: 6 }}\n                fill={`url(#colorGradient-${title})`}\n                isAnimationActive={true}\n                animationDuration={800}\n              />\n            </LineChart>\n          </ResponsiveContainer>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\n// Detailed Card Component\nfunction DetailedCard({ title, items }: DetailedCardProps) {\n  return (\n    <motion.div\n      whileHover={{ y: -4 }}\n      transition={{ duration: 0.2 }}\n      className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\"\n      role=\"article\"\n      aria-label={title}\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n      <div className=\"relative space-y-4\">\n        <h3 className=\"text-sm font-semibold uppercase tracking-[0.25em] text-foreground\">\n          {title}\n        </h3>\n\n        <div className=\"space-y-3\" role=\"list\" aria-label={`${title} list`}>\n          {items.map((item, index) => (\n            <motion.button\n              key={`${item.label}-${index}`}\n              whileHover={{ x: 4 }}\n              transition={{ duration: 0.2 }}\n              className=\"group/item w-full text-left\"\n              role=\"listitem\"\n              aria-label={`${item.label}: ${item.value} (${item.subtitle})`}\n            >\n              <div className=\"flex items-center justify-between rounded-lg border border-border/20 bg-background/40 p-3 transition-all hover:border-border/40 hover:bg-background/60\">\n                <div className=\"space-y-1 flex-1\">\n                  <p className=\"text-sm font-medium text-foreground\">\n                    {item.label}\n                  </p>\n                  <p className=\"text-xs text-foreground/60\">{item.subtitle}</p>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <p className=\"text-sm font-semibold text-foreground\">\n                    {item.value}\n                  </p>\n                  <ChevronRight\n                    className=\"h-4 w-4 text-foreground/40 transition-transform group-hover/item:translate-x-1\"\n                    aria-hidden=\"true\"\n                  />\n                </div>\n              </div>\n            </motion.button>\n          ))}\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\n// Dashboard Navigation Component\nfunction DashboardNav() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const navItems = [\n    { label: \"Overview\", icon: BarChart3 },\n    { label: \"Activity\", icon: Activity },\n    { label: \"Users\", icon: Users },\n    { label: \"Analytics\", icon: TrendingUp },\n    { label: \"History\", icon: Clock },\n  ];\n\n  return (\n    <motion.nav\n      initial={{ opacity: 0, y: -10 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.4 }}\n      className=\"border-b border-border/40 bg-background/40 backdrop-blur-md\"\n      role=\"navigation\"\n      aria-label=\"Main dashboard navigation\"\n    >\n      <div className=\"mx-auto max-w-7xl px-6 py-4\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"text-xl font-semibold text-foreground tracking-tight\">\n            Dashboard\n          </div>\n\n          {/* Mobile menu button */}\n          <button\n            onClick={() => setIsOpen(!isOpen)}\n            className=\"md:hidden p-2 hover:bg-background/60 rounded-lg transition-colors\"\n            aria-label=\"Toggle navigation menu\"\n            aria-expanded={isOpen}\n          >\n            <Menu className=\"h-5 w-5\" />\n          </button>\n\n          {/* Desktop nav */}\n          <div\n            className=\"hidden md:flex gap-1\"\n            role=\"menubar\"\n            aria-label=\"Navigation tabs\"\n          >\n            {navItems.map((item) => {\n              const Icon = item.icon;\n              return (\n                <Button\n                  key={item.label}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"gap-2 text-foreground/70 hover:text-foreground hover:bg-background/50 rounded-lg\"\n                  role=\"menuitem\"\n                  aria-current={item.label === \"Overview\" ? \"page\" : undefined}\n                >\n                  <Icon className=\"h-4 w-4\" aria-hidden=\"true\" />\n                  <span className=\"text-xs uppercase tracking-[0.1em]\">\n                    {item.label}\n                  </span>\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Mobile nav */}\n        {isOpen && (\n          <motion.div\n            initial={{ opacity: 0, height: 0 }}\n            animate={{ opacity: 1, height: \"auto\" }}\n            exit={{ opacity: 0, height: 0 }}\n            className=\"mt-4 flex flex-col gap-2 md:hidden\"\n            role=\"menu\"\n            aria-label=\"Mobile navigation menu\"\n          >\n            {navItems.map((item) => {\n              const Icon = item.icon;\n              return (\n                <Button\n                  key={item.label}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-2 text-foreground/70 hover:text-foreground hover:bg-background/50\"\n                  role=\"menuitem\"\n                >\n                  <Icon className=\"h-4 w-4\" aria-hidden=\"true\" />\n                  <span className=\"text-xs uppercase tracking-[0.1em]\">\n                    {item.label}\n                  </span>\n                </Button>\n              );\n            })}\n          </motion.div>\n        )}\n      </div>\n    </motion.nav>\n  );\n}\n\n// Dashboard Header Component\nfunction DashboardHeader() {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.5 }}\n      className=\"mb-12 space-y-4\"\n    >\n      <div className=\"flex flex-col justify-between gap-4 md:flex-row md:items-center\">\n        <div className=\"space-y-2\">\n          <Badge\n            variant=\"outline\"\n            className=\"inline-flex items-center gap-2 rounded-full border-border/50 bg-background/55 px-4 py-1.5 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur\"\n            aria-label=\"Dashboard status: Live\"\n          >\n            <span\n              className=\"h-2 w-2 rounded-full bg-emerald-500\"\n              aria-hidden=\"true\"\n            />\n            Live Dashboard\n          </Badge>\n\n          <h1 className=\"text-balance text-3xl font-semibold tracking-tight text-foreground md:text-4xl\">\n            Performance Overview\n          </h1>\n          <p className=\"max-w-2xl text-foreground/70\">\n            Monitor your application metrics, user activity, and system health\n            in real-time with detailed insights and historical data trends.\n          </p>\n        </div>\n\n        <div\n          className=\"flex gap-2\"\n          role=\"toolbar\"\n          aria-label=\"Dashboard actions\"\n        >\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"rounded-full border-border/40 bg-background/60 backdrop-blur hover:border-border/60 hover:bg-background/70\"\n            aria-label=\"Download report\"\n          >\n            <Download className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"rounded-full border-border/40 bg-background/60 backdrop-blur hover:border-border/60 hover:bg-background/70\"\n            aria-label=\"Dashboard settings\"\n          >\n            <Settings className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\n// Main Dashboard Grid\nfunction DashboardGrid() {\n  return (\n    <motion.div\n      variants={containerVariants}\n      initial=\"hidden\"\n      animate=\"visible\"\n      className=\"space-y-6\"\n      role=\"region\"\n      aria-label=\"Dashboard metrics and charts\"\n    >\n      {/* Top KPI Row - Replaced emoji icons with lucide icons */}\n      <motion.div\n        variants={itemVariants}\n        className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\"\n        role=\"presentation\"\n      >\n        <MetricCard\n          label=\"Total Users\"\n          value=\"24,582\"\n          change=\"+12.5%\"\n          trend=\"up\"\n          icon={<Users className=\"h-6 w-6 text-primary\" aria-hidden=\"true\" />}\n        />\n        <MetricCard\n          label=\"Active Sessions\"\n          value=\"8,924\"\n          change=\"+8.2%\"\n          trend=\"up\"\n          icon={<Zap className=\"h-6 w-6 text-primary\" aria-hidden=\"true\" />}\n        />\n        <MetricCard\n          label=\"Conversion Rate\"\n          value=\"3.47%\"\n          change=\"-1.3%\"\n          trend=\"down\"\n          icon={<Percent className=\"h-6 w-6 text-primary\" aria-hidden=\"true\" />}\n        />\n        <MetricCard\n          label=\"Revenue\"\n          value=\"$47,320\"\n          change=\"+24.8%\"\n          trend=\"up\"\n          icon={\n            <DollarSign className=\"h-6 w-6 text-primary\" aria-hidden=\"true\" />\n          }\n        />\n      </motion.div>\n\n      {/* Charts Row */}\n      <motion.div\n        variants={itemVariants}\n        className=\"grid gap-6 lg:grid-cols-2\"\n        role=\"presentation\"\n      >\n        <ChartCard\n          title=\"User Growth\"\n          description=\"Last 13 weeks activity\"\n          data={USER_GROWTH_DATA}\n          dataKey=\"value\"\n          height={300}\n        />\n        <ChartCard\n          title=\"Revenue Trend\"\n          description=\"Weekly revenue breakdown\"\n          data={REVENUE_TREND_DATA}\n          dataKey=\"value\"\n          height={300}\n        />\n      </motion.div>\n\n      {/* Detailed Cards Row */}\n      <motion.div\n        variants={itemVariants}\n        className=\"grid gap-6 lg:grid-cols-3\"\n        role=\"presentation\"\n      >\n        <DetailedCard\n          title=\"Top Pages\"\n          items={[\n            { label: \"Home\", value: \"12,543\", subtitle: \"visits\" },\n            { label: \"Dashboard\", value: \"8,324\", subtitle: \"visits\" },\n            { label: \"Settings\", value: \"4,128\", subtitle: \"visits\" },\n          ]}\n        />\n        <DetailedCard\n          title=\"Browser Usage\"\n          items={[\n            { label: \"Chrome\", value: \"68.5%\", subtitle: \"market share\" },\n            { label: \"Safari\", value: \"18.2%\", subtitle: \"market share\" },\n            { label: \"Firefox\", value: \"9.3%\", subtitle: \"market share\" },\n          ]}\n        />\n        <DetailedCard\n          title=\"Recent Activity\"\n          items={[\n            { label: \"Login Spike\", value: \"Now\", subtitle: \"2.5k users\" },\n            { label: \"Feature Update\", value: \"2h ago\", subtitle: \"deployed\" },\n            { label: \"Bug Fix\", value: \"5h ago\", subtitle: \"resolved\" },\n          ]}\n        />\n      </motion.div>\n    </motion.div>\n  );\n}\n\n// ============================================================================\n// MAIN PAGE COMPONENT\n// ============================================================================\n\nexport function DashboardPage() {\n  return (\n    <main className=\"relative min-h-screen overflow-hidden bg-background\">\n      {/* Glassmorphism background blobs */}\n      <div className=\"absolute inset-0 -z-10 pointer-events-none\">\n        <div className=\"absolute left-1/2 top-0 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-foreground/[0.035] blur-[140px]\" />\n        <div className=\"absolute bottom-0 right-0 h-[360px] w-[360px] rounded-full bg-foreground/[0.025] blur-[120px]\" />\n        <div className=\"absolute top-1/2 left-1/4 h-[400px] w-[400px] rounded-full bg-primary/[0.02] blur-[150px]\" />\n      </div>\n\n      {/* Navigation */}\n      <DashboardNav />\n\n      {/* Main Content */}\n      <div className=\"relative px-6 py-8 lg:py-12\">\n        <div className=\"mx-auto max-w-7xl\">\n          <DashboardHeader />\n          <DashboardGrid />\n        </div>\n      </div>\n    </main>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/dashboard-shadcnui.tsx"
    }
  ]
}