{"id":25228873,"url":"https://github.com/zeltrex10/credotech-universal-ims-client-panel-frontend","last_synced_at":"2026-02-18T15:32:17.077Z","repository":{"id":276635466,"uuid":"929831411","full_name":"Zeltrex10/CredoTech-Universal-IMS-Client-Panel-Frontend","owner":"Zeltrex10","description":"Universal Inventory System developed by CredoTech Lead DEV","archived":false,"fork":false,"pushed_at":"2025-02-09T14:54:25.000Z","size":514,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T15:27:39.860Z","etag":null,"topics":["inventory-management-system","inventory-system","javascript","nodejs","nodemon","react-native","typescript","universal"],"latest_commit_sha":null,"homepage":"https://github.com/Zeltrex10/CredoTech-Universal-IMS-Client-Panel-Frontend","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Zeltrex10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-09T14:08:34.000Z","updated_at":"2025-02-09T15:09:47.000Z","dependencies_parsed_at":"2025-02-09T15:28:32.413Z","dependency_job_id":"ecc8b142-1974-41c4-bc2c-3958f7b93723","html_url":"https://github.com/Zeltrex10/CredoTech-Universal-IMS-Client-Panel-Frontend","commit_stats":null,"previous_names":["zeltrex10/credotech-universal-ims-client-panel-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zeltrex10%2FCredoTech-Universal-IMS-Client-Panel-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zeltrex10%2FCredoTech-Universal-IMS-Client-Panel-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zeltrex10%2FCredoTech-Universal-IMS-Client-Panel-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zeltrex10%2FCredoTech-Universal-IMS-Client-Panel-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zeltrex10","download_url":"https://codeload.github.com/Zeltrex10/CredoTech-Universal-IMS-Client-Panel-Frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238281039,"owners_count":19446078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inventory-management-system","inventory-system","javascript","nodejs","nodemon","react-native","typescript","universal"],"created_at":"2025-02-11T10:46:10.218Z","updated_at":"2025-10-26T06:31:16.688Z","avatar_url":"https://github.com/Zeltrex10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\r\n# CredoTech Universal IMS Client Panel – Setup and Running Guide 📦\r\n\r\n## Prerequisites ⚙️\r\n\r\nEnsure you have the following installed:\r\n\r\n- Node.js (v14 or later) 🖥️\r\n- npm (v6 or later) 📲\r\n\r\n## Clone the Repository 🔽\r\n\r\nClone the repository to your local machine:\r\n\r\n```bash\r\ngit clone \u003clink-to-your-github-repository\u003e\r\n```\r\n\r\nNavigate into the project directory:\r\n\r\n```bash\r\ncd \u003cyour-project-directory\u003e\r\n```\r\n\r\n## Frontend Setup 🖥️\r\n\r\n1. Change to the frontend directory:\r\n\r\n    ```bash\r\n    cd client\r\n    ```\r\n\r\n2. Install the required dependencies:\r\n\r\n    ```bash\r\n    npm install\r\n    ```\r\n\r\n3. Run the frontend development server:\r\n\r\n    ```bash\r\n    npm run dev\r\n    ```\r\n\r\nYour frontend should now be running on [http://localhost:5173/](http://localhost:5173/). 🚀\r\n\r\n## Backend Setup ⚙️\r\n\r\n1. Change to the backend directory:\r\n\r\n    ```bash\r\n    cd server\r\n    ```\r\n\r\n2. Install the required dependencies:\r\n\r\n    ```bash\r\n    npm install\r\n    ```\r\n\r\n3. Run the backend development server:\r\n\r\n    ```bash\r\n    npm run dev\r\n    ```\r\n\r\nThe backend should now be running on [http://localhost:8000](http://localhost:8000). 🔥\r\n\r\n## Features Overview 🌟\r\n\r\n### CredoTech Universal IMS – Client Panel 📋\r\n\r\n#### Added Features\r\n\r\n##### Login 🔑\r\n\r\n- **Authentication**: Users authenticate via token-based authentication. 🔐\r\n- **Session Management**: Tokens expire after 10 minutes, ensuring secure sessions. ⏳\r\n- **Security**: API uses hashed passwords and unique tokens for each session. 🔒\r\n\r\n##### Register 📝\r\n\r\n- **User Registration**: Stores user's full name, username, email, and password (with confirmation). 📧\r\n- **Data Storage**: Information is stored in `registers.json` with hashed passwords and unique user IDs. 🗃️\r\n- **Roles**: Default role is \"Client\" (activation/deactivation features coming soon, currently managed by the admin panel). ⚙️\r\n\r\n##### Dashboard 📊\r\n\r\n- **Inventory Statistics**:\r\n  - Total Products 📦\r\n  - Categories 📑\r\n  - Stock 📈\r\n  - Low Stock Products ⚠️\r\n- **Stock Tracking**: Tracks daily percentage changes in stock values (increase/decrease). 📉\r\n\r\n##### Product Management 🛒\r\n\r\n###### Product Page\r\n\r\n- **New Product Modal**:\r\n  - Stores data in `products.json`. 📄\r\n  - Fields: Product Name, Description, SKU, Category (e.g., Hardware, Electronics, Clothing), Quantity, Low Stock Threshold. 📦\r\n  - **Image Upload**: Stores images in Firebase and fetches image URLs for display. 📸\r\n\r\n- **Product Table**:\r\n  - Displays: Product Name, SKU, Category, Quantity, Status (In Stock/Low Stock), Actions (Edit/Delete). ⚙️\r\n  - **Search**: Highlights keywords in product names, SKUs, and categories. 🔍\r\n  - **Sorting**: Click column headers to sort data. 📊\r\n  - **Pagination**: Divides entries across pages for easier navigation. 📑\r\n\r\n- **Modals**:\r\n  - **Edit Product**: Allows updating product details. ✏️\r\n  - **View Product**: Displays details like image, name, description, quantity, status, and SKU. 🔍\r\n\r\n##### Category Management 📂\r\n\r\n###### Categories Page\r\n\r\n- **Search \u0026 Filters**:\r\n  - Search Bar for filtering categories. 🔎\r\n  - Date Filter to select products by creation date. 📅\r\n\r\n- **Category Table**:\r\n  - Displays: Name, Description, Products Linked, Created Date. 🗂️\r\n  - **Actions**:\r\n    - **View**: Displays detailed category modal. 👀\r\n    - **Edit**: Allows modifying category details. ✏️\r\n    - **Delete**: Permanently removes category. 🗑️\r\n  - **Pagination**: Allows navigation across multiple pages. 📄\r\n\r\n- **Modals**:\r\n  - **View Category**: Displays read-only details (Name, Description, Products Linked, Date Created). 📄\r\n  - **Edit Category**: Allows editing of Name, Description, and Associated Products. ✏️\r\n  - **Add Category**: Option to add new categories. ➕\r\n\r\n##### Transaction Management 💳\r\n\r\n- **Transaction Table**:\r\n  - Displays: Product Name, Transaction Type (Stock In/Out), Quantity, Date, Added By. 📅\r\n  - **Color-coded Labels**:\r\n    - Red for Stock Out. 🔴\r\n    - Green for Stock In. 🟢\r\n\r\n- **Filtering \u0026 Actions**:\r\n  - **Filters**: Filter transactions by Start \u0026 End Date. 📆\r\n  - **Search**: Allows quick lookup of transactions. 🔍\r\n  - **Action Buttons**:\r\n    - **Add Transaction**: Opens modal for adding new transactions. ➕\r\n    - **Clear All Transactions**: Deletes all transaction records. 🧹\r\n\r\n- **Add Transaction Modal**:\r\n  - Select transaction type (Stock In/Out). 🔄\r\n  - Enter product name and quantity before saving. 📦\r\n\r\n## Backend Configuration 🔧\r\n\r\nThe backend uses the following modules:\r\n\r\n- `bcrypt`: For password hashing. 🔐\r\n- `cors`: For handling cross-origin requests. 🌐\r\n- `dotenv`: For managing environment variables. 🗃️\r\n- `express`: Web server framework. ⚙️\r\n- `jsonwebtoken`: For creating and verifying JWT tokens. 🛡️\r\n- `ws`: WebSocket for real-time communication. 📡\r\n\r\nBackend data is stored in files such as `registers.json` and `products.json`, and the backend supports functionality like user authentication and CRUD operations for product and category management.\r\n\r\n## Additional Notes 📝\r\n\r\n- **Frontend**: Built with React, using Vite for fast development, and integrates with Firebase for image hosting. ⚛️\r\n- **Backend**: Built with Express.js, with JWT for secure authentication and file-based data storage for simplicity. 🔧\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeltrex10%2Fcredotech-universal-ims-client-panel-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeltrex10%2Fcredotech-universal-ims-client-panel-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeltrex10%2Fcredotech-universal-ims-client-panel-frontend/lists"}