mirror of
https://github.com/jhd3197/ServerKit.git
synced 2026-11-02 18:17:11 +09:00
Juan DenisandClaude Opus 5
258b125532
Docker's four remaining tabs (Compose, Images, Volumes, Networks) drop their raw <table className="docker-table"> markup and bespoke toolbars for the shape ContainersTab already used. Each gets a distinct viewPageKey AND urlScope, since one route now mounts five tables and a shared scope has them writing each other's ?view=. Views were chosen from what the payload actually carries rather than what would read well: Volumes has no "Unused" view because neither transport reports a reference count, and a Networks "Containers" column was dropped because the agent sends the count and the local service does not — a column that is permanently blank on half your hosts is the exact failure this round exists to stop. Terminal stops hand-rolling two surfaces that already had converged twins in the repo, imported by nothing but the Style Guide: Processes renders ProcessTable, and Services renders serverdetail/ServicesTab, taught to serve the local host as well as a paired agent. This was mostly deletion. Databases: the explorer's tables move onto the shared chrome, losing three raw search inputs, two page-level row counts and their segmented rows. Deployments: the fake table (a header row over <button> rows) becomes a real one, and the target-server <select> becomes the Target column's own menu. Templates keeps its card grid — a catalog is a legitimate place for tiles — but loses the row count, filter-chip row and sort control the shared chrome replaces. FTP and WorkspaceDetail get chrome on tables that had none. components/SearchFilterBar.jsx is deleted: a complete competing search/filter/sort bar with zero importers, confirmed not on the SDK export list. Fixes for regressions the verification pass caught, before they shipped: - Terminal > Processes swapped the whole table out on every `loading` tick. It auto-refreshes on a timer, so the chrome, active view, column rules, sort and scroll position were being unmounted and rebuilt every few seconds. Only the first load swaps now. - The Databases backups pane returned its empty state INSTEAD of the chrome, so a tab with no backups had no Refresh — exactly when you want one, because a backup that just finished is why the list looks empty. - Every open table tab kept its chrome mounted while sharing one urlScope, so four open tables fought over ?dbstruct.view=. Scoped per tab. The process list is namespaced per ENGINE too: `state` reads p.command on MySQL and p.state on PostgreSQL, so one namespace let a MySQL view apply itself to Postgres and match nothing. - The Images size column disagreed with itself: the rule value was base-1000 MB while the cell rendered base-1024, so "Size is over 400 MB" matched a row whose own cell read "392.9 MB". - Deployments' server filter used to reach the whole history through ?server_id=; as a column rule it only reaches what was fetched. The window is explicit now — a full page offers Load more instead of quietly filtering a truncated list. 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.