Restaurant Management System

A comprehensive React frontend for managing restaurant finances, including sales tracking, purchase management, expense tracking, and detailed reporting.

Features

📊 Dashboard

• Real-time Overview: Today's sales, expenses, and profit
• Weekly/Monthly/Yearly Breakdown: Quick access to different time periods
• Interactive Charts: Visual representation of profit trends
• Quick Actions: Direct links to add sales, purchases, or expenses

🛒 Purchase Management

• Ingredient Tracking: Record ingredient purchases with quantities and costs
• Date-based Organization: Track purchases by date
• Cost Calculation: Automatic total cost calculation
• Form Validation: Ensures data integrity

💰 Sales Recording

• Daily Sales Entry: Record sales with descriptions
• Quick Amount Buttons: Predefined amounts for faster entry
• Date Tracking: Organize sales by date
• Flexible Descriptions: Add context to sales entries

💸 Expense Management

• Categorized Expenses: Electricity, water, rent, salaries, etc.
• Non-food Expenses: Track operational costs separately from food purchases
• Detailed Descriptions: Add context to expense entries
• Quick Amount Selection: Predefined amounts for common expenses

📈 Reports & Analytics

• Multiple Time Filters: Daily, weekly, monthly, yearly views
• Financial Summary: Total income, expenses, and profit calculations
• Data Tables: Detailed lists of sales, purchases, and expenses
• Interactive Charts: Bar charts for financial overview
• Export-Ready: Clean data presentation for external analysis

Technology Stack

• React 19: Modern React with hooks and functional components
• React Router: Client-side routing for SPA navigation
• Tailwind CSS: Utility-first CSS framework for responsive design
• Heroicons: Beautiful SVG icons from the Tailwind CSS team
• Recharts: Composable charting library for data visualization
• Axios: HTTP client for API communication

Installation & Setup

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

Installation Steps

1. Clone or navigate to the project directory

   cd restaurant

2. Install dependencies

   npm install

3. Start the development server

   npm start

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

API Integration

The frontend is designed to work with a Django REST API backend. The API endpoints expected are:

Authentication

• POST /api/auth/login/ - User login
• POST /api/auth/logout/ - User logout

Purchases

• GET /api/purchases/ - List purchases with optional date filters
• POST /api/purchases/ - Create new purchase
• GET /api/purchases/total_purchases/ - Get purchase totals for date range

Sales

• GET /api/sales/ - List sales with optional date filters
• POST /api/sales/ - Create new sale
• GET /api/sales/total_sales/ - Get sales totals for date range

Expenses

• GET /api/expenses/ - List expenses with optional date filters
• POST /api/expenses/ - Create new expense
• GET /api/expenses/total_expenses/ - Get expense totals for date range

Dashboard

• GET /api/dashboard/ - Get dashboard summary data

Configuration

API Base URL

Update the API base URL in src/services/api.js:

const API_BASE_URL = 'http://localhost:8000/api'; // Change to your backend URL

Authentication

The app uses token-based authentication. Tokens are stored in localStorage and automatically included in API requests.

Usage Guide

1. Login

• Enter your username and password
• The app will remember your session using localStorage

2. Dashboard

• View today's financial summary
• Access quick actions for adding entries
• View profit trends chart

3. Adding Purchases

• Navigate to "Add Purchase"
• Enter ingredient name, quantity, and unit cost
• Select purchase date
• View calculated total cost
• Submit to save the purchase

4. Recording Sales

• Navigate to "Add Sale"
• Enter sale amount and description
• Select sale date
• Use quick amount buttons for common values
• Submit to record the sale

5. Adding Expenses

• Navigate to "Add Expense"
• Select expense category from dropdown
• Enter amount and description
• Select expense date
• Submit to record the expense

6. Viewing Reports

• Navigate to "Reports"
• Select time filter (daily/weekly/monthly/yearly)
• View financial summary cards
• Analyze data tables and charts
• Export data as needed

Project Structure

src/
├── components/
│   └── Navigation.js          # Main navigation component
├── pages/
│   ├── Login.js              # Authentication page
│   ├── Dashboard.js          # Main dashboard with overview
│   ├── AddPurchase.js        # Purchase entry form
│   ├── AddSale.js           # Sales entry form
│   ├── AddExpense.js        # Expense entry form
│   └── Reports.js           # Reports and analytics page
├── services/
│   └── api.js               # API service functions
├── utils/
│   └── helpers.js           # Utility functions
├── App.js                   # Main app component with routing
└── index.css               # Global styles with Tailwind

Customization

Styling

• Modify tailwind.config.js for theme customization
• Update src/index.css for global styles
• Component-specific styles are in Tailwind classes

API Integration

• Update API endpoints in src/services/api.js
• Modify request/response handling as needed
• Add new API functions for additional features

Features

• Add new pages in src/pages/
• Create reusable components in src/components/
• Extend utility functions in src/utils/helpers.js

Development

Available Scripts

• npm start - Start development server
• npm build - Build for production
• npm test - Run tests
• npm eject - Eject from Create React App

Code Quality

• ESLint configuration included
• Prettier formatting recommended
• Component-based architecture
• Responsive design principles

Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source and available under the MIT License.

Support

For issues or questions:

1. Check the documentation
2. Review the code structure
3. Create an issue with detailed information

---

Built with ❤️ using React and Tailwind CSS