A modern admin dashboard for managing coffee shop orders built with React, TypeScript, and Vite.

The Coffee Shop Admin Dashboard provides shop managers with a comprehensive interface to monitor, filter, and manage incoming orders. It features real-time order tracking, status updates, and analytics to help coffee shop staff efficiently process customer orders.

• Order Management: View, update, and track order status (pending, completed, cancelled)
• Dashboard Analytics: Monitor key metrics such as total orders, revenue, and average order value
• Advanced Filtering: Filter orders by:
  • Status (pending, completed, cancelled)
  • Date Range (today, this week, this month, all time)
  • Search Term (customer name, order number, or items)
• Responsive Design: Works on desktop and mobile devices

• Frontend: React 19, TypeScript
• Styling: TailwindCSS
• Build Tool: Vite
• Icons: Lucide React
• Date Handling: date-fns
• HTTP Client: Axios

• Node.js (v18 or higher)
• npm or yarn

1. Clone the repository:

git clone https://github.com/your-username/coffee-shop-admin.git
cd coffee-shop-admin

2. Install dependencies:

npm install
# or
yarn

3. Set up environment variables:
   • Create a .env file in the root directory based on the example below:

VITE_API_BASE_URL=http://localhost:3000
VITE_API_TIMEOUT=10000
VITE_ENABLE_MOCK_DATA=true

Start the development server:

npm run dev
# or
yarn dev

The application will be available at http://localhost:5173

npm run build
# or
yarn build

coffee-shop-admin/
├── public/             # Static assets
├── src/
│   ├── assets/         # Project assets (images, fonts)
│   ├── components/     # UI components
│   ├── hooks/          # Custom React hooks
│   ├── services/       # API services
│   ├── types/          # TypeScript type definitions
│   ├── utils/          # Utility functions
│   ├── App.tsx         # Main App component
│   └── main.tsx        # Application entry point
├── .env                # Environment variables
├── .gitignore
├── index.html
├── package.json
├── README.md
├── tailwind.config.js  # TailwindCSS configuration
├── tsconfig.json       # TypeScript configuration
└── vite.config.ts      # Vite configuration

• Dashboard: Main component displaying order statistics and the list of orders
• OrderCard: Displays order information with options to update status
• OrderFiltersComponent: Provides filtering options for orders
• StatsCardsComponent: Displays order statistics

The application can work with both mock data (for development) and a real backend API. The API service is configured to handle:

• Fetching orders with filters
• Fetching individual orders
• Updating order status

To use mock data, set VITE_ENABLE_MOCK_DATA=true in your .env file.

• Fixed issue with the "today" date filter to properly restrict orders to the current day (previously only set lower bound)
• Added error handling and loading states
• Improved responsive design for mobile devices

MIT