Dwinzo-Beta/Dwinzo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Nalvazhuthi
2025-03-14 12:57:01 +05:30
commit 4e43fe1aba
357 changed files with 46572 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
.dockerignore Normal file
View File

@@ -0,0 +1,34 @@
# Include any files or directories that you don't want to be copied to your
# container here (e.g., local build artifacts, temporary files, etc.).
#
# For more help, visit the .dockerignore file reference guide at
# https://docs.docker.com/go/build-context-dockerignore/
**/.classpath
**/.dockerignore
**/.env
**/.git
**/.gitignore
**/.project
**/.settings
**/.toolstarget
**/.vs
**/.vscode
**/.next
**/.cache
**/*.*proj.user
**/*.dbmdl
**/*.jfm
**/charts
**/docker-compose*
**/compose*
**/Dockerfile*
**/node_modules
**/npm-debug.log
**/obj
**/secrets.dev.yaml
**/values.dev.yaml
**/build
**/dist
LICENSE
README.md

23
compose.yaml Normal file
View File

@@ -0,0 +1,23 @@
services:
frontend:
build:
context: ./frontend
args:
- REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
- REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
- REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
container_name: dwinzo-frontend
stdin_open: true
tty: true
ports:
- "3003:3000"
environment:
- WDS_SOCKET_PORT=0
- PORT=3000
- DOCSIFY_PORT=8201
volumes:
- ./frontend:/app
volumes:
frontend:
driver: local

34
frontend/.dockerignore Normal file
View File

@@ -0,0 +1,34 @@
# Include any files or directories that you don't want to be copied to your
# container here (e.g., local build artifacts, temporary files, etc.).
#
# For more help, visit the .dockerignore file reference guide at
# https://docs.docker.com/go/build-context-dockerignore/
**/.classpath
**/.dockerignore
**/.env
**/.git
**/.gitignore
**/.project
**/.settings
**/.toolstarget
**/.vs
**/.vscode
**/.next
**/.cache
**/*.*proj.user
**/*.dbmdl
**/*.jfm
**/charts
**/docker-compose*
**/compose*
**/Dockerfile*
**/node_modules
**/npm-debug.log
**/obj
**/secrets.dev.yaml
**/values.dev.yaml
**/build
**/dist
LICENSE
README.md

14
frontend/.env Normal file
View File

@@ -0,0 +1,14 @@
# PORT for the main application (frontend).
PORT=8200
# Port on which the Docsify documentation server will run.
DOCSIFY_PORT=8201
# Base URL for the server socket API, used for real-time communication (e.g., WebSockets).
REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
# Base URL for the server REST API, used for HTTP requests to the backend server.
REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
# Base URL for the server marketplace API.
REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011

40
frontend/.github/ISSUE_TEMPLATE/bug_report.md vendored Normal file
View File

@@ -0,0 +1,40 @@
---
name: Bug Report
about: Report a bug or issue with the project
title: "[Bug] "
labels: bug
assignees: ''
---
### Bug Description
Provide a detailed description of the bug or issue.
### Steps to Reproduce
1. Step one
2. Step two
3. Step three
### Expected Behavior
Explain what you expected to happen.
### Actual Behavior
Describe what actually happened, including any error messages or logs.
### Screenshots (if applicable)
If applicable, add screenshots to help explain your problem.
### Environment Information:
- Operating System: [e.g., macOS, Windows, Linux]
- Browser (if applicable): [e.g., Chrome, Firefox]
- Version: [e.g., 1.0.0]

22
frontend/.github/ISSUE_TEMPLATE/feature_request.md vendored Normal file
View File

@@ -0,0 +1,22 @@
---
name: Feature Request
about: Suggest a new feature for the project
title: "[Feature Request] "
labels: enhancement
assignees: ''
---
### Feature Request Description
Provide a clear and concise description of the feature you’d like to request.
### Why Is This Feature Needed?
Explain why the feature would be useful or necessary.
### Additional Context
Add any other context or screenshots that may help describe the feature request.

24
frontend/.github/PULL_REQUEST_TEMPLATE/bug_fix.md vendored Normal file
View File

@@ -0,0 +1,24 @@
### Description
Please include a summary of the changes and the motivation behind them. Also include any relevant context or links to related issues.
**Related Issues:**
- Issue # (if applicable)
- Link to related issue or ticket (if applicable)
### Changes Made
- Describe what changes were made in this pull request.
- Include any relevant details about the implementation.
### Checklist
- [ ] I have tested my changes locally.
- [ ] I have updated the documentation (if applicable).
- [ ] I have included unit tests (if applicable).
- [ ] My code follows the project's coding style.
### Screenshots (if applicable)
![screenshot](link_to_screenshot)

24
frontend/.github/PULL_REQUEST_TEMPLATE/documentation.md vendored Normal file
View File

@@ -0,0 +1,24 @@
---
name: Documentation Update
about: Submit a pull request for updating documentation
title: "[Docs] "
labels: documentation, needs review
assignees: ''
---
### Documentation Changes
Please describe the changes you are making to the documentation.
### Related Code Changes (if applicable)
If your documentation relates to any new code changes, please provide context or links to those changes.
### Reason for Change
Why are these documentation updates necessary?
### Screenshots (if applicable)
If updating visual elements of documentation, provide screenshots or examples.

28
frontend/.github/PULL_REQUEST_TEMPLATE/feature_request.md vendored Normal file
View File

@@ -0,0 +1,28 @@
---
name: Feature Request
about: Submit a pull request for adding a new feature
title: "[Feature] "
labels: enhancement, needs review
assignees: ''
---
### Description of the Feature
Briefly describe the new feature you are implementing.
**Related Issue:** (if any)
### Changes Made
1. context-menu-list the specific changes made in the code.
2. Explain the new functionality and how it improves the project.
### Testing and Documentation
1. Steps for testing the new feature.
2. Any documentation updates made.
### Screenshots (if applicable)
Add any screenshots or visuals demonstrating the feature.

0
frontend/.github/workflows/ci.yml vendored Normal file
View File

24
frontend/.github/workflows/deploy-docs.yml vendored Normal file
View File

@@ -0,0 +1,24 @@
name: Deploy Docsify
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 16
- name: Install dependencies
run: npm install
- name: Build Docsify site
run: docsify serve docs --port 4000

28
frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1,28 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# remove zip
*.zip
**/temp/

0
frontend/.husky/documents/readme.md Normal file
View File

25
frontend/.husky/pre-commit Normal file
View File

@@ -0,0 +1,25 @@
#!/usr/bin/env bash
echo "Running pre-commit hook..."
# Compile TypeScript
echo "Compiling TypeScript..."
npx tsc scripts/validate-filenames.ts
# if [ $? -ne 0 ]; then
# echo "TypeScript compilation failed. Aborting commit."
# exit 1
# fi
echo "TypeScript compilation successful."
# Run Node.js script
echo "Running Node.js script..."
node scripts/validate-filenames.js --no-prompt
if [ $? -ne 0 ]; then
echo "Node.js script failed. Aborting commit."
exit 1
fi
echo "Pre-commit hook completed successfully."

0
frontend/.husky/pre-push Normal file
View File

51
frontend/Dockerfile Normal file
View File

@@ -0,0 +1,51 @@
# Use the argument for node version (defaults to 'lts' if not provided)
ARG NODE_VERSION=lts
# Stage 1: Build React App
FROM node:${NODE_VERSION}-alpine AS development
# Set the Node.js environment to development
ENV NODE_ENV=development
# Define build arguments for the API base URLs
ARG REACT_APP_SERVER_SOCKET_API_BASE_URL
ARG REACT_APP_SERVER_REST_API_BASE_URL
ARG REACT_APP_SERVER_MARKETPLACE_URL
# Set environment variables for the API base URLs using the build arguments
ENV REACT_APP_SERVER_SOCKET_API_BASE_URL=${REACT_APP_SERVER_SOCKET_API_BASE_URL}
ENV REACT_APP_SERVER_REST_API_BASE_URL=${REACT_APP_SERVER_REST_API_BASE_URL}
ENV REACT_APP_SERVER_MARKETPLACE_URL=${REACT_APP_SERVER_MARKETPLACE_URL}
# Set working directory for frontend code
WORKDIR /frontend
# Copy package.json and package-lock.json for npm install
COPY package*.json ./
# Install the latest npm version
RUN npm install -g npm
# Install dependencies (this includes react-scripts)
RUN npm install --legacy-peer-deps
# Copy the rest of the application code
COPY . .
# Run the build command (build the React app)
RUN npm run build
# Stage 2: Serve with Nginx
FROM nginx:alpine
# Copy the built React files from the build stage into Nginx's default HTML folder
COPY --from=development /frontend/build /usr/share/nginx/html
# Optionally copy a custom Nginx config (if needed)
COPY nginx.conf /etc/nginx/conf.d/default.conf
# Expose port 80 for Nginx (default HTTP port)
EXPOSE 80
# Start Nginx in the foreground (this is required to keep the container running)
CMD ["nginx", "-g", "daemon off;"]

99
frontend/README.md Normal file
View File

