Modern Store Dashboard

bagui/dashboard-store

FreeBlock

bagUi publishes no description for this item.

Live preview

live · rendered by the registry

Rendered by bagUi on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://www.bagui.pro/r/dashboard-store.json

Source

registry/default/blocks/Dashboard/dashboard-finance.tsxwww.bagui.pro/r/dashboard-store.json · first 6 KB

1"use client";
2
3/**
4 * Dashboard2 — fully interactive version
5 * ────────────────────────────────────────────────────────────────────────
6 * Every control actually does something:
7 *   - Sidebar nav ("Dashboard", "Product", "Order", "Customer", "Message",
8 *     "Email", "Automation", "Analytics", "Integration") swaps the dataset,
9 *     the stats row, and the table columns shown in the main panel.
10 *   - Search box filters the current table's rows live.
11 *   - Filter dropdown restricts rows by status; Sort dropdown re-orders rows;
12 *     column headers are clickable to sort (asc/desc toggle).
13 *   - "Show Statistics" toggle shows/hides the stats row.
14 *   - Checkboxes drive a real selection state -> bulk action bar appears,
15 *     "Apply Code" / "Edit Info" / "Delete" mutate the in-memory dataset.
16 *   - "+ Add New Product" opens an inline quick-add row.
17 *   - "Export" downloads the current (filtered) table as a CSV file.
18 *   - "Customize" / "Customize Widget" toggle which stat cards / columns
19 *     are visible.
20 *   - Pagination buttons/page-size/go-to-page all actually page the data.
21 *   - A small toast system confirms every action.
22 *   - A light/dark toggle switches the whole dashboard's theme (Tailwind
23 *     `dark:` class strategy, scoped to the dashboard root — no need for
24 *     the `<html>` tag to carry the class).
25 *
26 * Font: Geist (next/font/google), set once on the root wrapper.
27 * Colors: BagUI's neutral/gray system (bagui.vercel.app) — gray-50→900,
28 * black primary actions, soft-pill status colors. Primary black surfaces
29 * invert to white in dark mode to keep the strict black/white/gray language.
30 *
31 * Dependencies: npm install framer-motion lucide-react
32 *
33 * Fix note: the crash ("Cannot read properties of undefined (reading 'rows')")
34 * happened because `active` could hold a nav label with no matching key in
35 * the `datasets` map (e.g. a sidebar item added without a matching entry in
36 * buildDatasets()), so `datasets[active]` was `undefined`. `dataset` now
37 * falls back to the first available dataset instead of crashing, and logs a
38 * dev-only warning so the mismatch is easy to spot and fix at the source.
39 */
40
41import { useMemo, useState, useEffect, useRef } from "react";
42import { motion, AnimatePresence, type Variants } from "framer-motion";
43// … truncated

What it pulls in

npm packages

framer-motion
lucide-react

Files it writes

registry/default/blocks/Dashboard/dashboard-finance.tsx

More from bagUi

All 25 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Dashboard Chat Appchat-app1	bagUi	Blocks	Free	2 deps
Contact Exemple 1contact-1	bagUi	Blocks	Free	2 deps
Contact Exemple 2contact-2	bagUi	Blocks	Free	2 deps
CTA Exemple 1cta-1	bagUi	Blocks	Free	2 deps
CTA Exemple 2cta-2	bagUi	Blocks	Free	2 deps
FAQ Exemple 1faq1	bagUi	Blocks	Free	2 deps
Feature Exemple 1feature-1	bagUi	Blocks	Free	2 deps
Feature Exemple 2feature-2	bagUi	Blocks	Free	2 deps