Order_Flow

Order_Flow is a modern order management and business dashboard web application built for small and growing online sellers in Bangladesh. The platform helps sellers manage products, customers, orders, payments, courier workflow, inventory, reports, and analytics from one centralized dashboard.

The project focuses on solving a common problem for small e-commerce and Facebook-commerce businesses: order information is often scattered across Messenger, spreadsheets, courier sheets, payment notes, and manual stock records. Order_Flow brings those operations into a structured system so sellers can process orders faster, reduce mistakes, and make better business decisions from sales data.

---

Live Project

Live URL: https://order-flow-rouge.vercel.app/

---

Project Overview

Order_Flow is designed as a seller-side SaaS-style dashboard for online shops. It includes authentication, shop-based data separation, order lifecycle tracking, product catalog management, customer records, courier export support, payment status tracking, and sales analytics.

The project is especially useful for:

• Facebook and Instagram sellers
• Small e-commerce shops
• Boutique and fashion businesses
• Local delivery-based businesses
• Sellers who need customer, stock, order, and courier data in one place

---

Problem Statement

Many small sellers manage their daily operations manually. This creates several issues:

• Orders get lost in chat messages or spreadsheets.
• Customer details are repeatedly written by hand.
• Payment status is hard to track accurately.
• Courier information is managed separately.
• Stock updates are delayed or forgotten.
• Business owners cannot easily see sales trends, revenue, best-selling products, or return rates.

Order_Flow solves this by providing one organized dashboard where the seller can manage the full order flow from order creation to delivery.

---

Core Features

Dashboard

• Business overview with key metrics
• Total orders, sales, weekly revenue, and activity summary
• Visual cards for quick business insights
• Clean and responsive seller dashboard interface

Order Management

• Create, view, update, and manage customer orders
• Track order status through different stages:
  • New
  • Confirmed
  • Packed
  • Sent to Courier
  • Delivered
  • Cancelled
  • Returned
• Store payment status such as COD, advance paid, fully paid, due, refunded, and unpaid
• Add courier name and tracking code
• Save customer notes and internal notes
• Maintain order item snapshots so older invoices remain accurate even if product data changes later

Product Management

• Manage product catalog by shop
• Store product name, category, SKU, price, cost price, stock quantity, image, and status
• Track active and inactive products
• Support low-stock and inventory-focused workflows

Customer Management

• Store customer name, phone, address, city, district, and notes
• Build a reusable customer database
• Reduce repeated manual entry for repeat customers
• Keep customer records connected to orders

Inventory Support

• Track stock quantity for products
• Identify low-stock products
• Support better restocking decisions

Analytics and Reports

• Sales trend visualization
• Monthly sales overview
• Top product performance
• Delivery performance analysis
• CSV export support for business data

Courier Workflow

• Courier name and tracking code support
• Courier export-ready workflow
• Useful for Pathao, Steadfast, RedX, Paperfly, Sundarban Courier, and similar delivery services

Authentication and Shop-Based Access

• Supabase authentication integration
• User profile management
• Seller/admin role support
• Shop-level data separation using Supabase Row Level Security policies

---

Tech Stack

Frontend

• React 18 — Component-based UI development
• TypeScript — Type-safe development
• Vite — Fast development server and production build tool
• Tailwind CSS — Utility-first responsive styling
• React Router DOM — Client-side routing
• Lucide React — Modern icon system
• Recharts — Dashboard charts and analytics visualization
• date-fns — Date formatting and handling
• clsx + tailwind-merge — Conditional and conflict-safe class handling

Backend and Database

• Supabase — Backend-as-a-Service for authentication, PostgreSQL database, and Row Level Security
• PostgreSQL — Relational database through Supabase
• Supabase RLS — Shop-based data access protection

Development Tools

• ESLint — Code quality and linting
• PostCSS — CSS processing
• TypeScript Config — Type checking and compiler setup
• Vercel — Deployment platform

---

Database Design

The Supabase database is organized around a shop-based multi-tenant structure.

Main Tables

shops

Stores business/shop information.

Important fields:

• id
• shop_name
• logo_url
• facebook_page
• instagram_page
• phone
• address
• subscription_status
• owner_id
• created_at
• updated_at

profiles

Stores user profile information linked with Supabase Auth.

Important fields:

• id
• full_name
• phone
• role
• shop_id
• created_at
• updated_at

Supported roles:

