Logo
Published on

PSB Dashboard Technical Writeup

Authors

Summary:

The PSB Bakery Dashboard is a modern, full-stack web application I built to transform bakery operations from paper-based chaos to digital efficiency. Designed for real-world production environments, it empowers our bakery to track inventory, production, compliance, and training with ease, while providing actionable insights and robust traceability. This writeup details the business context, technical architecture, and key features of the platform—showcasing my ability to deliver scalable, secure, and user-friendly solutions for complex operational challenges.

🍞 PSB Bakery Dashboard Writeup

Table of Contents

Overview

The PSB Bakery Dashboard is a full-stack web application designed to streamline and digitize bakery operations. It provides real-time insights, traceability, inventory management, production tracking, document control, and compliance reporting, all in a secure, user-friendly interface.

Business Context & Value

Our bakery faced increasing regulatory, quality, and operational challenges. Manual paperwork and lack of traceability can lead to inefficiencies, compliance risks, and lost revenue.

PSB Bakery Dashboard was built to solve these problems by:

  • Digitizing daily paperwork and production logs
  • Enabling end-to-end traceability of ingredients and batches
  • Providing actionable insights and compliance alerts
  • Centralizing document management and training records

Intended Users: Bakery managers, production supervisors, quality assurance teams, and compliance officers.

Key Features

  • Dashboard Overview: Real-time KPIs, production stats, and compliance alerts.
  • Traceability: Track ingredient lots from receiving through production and shipment. Instantly trace batches for recalls or audits.
  • Production Management: Log daily production, batch controls, and overrun reports.
  • Inventory Management: Track stock levels, transactions, and receiving. Low-stock and discrepancy alerts.
  • Paperwork Digitization: Replace paper forms with digital templates for quality, sanitation, maintenance, and more.
  • Document Control: Manage document templates, versions, and attachments (e.g., Certificates of Analysis).
  • Training Management: Track employee training, requirements, and renewal periods.
  • Compliance & Insights: Automated reports, completion rates, and missing paperwork alerts.
  • Role-Based Security: Azure AD authentication and fine-grained access control.
  • Modern UI/UX: Built with MudBlazor for a responsive, accessible, and visually appealing experience.

Screenshots & Visuals

Dashboard showing a few KPIs Dashboard Overview: Key Performance Indicators (KPIs) at a glance.

Traceability Search & Results Traceability: Search and results for ingredient and batch tracking.

Inventory Management Table Inventory Management: View and manage current stock levels.

Batch Control Entry Batch Control: Record and review daily batch production.

Document Management Document Management: Organize and access document templates and versions.

Training Records Training Records: Track employee training and compliance.

Compliance/Insights Page Compliance & Insights: Alerts for upcoming training needs and document reviews.

Note: Alerts are generated when employees need training soon or when documents are about to expire and require review.

Technical Architecture

Frontend

  • Framework: Blazor WebAssembly (.NET 9)
  • UI Library: MudBlazor (Material Design)
  • Authentication: Azure AD (MSAL)
  • Features:
    • Responsive layouts (MainLayout, HomeLayout)
    • Modular pages: Dashboard, Traceability, Production, Inventory, Paperwork, Reports, Training, Documents, Alerts
    • Dialog-driven workflows for CRUD operations
    • Real-time feedback via snackbars and dialogs

Backend

  • Framework: ASP.NET Core Web API (.NET 9)
  • Database: PostgreSQL (via Entity Framework Core)
  • Cloud Storage: Azure Blob Storage (for document attachments)
  • API Structure: RESTful endpoints grouped by domain (Traceability, Inventory, Paperwork, Production, Training, Documents, etc.)
  • Authentication: Azure AD JWT Bearer
  • OpenAPI/Swagger: For API documentation and testing

Shared Models

  • Project Structure: Shared C# class library for models and DTOs, ensuring strong typing and DRY principles across frontend and backend.

Core Data Models

  • BatchControl: Tracks production batches, ingredient lots, and associated documents.
  • IngredientReceiving: Logs incoming ingredient lots, quantities, and related paperwork.
  • InventoryItem & InventoryTransaction: Manages stock levels, transactions, and usage locations.
  • PaperworkTemplate & PaperworkEntry: Defines and records daily paperwork (quality, sanitation, etc.).
  • DocumentTemplate & DocumentVersion: Manages document types, versions, and review cycles.
  • Employee, TrainingRequirement, EmployeeTrainingRecord: Tracks staff training and compliance.
  • TraceabilityAlert: Flags discrepancies in ingredient usage or traceability.

API Endpoints

  • Traceability: Record batches, trace lots, get alerts, fetch production data.
  • Inventory: CRUD for items, transactions, receiving, low-stock alerts.
  • Production: Log and retrieve daily production, overrun reports, scale weights.
  • Paperwork: CRUD for entries, generate compliance reports, dashboard data.
  • Documents: Manage templates, versions, attachments, and alerts.
  • Training: CRUD for requirements, employees, and training records.
  • Dashboard: Aggregate stats for KPIs and compliance.
  • Sales Analytics: Trends, predictions, and order statistics.

Security

  • Authentication: Azure Active Directory (MSAL for Blazor, JWT for API)
  • Authorization: Role-based, enforced at API and UI level
  • Data Protection: HTTPS enforced, sensitive data stored securely (e.g., Azure Blob for documents)
  • CORS: Configured for secure cross-origin requests

Extensibility & Maintainability

  • Modular Architecture: Clear separation of concerns (Frontend, Backend, Shared)
  • Strong Typing: Shared models and DTOs prevent drift and bugs
  • Cloud-Ready: Azure Blob Storage, scalable database, CI/CD pipelines
  • OpenAPI: Auto-generated API docs for easy integration
  • Testability: Service-oriented backend, easy to mock and extend
  • Modern Tooling: .NET 9, MudBlazor, Entity Framework Core

Development & Deployment

  • Local Development: Run with dotnet run for both frontend and backend
  • Cloud Deployment: Azure Web Apps (see .github/workflows/publish.yml for CI/CD)
  • Configuration: Environment-based settings for DB, Azure AD, and storage
  • Dependencies: Managed via NuGet, with clear project references
Discuss on Twitter •