🛍️ Modern POS System

A modern, feature-rich Point of Sale (POS) system built with React, Firebase, and Tailwind CSS. This application provides a comprehensive solution for managing sales, inventory, employees, and business analytics.

✨ Features

💼 Sales Management

• POS Interface: User-friendly interface for processing sales
• Order Management: Track and manage orders in real-time
• Sales History: Comprehensive sales history and transaction logs
• Sales Goals: Set and track daily, weekly, and monthly sales targets
• Progress Tracking: Visual progress bars and real-time achievement tracking

📊 Analytics & Reporting

• Dashboard: Real-time overview of business metrics
• Sales Analytics: Detailed sales analysis and trends
• Employee Performance: Track employee sales and performance
• Custom Reports: Generate customized reports for business insights

👥 User Management

• Role-Based Access: Different permissions for managers and cashiers
• Employee Management: Manage staff profiles and permissions
• Staff Statistics: Track employee performance metrics

🏷️ Product Management

• Inventory Management: Track stock levels and product details
• Discount Management: Create and manage promotional offers
• Low Stock Alerts: Automated notifications for low inventory

🔐 Security

• Authentication: Secure user authentication with Firebase
• Role-Based Authorization: Protected routes and features
• Real-time Data: Secure real-time updates with Firestore

🚀 Quick Start

Prerequisites

• Node.js 16.x or later
• npm or yarn
• Firebase account

Installation

1. Clone the repository:

git clone https://github.com/yourusername/reaactpos.git
cd reaactpos

2. Install dependencies:

npm install

3. Create a Firebase project and add your configuration to src/firebase.js

4. Start the development server:

npm start

🐳 Docker Deployment

Local Development with Docker

1. Build the Docker image:

docker build -t reaactpos .

2. Run the container:

docker run -p 3000:3000 reaactpos

Docker Compose (Development)

version: '3.8'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development

🌐 Deployment

🔄 Continuous Integration/Deployment

This project uses GitHub Actions for automated testing, building, and deployment. Three workflows are configured:

1. Test and Lint (test.yml)

   • Runs on all branches and pull requests
   • Executes unit tests
   • Performs code linting
   • Uploads test coverage reports
   • Verifies build process

2. Firebase Deployment (firebase-deploy.yml)

   • Triggers on main branch updates
   • Builds and deploys to Firebase Hosting
   • Requires Firebase secrets configuration

3. Docker Deployment (docker-deploy.yml)

   • Builds and pushes Docker image
   • Deploys to Render
   • Requires Docker Hub and Render credentials

Required Secrets

Configure these secrets in your GitHub repository settings:

# Firebase Deployment
FIREBASE_SERVICE_ACCOUNT - Firebase service account JSON
FIREBASE_PROJECT_ID - Your Firebase project ID

# Docker Deployment
DOCKER_USERNAME - Docker Hub username
DOCKER_PASSWORD - Docker Hub password
RENDER_API_KEY - Render API key
RENDER_SERVICE_ID - Render service ID

Vercel Deployment

1. Install Vercel CLI:

npm i -g vercel

2. Deploy to Vercel:

vercel

Configuration file (vercel.json):

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": { "distDir": "build" }
    }
  ],
  "routes": [
    {
      "src": "/static/(.*)",
      "dest": "/static/$1"
    },
    {
      "src": "/favicon.ico",
      "dest": "/favicon.ico"
    },
    {
      "src": "/manifest.json",
      "dest": "/manifest.json"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

Render Deployment

1. Create a Dockerfile in your project root:

# Build stage
FROM node:16-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Production stage
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. Create nginx.conf:

server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

3. Deploy to Render:
   • Connect your GitHub repository
   • Select "Web Service"
   • Choose "Docker" as the environment
   • Set the build command: docker build -t app .
   • Set the start command: docker run -p 80:80 app

Manual Deployment

[Previous deployment instructions remain the same...]

📝 Available Scripts

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

🤝 Contributing

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

📄 License

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

🙏 Acknowledgments

• React
• Firebase
• Tailwind CSS
• Framer Motion
• Hero Icons