Skip to content

Commit a090f7f

Browse files
BaalmartBaalmart
authored
Merge pull request #1930 from airqo-platform/report-Gen-system
[Reports] New project starter template (v1)
2 parents 785a36a + adafd9c commit a090f7f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+8812
-0
lines changed

‎Reports/.dockerignore

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Logs
2+
logs
3+
*.log
4+
5+
# Runtime data
6+
pids
7+
*.pid
8+
*.seed
9+
10+
# Node modules and dependencies
11+
node_modules
12+
/.pnp
13+
.pnp.js
14+
15+
# dotenv environment variables file
16+
.env
17+
18+
# Ignore IDE/Editor folders
19+
.idea
20+
.vscode
21+
*.swp

‎Reports/.env.sample

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
VITE_API_BASE_URL=
2+
VITE_API_ACCESS_TOKEN=
3+
VITE_API_AUTHORIZATION_TOKEN=

‎Reports/.eslintrc.cjs

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
],
9+
ignorePatterns: ['dist', '.eslintrc.cjs'],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['react-refresh'],
12+
rules: {
13+
'react-refresh/only-export-components': [
14+
'warn',
15+
{ allowConstantExport: true },
16+
],
17+
},
18+
}

‎Reports/.gitignore

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
# Dependencies
11+
node_modules
12+
13+
# Build
14+
dist
15+
dist-ssr
16+
17+
# Local
18+
*.local
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
.DS_Store
25+
*.suo
26+
*.ntvs*
27+
*.njsproj
28+
*.sln
29+
*.sw?
30+
31+
# OS or Editor files
32+
._*
33+
.Spotlight-V100
34+
.Trashes
35+
ehthumbs.db
36+
Thumbs.db
37+
38+
# Environment variables
39+
.env
40+
.env.local
41+
.env.development
42+
.env.test
43+
.env.production
44+
45+
# Yarn Integrity file
46+
.yarn-integrity
47+
.yarn/cache
48+
49+
# TypeScript
50+
*.tsbuildinfo

‎Reports/.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"tabWidth": 2,
3+
"singleQuote": true,
4+
"trailingComma": "all",
5+
"semi": false
6+
}

‎Reports/.yarn/install-state.gz

848 KB
Binary file not shown.

‎Reports/.yarnrc.yml

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎Reports/Dockerfile

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Node runtime as the base image
2+
FROM node:18.19.1
3+
4+
# Setting the working directory in the container to /app
5+
WORKDIR /app
6+
7+
# Coping package.json and yarn.lock into the root directory of the app
8+
COPY package.json yarn.lock ./
9+
10+
# Installing project dependencies
11+
RUN yarn install --frozen-lockfile
12+
13+
# Copy the rest of the project into the app directory
14+
COPY . .
15+
16+
# Build the app
17+
RUN yarn build
18+
19+
# Exposing the port 5173 for Vite
20+
EXPOSE 5173
21+
22+
# Starting the app
23+
CMD ["yarn", "dev"]

‎Reports/README.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Auto Report Generator
2+
3+
Welcome to the Auto Report Generator project! This application is built using React, TypeScript, and Vite. It provides a streamlined setup to kickstart your development process, including Hot Module Replacement (HMR) for a seamless development experience and a set of basic ESLint rules to ensure code quality.
4+
5+
## Prerequisites
6+
7+
- Node.js version 18.19.1 or higher
8+
- Yarn version 4.1.1
9+
10+
## Plugins
11+
12+
The template currently uses two official plugins:
13+
14+
- @vitejs/plugin-react: This plugin uses Babel for Fast Refresh.
15+
- @vitejs/plugin-react-swc: This plugin uses SWC for Fast Refresh.
16+
17+
## ESLint Configuration
18+
19+
The template comes with a basic ESLint configuration. If you are developing a production application, we recommend expanding the configuration to enable type-aware lint rules. Here's how you can do it:
20+
21+
## Getting Started
22+
23+
To get started with this template, clone the repository and install the dependencies:
24+
25+
git clone <repository-url>
26+
cd <repository-name>
27+
yarn install
28+
29+
Then, you can start the development server:
30+
31+
yarn dev
32+
33+
Open http://localhost:5173 to view your application in the browser. The page will automatically reload if you make changes to the code.

