WMS Client

A modern web application for the Warehouse Management System (WMS). This system handles various warehouse operation modules, from ATK (Alat Tulis Kantor) management to webservice integrations for DC and DPD, serving as the frontend client built with SvelteKit.

🚀 Tech Stack

• Framework: SvelteKit (using Svelte 5)
• Styling: TailwindCSS 4 & Flowbite Svelte
• Build Tool: Vite
• Process Manager: PM2 for production deployments
• Excel Module: SheetJS (xlsx) for data export

📦 Features & Modules

The application is modularized into several core systems:

• Authentication System (/login, /logout)
• Main Dashboard (/dashboard)
• ATK Management (/atk)
  • Master ATK: Management of ATK master data.
  • Monitoring Stock: Live stock monitoring for ATK, featuring Excel data export capabilities.
  • Planogram ATK: Visual mapping and location management for ATK.
• Webservice DC (/webservice-dc)
  • Grup Pertemanan: Configuration and mapping.
  • Planogram Mapping: DC specific planogram integration.
• Webservice DPD (/webservice-dpd)
  • Booking PB: Booking processes and management.
• Support Modules (/support)

📂 Project Structure

wms-client/
├── src/
│   ├── lib/                  # Shared components, configurations, services, stores, and utils
│   │   ├── components/       # Reusable UI components
│   │   ├── config/           # App configurations and constants
│   │   ├── layouts/          # Layout components
│   │   ├── services/         # API integrations and external services
│   │   ├── stores/           # Svelte stores for state management
│   │   └── utils/            # Helper functions
│   ├── routes/               # SvelteKit file-based routing
│   │   ├── (auth)/           # Authentication layout and routes
│   │   └── (main)/           # Main application layout and feature routes
├── .env.development          # Environment variables for local development
├── .env.production           # Environment variables for production
├── ecosystem.config.cjs      # PM2 configuration specifically for deployment
└── svelte.config.js / vite.config.js

🛠️ Setup and Installation

1. Clone the repository: Ensure you have the repository securely cloned into your local development environment.

2. Install dependencies: Using npm, pnpm, or yarn.

   npm install
   

3. Environment Setup: A .env.development or .env.production file is required to connect to the proper backend gateway APIs.

4. Start Development Server:

   npm run dev
   

   The server will be running on your local machine, typically at http://localhost:5173.

📜 Available Scripts

• npm run dev: Starts the development server with Vite.
• npm run build: Compiles the app for production use.
• npm run preview: Previews the local production build.
• npm run lint / npm run format: Runs ESLint and Prettier.
• npm run env:debug: Executes a custom script (scripts/debug-env.js) to diagnose environment variables and API connections.

Production Commands (PM2)

This project is configured to run using PM2 via ecosystem.config.cjs:

• npm run pm2:start: Starts the application in PM2.
• npm run pm2:restart: Restarts the active PM2 process.
• npm run pm2:stop: Stops the application process.
• npm run pm2:logs: Streams logs generated by the application.
• npm run pm2:monit: Opens the PM2 monitoring dashboard.

Built natively via Svelte.