diff --git a/config.example.yaml b/config.example.yaml index be667ba..c9089c6 100644 --- a/config.example.yaml +++ b/config.example.yaml @@ -5,6 +5,7 @@ server: host: "0.0.0.0" port: 8080 base_url: "http://localhost:8080" + # read_only: false # Reject all write operations; toggle at runtime with SIGUSR1 database: host: "psql.kindred.internal" diff --git a/docs/COMPONENT_AUDIT.md b/docs/COMPONENT_AUDIT.md index 7eb0ecd..dde5c7b 100644 --- a/docs/COMPONENT_AUDIT.md +++ b/docs/COMPONENT_AUDIT.md @@ -36,10 +36,10 @@ a blank field during a design review or procurement cycle. ## Design -The audit tool is a new page in the existing web UI (`/audit`), built with -the same server-rendered Go templates + vanilla JS approach as the items and -projects pages. It adds one new API endpoint for the completeness data and -reuses existing endpoints for updates. +The audit tool is a page in the web UI (`/audit`), built with the React SPA +(same architecture as the items, projects, and schemas pages). It adds one +new API endpoint for the completeness data and reuses existing endpoints for +updates. ### Completeness Scoring diff --git a/docs/CONFIGURATION.md b/docs/CONFIGURATION.md index f07ce36..f1030bf 100644 --- a/docs/CONFIGURATION.md +++ b/docs/CONFIGURATION.md @@ -30,12 +30,14 @@ YAML values support environment variable expansion using `${VAR_NAME}` syntax. E | `server.host` | string | `"0.0.0.0"` | Bind address | | `server.port` | int | `8080` | HTTP port | | `server.base_url` | string | — | External URL (e.g. `https://silo.example.com`). Used for OIDC callback URLs and session cookie domain. Required when OIDC is enabled. | +| `server.read_only` | bool | `false` | Start in read-only mode. All write endpoints return 503. Can be toggled at runtime with `SIGUSR1`. | ```yaml server: host: "0.0.0.0" port: 8080 base_url: "https://silo.example.com" + read_only: false ``` --- diff --git a/docs/REPOSITORY_STATUS.md b/docs/REPOSITORY_STATUS.md deleted file mode 100644 index 6d43e4a..0000000 --- a/docs/REPOSITORY_STATUS.md +++ /dev/null @@ -1,283 +0,0 @@ -# Repository Status Report - -**Generated:** 2026-01-31 -**Branch:** main -**Last Build:** `go build ./...` and `go vet ./...` pass clean - ---- - -## Codebase Summary - -| Category | Lines | Files | -|----------|-------|-------| -| Go source | ~6,644 | 20 | -| HTML templates | ~4,923 | 4 | -| SQL migrations | ~464 | 8 | -| **Total** | **~12,231** | **32** | - ---- - -## Architecture - -``` -cmd/ - silo/ CLI client (313 lines) - silod/ API server (126 lines) -internal/ - api/ HTTP handlers, routes, middleware, templates (3,491 Go + 4,923 HTML) - config/ YAML config loading (132 lines) - db/ PostgreSQL repositories (1,634 lines) - migration/ Property migration framework (211 lines) - odoo/ Odoo ERP integration stubs (201 lines) - partnum/ Part number generator (180 lines) - schema/ YAML schema parser (235 lines) - storage/ MinIO S3 client (121 lines) -migrations/ Database DDL (8 files) -``` - -### Key Dependencies - -- `go-chi/chi/v5` -- HTTP router -- `jackc/pgx/v5` -- PostgreSQL driver -- `minio/minio-go/v7` -- S3-compatible storage -- `rs/zerolog` -- Structured logging -- `sahilm/fuzzy` -- Fuzzy text matching -- `gopkg.in/yaml.v3` -- YAML parsing - ---- - -## API Surface (38 Routes) - -### Web UI -| Method | Path | Handler | -|--------|------|---------| -| GET | `/` | Items page | -| GET | `/projects` | Projects page | -| GET | `/schemas` | Schemas page | - -### Items -| Method | Path | Description | -|--------|------|-------------| -| GET | `/api/items` | List with filtering and pagination | -| POST | `/api/items` | Create item | -| GET | `/api/items/search` | Fuzzy search | -| GET | `/api/items/export.csv` | CSV export | -| POST | `/api/items/import` | CSV import | -| GET | `/api/items/template.csv` | CSV template | -| GET | `/api/items/{partNumber}` | Get item | -| PUT | `/api/items/{partNumber}` | Update item | -| DELETE | `/api/items/{partNumber}` | Archive item | - -### Revisions -| Method | Path | Description | -|--------|------|-------------| -| GET | `/api/items/{pn}/revisions` | List revisions | -| POST | `/api/items/{pn}/revisions` | Create revision | -| GET | `/api/items/{pn}/revisions/compare` | Compare two revisions | -| GET | `/api/items/{pn}/revisions/{rev}` | Get revision | -| PATCH | `/api/items/{pn}/revisions/{rev}` | Update status/label | -| POST | `/api/items/{pn}/revisions/{rev}/rollback` | Rollback | - -### Files -| Method | Path | Description | -|--------|------|-------------| -| POST | `/api/items/{pn}/file` | Upload file | -| GET | `/api/items/{pn}/file` | Download latest | -| GET | `/api/items/{pn}/file/{rev}` | Download at revision | - -### BOM -| Method | Path | Description | -|--------|------|-------------| -| GET | `/api/items/{pn}/bom` | List children | -| POST | `/api/items/{pn}/bom` | Add child | -| GET | `/api/items/{pn}/bom/expanded` | Multi-level BOM | -| GET | `/api/items/{pn}/bom/where-used` | Where-used lookup | -| GET | `/api/items/{pn}/bom/export.csv` | BOM CSV export | -| POST | `/api/items/{pn}/bom/import` | BOM CSV import | -| PUT | `/api/items/{pn}/bom/{child}` | Update quantity/ref | -| DELETE | `/api/items/{pn}/bom/{child}` | Remove child | - -### Projects -| Method | Path | Description | -|--------|------|-------------| -| GET | `/api/projects` | List projects | -| POST | `/api/projects` | Create project | -| GET | `/api/projects/{code}` | Get project | -| PUT | `/api/projects/{code}` | Update project | -| DELETE | `/api/projects/{code}` | Delete project | -| GET | `/api/projects/{code}/items` | Items in project | - -### Item-Project Associations -| Method | Path | Description | -|--------|------|-------------| -| GET | `/api/items/{pn}/projects` | Item's projects | -| POST | `/api/items/{pn}/projects` | Tag item to project | -| DELETE | `/api/items/{pn}/projects/{code}` | Remove tag | - -### Schemas -| Method | Path | Description | -|--------|------|-------------| -| GET | `/api/schemas` | List schemas | -| GET | `/api/schemas/{name}` | Get schema | -| GET | `/api/schemas/{name}/properties` | Property definitions | -| POST | `/api/schemas/{name}/segments/{seg}/values` | Add enum value | -| PUT | `/api/schemas/{name}/segments/{seg}/values/{code}` | Update enum value | -| DELETE | `/api/schemas/{name}/segments/{seg}/values/{code}` | Delete enum value | - -### Odoo Integration (Stubs) -| Method | Path | Description | -|--------|------|-------------| -| GET | `/api/integrations/odoo/config` | Get config | -| PUT | `/api/integrations/odoo/config` | Update config | -| GET | `/api/integrations/odoo/sync-log` | Sync history | -| POST | `/api/integrations/odoo/test-connection` | Test connection | -| POST | `/api/integrations/odoo/sync/push/{pn}` | Push to Odoo | -| POST | `/api/integrations/odoo/sync/pull/{id}` | Pull from Odoo | - -### Other -| Method | Path | Description | -|--------|------|-------------| -| GET | `/health` | Health probe | -| GET | `/ready` | Readiness probe (DB + MinIO) | -| POST | `/api/generate-part-number` | Generate next PN | - ---- - -## Database Migrations - -| # | File | Purpose | -|---|------|---------| -| 1 | `001_initial.sql` | Core schema: items, revisions, relationships, locations, inventory, sequences, projects, schemas | -| 2 | `002_sequence_by_name.sql` | Sequence naming changes | -| 3 | `003_remove_material.sql` | Schema cleanup | -| 4 | `004_cad_sync_state.sql` | CAD synchronization tracking | -| 5 | `005_property_schema_version.sql` | Property versioning framework | -| 6 | `006_project_tags.sql` | Many-to-many project-item relationships | -| 7 | `007_revision_status.sql` | Revision status and labels | -| 8 | `008_odoo_integration.sql` | Integrations + sync_log tables | - ---- - -## Web UI Architecture - -The web UI uses server-rendered Go templates with vanilla JavaScript (no framework). - -### Items Page (`items.html`, 3718 lines) - -Infor CloudSuite-style split-panel layout: -- **Horizontal mode** (default): item list on left, tabbed detail panel on right -- **Vertical mode**: tabbed detail panel on top, item list below -- **Detail tabs**: Main, Properties, Revisions, BOM, Where Used -- **Ctrl+F** opens in-page filter overlay with fuzzy search -- **Column config**: gear icon popover, separate settings per layout mode -- **Search scope**: All / Part Number / Description toggle pills - -### Projects Page (`projects.html`, 345 lines) -- Full CRUD for project codes -- Item count per project -- Click project code to filter items page - -### Schemas Page (`schemas.html`, 689 lines) -- Schema browsing and enum value management - -### Base Template (`base.html`, 171 lines) -- 3-tab navigation: Items, Projects, Schemas -- Catppuccin Mocha dark theme - ---- - -## Feature Stubs (Not Yet Implemented) - -These are scaffolded but contain placeholder implementations. - -### Odoo ERP Integration - -All functions in `internal/odoo/` return "not yet implemented" errors: - -| File | Function | Status | -|------|----------|--------| -| `client.go:30` | `Authenticate()` | Stub | -| `client.go:41` | `SearchRead()` | Stub | -| `client.go:51` | `Create()` | Stub | -| `client.go:60` | `Write()` | Stub | -| `client.go:70` | `TestConnection()` | Stub | -| `sync.go:27` | `PushItem()` | Stub (logs, returns nil) | -| `sync.go:36` | `PullProduct()` | Stub (logs, returns nil) | - -API handlers at `odoo_handlers.go`: -- `HandleTestOdooConnection` (line 134) -- returns stub message -- `HandleOdooPush` (line 149) -- returns stub message -- `HandleOdooPull` (line 167) -- returns stub message - -Config and sync-log CRUD handlers are functional. - -### Part Number Date Segments - -`internal/partnum/generator.go:102` -- `formatDate()` returns error. Date-based segments in schemas will fail at generation time. - -### Location and Inventory APIs - -Tables exist from migration 001 (`locations`, `inventory`) but no API handlers or repository methods are implemented. The database layer has no `LocationRepository` or `InventoryRepository`. - ---- - -## Potential Issues - -### Critical - -1. **No authentication or authorization.** All API endpoints are publicly accessible. Single-user only. Adding LDAP/FreeIPA integration is required before multi-user deployment. - -2. **No file locking.** Concurrent edits to the same item or file upload can cause data races. A pessimistic locking mechanism is needed for CAD file workflows. - -3. **No unit tests.** Zero test coverage across the entire Go codebase. Regressions cannot be caught automatically. - -### High - -4. **Large monolithic template.** `items.html` is 3,718 lines with inline CSS and JavaScript. Changes risk unintended side effects. Consider extracting JavaScript into separate files or adopting a build step. - -5. **No input validation middleware.** API handlers validate some fields inline but there is no systematic validation layer. Malformed requests may produce unclear errors or unexpected behavior. - -6. **No rate limiting.** API has no request rate controls. A misbehaving client or script could overwhelm the server. - -7. **Odoo handlers reference DB repositories not wired up.** `odoo_handlers.go` calls `s.db.IntegrationRepository()` but the `DB` struct in `db/db.go` does not expose an `IntegrationRepository` method. These handlers will panic if reached with a real database operation. Currently safe because config is stored in-memory and stubs short-circuit before DB calls. - -### Medium - -8. **No pagination on fuzzy search.** `HandleFuzzySearch` loads all items matching type/project filters into memory before fuzzy matching. Large datasets will cause high memory usage. - -9. **CSV import lacks transaction rollback on partial failure.** If import fails mid-batch, already-imported items remain. - -10. **No CSRF protection.** Web UI forms submit via `fetch()` but there are no CSRF tokens. Acceptable for single-user but a risk if authentication is added. - -11. **MinIO connection not validated at startup.** The `/ready` endpoint checks MinIO, but the server starts regardless. A misconfigured MinIO will only fail on file operations. - -12. **Property migration framework exists but has no registered migrations.** `internal/migration/properties.go` defines the framework but no concrete migrations use it yet. - ---- - -## Recent Git History - -``` -8e44ed2 2026-01-29 Fix SIGSEGV: defer document open after dialog close -e2b3f12 2026-01-29 Fix API URL: only auto-append /api for bare hostnames -559f615 2026-01-29 Fix API URL handling and SSL certificate verification -f08ecc1 2026-01-29 feat(workbench): fix icon loading and add settings dialog -53b5edb 2026-01-29 update documentation and specs -5ee88a6 2026-01-26 update deploy.sh -93add05 2026-01-26 improve csv import handling -2d44b2a 2026-01-26 add free-ipa setup -``` - ---- - -## Deployment - -### Supported Methods -- **Docker Compose** -- `deployments/docker-compose.yaml` (dev), `docker-compose.prod.yaml` (prod) -- **systemd** -- `deployments/systemd/silod.service` -- **Manual** -- `go build ./cmd/silod && ./silod -config config.yaml` - -### Infrastructure Requirements -- PostgreSQL 15+ with `pg_trgm` and `uuid-ossp` extensions -- MinIO or S3-compatible storage -- Go 1.23+ for building diff --git a/web/src/components/AppShell.tsx b/web/src/components/AppShell.tsx index 4da96e0..41b21fd 100644 --- a/web/src/components/AppShell.tsx +++ b/web/src/components/AppShell.tsx @@ -1,59 +1,79 @@ -import { NavLink, Outlet } from 'react-router-dom'; -import { useAuth } from '../hooks/useAuth'; +import { NavLink, Outlet } from "react-router-dom"; +import { useAuth } from "../hooks/useAuth"; +import { useDensity } from "../hooks/useDensity"; const navLinks = [ - { to: '/', label: 'Items' }, - { to: '/projects', label: 'Projects' }, - { to: '/schemas', label: 'Schemas' }, - { to: '/audit', label: 'Audit' }, - { to: '/settings', label: 'Settings' }, + { to: "/", label: "Items" }, + { to: "/projects", label: "Projects" }, + { to: "/schemas", label: "Schemas" }, + { to: "/audit", label: "Audit" }, + { to: "/settings", label: "Settings" }, ]; const roleBadgeStyle: Record = { - admin: { background: 'rgba(203,166,247,0.2)', color: 'var(--ctp-mauve)' }, - editor: { background: 'rgba(137,180,250,0.2)', color: 'var(--ctp-blue)' }, - viewer: { background: 'rgba(148,226,213,0.2)', color: 'var(--ctp-teal)' }, + admin: { background: "rgba(203,166,247,0.2)", color: "var(--ctp-mauve)" }, + editor: { background: "rgba(137,180,250,0.2)", color: "var(--ctp-blue)" }, + viewer: { background: "rgba(148,226,213,0.2)", color: "var(--ctp-teal)" }, }; export function AppShell() { const { user, loading, logout } = useAuth(); + const [density, toggleDensity] = useDensity(); if (loading) { return ( -
+
); } return ( - <> +
-

Silo

+

+ Silo +

-
-
+
- +
); } diff --git a/web/src/components/PageFooter.tsx b/web/src/components/PageFooter.tsx new file mode 100644 index 0000000..f78f5c8 --- /dev/null +++ b/web/src/components/PageFooter.tsx @@ -0,0 +1,69 @@ +import type { ReactNode } from 'react'; + +interface PageFooterProps { + stats?: ReactNode; + page?: number; + pageSize?: number; + itemCount?: number; + onPageChange?: (page: number) => void; +} + +export function PageFooter({ stats, page, pageSize, itemCount, onPageChange }: PageFooterProps) { + const hasPagination = page !== undefined && onPageChange !== undefined; + + return ( +
+
+ {stats} +
+ + {hasPagination && ( +
+ + + Page {page} + {itemCount !== undefined && ` \u00b7 ${itemCount} items`} + + +
+ )} +
+ ); +} + +const pageBtnStyle: React.CSSProperties = { + padding: '0.15rem 0.4rem', + fontSize: 'inherit', + border: 'none', + borderRadius: '0.25rem', + backgroundColor: 'var(--ctp-surface1)', + color: 'var(--ctp-text)', + cursor: 'pointer', +}; diff --git a/web/src/components/audit/AuditTable.tsx b/web/src/components/audit/AuditTable.tsx index e75c4c2..c471d9a 100644 --- a/web/src/components/audit/AuditTable.tsx +++ b/web/src/components/audit/AuditTable.tsx @@ -23,7 +23,13 @@ export function AuditTable({ }: AuditTableProps) { if (loading) { return ( -
+
Loading audit data...
); @@ -31,7 +37,13 @@ export function AuditTable({ if (items.length === 0) { return ( -
+
No items found
); @@ -39,16 +51,27 @@ export function AuditTable({ return (
- +
- {["Score", "Part Number", "Description", "Category", "Sourcing", "Missing"].map( - (h) => ( - - ), - )} + {[ + "Score", + "Part Number", + "Description", + "Category", + "Sourcing", + "Missing", + ].map((h) => ( + + ))} @@ -68,7 +91,8 @@ export function AuditTable({ }} onMouseEnter={(e) => { if (!isSelected) - e.currentTarget.style.backgroundColor = "var(--ctp-surface0)"; + e.currentTarget.style.backgroundColor = + "var(--ctp-surface0)"; }} onMouseLeave={(e) => { if (!isSelected) @@ -100,7 +124,15 @@ export function AuditTable({ > {item.part_number} - @@ -119,7 +151,8 @@ export function AuditTable({ const thStyle: React.CSSProperties = { textAlign: "left", - padding: "0.5rem 0.75rem", + padding: "var(--d-th-py) var(--d-th-px)", + fontSize: "var(--d-th-font)", borderBottom: "1px solid var(--ctp-surface1)", color: "var(--ctp-subtext0)", fontWeight: 500, @@ -130,7 +163,8 @@ const thStyle: React.CSSProperties = { }; const tdStyle: React.CSSProperties = { - padding: "0.4rem 0.75rem", + padding: "var(--d-td-py) var(--d-td-px)", + fontSize: "var(--d-td-font)", borderBottom: "1px solid var(--ctp-surface0)", color: "var(--ctp-text)", }; diff --git a/web/src/components/audit/AuditToolbar.tsx b/web/src/components/audit/AuditToolbar.tsx index c83e851..34476cb 100644 --- a/web/src/components/audit/AuditToolbar.tsx +++ b/web/src/components/audit/AuditToolbar.tsx @@ -33,9 +33,9 @@ export function AuditToolbar({ style={{ display: "flex", flexWrap: "wrap", - gap: "0.5rem", + gap: "var(--d-toolbar-gap)", alignItems: "center", - marginBottom: "0.5rem", + marginBottom: "var(--d-toolbar-mb)", }} >
- {h} - + {h} +
+ {item.description} {item.category_name || item.category}
+
+
{cols.map((col) => ( ))} @@ -139,10 +189,10 @@ export function ItemTable({ {sortedItems.map((item, idx) => { const isSelected = item.part_number === selectedPN; const rowBg = isSelected - ? 'var(--ctp-surface1)' + ? "var(--ctp-surface1)" : idx % 2 === 0 - ? 'var(--ctp-base)' - : 'var(--ctp-surface0)'; + ? "var(--ctp-base)" + : "var(--ctp-surface0)"; return ( onSelect(item.part_number)} style={{ backgroundColor: rowBg, - cursor: 'pointer', - borderBottom: '1px solid var(--ctp-surface0)', + cursor: "pointer", + borderBottom: "1px solid var(--ctp-surface0)", }} onMouseEnter={(e) => { - if (!isSelected) e.currentTarget.style.backgroundColor = 'var(--ctp-surface0)'; + if (!isSelected) + e.currentTarget.style.backgroundColor = + "var(--ctp-surface0)"; }} onMouseLeave={(e) => { - if (!isSelected) e.currentTarget.style.backgroundColor = rowBg; + if (!isSelected) + e.currentTarget.style.backgroundColor = rowBg; }} > {cols.map((col) => { switch (col.key) { - case 'part_number': + case "part_number": return ( ); - case 'item_type': { - const tc = typeColors[item.item_type] ?? { bg: 'var(--ctp-surface1)', color: 'var(--ctp-text)' }; + case "item_type": { + const tc = typeColors[item.item_type] ?? { + bg: "var(--ctp-surface1)", + color: "var(--ctp-text)", + }; return ( ); } - case 'description': - return ; - case 'revision': - return ; - case 'projects': - return ; - case 'created': - return ; - case 'actions': + case "description": + return ( + + ); + case "revision": + return ( + + ); + case "projects": + return ( + + ); + case "created": + return ( + + ); + case "actions": return ( - @@ -239,12 +338,14 @@ export function ItemTable({ x={ctxMenu.x} y={ctxMenu.y} onClose={() => setCtxMenu(null)} - items={ALL_COLUMNS.map((col): ContextMenuItem => ({ - label: col.label, - checked: visibleColumns.includes(col.key), - onToggle: () => toggleColumn(col.key), - disabled: col.key === 'part_number', - }))} + items={ALL_COLUMNS.map( + (col): ContextMenuItem => ({ + label: col.label, + checked: visibleColumns.includes(col.key), + onToggle: () => toggleColumn(col.key), + disabled: col.key === "part_number", + }), + )} /> )} @@ -252,11 +353,11 @@ export function ItemTable({ } const actionBtnStyle: React.CSSProperties = { - background: 'none', - border: 'none', - color: 'var(--ctp-subtext1)', - cursor: 'pointer', - fontSize: '0.8rem', - padding: '0.15rem 0.4rem', - borderRadius: '0.25rem', + background: "none", + border: "none", + color: "var(--ctp-subtext1)", + cursor: "pointer", + fontSize: "0.8rem", + padding: "0.15rem 0.4rem", + borderRadius: "0.25rem", }; diff --git a/web/src/components/items/ItemsToolbar.tsx b/web/src/components/items/ItemsToolbar.tsx index 7bef3c8..d385339 100644 --- a/web/src/components/items/ItemsToolbar.tsx +++ b/web/src/components/items/ItemsToolbar.tsx @@ -1,13 +1,13 @@ -import { useEffect, useState } from 'react'; -import { get } from '../../api/client'; -import type { Project } from '../../api/types'; -import type { ItemFilters } from '../../hooks/useItems'; +import { useEffect, useState } from "react"; +import { get } from "../../api/client"; +import type { Project } from "../../api/types"; +import type { ItemFilters } from "../../hooks/useItems"; interface ItemsToolbarProps { filters: ItemFilters; onFilterChange: (partial: Partial) => void; - layout: 'horizontal' | 'vertical'; - onLayoutChange: (layout: 'horizontal' | 'vertical') => void; + layout: "horizontal" | "vertical"; + onLayoutChange: (layout: "horizontal" | "vertical") => void; onExport: () => void; onImport: () => void; onCreate: () => void; @@ -15,26 +15,40 @@ interface ItemsToolbarProps { } export function ItemsToolbar({ - filters, onFilterChange, layout, onLayoutChange, - onExport, onImport, onCreate, isEditor, + filters, + onFilterChange, + layout, + onLayoutChange, + onExport, + onImport, + onCreate, + isEditor, }: ItemsToolbarProps) { const [projects, setProjects] = useState([]); useEffect(() => { - get('/api/projects').then(setProjects).catch(() => {}); + get("/api/projects") + .then(setProjects) + .catch(() => {}); }, []); - const scopeBtn = (scope: ItemFilters['searchScope'], label: string) => ( + const scopeBtn = (scope: ItemFilters["searchScope"], label: string) => ( {/* Export */} - + {/* Import (editor only) */} {isEditor && ( - + )} {/* Create (editor only) */} {isEditor && ( - )} @@ -133,20 +161,20 @@ export function ItemsToolbar({ } const selectStyle: React.CSSProperties = { - padding: '0.4rem 0.6rem', - backgroundColor: 'var(--ctp-surface0)', - border: '1px solid var(--ctp-surface1)', - borderRadius: '0.4rem', - color: 'var(--ctp-text)', - fontSize: '0.85rem', + padding: "var(--d-input-py) var(--d-input-px)", + backgroundColor: "var(--ctp-surface0)", + border: "1px solid var(--ctp-surface1)", + borderRadius: "0.4rem", + color: "var(--ctp-text)", + fontSize: "var(--d-input-font)", }; const toolBtnStyle: React.CSSProperties = { - padding: '0.4rem 0.75rem', - backgroundColor: 'var(--ctp-surface1)', - border: 'none', - borderRadius: '0.4rem', - color: 'var(--ctp-text)', - fontSize: '0.85rem', - cursor: 'pointer', + padding: "var(--d-input-py) var(--d-input-px)", + backgroundColor: "var(--ctp-surface1)", + border: "none", + borderRadius: "0.4rem", + color: "var(--ctp-text)", + fontSize: "var(--d-input-font)", + cursor: "pointer", }; diff --git a/web/src/hooks/useDensity.ts b/web/src/hooks/useDensity.ts new file mode 100644 index 0000000..3c3a73d --- /dev/null +++ b/web/src/hooks/useDensity.ts @@ -0,0 +1,22 @@ +import { useCallback } from 'react'; +import { useLocalStorage } from './useLocalStorage'; + +export type Density = 'comfortable' | 'compact'; + +function applyDensity(density: Density) { + document.documentElement.setAttribute('data-density', density); +} + +export function useDensity(): [Density, () => void] { + const [density, setDensity] = useLocalStorage('silo-density', 'comfortable'); + + applyDensity(density); + + const toggle = useCallback(() => { + const next: Density = density === 'comfortable' ? 'compact' : 'comfortable'; + setDensity(next); + applyDensity(next); + }, [density, setDensity]); + + return [density, toggle]; +} diff --git a/web/src/main.tsx b/web/src/main.tsx index 5d5efd1..a497b34 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -1,11 +1,20 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; -import { BrowserRouter } from 'react-router-dom'; -import { AuthProvider } from './context/AuthContext'; -import { App } from './App'; -import './styles/global.css'; +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; +import { AuthProvider } from "./context/AuthContext"; +import { App } from "./App"; +import "./styles/global.css"; -createRoot(document.getElementById('root')!).render( +// Apply saved density before first paint to prevent FOUC +try { + const saved = localStorage.getItem("silo-density"); + const density = saved ? JSON.parse(saved) : "comfortable"; + document.documentElement.setAttribute("data-density", density); +} catch { + document.documentElement.setAttribute("data-density", "comfortable"); +} + +createRoot(document.getElementById("root")!).render( diff --git a/web/src/pages/AuditPage.tsx b/web/src/pages/AuditPage.tsx index eb98472..dc70813 100644 --- a/web/src/pages/AuditPage.tsx +++ b/web/src/pages/AuditPage.tsx @@ -6,6 +6,7 @@ import { AuditToolbar } from "../components/audit/AuditToolbar"; import { AuditTable } from "../components/audit/AuditTable"; import { AuditDetailPanel } from "../components/audit/AuditDetailPanel"; import { SplitPanel } from "../components/items/SplitPanel"; +import { PageFooter } from "../components/PageFooter"; type PaneMode = { type: "none" } | { type: "detail"; partNumber: string }; @@ -47,8 +48,8 @@ export function AuditPage() { style={{ display: "flex", flexDirection: "column", - height: "calc(100vh - 64px)", - paddingBottom: 28, + height: "100%", + paddingBottom: "var(--d-footer-h)", }} > {error && ( @@ -91,45 +92,18 @@ export function AuditPage() { storageKey="silo-audit-split" /> - {/* Pagination */} -
- - - Page {filters.page} · {items.length} items - - -
+ + {summary.total_items} items + Avg: {(summary.avg_score * 100).toFixed(1)}% + + } + page={filters.page} + pageSize={filters.pageSize} + itemCount={items.length} + onPageChange={(p) => updateFilters({ page: p })} + /> ); } - -const pageBtnStyle: React.CSSProperties = { - padding: "0.25rem 0.6rem", - fontSize: "0.8rem", - border: "none", - borderRadius: "0.3rem", - backgroundColor: "var(--ctp-surface0)", - color: "var(--ctp-text)", - cursor: "pointer", -}; diff --git a/web/src/pages/ItemsPage.tsx b/web/src/pages/ItemsPage.tsx index 4f77ab5..2c4a8da 100644 --- a/web/src/pages/ItemsPage.tsx +++ b/web/src/pages/ItemsPage.tsx @@ -14,7 +14,7 @@ import { EditItemPane } from "../components/items/EditItemPane"; import { DeleteItemPane } from "../components/items/DeleteItemPane"; import { ImportItemsPane } from "../components/items/ImportItemsPane"; import { SplitPanel } from "../components/items/SplitPanel"; -import { FooterStats } from "../components/items/FooterStats"; +import { PageFooter } from "../components/PageFooter"; type PaneMode = | { type: "none" } @@ -170,8 +170,8 @@ export function ItemsPage() { style={{ display: "flex", flexDirection: "column", - height: "calc(100vh - 64px)", - paddingBottom: 28, + height: "100%", + paddingBottom: "var(--d-footer-h)", }} > {error && ( @@ -217,47 +217,40 @@ export function ItemsPage() { secondary={secondaryPane} /> - {/* Pagination */} -
- - - Page {filters.page} · {items.length} items - - -
- - + + + Total:{" "} + + {items.length} + + + + Parts:{" "} + + {items.filter((i) => i.item_type === "part").length} + + + + Assemblies:{" "} + + {items.filter((i) => i.item_type === "assembly").length} + + + + Documents:{" "} + + {items.filter((i) => i.item_type === "document").length} + + + + } + page={filters.page} + pageSize={filters.pageSize} + itemCount={items.length} + onPageChange={(p) => updateFilters({ page: p })} + /> ); } - -const pageBtnStyle: React.CSSProperties = { - padding: "0.25rem 0.6rem", - fontSize: "0.8rem", - border: "none", - borderRadius: "0.3rem", - backgroundColor: "var(--ctp-surface0)", - color: "var(--ctp-text)", - cursor: "pointer", -}; diff --git a/web/src/styles/theme.css b/web/src/styles/theme.css index 153240c..7b209fc 100644 --- a/web/src/styles/theme.css +++ b/web/src/styles/theme.css @@ -1,29 +1,92 @@ /* Catppuccin Mocha Theme */ :root { - --ctp-rosewater: #f5e0dc; - --ctp-flamingo: #f2cdcd; - --ctp-pink: #f5c2e7; - --ctp-mauve: #cba6f7; - --ctp-red: #f38ba8; - --ctp-maroon: #eba0ac; - --ctp-peach: #fab387; - --ctp-yellow: #f9e2af; - --ctp-green: #a6e3a1; - --ctp-teal: #94e2d5; - --ctp-sky: #89dceb; - --ctp-sapphire: #74c7ec; - --ctp-blue: #89b4fa; - --ctp-lavender: #b4befe; - --ctp-text: #cdd6f4; - --ctp-subtext1: #bac2de; - --ctp-subtext0: #a6adc8; - --ctp-overlay2: #9399b2; - --ctp-overlay1: #7f849c; - --ctp-overlay0: #6c7086; - --ctp-surface2: #585b70; - --ctp-surface1: #45475a; - --ctp-surface0: #313244; - --ctp-base: #1e1e2e; - --ctp-mantle: #181825; - --ctp-crust: #11111b; + --ctp-rosewater: #f5e0dc; + --ctp-flamingo: #f2cdcd; + --ctp-pink: #f5c2e7; + --ctp-mauve: #cba6f7; + --ctp-red: #f38ba8; + --ctp-maroon: #eba0ac; + --ctp-peach: #fab387; + --ctp-yellow: #f9e2af; + --ctp-green: #a6e3a1; + --ctp-teal: #94e2d5; + --ctp-sky: #89dceb; + --ctp-sapphire: #74c7ec; + --ctp-blue: #89b4fa; + --ctp-lavender: #b4befe; + --ctp-text: #cdd6f4; + --ctp-subtext1: #bac2de; + --ctp-subtext0: #a6adc8; + --ctp-overlay2: #9399b2; + --ctp-overlay1: #7f849c; + --ctp-overlay0: #6c7086; + --ctp-surface2: #585b70; + --ctp-surface1: #45475a; + --ctp-surface0: #313244; + --ctp-base: #1e1e2e; + --ctp-mantle: #181825; + --ctp-crust: #11111b; +} + +/* ── Density: comfortable (default) ── */ +[data-density="comfortable"], +:root { + --d-header-py: 0.625rem; + --d-header-px: 2rem; + --d-header-logo: 1.25rem; + --d-nav-gap: 1rem; + --d-nav-py: 0.35rem; + --d-nav-px: 0.75rem; + --d-nav-radius: 0.4rem; + --d-user-gap: 0.6rem; + --d-user-font: 0.85rem; + + --d-th-py: 0.35rem; + --d-th-px: 0.75rem; + --d-th-font: 0.75rem; + --d-td-py: 0.25rem; + --d-td-px: 0.75rem; + --d-td-font: 0.85rem; + + --d-toolbar-gap: 0.5rem; + --d-toolbar-py: 0.5rem; + --d-toolbar-mb: 0.35rem; + --d-input-py: 0.35rem; + --d-input-px: 0.6rem; + --d-input-font: 0.85rem; + + --d-footer-h: 28px; + --d-footer-font: 0.75rem; + --d-footer-px: 2rem; +} + +/* ── Density: compact ── */ +[data-density="compact"] { + --d-header-py: 0.35rem; + --d-header-px: 1.25rem; + --d-header-logo: 1.1rem; + --d-nav-gap: 0.5rem; + --d-nav-py: 0.2rem; + --d-nav-px: 0.5rem; + --d-nav-radius: 0.3rem; + --d-user-gap: 0.35rem; + --d-user-font: 0.8rem; + + --d-th-py: 0.2rem; + --d-th-px: 0.5rem; + --d-th-font: 0.7rem; + --d-td-py: 0.125rem; + --d-td-px: 0.5rem; + --d-td-font: 0.8rem; + + --d-toolbar-gap: 0.35rem; + --d-toolbar-py: 0.25rem; + --d-toolbar-mb: 0.15rem; + --d-input-py: 0.2rem; + --d-input-px: 0.4rem; + --d-input-font: 0.8rem; + + --d-footer-h: 24px; + --d-footer-font: 0.7rem; + --d-footer-px: 1.25rem; }
col.key !== 'actions' && onSort(col.key)} + onClick={() => col.key !== "actions" && onSort(col.key)} > {col.label} {sortKey === col.key && ( - {sortDir === 'asc' ? '▲' : '▼'} + + {sortDir === "asc" ? "▲" : "▼"} + )}
{ e.stopPropagation(); copyPN(item.part_number); }} + onClick={(e) => { + e.stopPropagation(); + copyPN(item.part_number); + }} title="Click to copy" style={{ fontFamily: "'JetBrains Mono', monospace", - color: 'var(--ctp-peach)', - cursor: 'copy', + color: "var(--ctp-peach)", + cursor: "copy", }} > {item.part_number} - + {item.item_type} {item.description}Rev {item.current_revision}—{formatDate(item.created_at)} + {item.description} + + Rev {item.current_revision} + + — + + {formatDate(item.created_at)} + @@ -226,7 +318,14 @@ export function ItemTable({ })} {sortedItems.length === 0 && (
+ No items found