‎Reports/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/images/airqo.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>AQ Report Generator</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎Reports/package.json

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
{
2+
"name": "aq-report-generator",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10+
"preview": "vite preview",
11+
"format": "prettier --write \"src/**/*.js\""
12+
},
13+
"dependencies": {
14+
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
15+
"@react-pdf/renderer": "^3.3.8",
16+
"@reduxjs/toolkit": "^2.2.1",
17+
"@types/file-saver": "^2.0.7",
18+
"@vitejs/plugin-react-refresh": "^1.3.6",
19+
"axios": "^1.6.7",
20+
"buffer": "^6.0.3",
21+
"chart.js": "^4.4.2",
22+
"chartjs-to-image": "^1.2.2",
23+
"dayjs": "^1.11.10",
24+
"file-saver": "^2.0.5",
25+
"flowbite-react": "^0.7.2",
26+
"html-to-image": "^1.11.11",
27+
"jspdf": "^2.5.1",
28+
"react": "^18.2.0",
29+
"react-chartjs-2": "^5.2.0",
30+
"react-dom": "^18.2.0",
31+
"react-loading-skeleton": "^3.4.0",
32+
"react-redux": "^9.1.0",
33+
"react-router-dom": "^6.22.3",
34+
"react-select": "^5.8.0",
35+
"react-spinners": "^0.13.8",
36+
"react-tailwindcss-datepicker": "^1.6.6",
37+
"react-toastify": "^10.0.4",
38+
"redux": "^5.0.1",
39+
"redux-devtools-extension": "^2.13.9",
40+
"redux-persist": "^6.0.0",
41+
"redux-thunk": "^3.1.0"
42+
},
43+
"devDependencies": {
44+
"@types/chart.js": "^2.9.41",
45+
"@types/jspdf": "^2.0.0",
46+
"@types/node": "^20.11.25",
47+
"@types/react": "^18.2.56",
48+
"@types/react-dom": "^18.2.19",
49+
"@types/react-redux": "^7.1.33",
50+
"@types/redux": "^3.6.0",
51+
"@types/redux-thunk": "^2.1.0",
52+
"@typescript-eslint/eslint-plugin": "^7.0.2",
53+
"@typescript-eslint/parser": "^7.0.2",
54+
"@vitejs/plugin-react": "^4.2.1",
55+
"autoprefixer": "^10.4.18",
56+
"eslint": "^8.56.0",
57+
"eslint-plugin-react-hooks": "^4.6.0",
58+
"eslint-plugin-react-refresh": "^0.4.5",
59+
"postcss": "^8.4.35",
60+
"sass": "^1.71.1",
61+
"sass-loader": "^14.1.1",
62+
"tailwindcss": "^3.4.1",
63+
"typescript": "^5.2.2",
64+
"vite": "^5.1.4",
65+
"vite-tsconfig-paths": "^4.3.1"
66+
},
67+
"packageManager": "[email protected]"
68+
}

‎Reports/postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎Reports/public/images/AQI.png

22.8 KB
Loading

‎Reports/public/images/LOGO.jpg

48 KB
Loading

‎Reports/public/images/airqo.png

37.8 KB
Loading

‎Reports/public/images/makerere.png

263 KB
Loading

‎Reports/public/images/templateLogo.png

1.3 MB
Loading

‎Reports/src/App.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { lazy, Suspense } from 'react'
2+
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
3+
import { Provider } from 'react-redux'
4+
import { PersistGate } from 'redux-persist/integration/react'
5+
import { store, persistor } from '@services/redux/store'
6+
import BounceLoader from 'react-spinners/BounceLoader'
7+
8+
// Use React.lazy for code splitting
9+
const Reports = lazy(() => import('./pages/Reports'))
10+
const ReportForm = lazy(() => import('./components/reports'))
11+
const ReportView = lazy(() => import('./components/reports/ReportView'))
12+
const Files = lazy(() => import('./pages/Files'))
13+
const Settings = lazy(() => import('./pages/settings'))
14+
15+
const App = () => {
16+
return (
17+
<Provider store={store}>
18+
<PersistGate loading={null} persistor={persistor}>
19+
<Router>
20+
<Suspense
21+
fallback={
22+
<div className="flex items-center justify-center h-screen">
23+
<BounceLoader color="#006583" />
24+
</div>
25+
}
26+
>
27+
<Routes>
28+
<Route path="/*" element={<Reports />}>
29+
<Route index element={<ReportForm />} />
30+
<Route path="view" element={<ReportView />} />
31+
</Route>
32+
<Route path="files" element={<Files />} />
33+
<Route path="settings" element={<Settings />} />
34+
</Routes>
35+
</Suspense>
36+
</Router>
37+
</PersistGate>
38+
</Provider>
39+
)
40+
}
41+
42+
export default App

