Batch Management System

A comprehensive system for managing batches with items and mixed items.

Features

• ✅ Create batches with valid items (same MPN) and mixed items (different MPN)
• 📊 View all batches with expandable item lists
• 🔍 Search batches by name or ID
• 🗑️ Delete batches (cascade deletes all items)
• 📄 Pagination and sorting
• 🎨 Modern, responsive UI

Database Structure

Tables

batches

• id - Auto-increment primary key
• batch_name - Unique batch identifier
• createdAt - Timestamp

items (Valid items with same MPN)

• id - Auto-increment primary key
• batch_id - Foreign key to batches
• mpn - Manufacturer Part Number
• sn - Serial Number
• createdAt - Timestamp

items_mix (Mixed items with different MPN)

• id - Auto-increment primary key
• batch_id - Foreign key to batches
• mpn - Manufacturer Part Number
• sn - Serial Number
• createdAt - Timestamp

Installation

1. Install dependencies:

npm install

2. Start the server:

npm start

3. For development with auto-reload:

npm run dev

4. Open browser to:

http://localhost:4444

API Documentation

1. Save Batch

POST /api/batch/save

Create a new batch with items and optional mixed items.

Request Body:

{
  "batch_name": "BATCH_20250210141530",
  "items": [
    {
      "mpn": "CN_M378A5143DB0-CPB_1620",
      "sn": "U03A00062074544398"
    },
    {
      "mpn": "CN_M378A5143DB0-CPB_1620",
      "sn": "U03A00062074544399"
    }
  ],
  "items_mix": [
    {
      "mpn": "CN_M378A5143DB0-CPB_1621",
      "sn": "U03A00062074544403"
    }
  ]
}

Response:

{
  "success": true,
  "batch_id": 1,
  "batch_name": "BATCH_20250210141530",
  "inserted_items": 2,
  "inserted_mix_items": 1
}

2. Get All Batches

GET /api/batch/get-all

Retrieve all batches with pagination, search, and sorting.

Query Parameters:

• page (default: 1) - Page number
• limit (default: 50) - Items per page
• search - Search by batch name or ID
• sortBy (default: "id") - Column to sort by (id, batch_name, createdAt)
• sortOrder (default: "DESC") - Sort order (ASC, DESC)

Example:

GET /api/batch/get-all?page=1&limit=50&sortBy=createdAt&sortOrder=DESC

Response:

{
  "batches": [
    {
      "id": 1,
      "batch_name": "BATCH_20250210141530",
      "createdAt": "2025-02-10 14:15:30",
      "items": [
        {
          "mpn": "CN_M378A5143DB0-CPB_1620",
          "sn": "U03A00062074544398",
          "createdAt": "2025-02-10 14:15:30"
        }
      ],
      "items_mix": [
        {
          "mpn": "CN_M378A5143DB0-CPB_1621",
          "sn": "U03A00062074544403",
          "createdAt": "2025-02-10 14:15:30"
        }
      ]
    }
  ],
  "total": 1,
  "page": 1,
  "limit": 50,
  "totalPages": 1
}

3. Get Single Batch

GET /api/batch/get/:id

Get a specific batch by ID with all its items.

Example:

GET /api/batch/get/1

Response:

{
  "id": 1,
  "batch_name": "BATCH_20250210141530",
  "createdAt": "2025-02-10 14:15:30",
  "items": [...],
  "items_mix": [...]
}

4. Delete Batch

DELETE /api/batch/delete/:id

Delete a batch and all its items (cascade delete).

Example:

DELETE /api/batch/delete/1

Response:

{
  "success": true,
  "deleted": 1
}

5. Search Items

GET /api/items/search

Search for items across all batches.

Query Parameters:

• q (required) - Search query for MPN or SN

Example:

GET /api/items/search?q=U03A00062074544398

Response:

{
  "results": [
    {
      "batch_id": 1,
      "batch_name": "BATCH_20250210141530",
      "mpn": "CN_M378A5143DB0-CPB_1620",
      "sn": "U03A00062074544398",
      "createdAt": "2025-02-10 14:15:30",
      "type": "items"
    }
  ]
}

Frontend Features

Batch Table

• Click on batch row to expand and view items
• Items are displayed in two sections:
  • ✅ Valid Items (same MPN)
  • ⚠️ Mixed Items (different MPN)

Create Batch Modal

• Auto-generates batch name with timestamp
• JSON input for items and mixed items
• Validation for required fields and JSON format

Search & Sort

• Real-time search with debouncing
• Sort by ID, Batch Name, or Created At
• Toggle between ASC/DESC order

Technologies

• Backend: Node.js, Express.js
• Database: SQLite3
• Frontend: Vanilla JavaScript, HTML5, CSS3
• Features: RESTful API, Responsive Design

Project Structure

.
├── server.js           # Express server with API routes
├── index.html          # Frontend UI
├── package.json        # Node.js dependencies
├── products.db         # SQLite database (auto-generated)
└── README.md          # This file

Notes

• Database is automatically created on first run
• All timestamps are stored in UTC and converted to local time in UI
• Cascade delete ensures all items are removed when batch is deleted
• Foreign key constraints maintain data integrity