ISDATA is a full-stack web application designed to streamline the process of collecting, processing, and analyzing manufacturing data for rings. It provides a user-friendly interface to migrate data from Google Sheets, store it in a PostgreSQL database, and then search, visualize, and generate reports based on that data.
The application is built with a React frontend and a Flask backend, offering a robust and efficient solution for data management and quality control in a manufacturing environment.
- Data Migration: Seamlessly migrate data from Google Sheets to a PostgreSQL database with a single click. The migration process is streamed to the user, providing real-time feedback.
- Data Preview: Preview the data stored in the database to ensure data integrity.
- Advanced Search: Search for specific rings using a variety of filters, including serial numbers, manufacturing order numbers, dates, and more.
- Daily Production Reports: Generate comprehensive daily production reports with key metrics like total received, accepted, rejected, and yield.
- Rejection Trends Analysis: Track rejection trends over time to identify common issues and improve quality control.
- Data Export: Export search results and reports to CSV and Excel formats.
- Database Management: Create and clear the database schema directly from the application.
- Connection Testing: Test connections to both the Google Sheets API and the PostgreSQL database to ensure proper configuration.
- Dark Mode: A sleek dark mode for comfortable viewing in low-light environments.
Frontend:
- React
- Vite
- Tailwind CSS
- Framer Motion
- Lucide React (for icons)
Backend:
- Flask
- Python
- PostgreSQL
- Gunicorn
Python Libraries:
FlaskFlask-CORSpsycopg2-binarypandasgspreadgoogle-authpython-dotenvopenpyxl
- Node.js and npm
- Python 3.x and pip
- PostgreSQL
git clone https://github.com/your-username/isdata.git
cd isdata# Create and activate a virtual environment
python -m venv .venv
source .venv/bin/activate # On Windows, use `.venv\Scripts\activate`
# Install Python dependencies
pip install -r requirements.txt
# Set up environment variables
cp .env.example .envUpdate the .env file with your PostgreSQL database credentials and the path to your Google Sheets service account JSON file.
# Install Node.js dependencies
./setup.sh- Make sure your PostgreSQL server is running.
- Create a new database with the name you specified in your
.envfile. - Use the "Configuration" tab in the application to create the necessary database schema.
-
Start the backend server:
python run.py
-
Start the frontend development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173(or the address provided by Vite).
The Flask backend provides the following API endpoints:
POST /api/db/test: Test the database connection.POST /api/db/schema: Create the database schema.DELETE /api/db/clear: Clear theringstable.GET /api/data: Get all rings data from the database.POST /api/migrate: Migrate data from Google Sheets to the database.POST /api/test_sheets_connection: Test the connection to Google Sheets.POST /api/search: Search for rings with various filters.GET /api/search/filters: Get distinct values for search filters.POST /api/search/export: Export search results to CSV.POST /api/reports/daily: Generate a daily production report.POST /api/reports/export: Export the daily report to CSV or Excel.POST /api/reports/rejection-trends: Generate rejection trends data.POST /api/reports/rejection-trends/export: Export rejection trends to CSV or Excel.
The React frontend is built with a modular component architecture:
App.jsx: The main application component that manages state and routing.ConfigTab.jsx: The configuration tab for setting up database and Google Sheets connections.PreviewTab.jsx: The data preview tab for viewing the data in the database.MigrationTab.jsx: The migration tab for migrating data from Google Sheets.SearchTab.jsx: The search tab for filtering and searching for rings.ReportTab.jsx: The daily production report tab.RejectionTrendsTab.jsx: The rejection trends analysis tab.CustomAlert.jsx: A custom alert component for displaying success and error messages.SettingsPanel.jsx: A settings panel for toggling dark mode and other application settings.MultiSelectMenu.jsx: A reusable multi-select menu component.
Contributions are welcome! Please feel free to submit a pull request or open an issue for any bugs or feature requests.
Copyright (c) 2025 FlameFusion
All rights reserved. This code is the intellectual property of FlameFusion.
Personal Use:
You are granted a non-exclusive, non-transferable, revocable license to use this code for personal, non-commercial purposes only. You may modify the code for your own personal use.
Commercial Use:
Commercial use of this code, in whole or in part, is strictly prohibited without the express written consent of FlameFusion. This includes, but is not limited to, selling, sublicensing, or distributing the code for any commercial purpose.
To request a commercial license, please contact FlameFusion.