Svelte Satoria - Industrial Process Management (v0.0.1)

Svelte Satoria is a web application designed for configuring, managing, and monitoring industrial processes, likely for ATV (Automated Test Vehicle or similar) lines. It provides a user-friendly interface for operators and administrators to interact with machine settings and oversee operations.

This application is built with SvelteKit and leverages modern web technologies to deliver a responsive and efficient user experience.

Tech Stack

• Framework: SvelteKit (^2.21.5)
• Language: TypeScript (^5.8.3)
• UI Library: Svelte (^5.34.2)
• Styling:
  • Tailwind CSS (^4.1.10)
  • bits-ui (^2.7.0) - UI components
  • clsx (^2.1.1) & tailwind-merge (^3.3.1) - Class name utilities
  • tailwind-variants (^1.0.0) - Variant management
  • tw-animate-css (^1.3.4) - Animations
  • mode-watcher (^1.0.8) - Dark mode / theme management
• Forms:
  • sveltekit-superforms (^2.26.1)
  • formsnap (^2.0.1)
  • zod (^3.25.64) - Schema validation
• Authentication & Security:
  • jose (^6.0.11) - JWT (JSON Web Token) handling
  • bcrypt (^6.0.0) - Password hashing
• Database & ORM:
  • PostgreSQL (inferred from pg driver and Drizzle config)
  • drizzle-orm (^0.44.2)
  • drizzle-kit (^0.31.1) - Drizzle ORM tooling
  • pg (^8.16.0) - Node.js PostgreSQL client
• API & Server:
  • SvelteKit server-side capabilities
  • @sveltejs/adapter-node (^5.2.12) - Node.js adapter for SvelteKit
• Charting:
  • echarts (^5.6.0)
• Linting & Formatting:
  • ESLint (^9.29.0)
  • Prettier (^3.5.3)
  • eslint-plugin-svelte (^3.9.2)
  • prettier-plugin-svelte (^3.4.0)
  • prettier-plugin-tailwindcss (^0.6.12)
• Development Tools:
  • Vite (^6.3.5)
  • svelte-check (^4.2.1)
  • tsx (^4.20.3) - TypeScript execution
• Runtime Environment (likely): Bun (inferred from bun.lock)
• Other Notable Libraries:
  • dotenv (^16.5.0) - Environment variable management
  • node-device-detector (^2.2.2) - Device detection
  • svelte-sonner (^1.0.5) - Toast notifications
  • @lucide/svelte (^0.515.0) - Icon library

Key Features

• User Authentication: Secure login, registration, and session management using JWT.
• Role-Based Access Control: Different views and capabilities for regular users and administrators.
• Device/Machine Configuration: Detailed forms for setting parameters for various process stages:
  • Heating (form-heating.svelte)
  • Preparation (form-prepare.svelte)
  • Filling (form-filling.svelte)
  • Sterilization (form-sterilization.svelte)
• Process Monitoring: Includes a section for real-time monitoring of machine status, alarms, and potentially charts for temperature and other metrics.
• Account Management: Features for users to manage their credentials (e.g., password changes).
• Admin Panel: Capabilities for administrators to manage devices, user accounts, and potentially system-wide settings.
• Responsive UI: Utilizes Tailwind CSS for a modern and adaptable user interface across different devices.
• Dark Mode: Supports light and dark themes, configurable via CSS variables and mode-watcher.
• Toast Notifications: Provides user feedback for actions like saving configurations.

Project Structure Highlights

• src/lib/server/db/: Contains database schema (schema.ts), Drizzle ORM setup (index.ts), and Zod schemas for validation (schemaZod.ts).
• src/lib/server/middleware/Authentication.ts: Handles JWT-based authentication logic.
• src/lib/utils/configuration/config-atv.ts: Defines types and potentially default values for ATV machine configurations.
• src/routes/(app)/configuration/lineX/atva/: Contains the Svelte components for different machine configuration forms (heating, prepare, filling, sterilization).
• src/routes/(app)/account/: User account management pages.
• src/routes/(admin)/: Admin-specific routes for user and device management.
• src/app.css: Defines global styles, Tailwind CSS setup, and oklch color variables for theming (light and dark modes).
• src/app.d.ts: TypeScript definitions for the application, including extending App.Locals for JWT utilities.
• src/hooks.server.ts: Server-side hooks for initializing JWT utilities and handling other requests.
• drizzle/: Contains database migration files generated by Drizzle Kit.

Getting Started

