Restaurant COGS Dashboard

An interactive web application designed for restaurant managers to track, analyze, and optimize Cost of Goods Sold (COGS). The application enables real-time monitoring of key profitability metrics, historical trend analysis, and most importantly, automatic alerts for concerning changes.

Overview

COGS Dashboard provides restaurant managers with intelligent insights into their cost structure. Thanks to the smart notification system and dedicated backend with persistent database storage, users are immediately informed about sudden price increases of key products, enabling quick reactions, supplier negotiations, or searching for alternative supply sources. All historical price data, alert configurations, and supplier settings are stored persistently in SQLite database.

Key Features

Screenshots

How COGS Calculation Works

The COGS indicator in the application is calculated as an average value for all dishes defined in the system.

Calculation Logic

1. Dish Cost

For each dish, the system sums up the cost of its ingredients based on their quantity in the recipe and the current daily product price.

Dish Cost = Σ (ingredient_quantity × product_price)

2. COGS for Dish

Then, for each dish, an individual COGS indicator is calculated.

Dish COGS % = (Dish Cost / Dish Sale Price) × 100

3. Average Daily COGS

The value presented on the dashboard is the arithmetic average of COGS indicators for all dishes on a given day.

Average COGS = (Σ COGS % of All Dishes) / Number of Dishes

Alert System

The alert system is the heart of the application and works based on COGS history analysis.

Critical Alert (Red)

Warning Alert (Yellow) - Week-over-Week Growth

Warning Alert (Yellow) - Negative Trend

Price Increase Analysis

When a WoW growth alert is triggered, the system automatically performs analysis to identify its main causes:

Analysis Process

1. Price Comparison

   • System compares average product prices from the last week with average prices from the previous week

2. Impact Calculation

   • To find products that actually had the most impact on cost increase, the system considers not only the percentage price change but also the frequency of product use in all recipes

Impact = (New Average Price - Old Average Price) × Sum of Quantities in Recipes

3. Results Presentation
   • Alert on the dashboard is enriched with a list of 3 products with the highest impact, along with information about old price, new price, and percentage change

Supplier Email Automation

In response to a WoW growth alert, users can react immediately thanks to the "Notify Suppliers" button.

Configuration

In the "Settings" tab, users define (all settings are persistently stored in the database):

• Main supplier email address
• Up to 3 alternative supplier email addresses
• Message template requesting price increase explanation (variable {productList})
• Quote request template (variable {productList})

Message Generation

After clicking the button, the system uses the mailto: protocol to prepare two versions of email messages and opens the user's default email program:

To Main Supplier

• Message requesting explanation where {productList} is replaced with a detailed list of products, their old and new prices, and percentage increase

To Alternative Suppliers

• Message with quote request where {productList} is replaced with just the names of products whose prices increased

User Guide

Step 1: Configuration

Navigate to the Settings tab and fill in supplier email addresses and customize message templates to your needs. All settings are automatically saved to the database.

Step 2: Data Entry

Daily visit the Enter Prices tab to update product purchase prices. All price entries are stored in the SQLite database for historical tracking.

Step 3: Monitoring

Observe the Dashboard to track current COGS, its trend, and any alerts.

Step 4: Response

If a price increase alert appears, analyze the product list and use the Notify Suppliers button to quickly send appropriate inquiries.

Step 5: Analysis

Use the Historical Data and Dishes tabs to perform deeper analyses and better understand your restaurant's cost structure.

Technical Stack

The application is built with a full-stack architecture featuring persistent data storage and real-time price tracking.

Architecture

Frontend

• Framework: React 18+
• Language: TypeScript
• Styling: Tailwind CSS
• Charts: Recharts
• State Management: React Hooks

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: SQLite
• Features:
  • Stores historical product prices
  • Simulates daily price data fetching
  • Enables persistent storage of alert configurations and supplier email addresses

Features in Detail

Dashboard Module

• Real-time COGS percentage display
• Interactive historical trend chart
• Alert panel with color-coded notifications
• Quick access to all main functions

Price Entry Module

• Simple, intuitive form interface
• Product list with current prices
• Validation and error handling
• Bulk update capabilities

Historical Data Module

• Comprehensive data table
• Filtering and sorting options
• Export functionality
• Date range selection

Dishes Module

• Recipe management
• Ingredient list per dish
• Cost calculation per dish
• Sale price configuration

Settings Module

• Supplier contact management
• Email template customization
• Alert threshold configuration
• System preferences

Benefits

Future Enhancements

• Backend integration with real database (SQLite)
• Persistent storage of historical prices
• Persistent storage of alert configurations
• Multi-restaurant support
• Mobile application
• Advanced forecasting with ML
• Integration with POS systems
• Automated supplier price comparison
• Recipe optimization suggestions
• Multi-currency support
• Migration to PostgreSQL/MySQL for production

License

Demonstration project - Educational purposes

Built with ❤️ for restaurant managers who want to optimize their operations