mirror of
https://github.com/jhd3197/ServerKit.git
synced 2026-11-09 05:24:49 +09:00
Juan DenisandClaude Opus 5
002fb1bccb
Every page built its own "N of M" from its OWN array, which is only search-filtered -- the column rules are applied inside DataTable. So the bar read "4 of 4" while the table showed 2, on every page, the moment any rule was active. Moving filtering into the columns is what introduced it. useTableChrome now exposes `shownRows`/`shownCount`, computed with the same engine the table uses, so the two cannot disagree. Fifteen call sites moved onto it, plus the DataTableFooter counts that told the same lie. ResourceListPage had a worse version: it sliced `items` for the page size and DataTable filtered afterwards, so a page size of 25 took 25 UNFILTERED rows and then filtered them -- "show 25" could render three. It pages `chrome.shownRows` now, so the slice and the render agree. The Security tabs already computed this correctly by calling applyFilters themselves; they are left alone rather than churned. Guarded going forward: the preset prober now reads `.sk-viewbar__count` after selecting each view and fails on !BARCOUNT if the number disagrees with the rendered rows. 0 mismatches across 11 targets. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
React Dashboard Template
A modern React dashboard application boilerplate built with Vite, featuring routing, charts, and a sidebar layout for building data-driven web interfaces.
Features
- React 18 with functional components and hooks
- Vite for fast development and building
- React Router for client-side routing
- Recharts for data visualization
- Lucide React for icons
- ESLint for code linting
- Responsive sidebar layout
- Dashboard page with sample components
Getting Started
Prerequisites
- Node.js 16+ and npm
Installation
- Clone or download this template
- Install dependencies:
npm install
Development
Start the development server:
npm run dev
The app will be available at http://localhost:41921.
Building for Production
Build the app for deployment:
npm run build
The output will be in the dist/ directory.
Preview Production Build
npm run preview
Project Structure
src/
├── App.jsx # Main app with routing
├── main.jsx # Entry point
├── index.css # Global styles
├── components/
│ └── Sidebar.jsx # Navigation sidebar
├── layouts/
│ └── DashboardLayout.jsx # Main layout wrapper
└── pages/
└── Dashboard.jsx # Main dashboard page
Customization
- Modify components in
src/components/ - Add new pages in
src/pages/ - Update routes in
App.jsx - Customize styles in
index.cssor component files
Environment Variables
Create a .env file in the root for environment variables:
VITE_API_URL=https://api.example.com
Access them in code via import.meta.env.VITE_API_URL.
Contributing
See the documentation files for AI agent permissions and guidelines.