Admin site
I. Functionality
- Add Product Descriptions: Administrators can easily add and update product information.
- Generate QR Codes: Upload an Excel file to generate QR codes for product tracking.
- Manage Registration Fields: Customize the fields required for warranty registration.
- Manage User Roles: Assign roles and permissions to users for system access.
II. Roles
- Admin: Full access to all features and functionalities.
- QRCode: Access to QR code generation and management.
- Add Model: Permission to add new product models.
- Edit Model: Permission to edit existing product models.
- Manage: Permission to manage user.
III. Packages
1. Dependencies
| Package Name | Description | Link | Version |
|---|---|---|---|
| @mdxeditor/editor | MDX editor for React | @mdxeditor/editor | ^3.0.1 |
| @thumbtack/thumbprint-react | Thumbtack's React components | @thumbtack/thumbprint-react | ^14.18.0 |
| @thumbtack/thumbprint-scss | Thumbtack's SCSS components | @thumbtack/thumbprint-scss | ^4.0.3 |
| add | A function that adds two numbers | add | ^2.0.6 |
| axios | Promise based HTTP client for the browser and node.js | axios | ^1.6.5 |
| jsqr | A pure JavaScript QR code decoding library | jsqr | ^1.4.0 |
| react | A JavaScript library for building user interfaces | react | ^18.2.0 |
| react-beautiful-dnd | Beautiful and accessible drag and drop for lists with React | react-beautiful-dnd | ^13.1.1 |
| react-dom | Serves as the entry point to the DOM and server renderers for React | react-dom | ^18.2.0 |
| react-hook-form | Performant, flexible, and extensible forms with easy-to-use validation | react-hook-form | ^7.51.3 |
| react-icons | SVG React icons of popular icon packs using ES6 imports | react-icons | ^5.0.0 |
| react-player | A React component for playing a variety of URLs, including YouTube | react-player | ^2.14.1 |
| react-router-dom | DOM bindings for React Router | react-router-dom | ^6.21.1 |
| react-toastify | React notification library | react-toastify | ^10.0.4 |
| usehooks-ts | React hook library | usehooks-ts | ^2.10.0 |
| yarn | A package manager that doubles down as project manager | yarn | ^1.22.21 |
2. Dev Dependencies
| Package Name | Description | Link | Version |
|---|---|---|---|
| @types/react | TypeScript definitions for React | @types/react | ^18.2.43 |
| @types/react-beautiful-dnd | TypeScript definitions for react-beautiful-dnd | @types/react-beautiful-dnd | ^13.1.8 |
| @types/react-dom | TypeScript definitions for React-DOM | @types/react-dom | ^18.2.17 |
| @vitejs/plugin-react | Official Vite plugin to handle React files | @vitejs/plugin-react | ^4.2.1 |
| autoprefixer | PostCSS plugin to parse CSS and add vendor prefixes | autoprefixer | ^10.4.16 |
| eslint | An extensible linter for identifying and reporting on patterns in JavaScript | eslint | ^8.55.0 |
| eslint-plugin-react | React specific linting rules for ESLint | eslint-plugin-react | ^7.33.2 |
| eslint-plugin-react-hooks | ESLint rules for React Hooks | eslint-plugin-react-hooks | ^4.6.0 |
| eslint-plugin-react-refresh | ESLint plugin for React Refresh | eslint-plugin-react-refresh | ^0.4.5 |
| postcss | A tool for transforming CSS with JavaScript plugins | postcss | ^8.4.33 |
| sass | CSS pre-processor with syntax advancements | sass | ^1.70.0 |
| tailwindcss | A utility-first CSS framework for rapid UI development | tailwindcss | ^3.4.1 |
| vite | Next generation frontend tooling | vite | ^5.0.8 |
IV. Environment Variables
| Variable Name | Description | Default Value |
|---|---|---|
| VITE_SERVER_URL | API URL for the client site | http://localhost:3000 |
| VITE_ASSET_URL | URL for static assets | http://localhost:3999/assets |
V. Source Tree
.
├── index.html - Main HTML file for the application.
├── package.json - File defining the project's dependencies, scripts, and metadata.
├── package-lock.json - Auto-generated file that locks the dependencies to specific versions.
├── postcss.config.js - PostCSS configuration file.
├── public - Directory containing static assets.
│ ├── logo-icon.png
│ └── vite.svg
├── README.md - Project documentation.
├── src - Source code directory.
│ ├── App.jsx
│ ├── assets - Directory containing images and other static assets.
│ │ ├── brother_logo_blue.png
│ │ ├── brother_logo.png
│ │ ├── notfound.png
│ │ └── react.svg
│ ├── components - Directory containing React components.
│ │ ├── common - Directory containing common components.
│ │ │ ├── ChangePasswordModal.jsx
│ │ │ ├── ConfirmationModel.jsx
│ │ │ ├── ConfirmModal.jsx
│ │ │ ├── Logo.jsx
│ │ │ ├── Modal.jsx
│ │ │ ├── RedStar.jsx
│ │ │ └── Select.jsx
│ │ ├── Layouts - Directory containing layout components.
│ │ │ ├── Header.jsx
│ │ │ └── index.jsx
│ │ ├── Navigator - Directory containing navigation components.
│ │ │ ├── index.jsx
│ │ │ ├── Logo.jsx
│ │ │ └── Tab.jsx
│ │ └── screens - Directory containing screen components.
│ │ ├── Authorized - Directory containing authorized components.
│ │ │ ├── Products - Directory containing product components.
│ │ │ │ ├── Edit - Directory containing edit components.
│ │ │ │ │ └── index.jsx
│ │ │ │ ├── index.jsx
│ │ │ │ └── Table - Directory containing table components.
│ │ │ │ ├── Body.jsx
│ │ │ │ ├── Expand - Directory containing expand components.
│ │ │ │ │ ├── index.jsx
│ │ │ │ │ ├── LongVideo.jsx
│ │ │ │ │ └── Playlist.jsx
│ │ │ │ ├── Header.jsx
│ │ │ │ ├── index.jsx
│ │ │ │ └── Row.jsx
│ │ │ ├── QR - Directory containing QR components.
│ │ │ │ ├── index.jsx
│ │ │ │ └── Table - Directory containing table components.
│ │ │ │ ├── Body.jsx
│ │ │ │ ├── Expand - Directory containing expand components.
│ │ │ │ │ └── index.jsx
│ │ │ │ ├── Header.jsx
│ │ │ │ ├── index.jsx
│ │ │ │ └── Row.jsx
│ │ │ ├── Settings - Directory containing settings components.
│ │ │ │ ├── Admin - Directory containing admin components.
│ │ │ │ │ └── index.jsx
│ │ │ │ ├── index.jsx
│ │ │ │ └── User - Directory containing user components.
│ │ │ │ ├── ActivationFields - Directory containing activation field components.
│ │ │ │ │ ├── Conditional.jsx
│ │ │ │ │ ├── index.jsx
│ │ │ │ │ └── Table - Directory containing table components.
│ │ │ │ │ └── index.jsx
│ │ │ │ ├── Config - Directory containing config components.
│ │ │ │ │ ├── AccountConfiguration - Directory containing account configuration components.
│ │ │ │ │ │ ├── Account - Directory containing account components.
│ │ │ │ │ │ │ ├── AuthType.jsx
│ │ │ │ │ │ │ └── index.jsx
│ │ │ │ │ │ └── index.jsx
│ │ │ │ │ ├── index.jsx
│ │ │ │ │ └── OnClientRegistrationFailed
│ │ │ │ │ └── index.jsx
│ │ │ │ ├── index.jsx
│ │ │ │ ├── PrintSample - Directory containing print sample components.
│ │ │ │ │ ├── index.jsx
│ │ │ │ │ └── ModalAddPosition.jsx
│ │ │ │ ├── Tabs - Directory containing tab components.
│ │ │ │ │ └── index.jsx
│ │ │ │ ├── Template - Directory containing template components.
│ │ │ │ │ ├── EditTemplate.jsx
│ │ │ │ │ └── index.jsx
│ │ │ │ └── Users - Directory containing user components.
│ │ │ │ ├── AccountList.jsx
│ │ │ │ ├── AddAccount.jsx
│ │ │ │ └── index.jsx
│ │ │ └── Videos - Directory containing video components.
│ │ │ ├── Addvideo - Directory containing add video components.
│ │ │ │ ├── AddVideoContext.jsx
│ │ │ │ ├── Header.jsx
│ │ │ │ ├── index.jsx
│ │ │ │ ├── LongVideo - Directory containing long video components.
│ │ │ │ │ ├── Add.jsx
│ │ │ │ │ ├── Control
│ │ │ │ │ │ ├── AddImage.jsx
│ │ │ │ │ │ └── index.jsx
│ │ │ │ │ ├── index.jsx
│ │ │ │ │ └── Video - Directory containing video components.
│ │ │ │ │ ├── Control.jsx
│ │ │ │ │ └── index.jsx
│ │ │ │ ├── Playlist - Directory containing playlist components.
│ │ │ │ │ ├── Add.jsx
│ │ │ │ │ ├── index.jsx
│ │ │ │ │ └── ListVideo.jsx
│ │ │ │ ├── reducer.js
│ │ │ │ └── useAddVideoContext.js
│ │ │ └── index.jsx
│ │ └── Unauthorized - Directory containing unauthorized components.
│ │ └── Login.jsx
│ ├── configs - Directory containing configuration files.
│ │ └── index.js
│ ├── context - Directory containing React context providers.
│ │ ├── AppContext.js
│ │ ├── AppProvider.jsx
│ │ └── reducer.js
│ ├── hooks - Directory containing custom hooks.
│ │ ├── useClickOutside.js
│ │ └── useDebounce.js
│ ├── index.css
│ ├── main.jsx - Entry point for the application.
│ └── utils - Directory containing utility functions.
│ ├── axiosClient.js
│ ├── compressObject.js
│ ├── getCompanyInfo.js
│ ├── getRouteCouldView.js
│ └── index.js
├── tailwind.config.js - Tailwind CSS configuration file.
├── vite.config.js - Vite configuration file.
└── yarn.lock - Auto-generated file that locks the dependencies to specific versions.
VI. Data Flow Diagram