1. Clone the repository (if applicable):

   git clone <repository-url>
   cd svelte-satoria

2. Install dependencies:
   Given the presence of bun.lock, Bun is the recommended package manager.

   bun install

   Alternatively, if you prefer npm or yarn, delete bun.lock and run npm install or yarn install.

3. Set up environment variables:
   Create a .env file in the root directory. This file should contain necessary environment variables such as:

   • DATABASE_URL: Connection string for your PostgreSQL database (e.g., postgresql://user:password@host:port/database).
   • JWT_SECRET: A strong secret key for signing JWTs.
   • Other environment-specific configurations.
     (Refer to any .env.example if available, or check the code for required variables, e.g., in src/lib/server/middleware/Authentication.ts).

4. Database Setup & Migrations:

   • Ensure your PostgreSQL server is running and accessible.
   • Apply database migrations using Drizzle Kit (scripts are available in package.json):

     bun run db:push # Applies pending migrations directly
     # OR for generating migration files:
     # bun run db:migrate

     If you generate migration files, you might need to apply them using a separate command or ensure your application handles this. db:push is often simpler for development.

5. Run the development server:

   bun run dev

   The application should now be running, typically on http://localhost:5173.

Available Scripts (from package.json)

• dev: Starts the development server using Vite.
• build: Builds the application for production using Vite.
• preview: Previews the production build locally.
• prepare: SvelteKit sync script (ensures type safety and generates necessary files).
• check: Runs SvelteKit sync and performs type-checking using svelte-check.
• check:watch: Runs SvelteKit sync and type-checking in watch mode.
• format: Formats the codebase using Prettier.
• lint: Checks formatting with Prettier and lints with ESLint.
• db:start: Starts the database using Docker Compose (assumes docker-compose.yml is configured for PostgreSQL).
• db:push: Pushes schema changes directly to the database using Drizzle Kit.
• db:migrate: Generates SQL migration files based on schema changes using Drizzle Kit.
• db:studio: Opens Drizzle Studio to browse and manage your database.

Main Dependencies (dependencies in package.json)

• @tailwindcss/language-server: ^0.14.21
• bcrypt: ^6.0.0
• dotenv: ^16.5.0
• drizzle-orm: ^0.44.2
• echarts: ^5.6.0
• jose: ^6.0.11
• node-device-detector: ^2.2.2
• pg: ^8.16.0
• postgres: ^3.4.7 (Note: pg is generally used with Drizzle for PostgreSQL; postgres might be for a specific use or an alternative)
• svelte-language-server: ^0.17.15
• svelte-sonner: ^1.0.5
• sveltekit-superforms: ^2.26.1
• typescript-svelte-plugin: ^0.3.47
• zod: ^3.25.64

Development Dependencies (devDependencies in package.json)

• @eslint/compat: ^1.3.0
• @eslint/js: ^9.29.0
• @internationalized/date: ^3.8.2
• @lucide/svelte: ^0.515.0
• @sveltejs/adapter-node: ^5.2.12
• @sveltejs/kit: ^2.21.5
• @sveltejs/vite-plugin-svelte: ^5.1.0
• @tailwindcss/forms: ^0.5.10
• @tailwindcss/vite: ^4.1.10
• @tanstack/table-core: ^8.21.3
• @types/bcrypt: ^5.0.2
• @types/node: ^24.0.1
• @types/pg: ^8.15.4
• bits-ui: ^2.7.0
• clsx: ^2.1.1
• drizzle-kit: ^0.31.1
• eslint: ^9.29.0
• eslint-config-prettier: ^10.1.5
• eslint-plugin-svelte: ^3.9.2
• formsnap: ^2.0.1
• globals: ^16.2.0
• mode-watcher: ^1.0.8
• prettier: ^3.5.3
• prettier-plugin-svelte: ^3.4.0
• prettier-plugin-tailwindcss: ^0.6.12
• svelte: ^5.34.2
• svelte-check: ^4.2.1
• tailwind-merge: ^3.3.1
• tailwind-variants: ^1.0.0
• tailwindcss: ^4.1.10
• tsx: ^4.20.3
• tw-animate-css: ^1.3.4
• typescript: ^5.8.3
• typescript-eslint: ^8.34.0
• vite: ^6.3.5

License

Refer to the LICENSE.md file for licensing information.

Release Information

This repository contains only the compiled version of the monitoring system. It is updated automatically via GitHub Actions.

Last updated: Wed Jun 18 01:59:33 UTC 2025