Manufacturing Efficiency Tracking System

Industrial Production Efficiency & Machine Cycle Tracking

Built with Next.js 15, React 18, TypeScript, and Supabase

Overview • Features • Tech Stack • Getting Started • Database Setup

Overview

The Manufacturing Efficiency Tracking System is designed for industrial production facilities to track and optimize efficiency. It logs machine cycles, identifies bottlenecks, measures cycle times, and allows for dynamic adjustments to production standards.

• Framework - Next.js 15
• Runtime - React 18 (Stable compatibility with ecosystem)
• Language - TypeScript
• Auth - Clerk
• Error tracking -
• Styling - Tailwind CSS v4
• Components - Shadcn-ui
• Schema Validations - Zod
• State Management - Zustand
• Search params state manager - Nuqs
• Tables - Tanstack Data Tables • Dice table
• Forms - React Hook Form
• Command+k interface - kbar
• Linting - ESLint
• Pre-commit Hooks - Husky
• Formatting - Prettier

Features

🏭 Production Management

• Multi-tenant Architecture - Support for multiple organizations and sites
• Value Stream Mapping - Hierarchical organization of production cells
• Real-time Efficiency Tracking - Live monitoring of machine performance
• Cycle Time Analysis - Target vs. actual cycle time comparison

🔐 Security & Access Control

• Clerk Authentication - Enterprise-grade user management
• Role-Based Access Control (RBAC) - Admin, Manager, Operator roles
• Protected Routes - Secure access to sensitive operations
• Row Level Security - Database-level data isolation

📊 Analytics & Reporting

• Efficiency Dashboards - Real-time performance metrics
• Downtime Tracking - Planned and unplanned stoppage monitoring
• Issue Management - Problem tracking and resolution workflows
• Historical Analysis - Trend analysis and performance optimization

⚡ Real-time Capabilities

• Live Updates - WebSocket-based real-time data synchronization
• Instant Notifications - Real-time alerts for critical events
• Live Efficiency Metrics - Continuous monitoring of production KPIs

Tech Stack

• Framework - Next.js 15 with App Router
• Runtime - React 18 (Stable compatibility)
• Language - TypeScript
• Authentication - Clerk (Enterprise auth)
• Database - Supabase (PostgreSQL + Real-time)
• Styling - Tailwind CSS with CSS Variables
• Components - ShadCN/UI (Radix UI primitives)
• State Management - React hooks + Context API
• Forms - React Hook Form + Zod
• Real-time - Supabase Realtime with WebSockets
• Deployment - Vercel (Frontend) + Fly.io (Backend)

Project Structure

src/
├── app/ # Next.js App Router
│ ├── (auth)/ # Authentication routes (route group)
│ │ ├── sign-in/ # Sign in page
│ │ └── sign-up/ # Sign up page
│ ├── welcome/ # Welcome/landing page
│ ├── dashboard/ # Main application routes
│ │ ├── attainment/ # Efficiency tracking
│ │ ├── organization/ # Company/site management
│ │ └── profile/ # User profile management
│ ├── api/ # API endpoints
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ ├── globals.css # Global styles
│ └── theme.css # Theme configuration
│
├── components/ # Shared components
│ ├── ui/ # ShadCN UI components
│ ├── layout/ # Layout components
│ ├── auth/ # Authentication components
│ └── features/ # Feature showcase components
│
├── features/ # Feature-based modules
│ ├── auth/ # Authentication features
│ └── profile/ # User profile management
│
├── hooks/ # Custom React hooks
│ ├── use-user-role.ts # Role management
│ ├── use-clerk-organization.ts # Organization context
│ └── use-loading-state.ts # Loading state management
│
├── lib/ # Core utilities
│ ├── auth/ # Permission system
│ ├── forms/ # Form validation
│ └── utils/ # Shared utilities
│
└── types/ # TypeScript definitions
    ├── api.ts # API types
    ├── common.ts # Common types
    └── data-table.ts # Table component types

Getting Started

Prerequisites

• Node.js 18+ installed
• pnpm package manager
• Clerk.com account for authentication
• Supabase account for database

Installation

1. Clone the repository

git clone <your-repo-url>
cd lean-tools

2. Install dependencies

pnpm install

3. Environment Configuration

# Copy environment template
cp env.example.txt .env.local

# Add your environment variables
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-key
CLERK_SECRET_KEY=your-clerk-secret
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-key

4. Start development server

pnpm dev

5. Open your browser Navigate to http://localhost:3000

Database Setup

The system uses Supabase (PostgreSQL) for data storage. See SUPABASE_SETUP.md for complete database setup instructions.

Quick Database Setup

1. Create Supabase Project

   • Go to supabase.com
   • Create new project
   • Get your project URL and API keys

2. Run Database Schema

   • Execute the SQL commands from SUPABASE_SETUP.md
   • Set up Row Level Security policies
   • Configure real-time subscriptions

3. Test Connection

   • Verify database connectivity
   • Test CRUD operations
   • Validate RLS policies

Authentication & Roles

User Roles

• Admin - Full system access, user management, organization settings
• Manager - Efficiency tracking, reporting, basic organization access
• Operator - Machine cycle tracking, basic reporting, profile management

Access Control

• Company & Site - Locked upon sign-up, admin-managed
• Value Stream & Cell - Adjustable within the app
• Role Permissions - Granular access control based on user roles

Development Workflow

Code Quality Standards

• TypeScript Strict Mode - Full type safety
• ESLint + Prettier - Code formatting and linting
• Feature-based Organization - Modular, maintainable architecture
• Component Library - Consistent UI with ShadCN/UI

Testing

• Unit Tests - Component and utility testing
• Integration Tests - API endpoint testing
• E2E Tests - User workflow testing

Deployment

• Frontend - Vercel with automatic deployments
• Database - Supabase with automated backups
• Environment Management - Separate configs for dev/staging/prod

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Troubleshooting

Common Issues

Authentication Problems

• Verify Clerk environment variables
• Check user role assignments
• Validate organization membership

Database Connection Issues

• Confirm Supabase credentials
• Check network connectivity
• Verify RLS policies

Build Errors

• Clear node_modules: rm -rf node_modules pnpm-lock.yaml && pnpm install
• Check TypeScript errors: pnpm type-check
• Verify environment variables

Getting Help

• Check the SUPABASE_SETUP.md for database issues
• Review Clerk documentation for auth problems
• Open an issue for bugs or feature requests

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built with Next.js and React
• UI components from ShadCN/UI
• Authentication by Clerk
• Database powered by Supabase

---

Ready to optimize your manufacturing efficiency? 🚀

Start by setting up your Supabase database and implementing the machine cycle tracking features. Check out the SUPABASE_SETUP.md for detailed database configuration instructions.