@@ -0,0 +1,99 @@
## Getting Started
Follow these steps to set up and run the project locally.
### Prerequisites
Ensure you have the following installed on your system:
- **Node.js**: [Download and install Node.js](https://nodejs.org/)
- **npm**: Comes with Node.js, but you can also install [npm separately](https://www.npmjs.com/get-npm)
- **yarn (optional)**: If you prefer to use Yarn, [install it here](https://yarnpkg.com/)
- **TypeScript**: This project uses TypeScript, and the necessary dependencies will be installed automatically.
### Installation
1. Clone the repository:
```bash
git clone http://185.100.212.76:7776/Vishnu/Dwinzo.git
cd Dwinzo
```
- Cloning repository with User Credentials:
```bash
git clone http://your_username:password@185.100.212.76:7776/Vishnu/Dwinzo.git
cd Dwinzo
```
note: if password contains special charecters use:
- @ → %40
- : → %3A
- / → %2F
- ? → %3F
- & → %26
- = → %3D
- ! → %21
2. Install the dependencies:
```bash
npm install
```
3. Start server:
```bash
npm start
```
4. Build the app for production:
```bash
npm run build
```
5. Tests
This project includes both **unit tests** using **Jest** and **end-to-end (E2E) tests** using **Cypress**. Here’s how you can run and manage these tests.
**Unit Tests (Jest)**
Unit tests are located in the `src/tests/unit/` directory. They test individual components and functions to ensure they work as expected. **Jest** is used for running these tests.
**Running Unit Tests**
To run the unit tests, use the following command:
```bash
npm run test
```
**End-to-End (E2E) Tests (Cypress)**
Cypress can be run in two modes
1. Interactive Mode:
```bash
npm run cypress:open
```
2. Headless Mode:
```bash
npm run cypress:run
```
### Run Docsify
1. Installation (if needed):
```bash
npm i docsify-cli -g
```
2. Run Command:
```bash
docsify serve docs
```

1
frontend/docs/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/.obsidian

0
frontend/docs/.nojekyll Normal file
View File

93
frontend/docs/README.md Normal file
View File

@@ -0,0 +1,93 @@
# Getting Started
Follow these steps to set up and run the project locally.
## Prerequisites
Ensure you have the following installed on your system:
- **Node.js**: [Download and install Node.js](https://nodejs.org/)
- **npm**: Comes with Node.js, but you can also install [npm separately](https://www.npmjs.com/get-npm)
- **yarn (optional)**: If you prefer to use Yarn, [install it here](https://yarnpkg.com/)
- **TypeScript**: This project uses TypeScript, and the necessary dependencies will be installed automatically.
---
## Installation
1. Clone the repository:
```bash
git clone http://185.100.212.76:7776/Vishnu/Dwinzo.git
cd Dwinzo
```
- Cloning repository with User Credentials:
```bash
git clone http://your_username:password@185.100.212.76:7776/Vishnu/Dwinzo.git
cd Dwinzo
```
note: if password contains special charecters use:
- @ → %40
- : → %3A
- / → %2F
- ? → %3F
- & → %26
- = → %3D
- ! → %21
2. Install the dependencies:
```bash
npm install
```
3. Start server:
```bash
npm start
```
4. Build the app for production:
```bash
npm run build
```
5. Tests
This project includes both **unit tests** using **Jest** and **end-to-end (E2E) tests** using **Cypress**. Here’s how you can run and manage these tests.
**Unit Tests (Jest)**
Unit tests are located in the `src/tests/unit/` directory. They test individual components and functions to ensure they work as expected. **Jest** is used for running these tests.
**Running Unit Tests**
To run the unit tests, use the following command:
```bash
npm run test
```
**End-to-End (E2E) Tests (Cypress)**
Cypress can be run in two modes
1. Interactive Mode:
```bash
npm run cypress:open
```
2. Headless Mode:
```bash
npm run cypress:run
```
---
## Documentation
Run the local server with `docsify serve`. You can preview your site in your browser on `http://localhost:3000`.
```bash
docsify serve docs
```

0
frontend/docs/_navbar.md Normal file
View File

12
frontend/docs/_sidebar.md Normal file
View File

@@ -0,0 +1,12 @@
- [Get Started](/README.md)
<!-- Documetations Section (start)-->
<!-- Documetations Section (end)-->
- [Git Commands](./documents/gitNotes.md)
- [Notes and Guidlines](./documents/notes.md)
- [Basic Project Structure](./documents/projectStructure.md)
- [How to Document](./documents/documentationGuide.md)
- [How to Write a Markdown (.md)](./documents/markdownGuide.md)
- [Docsify Overview](./documents/docsifyGuide.md)

63
frontend/docs/assets/images/gitBranching.svg Normal file
View File

@@ -0,0 +1,63 @@
<svg width="800" height="574" viewBox="0 0 800 574" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M424.4 459.9C424.4 442.9 438.2 429.1 455.2 429.1" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M254.1 459.9C254.1 442.9 240.3 429.1 223.3 429.1M164.5 552.1H378.4" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M315.8 567.901C324.526 567.901 331.6 560.827 331.6 552.101C331.6 543.375 324.526 536.301 315.8 536.301C307.074 536.301 300 543.375 300 552.101C300 560.827 307.074 567.901 315.8 567.901Z" fill="#4ED1A1" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M362.7 567.901C371.427 567.901 378.5 560.827 378.5 552.101C378.5 543.375 371.427 536.301 362.7 536.301C353.974 536.301 346.9 543.375 346.9 552.101C346.9 560.827 353.974 567.901 362.7 567.901Z" fill="#4ED1A1" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M242.5 567.901C251.226 567.901 258.3 560.827 258.3 552.101C258.3 543.375 251.226 536.301 242.5 536.301C233.774 536.301 226.7 543.375 226.7 552.101C226.7 560.827 233.774 567.901 242.5 567.901Z" fill="#4ED1A1" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M776.2 429.1H179.9" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M485.2 444.901C493.927 444.901 501 437.827 501 429.101C501 420.375 493.927 413.301 485.2 413.301C476.474 413.301 469.4 420.375 469.4 429.101C469.4 437.827 476.474 444.901 485.2 444.901Z" fill="#9F5EFF" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M315.8 444.901C324.526 444.901 331.6 437.827 331.6 429.101C331.6 420.375 324.526 413.301 315.8 413.301C307.074 413.301 300 420.375 300 429.101C300 437.827 307.074 444.901 315.8 444.901Z" fill="#9F5EFF" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M776.2 444.901C784.926 444.901 792 437.827 792 429.101C792 420.375 784.926 413.301 776.2 413.301C767.474 413.301 760.4 420.375 760.4 429.101C760.4 437.827 767.474 444.901 776.2 444.901Z" fill="#9F5EFF" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M254.1 459.9C254.1 476.9 267.9 490.7 284.9 490.7H392.8M84.9004 275C84.9004 292 98.7004 305.8 115.7 305.8H133" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M315.8 506.401C324.526 506.401 331.6 499.327 331.6 490.601C331.6 481.875 324.526 474.801 315.8 474.801C307.074 474.801 300 481.875 300 490.601C300 499.327 307.074 506.401 315.8 506.401Z" fill="#4ED1A1" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M362.7 506.401C371.427 506.401 378.5 499.327 378.5 490.601C378.5 481.875 371.427 474.801 362.7 474.801C353.974 474.801 346.9 481.875 346.9 490.601C346.9 499.327 353.974 506.401 362.7 506.401Z" fill="#4ED1A1" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M392.8 490.601H393.7C410.7 490.601 424.5 476.801 424.5 459.801" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M57.2 306.1H21.5" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 10 2 10"/>
<path d="M762.1 306.1H244.9" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 10 2 10"/>
<path d="M531.5 367.6H21.2998" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 10 2 10"/>
<path d="M761.5 367.6H709.7" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 10 2 10"/>
<path d="M761.3 244.6H679" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 10 2 10"/>
<path d="M84.8996 275.4C84.8996 258.4 71.0996 244.6 54.0996 244.6M211.7 275C211.7 292 197.9 305.8 180.9 305.8H132.9M211.7 275.4C211.7 258.4 225.5 244.6 242.5 244.6M273.2 429.1C256.2 429.1 242.4 415.3 242.4 398.3V336.5C242.4 319.5 228.6 305.7 211.6 305.7" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M148.7 567.901C157.426 567.901 164.5 560.827 164.5 552.101C164.5 543.375 157.426 536.301 148.7 536.301C139.974 536.301 132.9 543.375 132.9 552.101C132.9 560.827 139.974 567.901 148.7 567.901Z" fill="#4ED1A1" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M645 244.6H39.2002" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M23.7399 260.402C32.4652 260.27 39.4312 253.09 39.299 244.365C39.1669 235.639 31.9865 228.673 23.2613 228.806C14.5361 228.938 7.57003 236.118 7.7022 244.843C7.83437 253.569 15.0147 260.535 23.7399 260.402Z" fill="#B3E3FF" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M315.8 260.401C324.526 260.401 331.6 253.327 331.6 244.601C331.6 235.875 324.526 228.801 315.8 228.801C307.074 228.801 300 235.875 300 244.601C300 253.327 307.074 260.401 315.8 260.401Z" fill="#B3E3FF" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M645 260.401C653.726 260.401 660.8 253.327 660.8 244.601C660.8 235.875 653.726 228.801 645 228.801C636.274 228.801 629.2 235.875 629.2 244.601C629.2 253.327 636.274 260.401 645 260.401Z" fill="#B3E3FF" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M49 139.1H91.5V176.6H49V139.1Z" fill="#B3E3FF" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M62.6004 162.399H61.4004L58.9004 156.099H60.3004L62.1004 160.899L63.9004 156.099H65.2004L62.6004 162.399ZM67.3004 155.099C67.8004 154.299 68.7004 153.699 69.9004 153.699C71.1004 153.699 71.9004 154.199 72.5004 155.099C73.1004 155.899 73.3004 156.999 73.3004 158.199C73.3004 159.399 73.1004 160.399 72.5004 161.299C72.0004 162.099 71.1004 162.699 69.9004 162.699C68.7004 162.699 67.9004 162.199 67.3004 161.299C66.7004 160.499 66.5004 159.399 66.5004 158.199C66.5004 156.999 66.7004 155.899 67.3004 155.099ZM68.5004 160.899C68.8004 161.199 69.2004 161.399 69.8004 161.399C70.4004 161.399 70.8004 161.199 71.1004 160.899C71.6004 160.399 71.8004 159.499 71.8004 158.199C71.8004 156.899 71.6004 155.999 71.1004 155.499C70.8004 155.199 70.4004 154.999 69.8004 154.999C69.2004 154.999 68.8004 155.199 68.5004 155.499C68.0004 155.999 67.8004 156.899 67.8004 158.199C67.8004 159.499 68.0004 160.299 68.5004 160.899ZM75.8004 160.599C76.3004 160.599 76.7004 160.999 76.7004 161.499C76.7004 161.999 76.3004 162.399 75.8004 162.399C75.3004 162.399 74.9004 161.999 74.9004 161.499C74.9004 160.999 75.3004 160.599 75.8004 160.599ZM79.7004 162.399V156.499H77.7004V155.599C78.9004 155.599 79.7004 154.899 79.9004 153.999H81.0004V162.399H79.7004Z" fill="#1D1D1D"/>
<path d="M70.3002 210.7V193.1M78.5002 204.2L70.3002 212.4L62.2002 204.2" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M294.6 139.1H337.1V176.6H294.6V139.1Z" fill="#B3E3FF" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M306.5 162.399H305.3L302.8 156.099H304.2L306 160.899L307.8 156.099H309.1L306.5 162.399ZM311.2 155.099C311.7 154.299 312.6 153.699 313.8 153.699C315 153.699 315.8 154.199 316.4 155.099C317 155.899 317.2 156.999 317.2 158.199C317.2 159.399 317 160.399 316.4 161.299C315.9 162.099 315 162.699 313.8 162.699C312.6 162.699 311.8 162.199 311.2 161.299C310.6 160.499 310.4 159.399 310.4 158.199C310.4 156.999 310.6 155.899 311.2 155.099ZM312.4 160.899C312.7 161.199 313.1 161.399 313.7 161.399C314.3 161.399 314.7 161.199 315 160.899C315.5 160.399 315.7 159.499 315.7 158.199C315.7 156.899 315.5 155.999 315 155.499C314.7 155.199 314.3 154.999 313.7 154.999C313.1 154.999 312.7 155.199 312.4 155.499C311.9 155.999 311.7 156.899 311.7 158.199C311.7 159.499 311.9 160.299 312.4 160.899ZM319.7 160.599C320.2 160.599 320.6 160.999 320.6 161.499C320.6 161.999 320.2 162.399 319.7 162.399C319.2 162.399 318.8 161.999 318.8 161.499C318.8 160.999 319.2 160.599 319.7 160.599ZM322.7 156.799V156.499C322.7 155.099 323.8 153.799 325.6 153.799C327.4 153.799 328.4 154.999 328.4 156.399C328.4 157.499 327.8 158.399 326.8 158.999L325.1 160.099C324.6 160.399 324.2 160.799 324.1 161.299H328.4V162.499H322.5C322.5 161.099 323.1 160.099 324.5 159.099L325.9 158.199C326.7 157.699 327.1 157.099 327.1 156.399C327.1 155.599 326.6 154.899 325.5 154.899C324.4 154.899 323.9 155.699 323.9 156.599V156.999L322.7 156.799Z" fill="#1D1D1D"/>
<path d="M315.8 210.7V193.1M324 204.2L315.8 212.4L307.7 204.2" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M623.8 139.1H666.3V176.6H623.8V139.1Z" fill="#B3E3FF" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M636.8 162.399H635.6L633.1 156.099H634.5L636.3 160.899L638.1 156.099H639.4L636.8 162.399ZM642.4 162.399V156.499H640.4V155.599C641.6 155.599 642.4 154.899 642.6 153.999H643.7V162.399H642.4ZM647 160.599C647.5 160.599 647.9 160.999 647.9 161.499C647.9 161.999 647.5 162.399 647 162.399C646.5 162.399 646.1 161.999 646.1 161.499C646.1 160.999 646.5 160.599 647 160.599ZM650.6 155.099C651.1 154.299 652 153.699 653.2 153.699C654.4 153.699 655.2 154.199 655.8 155.099C656.4 155.899 656.6 156.999 656.6 158.199C656.6 159.399 656.4 160.399 655.8 161.299C655.3 162.099 654.4 162.699 653.2 162.699C652 162.699 651.2 162.199 650.6 161.299C650 160.499 649.8 159.399 649.8 158.199C649.8 156.999 650.1 155.899 650.6 155.099ZM651.9 160.899C652.2 161.199 652.6 161.399 653.2 161.399C653.8 161.399 654.2 161.199 654.5 160.899C655 160.399 655.2 159.499 655.2 158.199C655.2 156.899 655 155.999 654.5 155.499C654.2 155.199 653.8 154.999 653.2 154.999C652.6 154.999 652.2 155.199 651.9 155.499C651.4 155.999 651.2 156.899 651.2 158.199C651.2 159.499 651.4 160.299 651.9 160.899Z" fill="#1D1D1D"/>
<path d="M645 210.7V193.1M653.2 204.2L645 212.4L636.9 204.2" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M64.4996 429.1H20.5996" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 10 2 10"/>
<path d="M246.9 490.6H21.2002" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 10 2 10"/>
<path d="M762.5 490.6H425.1" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 10 2 10"/>
<path d="M109.9 552.1H21.0996" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 10 2 10"/>
<path d="M762.3 552.1H393.8" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 10 2 10"/>
<path d="M283.5 5.19922H379.7V55.1992H283.5V5.19922Z" fill="#4CD3D6" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M308.8 31.8008H307.2V36.1008H305.7V25.6008H309.7C311.7 25.6008 313 27.0008 313 28.8008C313 30.3008 312 31.5008 310.4 31.8008L312.9 36.3008H311.2L308.8 31.8008ZM309.5 30.5008C310.7 30.5008 311.5 29.8008 311.5 28.7008C311.5 27.6008 310.7 26.9008 309.5 26.9008H307.3V30.5008H309.5ZM321.6 34.1008C321.2 35.4008 320 36.4008 318.4 36.4008C316.5 36.4008 314.8 35.0008 314.8 32.5008C314.8 30.2008 316.4 28.7008 318.3 28.7008C320.5 28.7008 321.8 30.2008 321.8 32.5008V33.0008H316.4C316.4 34.3008 317.4 35.2008 318.6 35.2008C319.8 35.2008 320.4 34.6008 320.6 33.7008L321.6 34.1008ZM320.2 31.8008C320.2 30.8008 319.5 30.0008 318.2 30.0008C317 30.0008 316.3 30.9008 316.2 31.8008H320.2ZM324.2 36.2008V25.3008H325.6V36.2008H324.2ZM335.1 34.1008C334.7 35.4008 333.5 36.4008 331.9 36.4008C330 36.4008 328.3 35.0008 328.3 32.5008C328.3 30.2008 329.9 28.7008 331.8 28.7008C334 28.7008 335.3 30.2008 335.3 32.5008V33.0008H329.9C329.9 34.3008 330.9 35.2008 332.1 35.2008C333.3 35.2008 333.9 34.6008 334.1 33.7008L335.1 34.1008ZM333.7 31.8008C333.7 30.8008 333 30.0008 331.7 30.0008C330.5 30.0008 329.8 30.9008 329.7 31.8008H333.7ZM339.4 32.1008L341.4 31.8008C341.8 31.7008 342 31.5008 342 31.3008C342 30.6008 341.5 30.0008 340.4 30.0008C339.4 30.0008 338.9 30.6008 338.8 31.5008L337.4 31.2008C337.6 29.8008 338.8 28.9008 340.4 28.9008C342.6 28.9008 343.4 30.1008 343.4 31.5008V35.0008C343.4 35.6008 343.5 36.0008 343.5 36.2008H342C342 36.0008 341.9 35.7008 341.9 35.2008C341.6 35.7008 340.9 36.4008 339.6 36.4008C338.1 36.4008 337.2 35.4008 337.2 34.2008C337.2 33.0008 338.2 32.2008 339.4 32.1008ZM341.9 33.1008V32.8008L339.7 33.1008C339.1 33.2008 338.7 33.5008 338.7 34.2008C338.7 34.7008 339.2 35.2008 339.9 35.2008C341 35.2008 341.9 34.7008 341.9 33.1008ZM346.9 33.9008C347 34.7008 347.6 35.2008 348.6 35.2008C349.4 35.2008 349.8 34.7008 349.8 34.2008C349.8 33.8008 349.5 33.4008 348.9 33.3008L347.7 33.0008C346.6 32.8008 345.9 32.0008 345.9 31.0008C345.9 29.8008 347.1 28.7008 348.5 28.7008C350.5 28.7008 351.1 30.0008 351.2 30.6008L350 31.1008C349.9 30.7008 349.6 29.9008 348.5 29.9008C347.8 29.9008 347.3 30.4008 347.3 30.9008C347.3 31.3008 347.6 31.7008 348.1 31.8008L349.3 32.1008C350.6 32.4008 351.3 33.2008 351.3 34.2008C351.3 35.2008 350.4 36.4008 348.7 36.4008C346.7 36.4008 345.9 35.1008 345.8 34.3008L346.9 33.9008ZM360 34.1008C359.6 35.4008 358.4 36.4008 356.8 36.4008C354.9 36.4008 353.2 35.0008 353.2 32.5008C353.2 30.2008 354.8 28.7008 356.7 28.7008C358.9 28.7008 360.2 30.2008 360.2 32.5008V33.0008H354.8C354.8 34.3008 355.8 35.2008 357 35.2008C358.2 35.2008 358.8 34.6008 359 33.7008L360 34.1008ZM358.6 31.8008C358.6 30.8008 357.9 30.0008 356.6 30.0008C355.4 30.0008 354.7 30.9008 354.6 31.8008H358.6Z" fill="#1D1D1D"/>
<path d="M421.3 5.19922H517.5V55.1992H421.3V5.19922Z" fill="#9F5EFF" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M441.7 36.2008V25.6008H445.4C448.1 25.6008 450.5 27.4008 450.5 30.9008C450.5 34.4008 448.1 36.2008 445.4 36.2008H441.7ZM445.3 34.9008C447.3 34.9008 448.9 33.6008 448.9 30.9008C448.9 28.2008 447.3 26.9008 445.3 26.9008H443.1V34.9008H445.3ZM459.3 34.1008C458.9 35.4008 457.7 36.4008 456.1 36.4008C454.2 36.4008 452.5 35.0008 452.5 32.5008C452.5 30.2008 454.1 28.7008 455.9 28.7008C458.1 28.7008 459.4 30.2008 459.4 32.5008V33.0008H454C454 34.3008 455 35.2008 456.2 35.2008C457.4 35.2008 458 34.6008 458.2 33.7008L459.3 34.1008ZM457.9 31.8008C457.9 30.8008 457.2 30.0008 455.9 30.0008C454.7 30.0008 454 30.9008 453.9 31.8008H457.9ZM465.4 36.2008H464L461 29.0008H462.6L464.7 34.6008L466.8 29.0008H468.3L465.4 36.2008ZM476.1 34.1008C475.7 35.4008 474.5 36.4008 472.9 36.4008C471 36.4008 469.3 35.0008 469.3 32.5008C469.3 30.2008 470.9 28.7008 472.8 28.7008C475 28.7008 476.3 30.2008 476.3 32.5008V33.0008H470.9C470.9 34.3008 471.9 35.2008 473.1 35.2008C474.3 35.2008 474.9 34.6008 475.1 33.7008L476.1 34.1008ZM474.7 31.8008C474.7 30.8008 474 30.0008 472.7 30.0008C471.5 30.0008 470.8 30.9008 470.7 31.8008H474.7ZM478.7 36.2008V25.3008H480.1V36.2008H478.7ZM490.1 32.6008C490.1 34.8008 488.6 36.4008 486.4 36.4008C484.2 36.4008 482.7 34.8008 482.7 32.6008C482.7 30.4008 484.2 28.8008 486.4 28.8008C488.5 28.7008 490.1 30.4008 490.1 32.6008ZM488.6 32.6008C488.6 30.9008 487.6 30.0008 486.4 30.0008C485.2 30.0008 484.2 30.9008 484.2 32.6008C484.2 34.3008 485.2 35.2008 486.4 35.2008C487.6 35.2008 488.6 34.2008 488.6 32.6008ZM492.6 39.0008V29.0008H494V30.1008C494.4 29.4008 495.2 28.8008 496.4 28.8008C498.6 28.8008 499.7 30.5008 499.7 32.6008C499.7 34.7008 498.5 36.4008 496.3 36.4008C495.2 36.4008 494.3 35.9008 494 35.2008V39.0008H492.6ZM496.1 30.1008C494.8 30.1008 494 31.2008 494 32.6008C494 34.1008 494.9 35.2008 496.1 35.2008C497.4 35.2008 498.2 34.1008 498.2 32.6008C498.3 31.1008 497.5 30.1008 496.1 30.1008Z" fill="white"/>
<path d="M145.8 5.19922H242V55.1992H145.8V5.19922Z" fill="#FF5E33" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M180.9 36.1992V31.4992H175.5V36.1992H174V25.5992H175.5V30.0992H180.9V25.5992H182.4V36.1992H180.9ZM192.4 32.5992C192.4 34.7992 190.9 36.3992 188.7 36.3992C186.5 36.3992 185 34.7992 185 32.5992C185 30.3992 186.5 28.7992 188.7 28.7992C190.9 28.6992 192.4 30.3992 192.4 32.5992ZM191 32.5992C191 30.8992 190 29.9992 188.8 29.9992C187.6 29.9992 186.6 30.8992 186.6 32.5992C186.6 34.2992 187.6 35.1992 188.8 35.1992C190 35.1992 191 34.1992 191 32.5992ZM196.8 28.9992H198.4V30.2992H196.8V33.9992C196.8 34.6992 197.1 34.9992 197.8 34.9992C198 34.9992 198.2 34.9992 198.4 34.8992V36.0992C198.3 36.0992 197.9 36.1992 197.4 36.1992C196.2 36.1992 195.4 35.3992 195.4 34.0992V30.0992H194V28.9992H194.4C195.2 28.9992 195.5 28.4992 195.5 27.8992V26.6992H196.8V28.9992ZM204.6 25.3992V26.6992C204.5 26.6992 204.3 26.5992 204 26.5992C203.5 26.5992 202.9 26.7992 202.9 27.7992V28.9992H207.7V36.1992H206.3V30.2992H202.9V36.1992H201.4V30.2992H200.1V28.9992H201.4V27.7992C201.4 26.1992 202.5 25.2992 203.8 25.2992C204.2 25.2992 204.5 25.3992 204.6 25.3992ZM206.9 25.1992C207.5 25.1992 207.9 25.5992 207.9 26.1992C207.9 26.7992 207.4 27.1992 206.9 27.1992C206.3 27.1992 205.9 26.6992 205.9 26.1992C205.9 25.5992 206.4 25.1992 206.9 25.1992ZM212.4 32.4992L209.8 28.9992H211.5L213.3 31.4992L215 28.9992H216.7L214.1 32.4992C214.5 33.0992 216.3 35.5992 216.8 36.1992H215.1L213.2 33.4992L211.4 36.1992H209.7L212.4 32.4992Z" fill="white"/>
<path d="M559.1 5.19922H655.3V55.1992H559.1V5.19922Z" fill="#4ED1A1" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M581.6 35.6996V25.0996H588.1V26.4996H583.1V29.8996H587.6V31.2996H583.1V35.7996L581.6 35.6996ZM596.3 33.5996C595.9 34.8996 594.7 35.8996 593.1 35.8996C591.2 35.8996 589.5 34.4996 589.5 31.9996C589.5 29.6996 591.1 28.1996 593 28.1996C595.2 28.1996 596.5 29.6996 596.5 31.9996V32.4996H591.1C591.1 33.7996 592.1 34.6996 593.3 34.6996C594.5 34.6996 595.1 34.0996 595.3 33.1996L596.3 33.5996ZM594.8 31.2996C594.8 30.2996 594.1 29.4996 592.8 29.4996C591.6 29.4996 590.9 30.3996 590.8 31.2996H594.8ZM600.6 31.5996L602.6 31.2996C603 31.1996 603.2 30.9996 603.2 30.7996C603.2 30.0996 602.7 29.4996 601.6 29.4996C600.6 29.4996 600.1 30.0996 600 30.9996L598.7 30.6996C598.9 29.2996 600.1 28.3996 601.7 28.3996C603.9 28.3996 604.7 29.5996 604.7 30.9996V34.5996C604.7 35.1996 604.8 35.5996 604.8 35.7996H603.4C603.4 35.5996 603.3 35.2996 603.3 34.7996C603 35.2996 602.3 35.9996 601 35.9996C599.5 35.9996 598.6 34.9996 598.6 33.7996C598.4 32.4996 599.3 31.6996 600.6 31.5996ZM603.1 32.5996V32.2996L600.9 32.5996C600.3 32.6996 599.9 32.9996 599.9 33.6996C599.9 34.1996 600.4 34.6996 601.1 34.6996C602.2 34.6996 603.1 34.1996 603.1 32.5996ZM609.3 28.4996H610.9V29.7996H609.3V33.5996C609.3 34.2996 609.6 34.5996 610.3 34.5996C610.5 34.5996 610.7 34.5996 610.9 34.4996V35.6996C610.8 35.6996 610.4 35.7996 609.9 35.7996C608.7 35.7996 607.9 34.9996 607.9 33.6996V29.6996H606.5V28.3996H606.9C607.7 28.3996 608 27.8996 608 27.2996V26.0996H609.3V28.4996ZM616.1 35.8996C614.4 35.8996 613.4 34.5996 613.4 32.9996V28.4996H614.8V32.7996C614.8 33.7996 615.3 34.6996 616.4 34.6996C617.5 34.6996 618.1 33.8996 618.1 32.8996V28.5996H619.5V34.4996C619.5 35.0996 619.5 35.5996 619.6 35.7996H618.3C618.3 35.5996 618.2 35.1996 618.2 34.8996C617.9 35.5996 617 35.8996 616.1 35.8996ZM626.8 29.8996H626.2C625 29.8996 624.2 30.4996 624.2 32.0996V35.6996H622.8V28.4996H624.2V29.7996C624.7 28.6996 625.6 28.3996 626.4 28.3996H626.9V29.8996H626.8ZM635.2 33.5996C634.8 34.8996 633.6 35.8996 632 35.8996C630.1 35.8996 628.4 34.4996 628.4 31.9996C628.4 29.6996 630 28.1996 631.9 28.1996C634.1 28.1996 635.4 29.6996 635.4 31.9996V32.4996H630C630 33.7996 631 34.6996 632.2 34.6996C633.4 34.6996 634 34.0996 634.2 33.1996L635.2 33.5996ZM633.8 31.2996C633.8 30.2996 633.1 29.4996 631.8 29.4996C630.6 29.4996 629.9 30.3996 629.8 31.2996H633.8Z" fill="#1D1D1D"/>
<path d="M696.8 5.19922H793V55.1992H696.8V5.19922Z" fill="#4ED1A1" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M719.4 35.6996V25.0996H725.9V26.4996H720.9V29.8996H725.4V31.2996H720.9V35.7996L719.4 35.6996ZM734 33.5996C733.6 34.8996 732.4 35.8996 730.8 35.8996C728.9 35.8996 727.2 34.4996 727.2 31.9996C727.2 29.6996 728.8 28.1996 730.6 28.1996C732.8 28.1996 734.1 29.6996 734.1 31.9996V32.4996H728.7C728.7 33.7996 729.7 34.6996 730.9 34.6996C732.1 34.6996 732.7 34.0996 732.9 33.1996L734 33.5996ZM732.6 31.2996C732.6 30.2996 731.9 29.4996 730.6 29.4996C729.4 29.4996 728.7 30.3996 728.6 31.2996H732.6ZM738.4 31.5996L740.3 31.2996C740.7 31.1996 740.9 30.9996 740.9 30.7996C740.9 30.0996 740.4 29.4996 739.3 29.4996C738.3 29.4996 737.8 30.0996 737.7 30.9996L736.3 30.6996C736.5 29.2996 737.7 28.3996 739.3 28.3996C741.5 28.3996 742.3 29.5996 742.3 30.9996V34.5996C742.3 35.1996 742.4 35.5996 742.4 35.7996H741C741 35.5996 740.9 35.2996 740.9 34.7996C740.6 35.2996 739.9 35.9996 738.6 35.9996C737.1 35.9996 736.2 34.9996 736.2 33.7996C736.2 32.4996 737.1 31.6996 738.4 31.5996ZM740.9 32.5996V32.2996L738.7 32.5996C738.1 32.6996 737.7 32.9996 737.7 33.6996C737.7 34.1996 738.1 34.6996 738.9 34.6996C739.9 34.6996 740.9 34.1996 740.9 32.5996ZM747.1 28.4996H748.7V29.7996H747.1V33.5996C747.1 34.2996 747.4 34.5996 748.1 34.5996C748.3 34.5996 748.5 34.5996 748.7 34.4996V35.6996C748.6 35.6996 748.2 35.7996 747.7 35.7996C746.5 35.7996 745.7 34.9996 745.7 33.6996V29.6996H744.3V28.3996H744.7C745.5 28.3996 745.8 27.8996 745.8 27.2996V26.0996H747.1V28.4996ZM753.9 35.8996C752.2 35.8996 751.2 34.5996 751.2 32.9996V28.4996H752.6V32.7996C752.6 33.7996 753.1 34.6996 754.2 34.6996C755.3 34.6996 755.9 33.8996 755.9 32.8996V28.5996H757.3V34.4996C757.3 35.0996 757.3 35.5996 757.4 35.7996H756.1C756.1 35.5996 756 35.1996 756 34.8996C755.7 35.5996 754.8 35.8996 753.9 35.8996ZM764.5 29.8996H763.9C762.7 29.8996 761.9 30.4996 761.9 32.0996V35.6996H760.5V28.4996H761.9V29.7996C762.4 28.6996 763.3 28.3996 764.1 28.3996H764.6V29.8996H764.5ZM773 33.5996C772.6 34.8996 771.4 35.8996 769.8 35.8996C767.9 35.8996 766.2 34.4996 766.2 31.9996C766.2 29.6996 767.8 28.1996 769.7 28.1996C771.9 28.1996 773.2 29.6996 773.2 31.9996V32.4996H767.8C767.8 33.7996 768.8 34.6996 770 34.6996C771.2 34.6996 771.8 34.0996 772 33.1996L773 33.5996ZM771.6 31.2996C771.6 30.2996 770.9 29.4996 769.6 29.4996C768.4 29.4996 767.7 30.3996 767.6 31.2996H771.6Z" fill="#1D1D1D"/>
<path d="M84.9004 275V398.4C84.9004 415.4 98.7004 429.2 115.7 429.2H211.4" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M195.6 444.8C204.271 444.8 211.3 437.771 211.3 429.1C211.3 420.43 204.271 413.4 195.6 413.4C186.93 413.4 179.9 420.43 179.9 429.1C179.9 437.771 186.93 444.8 195.6 444.8Z" fill="#9F5EFF" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M148.7 444.901C157.426 444.901 164.5 437.827 164.5 429.101C164.5 420.375 157.426 413.301 148.7 413.301C139.974 413.301 132.9 420.375 132.9 429.101C132.9 437.827 139.974 444.901 148.7 444.901Z" fill="#9F5EFF" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M148.7 321.901C157.426 321.901 164.5 314.827 164.5 306.101C164.5 297.375 157.426 290.301 148.7 290.301C139.974 290.301 132.9 297.375 132.9 306.101C132.9 314.827 139.974 321.901 148.7 321.901Z" fill="#FF5E33" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M536.5 398.4C536.5 415.4 522.7 429.2 505.7 429.2M760.5 429.2H737.5C720.5 429.2 706.7 415.4 706.7 398.4C706.7 381.4 692.9 367.6 675.9 367.6H568.1H567.2C550.2 367.6 536.4 381.4 536.4 398.4" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M645 383.401C653.726 383.401 660.8 376.327 660.8 367.601C660.8 358.875 653.726 351.801 645 351.801C636.274 351.801 629.2 358.875 629.2 367.601C629.2 376.327 636.274 383.401 645 383.401Z" fill="#4CD3D6" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M598.2 383.401C606.926 383.401 614 376.327 614 367.601C614 358.875 606.926 351.801 598.2 351.801C589.474 351.801 582.4 358.875 582.4 367.601C582.4 376.327 589.474 383.401 598.2 383.401Z" fill="#4CD3D6" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M148.7 444.9V536.4M164.5 305.7H211.7M645 351.9V260.4" stroke="#646464" stroke-width="4" stroke-miterlimit="10"/>
<path d="M8 5.19922H104.2V55.1992H8V5.19922Z" fill="#B3E3FF" stroke="#646464" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M40.9004 36.2988V26.2988H42.9004L45.3004 33.3988C45.5004 34.0988 45.7004 34.5988 45.8004 34.8988C45.9004 34.4988 46.1004 33.9988 46.3004 33.2988L48.7004 26.2988H50.5004V36.2988H49.2004V27.8988L46.3004 36.2988H45.1004L42.2004 27.7988V36.2988H40.9004Z" fill="#414141"/>
<path d="M57.9008 35.3988C57.4008 35.7988 57.0008 36.0988 56.6008 36.1988C56.2008 36.3988 55.7008 36.3988 55.2008 36.3988C54.4008 36.3988 53.8008 36.1988 53.4008 35.7988C53.0008 35.3988 52.8008 34.8988 52.8008 34.2988C52.8008 33.8988 52.9008 33.5988 53.0008 33.2988C53.2008 32.9988 53.4008 32.7988 53.6008 32.5988C53.9008 32.3988 54.2008 32.2988 54.5008 32.1988C54.7008 32.0988 55.1008 32.0988 55.6008 31.9988C56.6008 31.8988 57.3008 31.6988 57.8008 31.5988C57.8008 31.3988 57.8008 31.2988 57.8008 31.2988C57.8008 30.7988 57.7008 30.3988 57.5008 30.1988C57.2008 29.8988 56.7008 29.7988 56.1008 29.7988C55.5008 29.7988 55.1008 29.8988 54.8008 30.0988C54.5008 30.2988 54.3008 30.6988 54.2008 31.1988L53.0008 30.9988C53.1008 30.4988 53.3008 30.0988 53.5008 29.7988C53.8008 29.4988 54.1008 29.1988 54.6008 29.0988C55.1008 28.8988 55.6008 28.7988 56.2008 28.7988C56.8008 28.7988 57.3008 28.8988 57.7008 28.9988C58.1008 29.0988 58.4008 29.2988 58.6008 29.5988C58.8008 29.7988 58.9008 30.0988 59.0008 30.3988C59.0008 30.5988 59.1008 30.9988 59.1008 31.4988V33.0988C59.1008 34.1988 59.1008 34.9988 59.2008 35.2988C59.3008 35.5988 59.4008 35.8988 59.5008 36.1988H58.2008C58.0008 36.0988 57.9008 35.7988 57.9008 35.3988ZM57.8008 32.6988C57.4008 32.8988 56.7008 32.9988 55.8008 33.1988C55.3008 33.2988 54.9008 33.3988 54.7008 33.3988C54.5008 33.3988 54.3008 33.5988 54.2008 33.7988C54.1008 33.9988 54.0008 34.1988 54.0008 34.3988C54.0008 34.6988 54.1008 34.9988 54.4008 35.1988C54.6008 35.3988 55.0008 35.4988 55.5008 35.4988C56.0008 35.4988 56.4008 35.3988 56.8008 35.1988C57.2008 34.9988 57.4008 34.6988 57.6008 34.2988C57.7008 33.9988 57.8008 33.5988 57.8008 33.0988V32.6988Z" fill="#414141"/>
<path d="M61.6006 27.6988V26.2988H62.8006V27.6988H61.6006ZM61.6006 36.2988V28.9988H62.8006V36.2988H61.6006Z" fill="#414141"/>
<path d="M65.4004 36.2988V28.9988H66.5004V29.9988C67.0004 29.1988 67.8004 28.7988 68.8004 28.7988C69.2004 28.7988 69.6004 28.8988 70.0004 28.9988C70.4004 29.1988 70.6004 29.3988 70.8004 29.5988C71.0004 29.7988 71.1004 30.1988 71.2004 30.4988C71.2004 30.6988 71.3004 31.0988 71.3004 31.6988V36.1988H70.1004V31.7988C70.1004 31.2988 70.1004 30.8988 70.0004 30.6988C69.9004 30.4988 69.7004 30.2988 69.5004 30.0988C69.3004 29.9988 69.0004 29.8988 68.6004 29.8988C68.1004 29.8988 67.6004 30.0988 67.2004 30.3988C66.8004 30.6988 66.6004 31.3988 66.6004 32.2988V36.2988H65.4004Z" fill="#414141"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

10
frontend/docs/assets/images/gitWorkFlow.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

10
frontend/docs/assets/images/projectFlow.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
frontend/docs/assets/videos/dwinzo_version-0.0-refrence/realtime visualization.mp4 Normal file
View File

Binary file not shown.

BIN
frontend/docs/assets/videos/dwinzo_version-0.0-refrence/walkthrough.mp4 Normal file
View File

Binary file not shown.

35
frontend/docs/documents/docsifyGuide.md Normal file
View File

@@ -0,0 +1,35 @@
# Quick start
It is recommended to install `docsify-cli` globally, which helps initializing and previewing the website locally.
```bash
npm i docsify-cli -g
```
### Initialize
If you want to write the documentation in the `./docs` subdirectory, you can use the `init` command.
```bash
docsify init ./docs
```
### Writing content
After the `init` is complete, you can see the file list in the `./docs` subdirectory.
- `index.html` as the entry file
- `README.md` as the home page
- `.nojekyll` prevents GitHub Pages from ignoring files that begin with an underscore
You can easily update the documentation in `./docs/README.md`, of course you can add more pages.
### Preview your site
Run the local server with `docsify serve`. You can preview your site in your browser on `http://localhost:3000`.
```bash
docsify serve docs
```
?> For more use cases of `docsify-cli`, head over to the [docsify-cli documentation](https://github.com/docsifyjs/docsify-cli).

380
frontend/docs/documents/documentationGuide.md Normal file
View File

@@ -0,0 +1,380 @@
# Why Documentation is Important for Developers
Documentation helps developers work efficiently and ensures projects run smoothly. Here’s why it’s crucial:
1. **Knowledge Sharing**: It helps team members understand the system and communicate effectively, especially when new people join the project.
2. **Code Maintenance**: Good documentation makes it easier to fix bugs, make updates, and keep the code consistent.
3. **Project Longevity**: It ensures that project knowledge is preserved, so future developers can maintain or improve the code without confusion.
4. **Troubleshooting**: Developers can quickly find solutions to problems or understand past decisions, saving time and reducing errors.
5. **Testing and Quality**: Documentation helps ensure the right testing processes are followed, leading to better-quality code.
6. **Efficiency**: It saves time by reducing the need to explain things repeatedly or search for answers.
In short, internal documentation keeps projects organized, helps teams collaborate, and ensures the software can be maintained and improved over time.
---
## Guide to Writing Modular Documentation for React Projects
Modular documentation refers to organizing your documentation into independent, reusable sections or modules. Each module typically covers a specific part of your project, making it easier to update and navigate.
In the context of React, modular documentation should cover both React components and the overall architecture of the app.
### Split Documentation into Smaller Sections
When documenting, break down each part of your codebase into its smallest logical unit:
1. **Functions**: Explain its purpose, inputs (arguments), and outputs (returns).
2. **Components**: Detail props, their types, default values, and the UI they render.
3. **Utilities/Helpers**: Document what a utility does, its inputs, and outputs.
4. **APIs**: Cover the endpoint, request format, and expected response.
Each section should have a consistent structure for easy understanding and reference.
## Documenting Functions
#### Structure for Documenting Functions
1. **Function Name**: A short and descriptive name.
2. **Purpose**: Briefly explain what the function does.
3. **Inputs**:
- List each parameter.
- Include types and default values if applicable.
4. **Output**: Describe the return value and its type.
5. **Code Examples**: Provide a usage example.
#### Example: Utility Function Documentation
````markdown
## `formatDate`
### Purpose
The `formatDate` function converts a `Date` object into a human-readable string format.
### Inputs
| Parameter | Type | Default Value | Description |
| --------- | -------- | ------------- | -------------------------- |
| `date` | `Date` | - | The date object to format. |
| `locale` | `string` | `"en-US"` | The locale for formatting. |
### Output
Returns a `string` representing the formatted date.
### Example
```javascript
import { formatDate } from "./utils";
const date = new Date("2024-11-21");
console.log(formatDate(date)); // Output: "November 21, 2024"
```
````
## Documenting Components
#### Structure for Documenting Components
1. **Component Name**: Name of the React component.
2. **Purpose**: Explain what the component is for and its use case.
3. **Props**:
- List each prop.
- Include type, whether it’s required, and default value.
4. **Behavior**: Describe what the component does and any side effects.
5. **Output**: Explain what the component renders or returns.
6. **Code Examples**: Show how to use the component.
#### Example: Component Documentation
`````markdown
## `Button`
### Purpose
The `Button` component renders a clickable button with customizable styles and behavior.
### Props
| Prop Name | Type | Required | Default Value | Description |
| ---------- | ---------- | -------- | ------------- | ---------------------------------- |
| `label` | `string` | Yes | - | The text displayed on the button. |
| `onClick` | `function` | No | `() => {}` | The function to call when clicked. |
| `disabled` | `boolean` | No | `false` | Disables the button if true. |
| `style` | `object` | No | `{}` | Inline styles for the button. |
### Behavior
- If `disabled` is true, the button cannot be clicked.
- The `onClick` function will only be called when the button is enabled.
### Output
Renders a `<button>` element styled based on the passed props.
### Example
```jsx
import Button from "./components/Button";
<Button
label="Submit"
onClick={() => console.log("Clicked")}
disabled={false}
style={{ color: "white", backgroundColor: "blue" }}
/>;
```
## Documenting Advanced Components
For components with complex functionality (e.g., controlled components, form components, or components interacting with APIs), follow these additional guidelines:
1. **State Management**: Document the state it manages and how to interact with it.
2. **Lifecycle**: If it uses React lifecycle methods or hooks, explain their purpose.
3. **Events**: Document events (e.g., `onChange`, `onBlur`) and their payloads.
#### Example: Complex Component Documentation
````markdown
## `SearchBar`
### Purpose
The `SearchBar` component provides a text input for users to search and emits search queries through the `onSearch` event.
### Props
| Prop Name | Type | Required | Default Value | Description |
| ------------- | ---------- | -------- | ------------- | -------------------------------------------- |
| `placeholder` | `string` | No | `"Search..."` | The placeholder text for the input. |
| `onSearch` | `function` | Yes | - | Callback fired when the search is submitted. |
| `debounce` | `number` | No | `300` | Time in milliseconds to debounce user input. |
### Behavior
1. The component manages the `inputValue` state.
2. After the user stops typing for the `debounce` duration, it triggers the `onSearch` callback with the input value.
### Output
Renders:
- A `<div>` wrapper.
- An `<input>` field styled with default or custom styles.
### Example
```jsx
import SearchBar from "./components/SearchBar";
<SearchBar
placeholder="Search items..."
onSearch={(query) => console.log(query)}
debounce={500}
/>;
```
````
`````
## Documenting Custom Hooks
#### Structure for Documenting Hooks
1. **Hook Name**: Name of the hook.
2. **Purpose**: Why it’s used and what it does.
3. **Inputs**: Parameters passed to the hook.
4. **State/Outputs**: State or values returned by the hook.
5. **Usage**: Show an example.
#### Example: Hook Documentation
````markdown
## `useFetch`
### Purpose
The `useFetch` hook manages data fetching and provides loading, error, and response states.
### Inputs
| Parameter | Type | Required | Default Value | Description |
| --------- | -------- | -------- | ------------- | ------------------------------------- |
| `url` | `string` | Yes | - | The endpoint to fetch data from. |
| `options` | `object` | No | `{}` | Fetch options like headers or method. |
### State/Outputs
| State Name | Type | Description |
| ---------- | --------- | ---------------------------------------- |
| `data` | `any` | The response data from the API. |
| `loading` | `boolean` | Indicates if the request is in progress. |
| `error` | `object` | The error object if the request fails. |
### Example
```javascript
import { useFetch } from "./hooks/useFetch";
const MyComponent = () => {
const { data, loading, error } = useFetch("/api/data");
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return <div>{JSON.stringify(data)}</div>;
};
```
````
#### General Best Practices for Modular Documentation
1. **Be Consistent**: Use the same format for all functions, components, and hooks.
2. **Focus on Inputs and Outputs**: Developers care about what they give and what they get.
3. **Use Examples**: Code examples make documentation actionable.
4. **Avoid Overloading**: Document each function/component in its own file if it’s complex.
5. **Explain Behavior**: Describe any side effects, state changes, or interactions.
---
## Guide to Managing Files and Folders for Documentation in Docsify
Docsify is a flexible tool for generating documentation from markdown files. To keep your Docsify-based project well-organized, here’s a guide on how to manage files and folders effectively.
#### 1. Project Structure Overview
A clean folder structure is crucial for scalability, readability, and ease of maintenance. Below is a suggested structure:
```
/docs # Root folder for your Docsify project
│
├── /assets/ # Static resources (images, videos, files, etc.)
│ └── /images/ # Folder for images used in your docs
│ └── gitWorkFlow.svg # Example image used in documentation
│ └── /videos/ # Folder for tutorial videos or related media
│ └── walkthrough.mp4 # old walkthrough presentation
│
├── /documents/ # Folder for the main documentation content
│ └── docsifyGuide.md # Documentation for setting up and using Docsify
│ └── projectStructure.md # Explanation of the project structure and organization
│ └── /components/ # Folder for documentation on different components
│ └── input.md # Input component documentation
│ └── others.md # Other components documentation
│ └── etc.md # Any additional miscellaneous documentation
│
├── /style/ # Folder for custom styles
│ └── style.css # Custom CSS file for styling the documentation
│
└── index.html # Main entry point for Docsify (loads the documentation)
```
---
#### 2. Folder Breakdown
- **/docs**: This is the core folder that contains all of your Markdown (`.md`) files. You can organize these files by sections or topics such as guides, API references, and tutorials. Subfolders like `/guide`, `/reference`, or `/tutorials` help keep related files together.
- **/assets**: This folder is for any images, diagrams, videos, or other static files referenced in your documentation. It's best to organize your media into subfolders based on the section they belong to.
Example:
```
/assets
├── /images/
│ ├── diagram1.png
│ └── screenshot.png
└── /videos/
└── tutorial.mp4
```
- **/lib**: If you want to add custom JavaScript or other scripts to enhance Docsify’s functionality, place them in the `/lib` folder. This can include themes, custom navigation, or interactive features.
---
#### 3. Naming Conventions
Use simple, descriptive names for your files and folders. Avoid spaces in filenames—use hyphens (`-`) instead. For example:
- **Correct**: `installation-guide.md`, `api-reference.md`
- **Incorrect**: `installation guide.md`, `api reference.md`
This keeps URLs and links consistent and easier to handle.
---
#### 4. Organizing Documentation Files
1. **Homepage (index.md)**:
The `index.md` file serves as the homepage for your documentation. It should provide an introduction to the project and link to other sections of your documentation.
2. **Guide Section**:
Place introductory content, installation instructions, and tutorials in the `/guide` folder. Each file should be named based on its content (e.g., `installation.md`, `getting-started.md`).
3. **Reference Section**:
For API documentation or technical references, create a `/reference` folder. You might have files like `api-reference.md`, `config.md`, or `troubleshooting.md`.
4. **Assets**:
Organize images, videos, or diagrams in the `/assets` folder. Keep this structure consistent across sections (e.g., `/assets/images/`, `/assets/videos/`).
---
#### 5. Writing the \_sidebar.md File
The `_sidebar.md` file controls the sidebar navigation in Docsify. It defines the links that appear on the sidebar, which can point to sections of the documentation or external URLs.
Here’s how to structure the `_sidebar.md` file:
- **Basic Structure**:
You can list the sections of your documentation as clickable links. Use Markdown syntax to link to the different `.md` files within your `/docs` folder.
Example:
```markdown
- [Home](/) # Link to the homepage
- [Getting Started](/guide/intro.md) # Link to the "Getting Started" guide
- [API Reference](/reference/api.md) # Link to the API documentation
- [Installation](/guide/installation.md) # Link to the installation guide
```
- **Nested Links**:
To organize sections into subcategories, you can nest links under headings. This helps create a hierarchical structure in the sidebar.
Example:
```markdown
- [Home](/)
- [Guide](/guide/intro.md)
- [Introduction](/guide/intro.md)
- [Usage](/guide/usage.md)
- [API Reference](/reference/api.md)
- [Authentication](/reference/authentication.md)
- [Endpoints](/reference/endpoints.md)
```
- **External Links**:
You can also add external links to resources outside of your Docsify project.
Example:
```markdown
- [External Resource](https://example.com)
```
---
#### 6. Managing Large Projects
For large documentation projects, it’s best to break content into smaller, manageable sections. This will help keep the documentation organized and make it easier for team members to collaborate.
- **Modular Sections**:
Use subfolders like `/getting-started/`, `/setup/`, and `/troubleshooting/` to logically divide your content. Each section should have its own introduction, details, and examples.
- **Indexing**:
Consider creating an `index.md` in each major folder (e.g., `/guide/index.md`, `/reference/index.md`) for clarity and easy navigation.
---

338
frontend/docs/documents/gitNotes.md Normal file
View File

@@ -0,0 +1,338 @@
## Git basic Workflow
<p align="center">
<img src="../assets/images/gitWorkFlow.svg" alt="Git basic Workflow">
<p align="center">Fig.1 - Git basic Workflow</p>
</p>
---
## Git Commands
1. Initialize git:
```bash
git init
```
2. Check remote repository:
```bash
git remote
git remote -v
```
3. Connect to remote repository (optional):
If remote repository is not connected use,
```bash
git remote add origin http://185.100.212.76:7776/Vishnu/modeling_app.git
```
To change url use,
```bash
git remote set-url origin http://185.100.212.76:7776/Vishnu/modeling_app.git
```
4. Fetch from origin:
On fetch mention --all to pull all branches or mention remote_name and branch_name to fetch a particular branch.
Use --force to perform force Pull.
```bash
git fetch
git pull
```
5. Staging and Commit changes:
- "." indicated all changed files will be staged.
- For, specific file replace "." with the path to the specific file or directory(folder).
- "commit message" - replace text in this phrase to your commit discription.
**Staging**
```bash
git add .
git add path/to/directory_or_file
```
To Unstage all files that were added to the staging area but does not affect the working directory:
```bash
git reset
```
**Commit**
```bash
git commit -m "commit message"
```
Creates a new commit that undoes the changes introduced by the specified commit, use --hard for discarding all changes since that commit (Warning: This command can permanently delete data.):
```bash
git revert commit_hash
```
6. Inspecting Commits:
- View the commit history:
```bash
git log
```
- View a graph of commits:
```bash
git log --graph --oneline --all
```
7. Push to remote repository:
- If the branch is creted for the first time and dose not located in the remote repsitory. Use,
```bash
git push --set-upstream origin new_branch_name
```
- Normal push
```bash
git push origin new_branch_name
```
- Force push and Safer force push
```bash
git push --force
git push --force-with-lease
```
- Delete branch in remote repository
```bash
git push origin --delete branch_name
```
8. Creating and Switching Branches:
- To check current branch name. Use,
```bash
git remote
```
- To checkout from current branch and move to another branch. Use,
```bash
git checkout branch_name
```
- To checkout from current branch and create new branch. Use,
```bash
git checkout -b new_branch_name
```
9. Merging branches:
- Merges the specified branch to the current active branch:
```bash
git merge branch_name
```
- This will only perform the merge if it can be fast-forwarded. If a fast-forward isn't possible, Git will abort the merge:
```bash
git merge --ff-only branch_name
```
- Provide a custom merge commit message:
```bash
git merge -m "Custom merge message" branch_name
```
- Merge without committing automatically:
```bash
git merge --no-commit branch_name
```
- Continue the merge after resolving conflicts:
```bash
git merge --continue
```
- Abort a merge in progress:
```bash
git merge --abort
```
10. Stash changes:
- Stashes changes made in current branch:
```bash
git stash
```
- Stashes changes made in current branch with message:
```bash
git stash save "message"
```
- Apply Latest stash and apply and remove form stash list:
```bash
git stash apply
git stash pop
```
- View Stash:
```bash
git stash list
```
- Clear all stashes:
```bash
git stash clear
```
- Remove the latest stash:
```bash
git stash drop
```
11. Branch commands:
- To View all local and remote branches
```bash
git branch
git branch -a
```
- To Create branch
```bash
git branch branch_name
```
- To switch between branch
```bash
git checkout branch_name
```
Alternatively if you want to bring the changes to the new branch,
```bash
git switch branch_name
```
- To switch between branch
```bash
git checkout -b branch_name
```
Alternatively,
```bash
git switch -c branch_name
```
- To rename branch
```bash
git branch -m old_branch_name new_branch_name
```
- To Delete branch (use -D to force delete)
```bash
git branch -d branch_name
```
12. Other git comments consiered usefull in previous encounters:
- press q to exit git response
- Prevent git from creating **zoneIdentifier** files
```bash
git config core.protectNTFS false
```
---
## Git Branching
<p align="center">
<img src="../assets/images/gitBranching.svg" alt="Git Branching">
<p align="center">Fig.2 - Git Branching</p>
</p>
This diagram represents a branching model for managing the development of a software project. It uses different branches to organize and control how code changes are developed, tested, and released. Here’s a breakdown of the key concepts, simplified for someone new:
### **Main Components**
1. **Main Branch** (blue line):
- This branch represents the "production" or "live" version of the project.
- Only stable and tested versions of the code are added here.
- Releases like `v0.1`, `v0.2`, and `v1.0` are tagged here.
2. **Develop Branch** (purple line):
- This is where active development happens.
- Features or fixes are integrated here before they are prepared for a release.
- It acts as a staging area for new work to ensure it’s functional and complete.
3. **Feature Branches** (green lines):
- These branches are used to develop specific features or tasks.
- Developers create a new branch for each feature and work on it independently.
- Once complete, they are merged into the **Develop Branch**.
4. **Release Branch** (teal line):
- Before a release is finalized, a release branch is created.
- Final fixes and testing are done here to ensure stability.
- Once complete, it is merged into both **Main** and **Develop** branches to mark the release.
5. **Hotfix Branch** (red line):
- This branch is for urgent fixes to the live code.
- If an issue is found in the **Main Branch** (e.g., a bug in `v0.1`), a **Hotfix Branch** is created.
- After fixing, it is merged into both **Main** and **Develop** to ensure the fix is applied everywhere.
### **Workflow Summary**
1. **Start a Feature:**
- Create a feature branch from the **Develop Branch**.
- Work on your task and complete it.
2. **Integrate Your Work:**
- When your feature is ready, merge it back into the **Develop Branch**.
3. **Prepare a Release:**
- When the team decides to release a version, a **Release Branch** is created from **Develop**.
- Final adjustments are made before merging it into **Main**.
4. **Fix Urgent Problems:**
- If a critical issue is found in production, create a **Hotfix Branch** from **Main**, fix it, and merge it into both **Main** and **Develop**.
This system helps keep work organized, ensures stability for the live version, and allows teams to work on different features or fixes simultaneously. It’s designed to make collaboration and code integration smoother.
---
## Aditional notes
**On start the app asks wheather to pull from git or not.**
- If you are connected to the remote repository, type "y" or "yes" to perform the pull action. The app will automatically abort the start process if the pull operation encounters any issues to prevent abnormalities.
- If you are not connected to the remote repository, type "n" or "no" to skip the pull action and proceed with starting the app.

197
frontend/docs/documents/markdownGuide.md Normal file
View File

@@ -0,0 +1,197 @@
# How to Write a Markdown (.md) File for Large-Scale Projects
## Introduction
Markdown (MD) is a lightweight markup language widely used in software development for documentation purposes. It is simple, easy to read, and can be converted to HTML, making it ideal for collaborative and large-scale projects. This guide will help you create well-structured, clear, and professional Markdown files tailored for use in large-scale projects.
---
## Obsidian
#### What is Obsidian
Obsidian is a powerful, feature-rich note-taking and knowledge management application designed for individuals and teams. It is highly customizable and based on plain text Markdown files, making it a versatile tool for creating, organizing, and connecting ideas. It’s particularly popular among professionals, students, and researchers who use it for personal knowledge management (PKM), journaling, writing, and task management.
All notes in Obsidian are plain text Markdown files stored locally on your computer. This ensures that your notes are portable, future-proof, and easy to access outside the application.
#### How to Get Started
1. Download and Install:
- [Obsidian’s website](https://obsidian.md/) provides downloads for all major platforms.
2. Create a Vault:
- A "vault" is a folder where all your Markdown notes are stored. You can have multiple vaults for different purposes.
3. Start Taking Notes:
- Create new notes using Markdown syntax and link them using Note Name.
4. For more:
- [Read official Obsidian documentation](https://help.obsidian.md/Home)
---
## Understanding Markdown Syntax
Markdown provides a straightforward syntax for formatting text. Below are the essential elements you'll need to master:
#### **1. Headers**
Headers define the structure of your document. Use `#` to denote headings, with more `#` symbols indicating smaller headings.
- Example:
```markdown
# Main Header
## Subheader
### Sub-Subheader
```
#### **2. Lists**
Markdown supports ordered and unordered lists for organizing information.
- Unordered list:
```markdown
- Item 1
- Item 2
```
- Ordered list:
```markdown
1. Step 1
2. Step 2
```
#### **3. Text Formatting**
- Bold: `**bold text**`
- Italic: `*italic text*`
- Inline Code: `` `inline code` ``
- Strikethrough: `~~strikethrough~~`
#### **4. Links and Images**
- Link: `[Link Text](URL)`
- Image: `![Alt Text](Image URL)`
#### **5. Tables**
Tables are useful for presenting structured data.
- Example:
```markdown
| Header 1 | Header 2 |
| -------- | -------- |
| Row 1 | Data |
| Row 2 | Data |
```
#### **6. Code Blocks**
Use triple backticks to include code blocks. Specify the programming language for syntax highlighting.
- Example:
````markdown
```jsx
console.log("Hello world");
```
````
---
## Key Guidelines for Large-Scale Projects
#### **1. Understand the Project Structure**
Before you start writing, familiarize yourself with the project's directory and the purpose of the documentation. In large projects, MD files often serve specific roles, such as:
- **README.md**: A high-level overview of the project.
- **CONTRIBUTING.md**: Guidelines for contributing to the project.
- **CHANGELOG.md**: Records of changes made over time.
- **API.md**: Detailed documentation of APIs.
#### **2. Write for Your Audience**
- Identify the primary readers of the document (e.g., developers, testers, stakeholders).
- Use technical terms appropriately and explain jargon when necessary.
#### **3. Maintain Consistency**
- Follow a consistent style, tone, and structure across all Markdown files.
- Adhere to any project-specific conventions or style guides.
#### **4. Use Comments Wisely**
Markdown does not support native comments, but you can use HTML-style comments for notes that should not appear in the rendered file.
- Example:
```markdown
<!-- This is a comment -->
```
---
## Checklist for Writing a Quality Markdown File
1. **Start with a Purpose**
Begin your document with a clear purpose or summary of what it covers.
2. **Follow a Logical Flow**
Organize information hierarchically using headings and subheadings.
3. **Be Concise and Clear**
Avoid redundant information. Use simple language where possible.
4. **Incorporate Visual Aids**
Use tables, images, or diagrams to explain complex topics.
5. **Test and Validate**
- Render your Markdown file locally or in the project’s preferred Markdown viewer to ensure formatting works as expected.
- Use tools like **MarkdownLint** to check for common syntax errors.
6. **Link to Other Resources**
Provide hyperlinks to related MD files or external resources.
7. **Version Control**
Use version control (e.g., Git) to track changes and maintain a clear history of updates.
---
## Example: Simple README.md Template
````markdown
# Project Title
## Description
Provide a brief overview of the project, its purpose, and key features.
## Installation
Explain how to set up the project.
```bash
# Example installation command
pip install project-name
```
````
## Usage
Provide examples of how to use the project.
```python
# Example usage
from project import feature
feature.run()
```
---
## External Resources
1. ▶️ [The Only Markdown Crash Course You Will Ever Need](https://www.youtube.com/watch?v=_PPWWRV6gbA&ab_channel=WebDevSimplified)
2. 📄 [Basic writing and formatting syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)
---

176
frontend/docs/documents/notes.md Normal file
View File

@@ -0,0 +1,176 @@
## /temp/ files
I’ve set up the repository to ignore all folders named `temp`. This is a space you can use for temporary or experimental files without worrying about affecting the application or pushing these files to Gitea.
- **Purpose**: Use the `temp` folder to store temporary files, logs, or scripts for testing purposes.
- **Ignored by Git**: All `temp` folders are excluded from version control using the `.gitignore` rule `**/temp/`. These files will not be committed or pushed to the repository.
- **Best Practices**: Please avoid storing critical or shared files here. Use it for temporary work only, and clean up files when no longer needed.
This should help us maintain a clean repository while giving everyone the freedom to experiment.
---
## Standardized File Structure and Coding Guidelines
To improve our codebase's readability, maintainability, and scalability, we’re adopting a standardized file structure and coding practices. Here’s a summary:
1. **File Structure**:
- **Components (`.tsx`)**: All files that return HTML/JSX will be React components with a `.tsx` extension. They should focus on UI logic and presentation.
- **Purpose**: Files with the `.tsx` extension are reserved for React components that return JSX/HTML.
- **Location**: Components should be organized based on their purpose or scope within the application. Example:
```
src/
components/
Header.tsx
Footer.tsx
pages/
Home.tsx
About.tsx
```
- **Naming Convention**: Component filenames should use PascalCase, matching the component name (e.g., `Header.tsx` for a `Header` component).
- **Example**:
```tsx
/**
* Header component that displays the application's navigation bar.
*
* @returns {JSX.Element} A navigation bar with links.
*/
const Header: React.FC = () => {
return (
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
);
};
export default Header;
```
- **Functions (`.ts`)**: All helper functions or business logic will go into `.ts` files, separate from the components.
- **Purpose**: Files with the `.ts` extension are for helper functions, utility logic, or other non-React code that does not return JSX/HTML.
- **Location**: Place utility files in a `utils` directory or within a directory relevant to their context. Example:
```
src/
utils/
calculateTotal.ts
formatDate.ts
hooks/
useFetch.ts
```
- **Naming Convention**: Use camelCase for filenames that describe the primary function (e.g., `calculateTotal.ts` for a `calculateTotal` function).
- **Example**:
```ts
/**
* Calculates the total price based on items and tax rate.
*
* @param {number[]} prices - Array of item prices.
* @param {number} taxRate - Tax rate as a decimal.
* @returns {number} Total price including tax.
*/
export const calculateTotal = (
prices: number[],
taxRate: number
): number => {
const subtotal = prices.reduce((sum, price) => sum + price, 0);
return subtotal + subtotal * taxRate;
};
```
---
## Commenting Standards
To improve code readability and understanding, every function and component should include comments explaining its purpose, inputs, and outputs. Here’s how we’ll approach this:
1. **React Components**:
- Include a **high-level description** of what the component does.
- Specify the **props** it accepts, along with their types.
- Specify the **return type** (`JSX.Element` for React components).
**Example**:
```tsx
/**
* Button component that triggers an action when clicked.
*
* @param {object} props - The props object.
* @param {string} props.label - The text to display on the button.
* @param {() => void} props.onClick - The callback function triggered when the button is clicked.
* @returns {JSX.Element} A styled button element.
*/
const Button: React.FC<{ label: string; onClick: () => void }> = ({
label,
onClick,
}) => {
return <button onClick={onClick}>{label}</button>;
};
export default Button;
```
2. **Functions**:
- Include a **detailed description** of what the function does.
- Specify the **parameters**, their types, and what they represent.
- Specify the **return type** and what it represents.
**Example**:
```ts
/**
* Converts a date string to a readable format.
*
* @param {string} date - A date string in ISO format (e.g., "2024-11-21").
* @returns {string} The formatted date (e.g., "November 21, 2024").
*/
export const formatDate = (date: string): string => {
const options: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "long",
day: "numeric",
};
return new Date(date).toLocaleDateString(undefined, options);
};
```
3. **Commenting Standards**:
- Each function and component should have a comment explaining:
- What it does.
- The props or parameters it accepts (including types).
- What it returns and why.
4. **Why This Matters**:
- This structure helps us maintain a clean, modular codebase. It also makes the project easier to navigate for new and existing team members.
---
## File Naming Guidelines
To maintain consistency and professionalism in our codebase, we are standardizing the way we name files. This is crucial for readability, collaboration, and avoiding potential issues across different operating systems.
We are introducing a standardized **file naming convention** to maintain consistency across the codebase. Here are the key points:
1. **File Naming**:
- All file names must follow the **camelCase** convention (e.g., `headerComponent.tsx`, `calculateTotal.ts`).
- This ensures uniformity and avoids case sensitivity issues.
2. **Pre-Commit Hook**:
- A pre-commit hook will automatically rename files to camelCase if they don’t comply.
- Please double-check that your imports match the updated file names to avoid runtime errors.
3. **What You Need to Do**:
- Name files correctly in camelCase from the start.
- If a file is renamed during a commit, ensure all imports are updated to reflect the new name.
4. **Why This Matters**:
- Consistent file naming improves readability and reduces issues when working in teams or across different operating systems.

97
frontend/docs/documents/projectStructure.md Normal file
View File

@@ -0,0 +1,97 @@
## Project Folder Structure
```plaintext
my-react-app/
├── .github/
│ └── workflows/ # CI/CD configuration (e.g., GitHub Actions)
│ └── ci.yml # Configuration for automated tests/lints
├── .husky/ # Husky Git hooks
│ ├── pre-commit # Pre-commit hook for linting and tests
│ ├── pre-push # Pre-push hook for running tests
│ └── _/ # Husky internal scripts
│ └── husky.sh # Husky script
├── docs/ # Documentation folder (for Docsify)
│ ├── _navbar.md # Navigation configuration for Docsify
│ ├── documentation # Documented contents
│ ├── _sidebar.md # Sidebar configuration for Docsify
│ ├── .nojekyll # Skip Jekyll processing for GitHub Pages
│ ├── index.html # Main landing page for Docsify
│ └── README.md # Documentation file
├── public/ # Static public assets (e.g., index.html)
├── src/ # Main source code
│ ├── assets/ # Static assets (images, styles)
│ │ ├── fonts/ # Font files
│ │ ├── images/ # Image files
│ │ ├── models/ # 3d files (e.g., .gltf, .fbx)
│ │ └── styles/ # Global styles (SCSS)
│ │ ├── abstracts/ # SCSS variables, functions, and mixins
│ │ ├── base/ # Basic, global styles (e.g., resets)
│ │ ├── components/ # Styles specific to components
│ │ ├── layout/ # Layout-related styles (e.g., grid, flexbox)
│ │ ├── pages/ # Page-specific styles
│ │ └── main.scss # Main SCSS entry file
│ ├── components/ # Reusable React components
│ │ ├── 3d-ui/ # 3d ui components (e.g., distance text)
│ │ ├── common/ # Shared/common components (e.g., buttons, inputs)
│ │ ├── layout/ # Layout-related components (e.g., header, footer)
│ │ ├── ui/ # Ui-related components (e.g., toolbar, menu)
│ │ ├── templates/ # modals, loaders, skeletons
│ │ ├── temp/ # temporary workspace (to try function/components without interfearing with app)
│ │ └── scene/ # all 3d realted functions.
│ ├── hooks/ # Custom React hooks
│ ├── functions/ # Non-React utility functions
│ ├── pages/ # Page components (e.g., Home, About)
│ ├── services/ # API services and business logic
│ ├── store/ # Global state management (e.g., Redux store)
│ ├── store/ # Global state management (e.g., Redux store)
│ ├── temp/ # temporary workspace (to try function/components without interfearing with app)
│ ├── tests/ # Testing folder
│ │ ├── unit/ # Unit tests
│ │ │ ├── __mocks__/ # Mock files for unit tests
│ │ │ ├── __tests__/ # Unit test files
│ │ │ ├── setupTests.ts # Setup for Jest
│ │ │ └── jest.config.js # Jest configuration
│ │ └── e2e/ # End-to-end tests (Cypress)
│ │ ├── integration/ # Integration test files
│ │ ├── fixtures/ # Fixtures for mock data in tests
│ │ ├── plugins/ # Cypress plugins
│ │ ├── support/ # Cypress support files (e.g., commands)
│ │ └── cypress.config.js # Cypress configuration
│ ├── utils/ # Utility functions/helpers (independent functions)
│ ├── app.tsx # Root React component
│ ├── index.tsx # Main entry point for React application
│ └── react-app-env.d.ts # TypeScript environment types for React
├── .env # Environment variables (e.g., API keys)
├── .eslintrc.js # ESLint configuration for code linting
├── .gitignore # Files and directories to be ignored by Git
├── package.json # Project dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── README.md # Project documentation (this file)
```
## Planed Project Flow
<p align="center">
<img src="../assets/images/projectFlow.svg" alt="Git basic Workflow">
</p>
## Google Documents Links
1. 📄 [Factory Builder Feature explanation](https://docs.google.com/document/d/1yDu-kfRFhQVOx2ydcaaA5nZJ3itdc6JKa9SU7wlXGUU/edit?tab=t.0)
2. 📄 [Real-Time Visualization Editor](https://docs.google.com/document/d/1DVkM2h1KVYorbUUtSHDBbSyGkwel-Z-TX6nT9pHLs1o/edit?tab=t.0#heading=h.s6jrhhnl6xzz)
3. 📄 [Action Builder](https://docs.google.com/document/d/1q-vzbUcH5K2sDOm-Aiw0jJ4QYYP6wT4MXXGs2UKQqBs/edit?tab=t.0#heading=h.h5m0upm9zsk9)
4. 📄 [MarketPlace Modelling Documentation](https://docs.google.com/document/d/1I7pCqVlCODtThqipb_wWGG5vP0_Hc_xZQQIqoD4bN-w/edit?tab=t.0)
5. 📄 [Component : Outliner](https://docs.google.com/document/d/1EeKPSCYBY9rB9V7glZWpI5C0iJDn25yb4yTHRG2AFzE/edit?tab=t.0)
## Refrence videos
1. This video offers a preview of a conceptual project created entirely with Figma and Blender based on previous version of this project (Dwinzo).
<video controls style="max-width: 100%; height: auto;">
<source src="../assets/videos/dwinzo_version-0.0-refrence/walkthrough.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

153
frontend/docs/documents/projectVision.md Normal file
View File

@@ -0,0 +1,153 @@
## Intoduction
**Imagine a world where industries no longer have to rely solely on theoretical calculations to make critical decisions.**
A factory manager at a bustling automotive plant is faced with a challenge. The current production floor layout seems inefficient, but overhauling it physically is expensive, time-consuming, and risky. Traditional math-based analysis feels abstract and doesn’t give a clear, visual understanding of potential improvements. This is where this Web-Based Digital Twin Builder and Real-Time Monitoring System, **Dwinzo** steps in to transform decision-making.
---
## The Scope and Vision
This web-based platform is **more than just software**; it’s a gateway to a fully virtualized, predictive world. Designed to cater to **large-scale industries**, it empowers managers, engineers, and decision-makers to effortlessly **visualize, simulate, and monitor their operations digitally**. Yet, it is versatile enough to cater to individuals, allowing even hobbyists to create **home automation systems** or small-scale monitoring solutions.
By bridging the gap between theoretical models and physical execution, this platform brings the power of **simulation, real-time analytics, and physics-based predictions** directly into user's hands without the need for complex hardware setups.
---
## How It Solves Problems
Large industries face high stakes when implementing changes to layouts or workflows. Errors in planning can lead to **downtime, wasted resources, and financial losses**.
this platform revolutionizes this process by enabling users to:
- **Draw or import layouts**, crafting digital twins of their facilities with precision.
- Assemble and arrange **assets or machinery** in the virtual environment, creating a clear, visual representation of proposed changes.
- Simulate various workflows and scenarios to understand **real-world implications** of decisions before making costly commitments.
- Compare multiple layouts or simulations side by side to select the optimal solution based on **ROI, production capacity, or other metrics**.
No more guesswork. No more expensive trial-and-error.
---
## Key Features
1. **Interactive Building Tools:**
Users can start from scratch with intuitive tools to draw blueprints or directly import existing layouts, saving time and effort.
2. **Asset Assembly and Customization:**
The platform allows assets like machinery, sensors, or furniture to be placed and configured based on visual assumptions or exact specifications.
3. **Scenario Simulation:**
From workflow analysis to capacity simulations, users can create **"what-if" scenarios** to predict outcomes and identify bottlenecks.
4. **Customizable Real-Time Displays:**
Monitoring dashboards can be tailored to show only the data most relevant to the user, enhancing clarity and focus.
5. **Web-Based Accessibility:**
Without requiring specialized hardware, the platform is accessible from anywhere, ensuring maximum convenience and usability.
---
## What Makes It Unique?
While competitors often rely on physical devices to bridge the digital and physical realms, this solution bypasses this barrier with its **purely web-based approach**. No need for expensive sensors, cameras, or hardware installations. Users can dive straight into the digital twin world with just a browser and internet access, making it not only **cost-effective** but also **globally scalable**.
---
## Example Analysis: Optimizing a Pipe Manufacturing Facility Using Dwinzo
#### Scenario Overview
A pipe manufacturing plant is experiencing inefficiencies in its production workflow. The plant's management team wants to assess whether rearranging machinery and material flow could increase output and reduce bottlenecks. However, conducting physical trials for these changes would disrupt operations and risk costly downtime.
The team decides to use a **web-based digital twin builder and real-time monitoring system** to analyze potential solutions in a virtual environment before implementing changes on the shop floor.
### Step 1: Building the Digital Twin
The team begins by creating a digital replica of the plant. Using the platform’s tools, they:
- **Import the factory’s layout** from CAD files, including walls, doors, and pathways.
- Place **assets** such as cutting machines, welding stations, and inspection equipment into their respective locations.
- Configure the material flow routes, worker stations, and raw material storage zones.
This setup takes only a few hours, thanks to the platform’s intuitive interface and drag-and-drop tools.
### Step 2: Identifying the Problem Areas
The digital twin is configured to simulate the factory's current workflow. Key inefficiencies identified include:
1. **Long Material Travel Distances:** Pipes must traverse a lengthy path from raw material storage to cutting machines, leading to delays.
2. **Bottlenecks at Welding Stations:** Due to a mismatch in capacity, finished parts pile up at welding stations, slowing the entire production line.
3. **Underutilized Space:** Certain areas of the factory floor remain unused, while others are overcrowded.
### Step 3: Testing Solutions
The team simulates multiple scenarios using the digital twin. Examples include:
1. **Rearranging Machines to Reduce Material Travel Time:**
- Cutting machines are moved closer to the raw material storage zone.
- Conveyor belts are re-routed to minimize transportation distance.
- Simulation Result: Material travel distance is reduced by 40%, speeding up the overall process.
2. **Adding a New Welding Station to Eliminate Bottlenecks:**
- A third welding station is added, balancing the capacity of upstream and downstream operations.
- Simulation Result: Waiting times at welding stations drop by 60%, increasing production throughput.
3. **Optimizing Unused Space for Worker Movement:**
- Worker pathways are redesigned, improving accessibility to machines without crossing high-traffic areas.
- Simulation Result: Worker efficiency improves by 15%, reducing delays during material handling.
### Step 4: Visualizing the Best Layout
The platform provides a visual comparison of all tested scenarios, displaying key metrics such as:
- Time savings for material transport.
- Reduction in bottleneck durations.
- Space utilization improvements.
The team selects the layout with the most balanced improvements across all metrics.
### Step 5: Monitoring and Implementation
Once the optimized layout is chosen, the team uses the platform’s **real-time monitoring tools** during implementation to track progress. Key steps include:
- Monitoring machine performance to ensure the relocation doesn’t introduce new issues.
- Tracking production metrics to validate improvements predicted by the simulation.
- Adjusting worker schedules to adapt to the new layout.
### Conclusion of this analysis
By simulating and analyzing these scenarios in a virtual environment, the management team avoids unnecessary disruption to the factory’s operations. The digital twin application provides actionable insights into how to optimize layout, workflows, and capacity without relying on risky physical trials.
This example demonstrates how the application can be used to **proactively solve operational problems**, reduce risks, and make data-driven decisions in industries like pipe manufacturing.
---
## The Long-Term Vision
this project aims to be the cornerstone of the **digital transformation** revolution. By bringing processes, layouts, and workflows into a fully virtualized space, you reduce the risks associated with physical errors and empower users to:
- Achieve **greater security and monitoring**.
- Make **smarter, data-driven decisions**.
- Embrace a future where **everything can be planned, tested, and optimized digitally** before taking a single physical action.
Imagine a future where industries, homes, and cities alike are interconnected in a seamless digital ecosystem. From ensuring worker safety to minimizing operational inefficiencies, this platform is poised to create a **safer, smarter, and more efficient world**.
---
## Summary
This project is a **web-based digital twin builder and real-time monitoring system** that allows users to:
1. **Create and visualize** virtual replicas (digital twins) of buildings, layouts, or workflows.
2. **Simulate scenarios** and analyze data (e.g., ROI, production capacity) to optimize processes.
3. Monitor real-time data with **customizable dashboards** for better decision-making.
Its **main audience** includes **large-scale industries**, though it can also cater to smaller use cases like **home automation**. It addresses the problem of inefficient, theoretical decision-making by providing an **accessible, hardware-free, simulation-driven approach** to test and verify workflows digitally.
The platform is unique because it’s **web-based**, removing the need for physical hardware, and aims to bring security, monitoring, and simulation into the digital world to **reduce risks and improve efficiency**.
<!-- Prepared by: **Vishnu** <br/>
Date: **November 22, 2024** -->

97
frontend/docs/index.html Normal file
View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documentation</title>
<!-- Docsify Vue Theme -->
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"
/>
<!-- Link to your custom styles -->
<link rel="stylesheet" href="./styles/style.css" />
<!-- Docsify Search Plugin (Make sure it's the correct version) -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/docsify-search@1.7.0/dist/docsify-search.min.css"
/>
</head>
<body>
<div id="app"></div>
<!-- Docsify Script -->
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- Docsify Search Plugin Script -->
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<!-- Docsify Image Preview Plugin -->
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
<!-- Docsify Theme Toggle Button and Search Integration -->
<script>
window.$docsify = {
loadSidebar: true,
loadNavbar: true,
subMaxLevel: 2,
auto2top: true,
search: {
insertBefore: ".sidebar-nav", // Ensure the search bar is placed before the sidebar-nav element
paths: "auto", // Automatically index all markdown files
placeholder: "Search documentation...", // Placeholder text
noData: "No results!", // Message when no results are found
},
plugins: [
function (hook, vm) {
// Function to add the theme toggle button
function addThemeToggle() {
const themeButtonHtml = `
<div class="theme-toggle-container">
Theme :
<button id="theme-toggle">🌙</button>
</div>
`;
// Append the theme button inside the sidebar or navbar
const sidebar = document.querySelector(".sidebar");
if (sidebar) {
sidebar.insertAdjacentHTML("beforebegin", themeButtonHtml);
}
// Handle the theme toggle functionality
const themeToggleBtn = document.getElementById("theme-toggle");
themeToggleBtn.addEventListener("click", () => {
// Toggle the dark-theme class
const isDark = document.body.classList.toggle("dark-theme");
themeToggleBtn.textContent = isDark ? "🌞" : "🌙";
// Optionally save the user's theme preference to localStorage
localStorage.setItem("theme", isDark ? "dark" : "light");
});
// Check if there's a saved theme in localStorage
const savedTheme = localStorage.getItem("theme");
if (savedTheme === "dark") {
document.body.classList.add("dark-theme");
themeToggleBtn.textContent = "🌞"; // Set the button to indicate light theme
}
}
// Run the theme toggle setup after each page load
hook.afterEach(function (html) {
// Make sure the theme toggle button is added after the page content changes
if (!document.getElementById("theme-toggle")) {
addThemeToggle();
}
});
},
],
};
</script>
</body>
</html>

135
frontend/docs/styles/style.css Normal file
View File

@@ -0,0 +1,135 @@
/* Default light theme (comes from the vue.css theme) */
/* Dark theme styles */
body.dark-theme {
background-color: #323232;
color: #f2f2f2;
}
body.dark-theme .sidebar-toggle span {
background-color: #127efa;
}
body.dark-theme .markdown-section code,
body.dark-theme .markdown-section pre {
background-color: #131313;
color: #f2f2f2;
}
/* Sidebar Dark Mode */
body.dark-theme .sidebar {
background-color: #131313;
color: #f2f2f2;
}
body.dark-theme .sidebar ul li a {
color: #f2f2f2;
}
body.dark-theme .anchor span {
color: #f2f2f2;
}
body.dark-theme .sidebar ul li.active > a {
color: #1e90ff;
}
/* Change link colors in dark theme */
body.dark-theme a {
color: #1e90ff;
}
/* Customize header (if needed) */
body.dark-theme .header {
background-color: #232323;
color: #f2f2f2;
}
/* Optional: Customize any other element */
body.dark-theme .content {
background-color: #323232;
color: #f2f2f2;
font-weight: 100;
}
body.dark-theme .markdown-section h1,
body.dark-theme .markdown-section h2,
body.dark-theme .markdown-section h3,
body.dark-theme .markdown-section h4,
body.dark-theme .markdown-section strong {
color: #e3e3e3;
font-weight: 600;
}
body.dark-theme .sidebar ul li a:hover::after {
background-color: #323232;
}
/* Other over written styles */
.sidebar-toggle {
background: transparent;
}
.markdown-section code,
.markdown-section pre {
border-radius: 8px;
}
.markdown-section code::after,
.markdown-section pre::after {
display: none;
}
.content {
padding-top: 14px;
}
.sidebar-toggle {
top: 0;
height: fit-content;
width: fit-content;
}
.theme-toggle-container {
position: fixed;
top: 8px;
left: 38px;
z-index: 50;
display: flex;
align-items: center;
}
.theme-toggle-container button {
background-color: transparent;
border: none;
cursor: pointer;
}
.sidebar ul {
margin: 0;
/* padding: 0 0 0 15px; */
}
.sidebar li {
padding: 0 0 0 15px;
margin: 0;
}
.sidebar ul li a:hover {
text-decoration: none;
}
.sidebar ul li a:hover::after {
content: "";
width: 100%;
position: absolute;
left: 0;
height: 30px;
background-color: #e5ebec;
z-index: -1;
}
.app-nav.no-badge {
margin: 8px;
}
.app-nav.no-badge ul {
padding: 0;
padding-right: 6px;
}
video {
border-radius: 8px;
border: none;
outline: none;
margin: 0;
padding: 0;
}

0
frontend/git Normal file
View File

14
frontend/nginx.conf Normal file
View File

@@ -0,0 +1,14 @@
server {
listen 3000;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri /index.html;
}
# Redirect 404 errors to index.html (for React Router)
error_page 404 /index.html;
}

22776
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

77
frontend/package.json Normal file
View File

@@ -0,0 +1,77 @@
{
"name": "dwinzo-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@react-three/csg": "^3.2.0",
"@react-three/drei": "^9.113.0",
"@react-three/fiber": "^8.17.7",
"@react-three/postprocessing": "^2.16.3",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@turf/turf": "^7.1.0",
"@types/jest": "^27.5.2",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@use-gesture/react": "^10.3.1",
"chart.js": "^4.4.8",
"glob": "^11.0.0",
"gsap": "^3.12.5",
"leva": "^0.10.0",
"mqtt": "^5.10.3",
"postprocessing": "^6.36.4",
"prompt-sync": "^4.2.0",
"react": "^18.3.1",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^18.3.1",
"react-easy-sort": "^1.6.0",
"react-router-dom": "^7.0.1",
"react-scripts": "5.0.1",
"react-sortablejs": "^6.1.4",
"react-toastify": "^10.0.5",
"recharts": "^2.15.1",
"sass": "^1.78.0",
"socket.io-client": "^4.8.1",
"sortablejs": "^1.15.6",
"three": "^0.168.0",
"typescript": "^4.9.5",
"uuid": "^11.1.0",
"web-vitals": "^2.1.4",
"zustand": "^5.0.0-rc.2"
},
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/node": "^22.9.1",
"@types/three": "^0.169.0",
"cypress": "^13.14.2",
"dotenv": "^16.4.5",
"husky": "^9.1.6",
"ts-node": "^10.9.2"
}
}

BIN
frontend/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

44
frontend/public/index.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Dwinzo</title>
</head>
<body data-theme="light">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="root-over"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
frontend/public/logo192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
frontend/public/logo512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

25
frontend/public/manifest.json Normal file
View File

@@ -0,0 +1,25 @@
{
"short_name": "Dwinzo",
"name": "Dwinzo - Your World Reimagined",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
frontend/public/robots.txt Normal file
View File

@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

1
frontend/scripts/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
*.js

74
frontend/scripts/git-prompt.ts Normal file
View File

@@ -0,0 +1,74 @@
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Git Pull Setup
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
import { execSync } from 'child_process';
const prompt = require('prompt-sync')();
// Ask user whether to pull from Git
const pull_remote_repository: string = prompt('Do you want to pull from Git? (yes/no): ');
if (pull_remote_repository.toLowerCase() === 'yes' || pull_remote_repository.toLowerCase() === 'y') {
console.log('Pulling latest changes from Git...');
try {
execSync('git fetch', { stdio: 'inherit' }); // Execute git fetch
execSync('git pull', { stdio: 'inherit', timeout: 5000 }); // Execute git pull with timeout of 5s
console.log('Pull successful!');
} catch (err: any) {
// If there's an error, log it and exit with an error code
if (err.signal === 'SIGTERM') {
console.error('Git pull timed out.');
} else {
console.error('Error pulling from Git:', err);
}
process.exit(1); // Exit with non-zero code to signal failure
}
} else {
console.log('Skipping Git pull.');
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
husky initialization
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
import * as fs from "fs";
import * as path from "path";
const source = path.join(__dirname, "..", ".husky", "pre-commit");
const destinationDir = path.join(__dirname, "..", ".husky", "_");
const destination = path.join(destinationDir, "pre-commit");
console.log('source: ', source);
console.log('destination: ', destination);
// Verify if the source file exists
if (!fs.existsSync(source)) {
console.error("Source file does not exist:", source);
process.exit(1); // Exit with an error code
}
// Ensure the destination directory exists
if (!fs.existsSync(destinationDir)) {
fs.mkdirSync(destinationDir, { recursive: true });
}
// Read and write the content manually
fs.readFile(source, "utf-8", (readErr, data) => {
if (readErr) {
console.error("Failed to read source file:", readErr);
return;
}
else {
// console.log(`sourceData :`, data);
}
fs.writeFile(destination, data.toString(), (writeErr) => {
if (writeErr) {
console.error("Failed to write to destination file:", writeErr);
} else {
// console.log('Data to be written in destination: ', data.toString());
console.log("Successfully copied pre-commit hook to", destination);
}
});
});

0
frontend/scripts/serve-docs.ts Normal file
View File

76
frontend/scripts/validate-filenames.ts Normal file
View File

@@ -0,0 +1,76 @@
import * as glob from 'glob';
import * as path from 'path';
import * as fs from 'fs';
const prompt = require('prompt-sync')();
// Function to check if a filename is in camelCase
function isCamelCase(filename: string): boolean {
const camelCasePattern = /^[a-z]+([A-Z][a-z]*)*$/; // Regular expression to match camelCase pattern
return camelCasePattern.test(filename);
}
// Function to convert a filename to camelCase
function toCamelCase(filename: string): string {
return filename
.replace(/[_-]+(.)?/g, (_, chr) => (chr ? chr.toUpperCase() : ''))
.replace(/^[A-Z]/, (firstChar) => firstChar.toLowerCase()); // Ensure the first letter is lowercase
}
// Function to get all non-camelCase filenames in the specified directory
function getNonCamelCaseFiles(directory: string): string[] {
const files = glob.sync(`${directory}/**/*.*`); // Get all files in the specified directory
return files.filter((filePath) => {
const filename = path.basename(filePath, path.extname(filePath)); // Get the filename without the extension
return !filename.startsWith('_') && !isCamelCase(filename); // Filter out files that start with '_' and non-camelCase files
});
}
// Function to prompt the user for renaming non-camelCase files or proceed automatically in non-interactive mode
function promptUserForRenaming(nonCamelCaseFiles: string[]): boolean {
if (process.stdout.isTTY) {
// If running interactively, prompt the user
const answer: string = prompt('Do you want to rename these files to camelCase? (yes/no): ');
return answer.toLowerCase() === 'yes' || answer.toLowerCase() === 'y';
} else {
// If running in non-interactive mode, log default action and proceed without prompt
console.log("Running in non-interactive mode. Defaulting to renaming files.");
return true;
}
}
// Function to rename files to camelCase
function renameFiles(nonCamelCaseFiles: string[]): void {
nonCamelCaseFiles.forEach((filePath) => {
const dir = path.dirname(filePath); // Get the directory path
const ext = path.extname(filePath); // Get the file extension
const oldFilename = path.basename(filePath, ext); // Get the filename without extension
const newFilename = toCamelCase(oldFilename) + ext; // Convert to camelCase and add back the extension
const newFilePath = path.join(dir, newFilename); // Generate the new file path
try {
fs.renameSync(filePath, newFilePath); // Rename the file
console.log(`✅ Renamed: ${filePath} -> ${newFilePath}`);
} catch (error) {
console.error(`❌ Error renaming ${filePath}:`, error);
}
});
}
// Main function to execute the script
function main(): void {
const directory = 'src'; // Specify your target directory
const nonCamelCaseFiles = getNonCamelCaseFiles(directory); // Get non-camelCase files
if (nonCamelCaseFiles.length > 0) {
console.error('❌ The following files are not in camelCase and do not start with an underscore:');
nonCamelCaseFiles.forEach((file) => console.error(`- ${file}`));
// Prompt user for renaming in interactive mode or proceed automatically in non-interactive mode
renameFiles(nonCamelCaseFiles);
} else {
console.log('✅ All filenames are in camelCase or start with an underscore.');
}
}
// Execute the main function
main();

9
frontend/src/app.test.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from "react";
import { render, screen } from "@testing-library/react";
import App from "./app";
test("renders learn react link", () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

46
frontend/src/app.tsx Normal file
View File

@@ -0,0 +1,46 @@
import "./assets/styles/main.scss";
import ConformationPopup from "./components/templates/modals/conformationPopup";
import {
BrowserRouter as Router,
Routes,
Route,
useLocation,
} from "react-router-dom";
import Project from "./pages/project/project";
import SignInSignUp from "./pages/signin/signInUp";
import { useEffect, useState } from "react";
import "./assets/styles/main.scss";
import { ToastContainer } from "react-toastify";
function App() {
const [isSignIn, setIsSignIn] = useState(true);
return (
<div className="App">
<ToastContainer position="bottom-left" />
<Router>
<Routes>
<Route
path="/"
element={
<SignInSignUp isSignIn={isSignIn} setIsSignIn={setIsSignIn} />
}
/>
<Route
path="/signup"
element={
<SignInSignUp isSignIn={isSignIn} setIsSignIn={setIsSignIn} />
}
/>
<Route path="/Project" element={<Project />} />
<Route path="*" element={<h1>No such page</h1>} />
</Routes>
</Router>
</div>
);
}
export default App;

BIN
frontend/src/assets/fonts/inter/inter18ptBlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptBold.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptExtraBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptExtraLight.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptExtraLightItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptLight.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptLightItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptMedium.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptMediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptRegular.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptSemiBold.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptSemiBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptThin.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/inter/inter18ptThinItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsBlack.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsBlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsBold.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsExtraBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsExtraLight.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsExtraLightItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsLight.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsLightItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsMedium.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsMediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsRegular.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsSemiBold.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsSemiBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsThin.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/poppins/poppinsThinItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoBlack.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoBlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoBold.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoLight.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoLightItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoMedium.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoMediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoRegular.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoThin.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/roboto/robotoThinItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/images/3dVector3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

Some files were not shown because too many files have changed in this diff Show More