{"id":20947400,"url":"https://github.com/computemachines/inventorius-frontend","last_synced_at":"2026-04-13T05:42:08.723Z","repository":{"id":54070960,"uuid":"367191927","full_name":"computemachines/inventorius-frontend","owner":"computemachines","description":"Inventory management system for makers and hobbyists.","archived":false,"fork":false,"pushed_at":"2022-11-24T00:41:18.000Z","size":1637,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-19T21:51:10.201Z","etag":null,"topics":["erp","inventory-management","reactjs","server-side-rendering"],"latest_commit_sha":null,"homepage":"https://inventori.us","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/computemachines.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-13T22:45:29.000Z","updated_at":"2022-01-14T20:26:23.000Z","dependencies_parsed_at":"2022-08-13T06:30:35.651Z","dependency_job_id":null,"html_url":"https://github.com/computemachines/inventorius-frontend","commit_stats":null,"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computemachines%2Finventorius-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computemachines%2Finventorius-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computemachines%2Finventorius-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computemachines%2Finventorius-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/computemachines","download_url":"https://codeload.github.com/computemachines/inventorius-frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243345599,"owners_count":20275869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["erp","inventory-management","reactjs","server-side-rendering"],"created_at":"2024-11-19T00:11:08.501Z","updated_at":"2026-04-13T05:42:08.711Z","avatar_url":"https://github.com/computemachines.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Inventorius Frontend\r\n\r\nReact web application for the Inventorius inventory management system. Features server-side rendering for fast QR code scans and a dynamic form system powered by the unified trigger schema.\r\n\r\n## Quick Start (Development)\r\n\r\n```bash\r\n# Install dependencies\r\nnpm install\r\n\r\n# Start development server (with hot module replacement)\r\nnpm run start\r\n```\r\n\r\nThe frontend will be available at http://localhost:8080\r\n\r\n**Note:** The API must be running at http://localhost:8000 for full functionality.\r\n\r\n## Project Structure\r\n\r\n```\r\nsrc/\r\n├── components/\r\n│   ├── App.tsx              # Main app with routing\r\n│   ├── NewSkuForm.tsx       # SKU creation (schema-based)\r\n│   ├── NewBatchForm.tsx     # Batch creation (schema-based)\r\n│   ├── SchemaFields.tsx     # Reusable field components\r\n│   ├── Sku.tsx              # SKU detail/edit view\r\n│   ├── Batch.tsx            # Batch detail/edit view\r\n│   └── ...\r\n├── hooks/\r\n│   ├── useSchemaForm.ts     # Schema evaluation hook\r\n│   └── ...\r\n├── api-client/\r\n│   ├── api-client.ts        # API wrapper\r\n│   └── data-models.ts       # TypeScript types\r\n└── styles/\r\n    └── tailwind.css         # Tailwind CSS\r\n```\r\n\r\n## Key Features\r\n\r\n### Dynamic Forms with useSchemaForm\r\n\r\nThe `useSchemaForm` hook connects to the API's schema evaluation endpoint to provide dynamic form fields based on user input:\r\n\r\n```typescript\r\nconst schema = useSchemaForm(\"sku\", [\"ItemTypeSelector\"]);\r\n\r\n// schema.availableFields - fields to render\r\n// schema.fieldValues - current values\r\n// schema.handleFieldChange - update handler\r\n// schema.getSubmitValues() - clean values for submission\r\n```\r\n\r\n**WYSIWYG Architecture:** The visible form state equals the submission state. When fields disappear (e.g., switching from Resistor to Capacitor), their values are archived to a restoration cache for UX convenience but are never submitted.\r\n\r\n### Server-Side Rendering\r\n\r\nPages are pre-rendered on the server so QR code scans display content immediately without waiting for JavaScript to load.\r\n\r\n## Available Scripts\r\n\r\n| Command | Description |\r\n|---------|-------------|\r\n| `npm run start` | Development server with HMR (port 8080) |\r\n| `npm run build` | Production build |\r\n| `npm run server` | Run SSR server (port 3001) |\r\n| `npm run lint` | Run ESLint |\r\n\r\n## Routes\r\n\r\n| Path | Component | Description |\r\n|------|-----------|-------------|\r\n| `/` | Home | Dashboard |\r\n| `/new/sku` | NewSkuForm | Create SKU with dynamic fields |\r\n| `/new/batch` | NewBatchForm | Create Batch with supplier fields |\r\n| `/new/bin` | NewBin | Create storage location |\r\n| `/sku/:id` | Sku | View/edit SKU |\r\n| `/batch/:id` | Batch | View/edit Batch |\r\n| `/search` | SearchForm | Full-text search |\r\n\r\n## Docker Deployment\r\n\r\nThe frontend is deployed as a Docker container via GitHub Actions CI/CD:\r\n\r\n```bash\r\ndocker pull ghcr.io/computemachines/inventorius-frontend:latest\r\n```\r\n\r\nSee [inventorius-deploy](https://github.com/computemachines/inventorius-deploy) for the full Docker Compose stack.\r\n\r\n## Environment Variables\r\n\r\n| Variable | Description |\r\n|----------|-------------|\r\n| `API_HOSTNAME` | API server URL (for SSR, default: `http://localhost:8000`) |\r\n| `PORT` | SSR server port (default: `3001`) |\r\n\r\n## Design System\r\n\r\nColors used throughout the UI:\r\n\r\n| Color | Hex | Usage |\r\n|-------|-----|-------|\r\n| Deep black | `#04151f` | Headers, text |\r\n| Dark navy | `#082441` | Dropdowns, badges |\r\n| Medium blue | `#0c3764` | Hover, focus states |\r\n| Amber | `#c0771f` | Accents, required indicators |\r\n| Light gray | `#cdd2d6` | Borders, dividers |\r\n| Dark green | `#26532b` | Primary buttons, success |\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomputemachines%2Finventorius-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomputemachines%2Finventorius-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomputemachines%2Finventorius-frontend/lists"}