json-prompt-for-lovable

Create dashboard using this exact prompt:
{
  "prompt": "Build a modern dashboard UI named 'Angle' using React, Tailwind CSS, shadcn/ui components, @tabler/icons-react for icons, and recharts for charts, based on the provided visual reference.",
  "details": {
    "layout": {
      "sidebar": {
        "orientation": "vertical",
        "brand": {
          "icon": "IconHexagonLetterM", // Placeholder for the Mere logo, or a specific Tabler icon
          "name": "Mere"
        },
        "menuTitle": "Main Menu",
        "items": [
          { "label": "Dashboard", "icon": "IconLayoutDashboard", "active": true },
          { "label": "Message", "icon": "IconMessageDots" }, // IconMessage or IconMessageDots
          { "label": "Product", "icon": "IconPackages" },    // IconBox or IconPackages
          { "label": "Transaction", "icon": "IconArrowsExchange" }, // IconRepeat or IconArrowsExchange
          { "label": "Report", "icon": "IconReportAnalytics" },
          { "label": "Absence", "icon": "IconCalendarOff" },
          { "label": "Employee", "icon": "IconUsers" }
        ],
        "highlight": "activeItem" // Indicates the active item styling logic
      },
      "topbar": {
        "leftSection": [
          { "type": "avatar_dropdown", "user": "Mang Abadi", "initials": "MB", "avatarUrl": "placeholder_avatar_url_mb.png" }
        ],
        "centerSection": {
          "searchPlaceholder": "Search or Press “/” for command",
          "icon": "IconSearch"
        },
        "rightSection": [
          { "type": "icon_button", "icon": "IconBell", "ariaLabel": "Notifications" },
          { "type": "icon_button", "icon": "IconCalendarEvent", "ariaLabel": "Calendar" },
          { "type": "date_display", "value": "Wednesday, 7 Mar 2025" }
        ]
      },
      "main": {
        "pageHeader": {
          "title": "Welcome Laealier",
          "subtitle": "Be a good and honest employee for everyone’s happiness",
          "actionButton": {
            "label": "Make an order",
            "icon": "IconPlus", // Optional icon for the button
            "variant": "primary" // To use primary button styling
          }
        },
        "summaryCards": [
          {
            "title": "Order Process",
            "value": "5",
            "growth": "0.5%",
            "icon": "IconCubeSend", // Visually like a box with an arrow
            "timePeriod": "Saturday, 06 Sep 2024",
            "actionLink": { "text": "View all", "icon": "IconChevronRight" }
          },
          {
            "title": "Order Done",
            "value": "40",
            "icon": "IconClipboardCheck", // Visually like a clipboard with a check
            "timePeriod": "Saturday, 06 Sep 2024",
            "actionLink": { "text": "View all", "icon": "IconChevronRight" }
          },
          {
            "title": "Total Order",
            "value": "120",
            "icon": "IconBriefcase", // Visually like a briefcase
            "timePeriod": "Saturday, 06 Sep 2024",
            "actionLink": { "text": "View all", "icon": "IconChevronRight" }
          },
          {
            "title": "Total Income",
            "value": "$1,200.00",
            "growth": "0.5%",
            "icon": "IconCoin", // Visually like a coin/dollar sign
            "timePeriod": "Saturday, 06 Sep 2024",
            "actionLink": { "text": "View all", "icon": "IconChevronRight" }
          }
        ]
      },
      "charts": {
        "lineChart": {
          "title": "Statistic Order",
          "library": "recharts",
          "totalLabel": "Total Order",
          "totalValue": "1,232.00",
          "actionLink": { "text": "View all", "icon": "IconChevronRight" },
          "legend": [
            { "name": "Food", "color": "var(--chart-1)" }, // Reference theme variable
            { "name": "Education", "color": "var(--chart-2)" },
            { "name": "Other", "color": "var(--chart-3)" }
          ],
          "xAxisCategories": ["Wed", "Thu", "Fri", "Sat"],
          "data": [ // Example data structure
            { "day": "Wed", "Food": 100, "Education": 80, "Other": 120 },
            { "day": "Thu", "Food": 130, "Education": 100, "Other": 150 },
            { "day": "Fri", "Food": 90, "Education": 150, "Other": 100 },
            { "day": "Sat", "Food": 180, "Education": 160, "Other": 200 }
          ]
        },
        "barChart": {
          "title": "Recent Transaction",
          "balanceLabel": "Balance",
          "balanceValue": "$3,000.00",
          "intervalSelector": {
            "label": "Weekly",
            "options": ["Daily", "Weekly", "Monthly"],
            "default": "Weekly"
          },
          "actionLink": { "text": "View all", "icon": "IconChevronRight" },
          "library": "recharts",
          "yAxisLabelPrefix": "$",
          "data": [ // Example data structure
            { "period": "Mon", "amount": 180 },
            { "period": "Tue", "amount": 130 },
            { "period": "Wed", "amount": 160 },
            { "period": "Thu", "amount": 140 },
            { "period": "Fri", "amount": 190 },
            { "period": "Sat", "amount": 200 },
            { "period": "Sun", "amount": 170 }
          ]
        }
      },
      "tables": {
        "recentTransactions": {
          "title": "Recent Transaction",
          "actionLink": { "text": "View all", "icon": "IconChevronRight" },
          "filters": [
            { "type": "dropdown", "defaultValue": "All Transaction", "options": ["All Transaction", "Completed", "Pending", "Failed"] },
            { "type": "dropdown", "defaultValue": "All Category", "options": ["All Category", "Delivery", "Take Away", "Dine In"] },
            { "type": "searchInput", "placeholder": "Cari Transaksi...", "icon": "IconSearch" }
          ],
          "columns": ["Id Transaksi", "Customer", "Type Services", "Total Belanja", "Status"],
          "rows": [
            { "id": "21239172AAKS231", "customer": "Deni Setiawan", "type": "Delivery", "amount": "$123", "status": { "label": "Completed", "variant": "success" } },
            { "id": "21239172AAKS232", "customer": "Nemaanaestina", "type": "Take Away", "amount": "$321", "status": { "label": "Completed", "variant": "success" } },
            { "id": "21239172AAKS233", "customer": "Dina Septiani", "type": "Dine In", "amount": "$223", "status": { "label": "Completed", "variant": "success" } }
          ]
        }
      },
      "trackingOrder": {
        "title": "Tracking Order",
        "actionLink": { "text": "View all", "icon": "IconChevronRight" },
        "items": [
          { "icon": "IconCircleCheckFilled", "iconColor": "green", "customerName": "Deni Setiawan", "orderStatusText": "Ordered", "timeInfo": "08:32 AM – 08:42 AM", "actionButton": { "label": "Detail", "variant": "outline" } },
          { "icon": "IconCircleCheckFilled", "iconColor": "green", "customerName": "Purwa Adi", "orderStatusText": "Ordered", "timeInfo": "08:33 PM – 09:12 PM", "actionButton": { "label": "Detail", "variant": "outline" } },
          { "icon": "IconCircleCheckFilled", "iconColor": "green", "customerName": "Yayan Kurnia", "orderStatusText": "Ordered", "timeInfo": "08:48 PM - Process", "actionButton": { "label": "Detail", "variant": "outline" } },
          { "icon": "IconCircleCheckFilled", "iconColor": "green", "customerName": "Samsul", "orderStatusText": "Ordered", "timeInfo": "08:52 PM - Process", "actionButton": { "label": "Detail", "variant": "outline" } },
          { "icon": "IconCircleCheckFilled", "iconColor": "green", "customerName": "Dinsua", "orderStatusText": "Ordered", "timeInfo": "09:00 PM - Process", "actionButton": { "label": "Detail", "variant": "outline" } }
        ]
      },
      "upgradeCard": {
        "title": "Upgrade to PRO",
        "price": "$24",
        "billingCycle": "/monthly",
        "features": [
          { "text": "Unlimited Storage", "icon": "IconCircleCheckFilled" },
          { "text": "Scane Order Product", "icon": "IconCircleCheckFilled" },
          { "text": "Integrate to Grab, Gojek, and More", "icon": "IconCircleCheckFilled" },
          { "text": "Component Include", "icon": "IconCircleCheckFilled" }
        ],
        "ctaButton": {
          "text": "Make an order",
          "style": "gradient_purple_to_orange" // Custom style identifier
        }
      }
    },
    "styling": {
      "use": [
        "shadcn/ui components (Card, Button, Badge, Table, Input, Avatar, Tooltip, DropdownMenu, Separator, Select)",
        "Tailwind CSS (flex, grid, spacing, rounded-xl, shadow-md, bg-white, text-muted-foreground, custom gradients)",
        "Icons from @tabler/icons-react",
        "Charts from recharts"
      ],
      "theme": "light with optional dark mode support",
      "design": "minimal, clean, professional with rounded corners (rounded-xl) and subtle shadows (shadow-md)",
      "responsive": true,
      "themeVariables": {
        "light": {
          "radius": "0.65rem",
          "background": "oklch(1 0 0)",
          "foreground": "oklch(0.141 0.005 285.823)",
          "card": "oklch(1 0 0)",
          "cardForeground": "oklch(0.141 0.005 285.823)",
          "popover": "oklch(1 0 0)",
          "popoverForeground": "oklch(0.141 0.005 285.823)",
          "primary": "oklch(0.723 0.219 149.579)",
          "primaryForeground": "oklch(0.982 0.018 155.826)",
          "secondary": "oklch(0.967 0.001 286.375)",
          "secondaryForeground": "oklch(0.21 0.006 285.885)",
          "muted": "oklch(0.967 0.001 286.375)",
          "mutedForeground": "oklch(0.552 0.016 285.938)",
          "accent": "oklch(0.967 0.001 286.375)",
          "accentForeground": "oklch(0.21 0.006 285.885)",
          "destructive": "oklch(0.577 0.245 27.325)",
          "border": "oklch(0.92 0.004 286.32)",
          "input": "oklch(0.92 0.004 286.32)",
          "ring": "oklch(0.723 0.219 149.579)",
          "chart1": "oklch(0.646 0.222 41.116)", // Red/Orange for Food
          "chart2": "oklch(0.6 0.118 184.704)",  // Teal/Blue for Education (image is more orange/yellow for education) - Adjust if needed: "oklch(0.828 0.189 84.429)" for yellow
          "chart3": "oklch(0.398 0.07 227.392)", // Purple for Other
          "chart4": "oklch(0.828 0.189 84.429)",
          "chart5": "oklch(0.769 0.188 70.08)",
          "sidebar": "oklch(0.985 0 0)",
          "sidebarForeground": "oklch(0.141 0.005 285.823)",
          "sidebarPrimary": "oklch(0.723 0.219 149.579)",
          "sidebarPrimaryForeground": "oklch(0.982 0.018 155.826)",
          "sidebarAccent": "oklch(0.967 0.001 286.375)", // Used for active item background in sidebar
          "sidebarAccentForeground": "oklch(0.21 0.006 285.885)", // Used for active item text in sidebar (image shows white text on dark bg)
          "sidebarBorder": "oklch(0.92 0.004 286.32)",
          "sidebarRing": "oklch(0.723 0.219 149.579)"
        },
        "dark": {
          "background": "oklch(0.141 0.005 285.823)",
          "foreground": "oklch(0.985 0 0)",
          "card": "oklch(0.21 0.006 285.885)",
          "cardForeground": "oklch(0.985 0 0)",
          "popover": "oklch(0.21 0.006 285.885)",
          "popoverForeground": "oklch(0.985 0 0)",
          "primary": "oklch(0.696 0.17 162.48)",
          "primaryForeground": "oklch(0.393 0.095 152.535)",
          "secondary": "oklch(0.274 0.006 286.033)",
          "secondaryForeground": "oklch(0.985 0 0)",
          "muted": "oklch(0.274 0.006 286.033)",
          "mutedForeground": "oklch(0.705 0.015 286.067)",
          "accent": "oklch(0.274 0.006 286.033)",
          "accentForeground": "oklch(0.985 0 0)",
          "destructive": "oklch(0.704 0.191 22.216)",
          "border": "oklch(1 0 0 / 10%)",
          "input": "oklch(1 0 0 / 15%)",
          "ring": "oklch(0.527 0.154 150.069)",
          "chart1": "oklch(0.488 0.243 264.376)",
          "chart2": "oklch(0.696 0.17 162.48)",
          "chart3": "oklch(0.769 0.188 70.08)",
          "chart4": "oklch(0.627 0.265 303.9)",
          "chart5": "oklch(0.645 0.246 16.439)",
          "sidebar": "oklch(0.21 0.006 285.885)",
          "sidebarForeground": "oklch(0.985 0 0)",
          "sidebarPrimary": "oklch(0.696 0.17 162.48)",
          "sidebarPrimaryForeground": "oklch(0.393 0.095 152.535)",
          "sidebarAccent": "oklch(0.274 0.006 286.033)",
          "sidebarAccentForeground": "oklch(0.985 0 0)",
          "sidebarBorder": "oklch(1 0 0 / 10%)",
          "sidebarRing": "oklch(0.527 0.154 150.069)"
        }
      }
    }
  }
}