‎Reports/src/assets/icons/BackArrow.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
3+
interface BackArrowProps {
4+
width?: number
5+
height?: number
6+
fill?: string
7+
}
8+
9+
const BackArrow: React.FC<BackArrowProps> = ({
10+
width = 24,
11+
height = 24,
12+
fill,
13+
}) => {
14+
return (
15+
<svg
16+
xmlns="http://www.w3.org/2000/svg"
17+
width={width}
18+
height={height}
19+
viewBox="0 0 24 24"
20+
fill={fill || 'none'}
21+
stroke="currentColor"
22+
strokeWidth={2}
23+
strokeLinecap="round"
24+
strokeLinejoin="round"
25+
className="back-icon back-icon-tabler icons-tabler-outline back-icon-tabler-arrow-left"
26+
>
27+
<path d="M0 0h24v24H0z" stroke="none" />
28+
<path d="M5 12h14M5 12l6 6M5 12l6-6" />
29+
</svg>
30+
)
31+
}
32+
33+
export default BackArrow

‎Reports/src/assets/icons/DocIcon.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
3+
interface Props {
4+
width?: number
5+
height?: number
6+
}
7+
8+
const DocIcon: React.FC<Props> = ({ width = 20, height = 20 }) => {
9+
return (
10+
<svg
11+
xmlns="http://www.w3.org/2000/svg"
12+
width={width}
13+
height={height}
14+
viewBox="0 0 24 24"
15+
fill="none"
16+
stroke="currentColor"
17+
strokeWidth={2}
18+
strokeLinecap="round"
19+
strokeLinejoin="round"
20+
className="icon icon-tabler icons-tabler-outline icon-tabler-file-type-docx"
21+
>
22+
<path d="M0 0h24v24H0z" stroke="none" />
23+
<path d="M14 3v4a1 1 0 001 1h4" />
24+
<path d="M5 12V5a2 2 0 012-2h7l5 5v4M2 15v6h1a2 2 0 002-2v-2a2 2 0 00-2-2H2zM17 16.5a1.5 1.5 0 00-3 0v3a1.5 1.5 0 003 0M9.5 15a1.5 1.5 0 011.5 1.5v3a1.5 1.5 0 01-3 0v-3A1.5 1.5 0 019.5 15zM19.5 15l3 6M19.5 21l3-6" />
25+
</svg>
26+
)
27+
}
28+
29+
export default DocIcon

‎Reports/src/assets/icons/DownloadIcon.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react'
2+
3+
interface DownloadIconProps {
4+
width?: number
5+
height?: number
6+
}
7+
8+
const DownloadIcon: React.FC<DownloadIconProps> = ({
9+
width = 24,
10+
height = 24,
11+
}) => {
12+
return (
13+
<svg
14+
xmlns="http://www.w3.org/2000/svg"
15+
width={width}
16+
height={height}
17+
viewBox="0 0 24 24"
18+
fill="none"
19+
stroke="currentColor"
20+
strokeWidth={1.5}
21+
strokeLinecap="round"
22+
strokeLinejoin="round"
23+
className="icon icon-tabler icons-tabler-outline icon-tabler-server-cog"
24+
>
25+
<path d="M8 17l4 4m0 0l4-4m-4 4v-9m8 4.743A5.5 5.5 0 0016.5 7a.62.62 0 01-.534-.302 7.5 7.5 0 10-11.78 9.096" />
26+
</svg>
27+
)
28+
}
29+
30+
export default DownloadIcon

0 commit comments

Comments
 (0)