Crown Store is a modern, intuitive Point-of-Sale (POS) application designed to streamline product management and sales operations. Developed with React and TypeScript, it provides distinct interfaces for administrators and sales representatives to efficiently handle inventory, process orders, and track sales data.
- Role-Based Authentication: Secure login for both Admin and Sales Representative roles.
- Product Management:
- Admins can add new products, update existing product details (name, price, category, stock), and delete products.
- Real-time stock quantity updates reflecting sales.
- Shopping Cart System:
- Sales representatives can easily add products to a dynamic cart.
- Adjust product quantities directly within the cart.
- Clear cart functionality.
- Order Processing:
- Confirms orders and processes them, reducing product stock.
- Generates printable receipts for completed transactions.
- Order History & Reporting:
- Admins can view a comprehensive history of all orders, with filtering by month and year.
- Sales representatives can view their daily sales and total orders.
- Search & Filter: Efficiently search for products by name and filter by category.
- Password Reset: Admin functionality to reset sales representative passwords.
- Responsive Interface: Built with Tailwind CSS for a seamless experience across various devices.
To get Crown Store up and running on your local machine, follow these steps:
-
⬇️ Clone the Repository:
git clone https://github.com/Sunmence-team/crownstore.git cd crownstore -
📦 Install Dependencies:
npm install
Before running the application, you need to configure the following environment variable. Create a .env file in the root of the project:
VITE_API_BASE_URL=http://localhost:8000Example:
VITE_API_BASE_URL=http://localhost:8000 (Replace with your actual backend API URL)
To start the development server:
npm run devThe application will be accessible in your browser at the address provided by Vite (e.g., http://localhost:5173).
Upon launching the application, you will be directed to the login page.
- Enter your
usernameandpassword. - Click "Log In".
- You will be redirected based on your role:
- Admin: Redirected to
/adminhome(Product Management). - Sales Representative: Redirected to
/home(Product Selection).
- Admin: Redirected to
The /home page is designed for sales representatives to process new orders.
- Search Products: Use the search bar to find products by name.
- Filter by Category: Select a category button (e.g., "Seasoning", "Oil", "Foodstuff") to narrow down the product list.
- Add to Cart: Click the "Add" button next to any product to add it to the cart. If a product is out of stock, the button will be disabled.
- Manage Cart:
- In the cart section on the right, you can see selected products.
- Use the
+and-buttons to adjust product quantities. - Click the trash icon to remove a product from the cart.
- Click "Clear" to empty the entire cart.
- Confirm and Print: After adding all desired items, click "Confirm and Print". This will create the order, update stock, and open a print dialogue for the receipt.
On the /today page, sales representatives can view a summary of their orders for the current day.
- Access: Click the "Personnel" link from the homepage or navigate directly to
/today. - View Summary: See the total number of products sold and the total sales amount for the day.
- Order List: A table displays detailed information for each order made today, including Order ID, items, total amount, and creation time.
The /adminhome page is for administrators to manage products.
- Add New Product: Use the "Add New Product" form on the right:
- Enter
Item Name. - Enter
Price. - Select a
Category. - Enter initial
Quantityin stock. - Click "Add Product".
- Enter
- Product List: The main table displays all available products.
- Search & Filter: Use the search bar and category buttons to find specific products.
- Update Product: Click the "Update" button next to a product to open a modal. Adjust product details and click "Save Changes".
- Delete Product: Click the "Delete" button to remove a product from the inventory.
- Refresh Products: Click the "Refresh" button to update the product list with the latest data.
On the /history page, administrators can view all past orders.
- Access: Navigate to
/history. - Filter Orders: Use the "Month" and "Year" dropdowns in the filter card to narrow down the order list. Click "Apply Filter".
- View Orders: A table displays detailed information for all orders, including Order ID, items, total amount, and creation date/time.
The /reset page allows administrators to reset a sales representative's login credentials.
- Access: Navigate to
/reset. - Enter Details: Provide the
username,email(optional), and thenew passwordfor the sales representative. - Reset Credentials: Click "Reset Credentials" to update their login information.
This project leverages a robust set of modern web technologies to deliver a high-performance and scalable solution.
| Technology | Description |
|---|---|
| React | A JavaScript library for building user interfaces. |
| TypeScript | A typed superset of JavaScript that compiles to plain JavaScript. |
| Vite | A fast build tool that provides an extremely quick development experience. |
| Tailwind CSS | A utility-first CSS framework for rapidly building custom designs. |
| Axios | A promise-based HTTP client for making API requests. |
| React Router DOM | Declarative routing for React applications. |
| Formik | A popular library for building forms in React, simplifying form state management and validation. |
| Yup | A schema builder for value parsing and validation. |
| Sonner | An accessible and highly customizable toast library for React. |
| React Icons | A collection of popular SVG icons for React projects. |
| React To Print | A component to trigger browser print functionality for React components. |
Developed with dedication and precision.
- LinkedIn: Your LinkedIn Profile
- Twitter: @YourTwitterHandle
- Portfolio: Your Portfolio Website
