Files
ServerKit/frontend
Juan DenisandClaude Opus 4.8 a5455c4655 feat(frontend): lean default sidebar + split Settings into account/admin
Sidebar — leaner default + setup wiring:
- Add a "Recommended" preset (Full minus Marketplace, Queue Bus, and
  Secrets & Webhooks) and make it the default for unconfigured users, so
  fresh installs aren't maximalist. The three demoted items stay fully
  routable and one click away via the "Full" view or Customize Sidebar.
- Factor the three into a shared ADVANCED_ITEM_IDS list so every curated
  preset hides them consistently.
- Wire the Setup wizard's use-case answer to an initial preset
  (presetForUseCases): a single WordPress intent -> Web Hosting, a single
  DevOps intent -> Docker/DevOps, anything mixed/general -> Recommended.

Settings — split the 17-item rail:
- Add a two-way "My Account" / "Admin" segmented switch (admin-only) so
  personal preferences aren't interleaved with server-wide system
  controls. The active group is derived from the tab, so deep links
  (e.g. /settings/users) open the right group. About moves into My
  Account; the dev/local-dev tools consolidate under Admin.

Verified: eslint (0 errors) and vite build both pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-21 03:11:12 -04:00
..

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

  1. Clone or download this template
  2. 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.css or 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.