• super_admin
• seller_admin
• staff

products

Stores product catalog data for each shop.

Important fields:

• id
• shop_id
• name
• category
• sku
• price
• cost_price
• stock_quantity
• image_url
• status

customers

Stores customer records for each shop.

Important fields:

• id
• shop_id
• name
• phone
• address
• city
• district
• notes

orders

Stores main order information.

Important fields:

• id
• shop_id
• customer_id
• order_number
• subtotal
• delivery_charge
• discount
• total_amount
• payment_status
• order_status
• courier_name
• tracking_code
• customer_note
• internal_note

order_items

Stores individual products inside each order.

Important fields:

• id
• order_id
• product_id
• product_name_snapshot
• quantity
• unit_price
• subtotal

---

Security Model

The project uses Supabase Row Level Security to protect shop-specific data.

Security approach:

• Users can access only their own profile.
• Sellers can access only their own shop data.
• Products, customers, orders, and order items are scoped by shop_id.
• Staff access can be connected to a shop through the profiles.shop_id field.
• Order items are protected through their parent order and shop relationship.

This structure makes the project ready for a SaaS-style multi-seller system.

---

Project Structure

Order_Flow/
├── src/
│   ├── lib/
│   │   ├── demo-data.ts        # Demo products, customers, orders, charts, statuses
│   │   ├── store.tsx           # Auth context and user/shop state management
│   │   ├── supabase.ts         # Supabase client and shared database types
│   │   └── utils.ts            # Utility helpers: class merge, currency/date formatting, CSV export
│   ├── App.tsx                 # Main application UI and dashboard modules
│   ├── index.css               # Global styles and Tailwind layers
│   ├── main.tsx                # React app entry point
│   └── vite-env.d.ts           # Vite TypeScript environment types
├── supabase/
│   └── migrations/
│       ├── 001_create_shops.sql
│       ├── 002_create_profiles.sql
│       ├── 003_create_products_customers.sql
│       └── 004_create_orders.sql
├── index.html
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── vite.config.ts
├── tsconfig.json
└── README.md

---

Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js
• npm
• Supabase project

Installation

Clone the repository:

git clone https://github.com/0xSafkat20/Order_Flow.git
cd Order_Flow

Install dependencies:

npm install

Create a .env file in the project root and add your Supabase credentials:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Run the development server:

npm run dev

Build for production:

npm run build

Preview production build:

npm run preview

Run type checking:

npm run typecheck

Run linting:

npm run lint

---

Available Scripts

Command	Description
npm run dev	Start the local development server
npm run build	Create production build
npm run preview	Preview production build locally
npm run lint	Run ESLint
npm run typecheck	Run TypeScript type checking

---

Environment Variables

The project requires Supabase environment variables.

VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=

Do not commit real secret keys or private credentials to GitHub.

---

Development Highlights

• Built a full dashboard UI using React, TypeScript, and Tailwind CSS
• Designed a seller-focused order workflow for Bangladeshi online businesses
• Integrated Supabase authentication flow
• Created a shop-based multi-tenant database schema
• Added Row Level Security policies for protected seller data
• Implemented reusable UI components such as buttons, inputs, cards, modals, badges, toast notifications, and metric cards
• Added analytics-ready demo data for sales, products, customers, orders, and delivery performance
• Used Recharts for visual business reporting
• Added CSV export utility for business data export
• Designed order statuses, payment statuses, courier options, product categories, and district support for local business use cases

---

Future Improvements

• Complete real CRUD integration for all product, customer, and order modules
• Add invoice PDF generation
• Add courier-specific CSV export formats
• Add SMS or WhatsApp notification support
• Add role-based permission control for staff accounts
• Add subscription billing for SaaS plans
• Add dashboard filters by date range, courier, product, and status
• Add stock movement history
• Add return and refund management
• Add customer lifetime value analytics
• Add dark mode support
• Add automated order import from Facebook/Instagram messages or forms

---

Business Value

Order_Flow is not only a technical project; it represents a practical SaaS idea for local online sellers. By combining order management, inventory, customer records, courier workflow, and reporting, the system can reduce manual work and help small sellers operate more professionally.

The project can be expanded into a commercial SaaS product for Bangladesh-based online businesses that need a simple and affordable order management solution.

---

Author

Safkat Khan
GitHub: 0xSafkat20

---

License

This project is currently not published with a specific license. Add a license file before using it as an open-source or commercial project.