GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-10-15 10:51:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: in product home page (#7270)

Browse Source 
* feat: base setup for in product home page

* feat: base state

* feat: add empty states for alerts, traces, dashboards, saved views

* feat: add checklist component

* feat: integrate all panels

* feat: integrate preference api and clean up components

* feat: handle done and skip states of the checklist

* feat: update ui

* feat: update ui

* feat: code cleanup

* feat: add events

* feat: support time interval change in services

* feat: add service time change event and cleanup code

* feat: handle light mode

* feat: address review comments

* fix: routing issues

* fix: testcase snapshot, a minor ui improvements

* fix: noopener typo in window.open
This commit is contained in:
Yunus M 2025-03-16 19:41:08 +05:30 committed by GitHub
parent 08309c380c
commit b039dc6fa7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
75 changed files with 8724 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@ -92,6 +92,7 @@
"lodash-es": "^4.17.21",
"lucide-react": "0.379.0",
"mini-css-extract-plugin": "2.4.5",
"motion": "12.4.13",
"overlayscrollbars": "^2.8.1",
"overlayscrollbars-react": "^0.5.6",
"papaparse": "5.4.1",
@ -215,6 +216,7 @@
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-sonarjs": "^0.12.0",
"husky": "^7.0.4",
"image-webpack-loader": "8.1.0",
"is-ci": "^3.0.1",
"jest-styled-components": "^7.0.8",
"lint-staged": "^12.5.0",

34
frontend/public/Icons/beacon.svg Normal file
View File

@ -0,0 +1,34 @@
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.3952 7.11163L7.6041 7.08496C4.25702 7.08496 3.16577 8.44291 3.16577 11.2766V20.7C3.16577 23.0181 3.88586 24.8916 7.60633 24.8916L25.3974 24.9183C28.7379 24.9183 29.838 23.487 29.838 20.7267V11.3033C29.8358 8.18954 28.6534 7.11163 25.3952 7.11163Z" fill="#504F4F"/>
<path d="M25.8508 22.798H23.922C23.062 22.798 22.6221 22.1224 22.6221 21.2647C22.6221 20.4047 23.062 19.7314 23.922 19.7314H25.8508C26.7107 19.7314 27.1507 20.407 27.1507 21.2647C27.1463 22.0624 26.7063 22.798 25.8508 22.798Z" fill="black"/>
<path d="M25.7441 21.7801H24.0108C23.5575 21.7801 23.5686 21.5534 23.5686 21.2646C23.5686 20.9757 23.5575 20.749 24.0108 20.749H25.7441C26.1974 20.749 26.2063 20.9757 26.2063 21.2646C26.204 21.5312 26.1952 21.7801 25.7441 21.7801Z" fill="#8BC34A"/>
<path d="M9.08004 22.798H7.15125C6.2913 22.798 5.85132 22.1224 5.85132 21.2647C5.85132 20.4047 6.2913 19.7314 7.15125 19.7314H9.08004C9.93999 19.7314 10.38 20.407 10.38 21.2647C10.38 22.0624 9.93777 22.798 9.08004 22.798Z" fill="black"/>
<path d="M8.11556 22.1896C8.62609 22.1896 9.03995 21.7757 9.03995 21.2652C9.03995 20.7547 8.62609 20.3408 8.11556 20.3408C7.60503 20.3408 7.19116 20.7547 7.19116 21.2652C7.19116 21.7757 7.60503 22.1896 8.11556 22.1896Z" fill="#F44336"/>
<path d="M20.2592 22.798H18.3305C17.4705 22.798 17.0305 22.1224 17.0305 21.2647C17.0305 20.4047 17.4705 19.7314 18.3305 19.7314H20.2592C21.1192 19.7314 21.5592 20.407 21.5592 21.2647C21.5614 22.0624 21.1192 22.798 20.2592 22.798Z" fill="black"/>
<path d="M18.844 20.3408L20.375 21.2652L18.844 22.1896V20.3408Z" fill="#EEEEEE"/>
<path d="M12.7423 22.798H14.6711C15.5311 22.798 15.971 22.1224 15.971 21.2647C15.971 20.4047 15.5311 19.7314 14.6711 19.7314H12.7423C11.8824 19.7314 11.4424 20.407 11.4424 21.2647C11.4402 22.0624 11.8824 22.798 12.7423 22.798Z" fill="black"/>
<path d="M14.158 20.3408L12.627 21.2652L14.158 22.1896V20.3408Z" fill="#EEEEEE"/>
<path d="M26.6225 16.5808C26.6225 17.0519 26.2514 17.4252 25.778 17.4252H7.21345C6.74228 17.4252 6.3689 17.0541 6.3689 16.5808V11.0944C6.3689 10.6233 6.74005 10.25 7.21345 10.25H25.778C26.2492 10.25 26.6225 10.6211 26.6225 11.0944V16.5808Z" fill="#8DCC47"/>
<path opacity="0.5" d="M11.5296 13.2373L11.1674 13.5995C11.1119 13.655 11.0208 13.655 10.9652 13.5995L10.603 13.2373C10.5741 13.2084 10.5608 13.1728 10.5608 13.135V12.1262C10.5608 12.0884 10.5763 12.0529 10.603 12.024L10.9652 11.6618C11.0208 11.6062 11.1119 11.6062 11.1674 11.6618L11.5296 12.024C11.5585 12.0529 11.5718 12.0884 11.5718 12.1262V13.135C11.5718 13.175 11.5563 13.2106 11.5296 13.2373Z" fill="black"/>
<path opacity="0.5" d="M11.5296 15.6503L11.1674 16.0125C11.1119 16.0681 11.0208 16.0681 10.9652 16.0125L10.603 15.6503C10.5741 15.6215 10.5608 15.5859 10.5608 15.5481V14.5393C10.5608 14.5015 10.5763 14.466 10.603 14.4371L10.9652 14.0749C11.0208 14.0193 11.1119 14.0193 11.1674 14.0749L11.5296 14.4371C11.5585 14.466 11.5718 14.5015 11.5718 14.5393V15.5481C11.5718 15.5881 11.5563 15.6237 11.5296 15.6503Z" fill="black"/>
<path opacity="0.5" d="M13.3873 13.2373L13.0251 13.5995C12.9695 13.655 12.8784 13.655 12.8229 13.5995L12.4607 13.2373C12.4318 13.2084 12.4185 13.1728 12.4185 13.135V12.1262C12.4185 12.0884 12.434 12.0529 12.4607 12.024L12.8229 11.6618C12.8784 11.6062 12.9695 11.6062 13.0251 11.6618L13.3873 12.024C13.4162 12.0529 13.4295 12.0884 13.4295 12.1262V13.135C13.4295 13.175 13.414 13.2106 13.3873 13.2373Z" fill="black"/>
<path opacity="0.5" d="M16.0323 13.2373L15.6701 13.5995C15.6146 13.655 15.5235 13.655 15.4679 13.5995L15.1057 13.2373C15.0768 13.2084 15.0635 13.1728 15.0635 13.135V12.1262C15.0635 12.0884 15.079 12.0529 15.1057 12.024L15.4679 11.6618C15.5235 11.6062 15.6146 11.6062 15.6701 11.6618L16.0323 12.024C16.0612 12.0529 16.0745 12.0884 16.0745 12.1262V13.135C16.0745 13.175 16.059 13.2106 16.0323 13.2373Z" fill="black"/>
<path opacity="0.5" d="M16.0323 15.6503L15.6701 16.0125C15.6146 16.0681 15.5235 16.0681 15.4679 16.0125L15.1057 15.6503C15.0768 15.6215 15.0635 15.5859 15.0635 15.5481V14.5393C15.0635 14.5015 15.079 14.466 15.1057 14.4371L15.4679 14.0749C15.5235 14.0193 15.6146 14.0193 15.6701 14.0749L16.0323 14.4371C16.0612 14.466 16.0745 14.5015 16.0745 14.5393V15.5481C16.0745 15.5881 16.059 15.6237 16.0323 15.6503Z" fill="black"/>
<path opacity="0.5" d="M13.6409 11.8868L13.2787 11.5246C13.2232 11.4691 13.2232 11.3779 13.2787 11.3224L13.6409 10.9602C13.6698 10.9313 13.7054 10.918 13.7431 10.918H14.7542C14.792 10.918 14.8275 10.9335 14.8564 10.9602L15.2186 11.3224C15.2742 11.3779 15.2742 11.4691 15.2186 11.5246L14.8564 11.8868C14.8275 11.9157 14.792 11.929 14.7542 11.929H13.7431C13.7031 11.929 13.6676 11.9135 13.6409 11.8868Z" fill="black"/>
<path opacity="0.5" d="M13.6409 14.3018L13.2787 13.9396C13.2232 13.8841 13.2232 13.793 13.2787 13.7374L13.6409 13.3752C13.6698 13.3463 13.7054 13.333 13.7431 13.333H14.7542C14.792 13.333 14.8275 13.3486 14.8564 13.3752L15.2186 13.7374C15.2742 13.793 15.2742 13.8841 15.2186 13.9396L14.8564 14.3018C14.8275 14.3307 14.792 14.3441 14.7542 14.3441H13.7431C13.7031 14.3441 13.6676 14.3285 13.6409 14.3018Z" fill="black"/>
<path opacity="0.5" d="M13.6409 16.7149L13.2787 16.3527C13.2232 16.2972 13.2232 16.2061 13.2787 16.1505L13.6409 15.7883C13.6698 15.7594 13.7054 15.7461 13.7431 15.7461H14.7542C14.792 15.7461 14.8275 15.7616 14.8564 15.7883L15.2186 16.1505C15.2742 16.2061 15.2742 16.2972 15.2186 16.3527L14.8564 16.7149C14.8275 16.7438 14.792 16.7572 14.7542 16.7572H13.7431C13.7031 16.7572 13.6676 16.7416 13.6409 16.7149Z" fill="black"/>
<path opacity="0.5" d="M17.8902 13.2373L17.528 13.5995C17.4725 13.655 17.3814 13.655 17.3258 13.5995L16.9636 13.2373C16.9347 13.2084 16.9214 13.1728 16.9214 13.135V12.1262C16.9214 12.0884 16.9369 12.0529 16.9636 12.024L17.3258 11.6618C17.3814 11.6062 17.4725 11.6062 17.528 11.6618L17.8902 12.024C17.9191 12.0529 17.9324 12.0884 17.9324 12.1262V13.135C17.9324 13.175 17.9169 13.2106 17.8902 13.2373Z" fill="black"/>
<path opacity="0.5" d="M20.5374 13.2373L20.1752 13.5995C20.1197 13.655 20.0286 13.655 19.973 13.5995L19.6108 13.2373C19.5819 13.2084 19.5686 13.1728 19.5686 13.135V12.1262C19.5686 12.0884 19.5842 12.0529 19.6108 12.024L19.973 11.6618C20.0286 11.6062 20.1197 11.6062 20.1752 11.6618L20.5374 12.024C20.5663 12.0529 20.5797 12.0884 20.5797 12.1262V13.135C20.5774 13.175 20.5619 13.2106 20.5374 13.2373Z" fill="black"/>
<path opacity="0.5" d="M20.5374 15.6503L20.1752 16.0125C20.1197 16.0681 20.0286 16.0681 19.973 16.0125L19.6108 15.6503C19.5819 15.6215 19.5686 15.5859 19.5686 15.5481V14.5393C19.5686 14.5015 19.5842 14.466 19.6108 14.4371L19.973 14.0749C20.0286 14.0193 20.1197 14.0193 20.1752 14.0749L20.5374 14.4371C20.5663 14.466 20.5797 14.5015 20.5797 14.5393V15.5481C20.5774 15.5881 20.5619 15.6237 20.5374 15.6503Z" fill="black"/>
<path opacity="0.5" d="M18.1434 11.8868L17.7812 11.5246C17.7256 11.4691 17.7256 11.3779 17.7812 11.3224L18.1434 10.9602C18.1723 10.9313 18.2078 10.918 18.2456 10.918H19.2566C19.2944 10.918 19.33 10.9335 19.3589 10.9602L19.7211 11.3224C19.7766 11.3779 19.7766 11.4691 19.7211 11.5246L19.3589 11.8868C19.33 11.9157 19.2944 11.929 19.2566 11.929H18.2456C18.2056 11.929 18.17 11.9135 18.1434 11.8868Z" fill="black"/>
<path opacity="0.5" d="M18.1434 14.3018L17.7812 13.9396C17.7256 13.8841 17.7256 13.793 17.7812 13.7374L18.1434 13.3752C18.1723 13.3463 18.2078 13.333 18.2456 13.333H19.2566C19.2944 13.333 19.33 13.3486 19.3589 13.3752L19.7211 13.7374C19.7766 13.793 19.7766 13.8841 19.7211 13.9396L19.3589 14.3018C19.33 14.3307 19.2944 14.3441 19.2566 14.3441H18.2456C18.2056 14.3441 18.17 14.3285 18.1434 14.3018Z" fill="black"/>
<path opacity="0.5" d="M18.1434 16.7149L17.7812 16.3527C17.7256 16.2972 17.7256 16.2061 17.7812 16.1505L18.1434 15.7883C18.1723 15.7594 18.2078 15.7461 18.2456 15.7461H19.2566C19.2944 15.7461 19.33 15.7616 19.3589 15.7883L19.7211 16.1505C19.7766 16.2061 19.7766 16.2972 19.7211 16.3527L19.3589 16.7149C19.33 16.7438 19.2944 16.7572 19.2566 16.7572H18.2456C18.2056 16.7572 18.17 16.7416 18.1434 16.7149Z" fill="black"/>
<path opacity="0.5" d="M22.3951 13.2373L22.0329 13.5995C21.9774 13.655 21.8862 13.655 21.8307 13.5995L21.4685 13.2373C21.4396 13.2084 21.4263 13.1728 21.4263 13.135V12.1262C21.4263 12.0884 21.4418 12.0529 21.4685 12.024L21.8307 11.6618C21.8862 11.6062 21.9774 11.6062 22.0329 11.6618L22.3951 12.024C22.424 12.0529 22.4373 12.0884 22.4373 12.1262V13.135C22.4351 13.175 22.4195 13.2106 22.3951 13.2373Z" fill="black"/>
<path opacity="0.5" d="M25.0379 13.2373L24.6757 13.5995C24.6202 13.655 24.5291 13.655 24.4735 13.5995L24.1113 13.2373C24.0824 13.2084 24.0691 13.1728 24.0691 13.135V12.1262C24.0691 12.0884 24.0846 12.0529 24.1113 12.024L24.4735 11.6618C24.5291 11.6062 24.6202 11.6062 24.6757 11.6618L25.0379 12.024C25.0668 12.0529 25.0801 12.0884 25.0801 12.1262V13.135C25.0824 13.175 25.0668 13.2106 25.0379 13.2373Z" fill="black"/>
<path opacity="0.5" d="M22.3951 15.6503L22.0329 16.0125C21.9774 16.0681 21.8862 16.0681 21.8307 16.0125L21.4685 15.6503C21.4396 15.6215 21.4263 15.5859 21.4263 15.5481V14.5393C21.4263 14.5015 21.4418 14.466 21.4685 14.4371L21.8307 14.0749C21.8862 14.0193 21.9774 14.0193 22.0329 14.0749L22.3951 14.4371C22.424 14.466 22.4373 14.5015 22.4373 14.5393V15.5481C22.4351 15.5881 22.4195 15.6237 22.3951 15.6503Z" fill="black"/>
<path opacity="0.5" d="M25.0379 15.6503L24.6757 16.0125C24.6202 16.0681 24.5291 16.0681 24.4735 16.0125L24.1113 15.6503C24.0824 15.6215 24.0691 15.5859 24.0691 15.5481V14.5393C24.0691 14.5015 24.0846 14.466 24.1113 14.4371L24.4735 14.0749C24.5291 14.0193 24.6202 14.0193 24.6757 14.0749L25.0379 14.4371C25.0668 14.466 25.0801 14.5015 25.0801 14.5393V15.5481C25.0824 15.5881 25.0668 15.6237 25.0379 15.6503Z" fill="black"/>
<path opacity="0.5" d="M22.6487 11.8868L22.2865 11.5246C22.231 11.4691 22.231 11.3779 22.2865 11.3224L22.6487 10.9602C22.6776 10.9313 22.7132 10.918 22.751 10.918H23.762C23.7998 10.918 23.8353 10.9335 23.8642 10.9602L24.2264 11.3224C24.282 11.3779 24.282 11.4691 24.2264 11.5246L23.8642 11.8868C23.8353 11.9157 23.7998 11.929 23.762 11.929H22.751C22.711 11.929 22.6732 11.9135 22.6487 11.8868Z" fill="black"/>
<path opacity="0.5" d="M22.6487 14.3018L22.2865 13.9396C22.231 13.8841 22.231 13.793 22.2865 13.7374L22.6487 13.3752C22.6776 13.3463 22.7132 13.333 22.751 13.333H23.762C23.7998 13.333 23.8353 13.3486 23.8642 13.3752L24.2264 13.7374C24.282 13.793 24.282 13.8841 24.2264 13.9396L23.8642 14.3018C23.8353 14.3307 23.7998 14.3441 23.762 14.3441H22.751C22.711 14.3441 22.6732 14.3285 22.6487 14.3018Z" fill="black"/>
<path opacity="0.5" d="M22.6487 16.7149L22.2865 16.3527C22.231 16.2972 22.231 16.2061 22.2865 16.1505L22.6487 15.7883C22.6776 15.7594 22.7132 15.7461 22.751 15.7461H23.762C23.7998 15.7461 23.8353 15.7616 23.8642 15.7883L24.2264 16.1505C24.282 16.2061 24.282 16.2972 24.2264 16.3527L23.8642 16.7149C23.8353 16.7438 23.7998 16.7572 23.762 16.7572H22.751C22.711 16.7572 22.6732 16.7416 22.6487 16.7149Z" fill="black"/>
<path d="M25.7801 10.2509C26.2513 10.2509 26.6247 10.622 26.6247 11.0954V16.5805C26.6247 17.0517 26.2535 17.4251 25.7801 17.4251H7.21336C6.74219 17.4251 6.36881 17.0539 6.36881 16.5805V11.0954C6.36881 10.6242 6.73997 10.2509 7.21336 10.2509H25.7801ZM25.7801 9.09961H7.21336C6.111 9.09961 5.21533 9.99528 5.21533 11.0976V16.5828C5.21533 17.6851 6.111 18.5808 7.21336 18.5808H25.7779C26.8803 18.5808 27.7759 17.6851 27.7759 16.5828V11.0954C27.7759 9.99528 26.8803 9.09961 25.7801 9.09961Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

26
frontend/public/Icons/circus-tent.svg Normal file
View File

@ -0,0 +1,26 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.9732 10.1476L7.56209 10.0176L6.95337 15.8623C6.95337 15.8623 7.88832 15.7973 9.12575 15.7973C10.3632 15.7973 11.4069 15.8848 11.4069 15.8848L10.9732 10.1476Z" fill="#8A2E08"/>
<path d="M4.11226 10.9648L3.27731 10.791C3.27731 10.791 3.07232 12.1147 2.88358 12.9347C2.69484 13.7546 2.3811 14.8633 2.3811 14.8633L4.366 15.8495C4.366 15.8495 6.16215 16.007 6.1934 15.9445C6.22465 15.882 7.54833 12.8084 7.54833 12.8084L7.86331 11.626L4.11226 10.9648Z" fill="#FF6110"/>
<path d="M10.3207 11.6103L14.4805 10.7441L14.6692 11.2479C14.6692 11.2479 14.9429 12.3928 15.0942 13.0128C15.3379 14.0077 15.6516 14.8989 15.6516 14.8989L13.7855 16.0539L11.8631 15.9914L10.3207 11.6103Z" fill="#FF6110"/>
<path d="M3.26727 10.2969C3.26727 10.3256 3.28727 10.5344 3.27727 10.6869C3.26727 10.8393 3.23853 11.0268 3.23853 11.0268C3.23853 11.0268 3.35227 11.0518 3.45726 11.1193C3.56226 11.1868 3.77225 11.4443 3.77225 11.4443C3.77225 11.4443 4.18223 11.2931 4.43096 11.3868C4.81344 11.5306 4.97593 11.8843 4.97593 11.8843C4.97593 11.8843 5.36716 11.5206 5.84589 11.5981C6.31336 11.6731 6.49585 12.1143 6.49585 12.1143C6.49585 12.1143 6.84709 11.8305 7.15457 11.8468C7.5183 11.8655 7.65204 12.133 7.65204 12.133L8.19701 11.0343L4.14598 10.2981H3.26727V10.2969Z" fill="#AF0D03"/>
<path d="M2.17737 15.3802L2.39736 14.7977C2.39736 14.7977 3.37231 15.2752 4.07852 15.4852C4.78473 15.6952 5.61719 15.7239 5.61719 15.7239C5.61719 15.7239 5.60719 15.3939 5.30095 15.1552C4.99472 14.9164 4.50975 14.5152 4.50975 14.5152L5.17221 14.294L5.54094 14.1465L6.69713 15.5227L6.32465 16.4501C6.32465 16.4501 5.51219 16.5551 4.21351 16.2214C2.91483 15.8876 2.17737 15.3802 2.17737 15.3802Z" fill="#C9C9C9"/>
<path d="M10.2419 10.8418C10.2607 10.918 10.2519 11.5205 10.2519 11.5205L10.6057 11.9217C10.6057 11.9217 10.7969 11.673 11.2369 11.693C11.6769 11.7117 11.8769 11.913 11.8769 11.913C11.8769 11.913 12.1443 11.588 12.5081 11.5218C12.8718 11.4543 13.2243 11.6455 13.2243 11.6455C13.2243 11.6455 13.473 11.1868 13.8355 11.0818C14.1992 10.9768 14.6692 11.2493 14.6692 11.2493L14.4755 10.0693L10.9119 10.3256L10.2419 10.8418Z" fill="#AF0D03"/>
<path d="M15.613 14.7792L15.8417 15.3617C15.8417 15.3617 15.1443 15.9067 14.2456 16.1554C13.3468 16.4041 12.0969 16.5041 12.0969 16.5041L11.7319 14.4555L12.9644 14.083L13.6406 14.3717C13.6406 14.3717 13.0419 14.8755 12.8781 15.1067C12.5669 15.5442 12.6781 15.8217 12.6781 15.8217C12.6781 15.8217 13.6331 15.7354 14.3693 15.4204C15.1068 15.103 15.613 14.7792 15.613 14.7792Z" fill="#C9C9C9"/>
<path d="M4.97729 14.5015C4.97729 14.5015 5.40102 14.6915 5.61726 14.8452C5.88475 15.0365 6.15223 15.3227 6.23848 15.7814C6.29848 16.0977 6.32472 16.4502 6.32472 16.4502C6.32472 16.4502 6.62096 16.6789 7.20343 15.7052C7.7859 14.7315 8.08213 13.3828 8.13088 12.4279C8.17838 11.4729 8.15963 11.2529 8.15963 11.2529L7.29967 12.6666L6.02849 13.8228L4.97729 14.5015Z" fill="#D92F0A"/>
<path d="M8.16709 11.2578C8.16709 11.2578 8.26708 12.1253 7.0984 13.2015C6.37218 13.8702 5.66347 14.3302 5.1785 14.5202C5.01226 14.5852 4.86351 14.5589 4.75852 14.5577C4.41604 14.5527 4.47978 14.4939 4.67102 14.3964C4.89601 14.2814 5.54973 14.0427 6.77341 12.9152C7.75211 12.0128 7.81961 11.1103 7.81961 11.1103L8.16584 10.9229V11.2578H8.16709Z" fill="#FFFEFF"/>
<path d="M12.1444 16.4997C12.1444 16.4997 11.7144 16.6522 11.0644 15.7735C10.4145 14.8948 10.2145 13.3374 10.1857 12.8399C10.157 12.3425 10.167 11.4062 10.167 11.4062L11.3619 12.9062C11.3619 12.9062 13.2156 14.3011 13.1868 14.3111C13.1581 14.3211 12.5818 14.6836 12.3656 15.0473C11.9244 15.7823 12.1444 16.4997 12.1444 16.4997Z" fill="#D92F0A"/>
<path d="M10.1007 10.9924C10.1007 10.9924 10.0832 11.3199 10.147 11.5686C10.2807 12.0936 10.7419 12.661 11.3419 13.1935C12.1156 13.881 13.0143 14.3597 13.0806 14.3785C13.148 14.3972 13.6255 14.4172 13.6343 14.3685C13.638 14.3522 13.6668 14.281 13.5105 14.1672C13.1893 13.936 12.4781 13.5285 11.8956 13.0685C11.4844 12.7435 10.9569 12.3398 10.4982 11.5074C10.4144 11.3561 10.4444 10.9736 10.4444 10.9736L10.1007 10.9924Z" fill="white"/>
<path d="M3.74602 8.15983C3.74602 8.15983 2.75107 8.28982 2.71982 8.43107C2.68857 8.57356 2.79857 10.451 2.79857 10.451C2.79857 10.451 3.2173 10.3735 3.42853 10.4197C3.63977 10.466 4.03725 10.7234 4.03725 10.7234L4.70347 10.3135L5.18344 10.9797C5.18344 10.9797 5.52217 10.8047 5.9909 10.8509C6.45962 10.8972 6.77461 11.2134 6.77461 11.2134L7.42957 10.6747L8.16078 11.2497C8.16078 11.2497 8.49452 10.8609 9.11448 10.8497C9.73445 10.8384 10.1094 11.2947 10.1094 11.2947L10.9281 10.581L11.7356 11.2009C11.7356 11.2009 12.0518 10.9434 12.4143 10.8622C12.7768 10.7797 13.0455 10.9209 13.0455 10.9209L13.5605 10.0085L14.1455 10.4297C14.1455 10.4297 14.333 10.2072 14.6017 10.1722C14.8704 10.1372 15.1979 10.126 15.1979 10.126C15.1979 10.126 15.1742 8.86229 15.1742 8.6748C15.1742 8.48731 15.1042 8.18358 15.0217 8.12483C14.9392 8.06608 14.203 7.90234 14.203 7.90234L3.74602 8.15983Z" fill="#D92F0A"/>
<path d="M5.06221 8.70605L4.08601 8.93229L4.03601 10.7247C4.03601 10.7247 4.33349 10.6385 4.63098 10.6697C4.92846 10.7009 5.1822 10.9822 5.1822 10.9822C5.1822 10.9822 5.17595 9.81725 5.18595 9.62101C5.19595 9.42477 5.2722 9.05229 5.31344 8.98104C5.35469 8.90854 5.06221 8.70605 5.06221 8.70605Z" fill="#E1E1E1"/>
<path d="M7.63203 9.08691L6.74083 9.41315C6.74083 9.41315 6.71708 10.2381 6.73833 10.5668C6.75833 10.8956 6.77333 11.2156 6.77333 11.2156C6.77333 11.2156 7.17956 11.0806 7.50954 11.1006C7.83827 11.1206 8.1595 11.2518 8.1595 11.2518L8.147 9.48689L7.63203 9.08691Z" fill="#E1E1E1"/>
<path d="M10.0795 9.45727C10.0795 9.45727 10.1107 10.126 10.1207 10.4647C10.1307 10.8034 10.1082 11.2984 10.1082 11.2984C10.1082 11.2984 10.5932 11.0509 10.9744 11.0197C11.3544 10.9884 11.7344 11.2047 11.7344 11.2047C11.7344 11.2047 11.7044 10.506 11.6631 9.99224C11.6344 9.63351 11.5294 9.32353 11.5294 9.32353L10.5532 8.7998L10.0795 9.45727Z" fill="#E1E1E1"/>
<path d="M13.0443 10.9232C13.0443 10.9232 13.3681 10.567 13.6255 10.4845C13.883 10.402 14.1443 10.432 14.1443 10.432C14.1443 10.432 14.1293 9.59078 14.088 9.20955C14.0468 8.82957 14.0093 8.61083 14.0093 8.61083L12.8143 8.09961L12.8481 9.03956C12.8481 9.03956 12.9893 9.35329 13.0306 9.89826C13.0706 10.4432 13.0443 10.9232 13.0443 10.9232Z" fill="#E1E1E1"/>
<path d="M9.05208 4.72754L7.60965 5.37001C7.60965 5.37001 6.29847 6.3537 5.26103 7.00992C4.22358 7.66613 3.62736 7.91612 3.50362 7.96737C3.30613 8.04986 2.98615 8.14736 2.8474 8.24235C2.61742 8.40234 2.71366 8.47734 2.75116 8.48984C2.78866 8.50234 3.9361 9.01606 5.96974 9.3173C8.00338 9.61853 10.7682 9.49604 12.1857 9.22105C13.6018 8.94607 15.0218 8.12611 15.0218 8.12611C15.0218 8.12611 14.903 7.92737 14.1168 7.58614C13.3294 7.24491 12.6606 6.87743 11.5194 6.12997C10.3783 5.3825 10.1033 5.01502 10.1033 5.01502L9.05208 4.72754Z" fill="#FF6110"/>
<path d="M7.83206 5.63281C7.83206 5.63281 6.24465 7.25898 4.28975 8.61016C4.07601 8.75765 4.08601 8.93264 4.08601 8.93264C4.08601 8.93264 4.2435 8.99264 4.63098 9.08263C5.02471 9.17388 5.25095 9.19637 5.25095 9.19637C5.25095 9.19637 5.42969 8.99138 5.81092 8.61016C6.49338 7.92769 6.91711 7.38647 7.45083 6.69526C7.80456 6.23653 8.22579 5.68656 8.22579 5.68656L7.83206 5.63281Z" fill="white"/>
<path d="M8.5145 5.84187C8.5145 5.84187 7.93703 7.1793 7.66205 7.75677C7.53205 8.02801 7.24207 8.53048 6.97958 8.95046C6.75084 9.31669 6.74084 9.41419 6.74084 9.41419C6.74084 9.41419 7.25457 9.48793 7.5033 9.48793C7.75204 9.48793 8.14577 9.48543 8.14577 9.48543C8.14577 9.48543 8.34326 8.89671 8.55325 7.71678C8.67574 7.03056 8.85448 5.82812 8.85448 5.82812L8.5145 5.84187Z" fill="white"/>
<path d="M9.31445 5.89503C9.31445 5.89503 9.44445 7.18371 9.58944 7.86242C9.78568 8.78113 10.0782 9.45609 10.0782 9.45609C10.0782 9.45609 10.5731 9.43609 10.8481 9.40984C11.1231 9.38359 11.5268 9.32235 11.5268 9.32235C11.5268 9.32235 11.0544 8.59489 10.5981 7.86242C10.2969 7.37745 9.73193 6.24876 9.64069 5.81628C9.56319 5.4438 9.31445 5.89503 9.31445 5.89503Z" fill="white"/>
<path d="M10.022 5.65878C10.022 5.69753 10.437 6.58248 11.4644 7.69242C12.2906 8.58488 12.8418 9.0436 12.8418 9.0436C12.8418 9.0436 13.313 8.89861 13.5243 8.82111C13.773 8.72987 14.0093 8.61113 14.0093 8.61113C14.0093 8.61113 12.8943 7.83742 12.2381 7.29994C11.5819 6.76247 10.6769 6.01501 10.4282 5.67378C10.1795 5.3313 10.022 5.65878 10.022 5.65878Z" fill="white"/>
<path d="M9.03832 3.83621C8.76209 3.85621 8.67084 4.32119 8.5271 4.46618C8.38336 4.60992 7.6084 5.37113 7.6084 5.37113C7.6084 5.37113 7.74589 6.08985 9.11082 6.0761C10.3595 6.06235 10.597 5.47113 10.597 5.47113C10.597 5.47113 9.79953 4.62367 9.61579 4.41368C9.43205 4.20244 9.4058 3.80997 9.03832 3.83621Z" fill="#D92F0A"/>
<path d="M9.08454 3.22829C9.08454 3.22829 9.32078 3.15329 9.65701 3.19204C9.99949 3.23204 10.227 3.34328 10.5832 3.33578C11.1282 3.32578 11.5669 3.06955 11.7244 2.92455C11.8819 2.77956 12.0831 2.54457 11.9781 2.46583C11.8731 2.38708 11.4257 2.50583 10.9257 2.30834C10.4845 2.1346 10.2632 1.68087 9.63701 1.60837C9.09829 1.54713 8.9408 1.76837 8.9408 1.76837L9.08454 3.22829Z" fill="#FF6110"/>
<path d="M8.87451 1.61133V4.06995L9.26824 3.96495L9.22949 1.61133H8.87451Z" fill="#D92F0A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

44
frontend/public/Icons/container-plus.svg Normal file
View File

@ -0,0 +1,44 @@
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.5 8H11.5"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10 6.5V9.5"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11 4.99995V3.99995C10.9998 3.82459 10.9535 3.65236 10.8658 3.50053C10.778 3.34871 10.6519 3.22263 10.5 3.13495L7 1.13495C6.84798 1.04718 6.67554 1.00098 6.5 1.00098C6.32446 1.00098 6.15202 1.04718 6 1.13495L2.5 3.13495C2.34813 3.22263 2.22199 3.34871 2.13423 3.50053C2.04647 3.65236 2.00018 3.82459 2 3.99995V7.99995C2.00018 8.17531 2.04647 8.34755 2.13423 8.49937C2.22199 8.65119 2.34813 8.77727 2.5 8.86495L6 10.865C6.15202 10.9527 6.32446 10.9989 6.5 10.9989C6.67554 10.9989 6.84798 10.9527 7 10.865L8 10.295"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.25 2.13477L8.75 4.70977"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2.14502 3.5L6.50002 6L10.855 3.5"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6.5 11V6"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

52
frontend/public/Icons/cracker.svg Normal file
View File

@ -0,0 +1,52 @@
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.26714 3.8662C7.49161 3.74063 8.10058 3.44726 9.35185 4.41405C10.6031 5.38083 10.3231 6.16538 10.1819 6.36985C10.0164 6.61099 8.97291 7.45221 8.97291 7.45221L3.20108 14.5809C3.20108 14.5809 2.76991 14.5286 2.19206 14.1286C1.56865 13.6974 1.06748 12.7095 1.4453 11.9939C1.65755 11.5927 6.10588 5.38972 6.95488 4.2118C7.03156 4.10623 7.10601 3.95621 7.26714 3.8662Z"
fill="#FE180A"
/>
<path
d="M8.02849 7.3418L3.06787 14.5516C3.06787 14.5516 3.47348 14.6861 3.80018 14.6727C4.2558 14.6549 4.49805 14.4571 4.49805 14.4571L9.24642 7.60072L8.02849 7.3418Z"
fill="#CA1837"
/>
<path
d="M1.84641 11.3867L1.57087 11.7978C1.57087 11.7978 1.51976 12.3256 2.17861 12.9911C2.42416 13.2388 2.6797 13.4199 2.9008 13.5533C3.26856 13.7755 3.54299 13.8599 3.54299 13.8599L3.73853 13.5866C3.73853 13.5866 3.4841 13.4988 3.21078 13.3311C2.91857 13.1511 2.5997 12.8833 2.38971 12.6478C1.76641 11.9467 1.84641 11.3867 1.84641 11.3867Z"
fill="#FDB900"
/>
<path
d="M5.03675 13.6786L4.8112 14.0052C4.8112 14.0052 4.529 14.0408 4.12124 14.0019C3.87125 13.9785 3.54016 13.8597 3.54016 13.8597L3.73015 13.583C3.73015 13.583 3.95458 13.673 4.30568 13.7086C4.65677 13.7441 5.03675 13.6786 5.03675 13.6786Z"
fill="#DF7D15"
/>
<path
d="M7.47943 4.15898C7.19722 4.42564 7.35055 5.08227 8.25828 5.69446C9.19267 6.32554 9.8082 6.23554 9.98708 5.99111C10.1748 5.73335 9.74265 5.04227 9.14157 4.59674C8.51049 4.12899 7.78608 3.869 7.47943 4.15898Z"
fill="#A42615"
/>
<path
d="M6.10048 5.39899C6.10048 5.39899 5.99493 5.85008 6.72933 6.58449C7.09709 6.95224 7.35708 7.14001 7.5704 7.26556C7.78705 7.39222 7.94593 7.45889 7.94593 7.45889L8.59146 7.23667L8.62812 6.45783C8.62812 6.45783 7.90705 6.08785 7.42596 5.54565C6.80266 4.84235 6.91377 4.44793 6.94377 4.22461C6.83599 4.35571 6.10048 5.39899 6.10048 5.39899Z"
fill="#FDB700"
/>
<path
d="M9.98728 6.57724L9.18066 7.69941C9.18066 7.69941 9.044 7.79051 8.55958 7.67608C8.2707 7.60719 7.94739 7.45942 7.94739 7.45942L8.62957 6.45947C8.62957 6.45947 9.034 6.64502 9.35954 6.67279C9.67285 6.69835 9.98728 6.57724 9.98728 6.57724Z"
fill="#DE7F14"
/>
<path
d="M8.40293 4.97806C8.3796 5.1025 8.47404 5.24583 8.63514 5.34582C8.79513 5.44693 8.99735 5.3636 9.00957 5.27471C9.02179 5.18583 9.07067 4.23477 9.4551 4.1881C9.84174 4.14033 10.0195 4.92473 10.7684 5.12694C11.3061 5.27138 11.475 5.1325 11.475 5.1325L11.4039 4.70474C11.4039 4.70474 11.1795 4.84696 10.7328 4.59808C10.2639 4.33699 10.0495 3.61147 9.37288 3.67702C8.67181 3.74479 8.5707 4.52698 8.52293 4.66363C8.47404 4.79918 8.41071 4.93584 8.40293 4.97806Z"
fill="#D8A26D"
/>
<path
d="M9.93205 2.54571C9.98539 2.6535 11.2544 4.66376 11.2544 4.66376C11.2544 4.66376 11.2633 7.23741 11.2633 7.32743C11.2633 7.48856 11.3711 7.55079 11.4956 7.39855C11.5645 7.31409 12.5679 5.64721 12.5679 5.64721C12.5679 5.64721 14.2659 6.34397 14.3915 6.40731C14.5171 6.46954 14.5882 6.38953 14.5171 6.23729C14.4459 6.08505 13.328 4.08368 13.328 4.08368C13.328 4.08368 14.4182 2.52904 14.4804 2.40347C14.5426 2.2779 14.4537 2.19789 14.337 2.25123C14.2204 2.30457 12.8713 2.97466 12.8713 2.97466C12.8713 2.97466 12.379 1.55003 12.3435 1.46447C12.2812 1.31223 12.1823 1.28556 12.1379 1.47336C12.0934 1.66116 11.6467 3.2158 11.6467 3.2158C11.6467 3.2158 10.2165 2.46459 10.0921 2.41125C9.96761 2.35791 9.87871 2.43903 9.93205 2.54571Z"
fill="#FD8E02"
/>
<path
d="M10.9332 3.33275L11.7021 4.44936L11.6843 6.2726L12.3809 5.03044L13.6764 5.70041L12.7831 4.20826L13.3553 3.27942C13.3553 3.27942 12.6231 3.69051 12.6043 3.64607C12.5854 3.60163 12.282 2.68945 12.282 2.68945L11.9787 3.75273L10.9332 3.33275Z"
fill="#FFE268"
/>
<path
d="M11.2556 5.19045L11.2534 4.7427C11.2534 4.7427 11.5212 4.70381 11.7712 4.44272C11.9889 4.21384 12.1523 3.90719 12.3411 4.17495C12.4834 4.37716 12.1689 4.73159 11.9134 4.91714C11.5223 5.20379 11.2556 5.19045 11.2556 5.19045Z"
fill="#FCBA03"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

138
frontend/public/Icons/dashboard.svg Normal file
View File

@ -0,0 +1,138 @@
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.519 14.6685H1.48179C1.39956 14.6685 1.33289 14.6018 1.33289 14.5196V1.4824C1.33289 1.40017 1.39956 1.3335 1.48179 1.3335H14.519C14.6012 1.3335 14.6679 1.40017 14.6679 1.4824V14.5196C14.6679 14.6018 14.6012 14.6685 14.519 14.6685Z"
fill="#F2A600"
/>
<path
d="M12.7488 3.25146H3.25098V12.7493H12.7488V3.25146Z"
fill="white"
/>
<path
opacity="0.5"
d="M14.519 1.3335H1.48179C1.44067 1.3335 1.404 1.35016 1.37622 1.37683L3.2509 3.25117H12.7488L14.6234 1.37683C14.5968 1.35016 14.5601 1.3335 14.519 1.3335Z"
fill="#D1762C"
/>
<path
d="M3.25056 3.25163L1.37622 1.37695C1.34955 1.40473 1.33289 1.44141 1.33289 1.48252V14.5197C1.33289 14.5608 1.34955 14.5986 1.37622 14.6253L3.25056 12.7506V3.25163Z"
fill="#DE7340"
/>
<path
d="M13.6122 2.38892V13.6126H2.38855V2.38892H13.6122ZM14.2789 1.72217H1.7218V14.2793H14.2789V1.72217Z"
fill="#FFCD40"
/>
<path
d="M2.38843 13.6126V2.38892L1.7218 1.72217V14.2793L2.38843 13.6126Z"
fill="#A65F3E"
/>
<path
d="M13.6044 2.3888L14.2711 1.72217H1.7218L2.38855 2.3888H13.6044Z"
fill="#D1762C"
/>
<path
d="M13.8346 13.8346H2.16644V2.1665H13.8346V13.8346ZM2.38869 13.6124H13.6123V2.38875H2.38869V13.6124Z"
fill="#D1762C"
/>
<path
d="M2.38865 13.6124V2.38875L2.16644 2.1665V13.8346L2.38865 13.6124Z"
fill="#824A34"
/>
<path
d="M13.6123 2.38871L13.8346 2.1665H2.16644L2.38869 2.38871H13.6123Z"
fill="#A65F3E"
/>
<path
d="M12.0566 3.94482H3.94446V12.057H12.0566V3.94482Z"
fill="url(#paint0_linear_2447_4817)"
/>
<path
d="M12.0561 7.84766C11.8117 7.91765 11.5972 8.08431 11.4672 8.30319C11.4472 8.33763 11.4295 8.37652 11.3939 8.39763C11.2795 8.43985 11.1484 8.44874 11.0595 8.54873C11.0217 8.31319 10.7362 8.18208 10.5173 8.25541C10.3317 8.30208 10.2395 8.49762 10.2228 8.67539C10.0273 8.61762 9.81176 8.76761 9.79843 8.97093C9.79621 8.98982 9.79621 9.01093 9.78621 9.02648C9.73732 9.07648 9.63844 9.07093 9.57844 9.13092C9.45956 9.22425 9.404 9.38535 9.27734 9.46757C9.99286 9.06426 10.8584 9.12092 11.6383 8.92538C11.7928 8.8876 11.965 8.83983 12.0561 8.70428V7.84766Z"
fill="#1B5E20"
/>
<path
d="M12.0566 11.3998C12.0566 11.3998 10.213 11.4953 8.20057 10.8754C6.1881 10.2565 5.26465 9.62321 5.26465 9.62321C5.26465 9.62321 6.61037 9.88431 8.40726 9.59099C9.58408 9.39878 10.4564 8.73326 12.0544 8.70215L12.0566 11.3998Z"
fill="#689F38"
/>
<path
d="M7.27824 9.74526C7.2938 9.72415 7.31268 9.70415 7.31935 9.67859C7.32713 9.64748 7.31491 9.61526 7.30602 9.58526C7.28157 9.49749 7.28935 9.40083 7.32602 9.31639C7.3449 9.27195 7.37268 9.23195 7.38601 9.18529C7.40935 9.10529 7.38712 9.01974 7.38268 8.93641C7.37601 8.82308 7.40157 8.70864 7.4549 8.60865C7.46268 8.5942 7.47156 8.57976 7.48712 8.57198C7.52934 8.5531 7.56489 8.61198 7.56934 8.65753C7.58267 8.77308 7.55823 8.89197 7.58267 9.00641C7.61711 9.1664 7.74599 9.30528 7.73711 9.46971C7.73377 9.5286 7.71266 9.58749 7.72377 9.64415C7.73266 9.68748 7.76044 9.72526 7.78377 9.76303C7.84377 9.86081 7.88043 9.9708 7.89154 10.0852C7.90488 10.2219 7.86377 10.3852 7.73599 10.433C7.59711 10.4863 7.4549 10.373 7.34602 10.2986C7.24602 10.2297 7.19825 10.0875 7.20158 9.9708C7.2038 9.8908 7.22936 9.8097 7.27824 9.74526Z"
fill="#2E7D32"
/>
<path
d="M10.5363 7.21366C10.0952 7.24589 9.65401 7.27811 9.21173 7.31033C8.99281 7.32588 8.77056 7.34255 8.55498 7.30033C8.45274 7.28033 8.35273 7.247 8.24827 7.24144C8.05825 7.23144 7.87712 7.31255 7.69265 7.35921C7.4904 7.41032 7.27815 7.42032 7.07257 7.3881C6.92922 7.36588 6.78253 7.31922 6.67808 7.21811C6.62585 7.16811 6.58584 7.10478 6.53028 7.05701C6.4625 6.99701 6.37471 6.96368 6.29914 6.91479C5.9791 6.71036 5.90354 6.20927 6.14912 5.91929C6.18913 5.87262 6.2358 5.8304 6.27136 5.7793C6.34026 5.68152 6.36248 5.55931 6.4036 5.44709C6.53362 5.086 6.87255 4.81157 7.25148 4.74935C7.63042 4.68713 8.03491 4.83601 8.2905 5.12266C8.37385 5.21599 8.4483 5.32599 8.56387 5.37265C8.63165 5.39932 8.70722 5.40154 8.77945 5.41043C9.19173 5.46265 9.53732 5.7793 9.7129 6.15594C9.79069 6.32371 9.84514 6.50926 9.97516 6.63925C10.0285 6.69258 10.0929 6.7348 10.1574 6.7748C10.4463 6.95479 10.7486 7.11256 11.0608 7.247C10.9808 7.24144 10.9019 7.237 10.8219 7.23144"
fill="white"
/>
<path
d="M9.21178 7.31053C8.99286 7.32608 8.77061 7.34275 8.55503 7.30053C8.45279 7.28053 8.35278 7.2472 8.24832 7.24164C8.0583 7.23164 7.87717 7.31275 7.6927 7.35941C7.49045 7.41052 7.2782 7.42052 7.07262 7.3883C6.92927 7.36608 6.78259 7.31942 6.67813 7.21831C6.6259 7.16831 6.58589 7.10498 6.53033 7.05721C6.46255 6.99721 6.37476 6.96388 6.29919 6.91499C6.18362 6.84055 6.11806 6.73722 6.05805 6.61723C6.0436 6.58945 6.0436 6.5639 6.04138 6.53279C6.13806 6.68167 6.3992 6.84166 6.50366 6.725C6.53811 6.62279 6.41587 6.44502 6.37476 6.30391C6.29697 6.03726 6.28919 5.76061 6.38476 5.49951C6.39587 5.4684 6.42365 5.3673 6.46143 5.31396C6.49033 5.53062 6.56589 5.85949 6.72036 6.01393C6.87482 6.16836 7.13263 6.23392 7.31821 6.11837C7.43489 6.04504 7.50379 5.91727 7.58824 5.80838C7.83716 5.48951 8.27166 5.32619 8.66949 5.40285C8.46391 5.52284 8.26388 5.66839 8.14276 5.87282C8.02163 6.07726 7.99274 6.35169 8.12831 6.54835C8.23721 6.70611 8.43501 6.78722 8.62615 6.78389C8.73172 6.78167 8.85062 6.745 8.89396 6.64834C8.91841 6.59279 8.91285 6.52612 8.94063 6.47168C8.99286 6.36724 9.14621 6.35391 9.24956 6.40724C9.35402 6.46168 9.42514 6.56057 9.50515 6.64501C9.80519 6.96055 10.2486 7.08721 10.6686 7.20053C10.6564 7.1972 10.6308 7.2072 10.6175 7.20942C10.5975 7.21276 10.5775 7.21609 10.5575 7.21942C10.5264 7.22498 10.4953 7.23275 10.463 7.22831C10.3964 7.21831 10.3286 7.22942 10.2619 7.23386C10.1052 7.24498 9.94743 7.2572 9.79074 7.26831C9.59849 7.28164 9.40514 7.29608 9.21178 7.31053Z"
fill="#C9E3E6"
/>
<path
d="M12.0566 10.4487C8.15943 11.3565 6.30698 9.12659 3.94446 8.87549V12.0564H12.0566V10.4487Z"
fill="#8BC34A"
/>
<path
d="M12.0566 10.4487C8.15943 11.3565 6.30698 9.12659 3.94446 8.87549V12.0564H12.0566V10.4487Z"
fill="url(#paint1_radial_2447_4817)"
/>
<path
d="M4.92438 9.46168C4.80883 9.49613 4.71328 9.40724 4.61662 9.36058C4.35997 9.17059 4.35997 8.82394 4.37997 8.53395C4.37441 8.46507 4.4233 8.35174 4.50441 8.40063C4.47108 8.23397 4.46774 8.06176 4.49218 7.89399C4.50885 7.76399 4.5544 7.674 4.65995 7.60734C4.66662 7.594 4.66218 7.57845 4.65884 7.564C4.60996 7.3729 4.69884 7.17514 4.70773 6.97737C4.71551 6.82293 4.6744 6.66294 4.72773 6.5185C4.74995 6.45406 4.83106 6.41851 4.8455 6.49962C4.92327 6.80404 5.05771 7.10736 5.03216 7.42735C5.02327 7.47068 5.03993 7.50623 5.07549 7.53178C5.30214 7.734 5.20104 8.0862 5.2377 8.36063C5.34436 8.61284 5.34214 8.89505 5.21548 9.14059C5.15771 9.27614 5.06438 9.40169 4.92438 9.46168Z"
fill="#2E7D32"
/>
<path
d="M6.46127 9.63067C5.97019 9.5129 5.95019 9.64289 5.78798 9.60511C5.23023 9.43734 5.57354 8.89404 5.73465 8.76182C5.66687 8.50295 5.84353 8.3974 6.05241 8.14186C6.08574 7.61855 6.58793 7.77076 6.52349 8.22963C6.65682 8.40295 6.7057 8.59294 6.66237 8.8096C6.67571 8.93848 6.80126 9.02292 6.86014 9.13847C6.97458 9.36401 6.78237 9.70733 6.46127 9.63067Z"
fill="#689F38"
/>
<path
d="M6.27462 8.77985C6.21573 8.90206 6.04685 8.92762 5.91464 8.89429C5.85353 8.87873 5.78909 8.8454 5.7302 8.86762C5.59243 8.91873 5.5491 9.02984 5.54466 9.14094C5.54466 9.28982 5.69354 9.40648 5.84242 9.41315C5.9913 9.41982 6.13129 9.34204 6.24351 9.24649C6.27684 9.44648 6.58682 9.44093 6.72237 9.32649C6.85125 9.2176 6.7957 9.04317 6.7957 9.04317C6.95014 9.21538 6.94236 9.35093 6.92458 9.49426C6.90792 9.63203 6.78903 9.78535 6.86014 9.89201C6.61349 9.95534 6.49127 9.74313 6.29462 9.65536C6.2224 9.63536 6.14685 9.65647 6.07352 9.67091C5.77131 9.7498 5.43244 9.57203 5.43022 9.2376C5.42799 9.0765 5.51688 8.91762 5.65243 8.82985C5.66798 8.81985 5.68465 8.80985 5.69131 8.79207C5.69798 8.77318 5.69131 8.75318 5.68465 8.7343C5.54688 8.36543 5.90686 8.36876 6.06241 8.12988C6.12462 8.19877 6.22684 8.22765 6.31573 8.2021C6.24573 8.36431 6.04907 8.28654 5.92463 8.35209C5.69354 8.54208 6.07352 8.80874 6.27462 8.77985Z"
fill="#2E7D32"
/>
<path
d="M4.61111 8.03417C4.6911 8.17971 4.9022 8.29748 4.85443 8.48747C4.78221 8.4397 4.69443 8.37859 4.60666 8.38192C4.53333 8.4797 4.56222 8.6508 4.61999 8.75191C4.88887 9.11189 5.17885 8.56858 5.20107 8.31415C5.52772 8.69635 5.22885 9.7563 4.63777 9.38743C4.55889 9.3241 4.3289 9.06967 4.34223 8.64524C4.35001 8.38748 4.45334 8.37081 4.51333 8.37859C4.42556 8.24304 4.40889 8.05083 4.44334 7.91195C4.47334 7.79307 4.52555 7.69752 4.60555 7.61974C4.68666 7.53975 4.62777 7.46864 4.62999 7.34642C4.63222 7.16865 4.67888 7.06644 4.71554 6.96533C4.72888 7.15421 4.79887 7.34865 4.76888 7.53641C4.7511 7.61641 4.66221 7.6153 4.62222 7.67307C4.55666 7.78084 4.55111 7.92306 4.61111 8.03417Z"
fill="#1B5E20"
/>
<path
d="M5.00664 10.0212C5.04886 10.1578 4.54888 10.0578 4.61888 9.88229C4.66776 9.76007 4.68999 9.6323 4.71443 9.50675C4.73887 9.30787 4.67999 9.1301 4.58777 8.96011C4.60888 8.94122 4.63332 8.92456 4.65888 8.91234C4.85887 9.28343 4.86553 9.15232 5.02997 8.86234C5.06108 8.85901 5.09219 8.86123 5.12218 8.86901C4.92331 9.18455 4.87553 9.65674 5.00664 10.0212Z"
fill="url(#paint2_radial_2447_4817)"
/>
<defs>
<linearGradient
id="paint0_linear_2447_4817"
x1="7.35993"
y1="10.2856"
x2="8.28906"
y2="6.97175"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.1167" stopColor="#AFE4FE" />
<stop offset="0.6082" stopColor="#84C9ED" />
<stop offset="1" stopColor="#5FB2DE" />
</linearGradient>
<radialGradient
id="paint1_radial_2447_4817"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(9.71023 10.5339) rotate(8.61827) scale(3.99428 2.03076)"
>
<stop stopColor="#D4E157" />
<stop offset="1" stopColor="#D4E157" stopOpacity="0" />
</radialGradient>
<radialGradient
id="paint2_radial_2447_4817"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(5.06834 9.42892) rotate(15.9186) scale(0.528617 0.65868)"
>
<stop offset="0.4413" stopColor="#A06841" />
<stop offset="0.9229" stopColor="#A06841" stopOpacity="0.138" />
<stop offset="1" stopColor="#A06841" stopOpacity="0" />
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

79
frontend/public/Icons/dials.svg Normal file
View File

@ -0,0 +1,79 @@
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.1695 29.336H5.8335C4.36665 29.336 3.1665 28.1359 3.1665 26.669V5.33302C3.1665 3.86617 4.36665 2.66602 5.8335 2.66602H27.1695C28.6364 2.66602 29.8365 3.86617 29.8365 5.33302V26.669C29.8365 28.1359 28.6364 29.336 27.1695 29.336Z" fill="#BDBDBD"/>
<g opacity="0.7">
<path opacity="0.7" d="M22.9916 26.2917C25.3012 26.2917 27.1736 24.4194 27.1736 22.1097C27.1736 19.8001 25.3012 17.9277 22.9916 17.9277C20.6819 17.9277 18.8096 19.8001 18.8096 22.1097C18.8096 24.4194 20.6819 26.2917 22.9916 26.2917Z" fill="#757575"/>
</g>
<path d="M22.9916 25.6434C24.9429 25.6434 26.5248 24.0616 26.5248 22.1103C26.5248 20.159 24.9429 18.5771 22.9916 18.5771C21.0403 18.5771 19.4585 20.159 19.4585 22.1103C19.4585 24.0616 21.0403 25.6434 22.9916 25.6434Z" fill="#37474F"/>
<path d="M25.8351 20.0134C25.7551 19.9068 25.6706 19.8045 25.5817 19.709L23.3508 21.3578C23.1397 21.5133 23.0952 21.8089 23.2508 22.02C23.4063 22.2311 23.7018 22.2755 23.9129 22.12L26.1239 20.4867C26.0417 20.3223 25.9462 20.1645 25.8351 20.0134Z" fill="white"/>
<g opacity="0.7">
<path opacity="0.7" d="M19.3027 26.1103C19.5187 26.1103 19.6938 25.9352 19.6938 25.7192C19.6938 25.5032 19.5187 25.3281 19.3027 25.3281C19.0867 25.3281 18.9116 25.5032 18.9116 25.7192C18.9116 25.9352 19.0867 26.1103 19.3027 26.1103Z" fill="#212121"/>
<path opacity="0.7" d="M18.0207 24.0048C18.2367 24.0048 18.4118 23.8297 18.4118 23.6137C18.4118 23.3978 18.2367 23.2227 18.0207 23.2227C17.8047 23.2227 17.6296 23.3978 17.6296 23.6137C17.6296 23.8297 17.8047 24.0048 18.0207 24.0048Z" fill="#212121"/>
<path opacity="0.7" d="M17.8362 21.624C18.0522 21.624 18.2273 21.4489 18.2273 21.2329C18.2273 21.0169 18.0522 20.8418 17.8362 20.8418C17.6202 20.8418 17.4451 21.0169 17.4451 21.2329C17.4451 21.4489 17.6202 21.624 17.8362 21.624Z" fill="#212121"/>
<path opacity="0.7" d="M18.7536 19.3798C18.9696 19.3798 19.1447 19.2047 19.1447 18.9887C19.1447 18.7728 18.9696 18.5977 18.7536 18.5977C18.5376 18.5977 18.3625 18.7728 18.3625 18.9887C18.3625 19.2047 18.5376 19.3798 18.7536 19.3798Z" fill="#212121"/>
<path opacity="0.7" d="M20.6565 17.7548C20.8725 17.7548 21.0476 17.5797 21.0476 17.3637C21.0476 17.1478 20.8725 16.9727 20.6565 16.9727C20.4405 16.9727 20.2654 17.1478 20.2654 17.3637C20.2654 17.5797 20.4405 17.7548 20.6565 17.7548Z" fill="#212121"/>
<path opacity="0.7" d="M22.9929 17.206C23.2089 17.206 23.384 17.0309 23.384 16.8149C23.384 16.5989 23.2089 16.4238 22.9929 16.4238C22.7769 16.4238 22.6018 16.5989 22.6018 16.8149C22.6018 17.0309 22.7769 17.206 22.9929 17.206Z" fill="#212121"/>
<path opacity="0.7" d="M25.3266 17.7548C25.5426 17.7548 25.7177 17.5797 25.7177 17.3637C25.7177 17.1478 25.5426 16.9727 25.3266 16.9727C25.1106 16.9727 24.9355 17.1478 24.9355 17.3637C24.9355 17.5797 25.1106 17.7548 25.3266 17.7548Z" fill="#212121"/>
<path opacity="0.7" d="M27.2307 19.3798C27.4467 19.3798 27.6218 19.2047 27.6218 18.9887C27.6218 18.7728 27.4467 18.5977 27.2307 18.5977C27.0147 18.5977 26.8396 18.7728 26.8396 18.9887C26.8396 19.2047 27.0147 19.3798 27.2307 19.3798Z" fill="#212121"/>
<path opacity="0.7" d="M28.1465 21.624C28.3625 21.624 28.5376 21.4489 28.5376 21.2329C28.5376 21.0169 28.3625 20.8418 28.1465 20.8418C27.9305 20.8418 27.7554 21.0169 27.7554 21.2329C27.7554 21.4489 27.9305 21.624 28.1465 21.624Z" fill="#212121"/>
<path opacity="0.7" d="M27.9643 24.0048C28.1803 24.0048 28.3554 23.8297 28.3554 23.6137C28.3554 23.3978 28.1803 23.2227 27.9643 23.2227C27.7483 23.2227 27.5732 23.3978 27.5732 23.6137C27.5732 23.8297 27.7483 24.0048 27.9643 24.0048Z" fill="#212121"/>
<path opacity="0.7" d="M26.6799 26.1123C26.8959 26.1123 27.071 25.9372 27.071 25.7212C27.071 25.5052 26.8959 25.3301 26.6799 25.3301C26.4639 25.3301 26.2888 25.5052 26.2888 25.7212C26.2888 25.9372 26.4639 26.1123 26.6799 26.1123Z" fill="#212121"/>
</g>
<path d="M20.2146 21.612C20.4479 20.6099 21.1901 19.7299 22.1434 19.341C22.2678 19.2899 22.4611 19.2966 22.5189 19.4521C22.5878 19.6388 22.5545 19.7655 22.3434 19.8854C21.719 20.2432 21.2079 21.0121 21.019 21.7965C20.9634 22.0253 20.7279 22.1609 20.5012 22.0942C20.2968 22.0298 20.1657 21.8209 20.2146 21.612Z" fill="#2F7889"/>
<g opacity="0.7">
<path opacity="0.7" d="M10.0121 26.2927C12.3217 26.2927 14.1941 24.4204 14.1941 22.1107C14.1941 19.8011 12.3217 17.9287 10.0121 17.9287C7.70242 17.9287 5.83008 19.8011 5.83008 22.1107C5.83008 24.4204 7.70242 26.2927 10.0121 26.2927Z" fill="#757575"/>
</g>
<path d="M10.0122 25.6444C11.9635 25.6444 13.5453 24.0626 13.5453 22.1113C13.5453 20.16 11.9635 18.5781 10.0122 18.5781C8.06085 18.5781 6.479 20.16 6.479 22.1113C6.479 24.0626 8.06085 25.6444 10.0122 25.6444Z" fill="#37474F"/>
<path d="M13.4795 21.4261C13.4528 21.295 13.4195 21.1684 13.3795 21.0439L10.6596 21.5839C10.4041 21.635 10.2374 21.8839 10.2885 22.1394C10.3396 22.395 10.5885 22.5616 10.844 22.5105L13.5417 21.975C13.5328 21.795 13.5172 21.6106 13.4795 21.4261Z" fill="white"/>
<g opacity="0.7">
<path opacity="0.7" d="M6.3259 26.1123C6.5419 26.1123 6.717 25.9372 6.717 25.7212C6.717 25.5052 6.5419 25.3301 6.3259 25.3301C6.10991 25.3301 5.93481 25.5052 5.93481 25.7212C5.93481 25.9372 6.10991 26.1123 6.3259 26.1123Z" fill="#212121"/>
<path opacity="0.7" d="M5.04148 24.0048C5.25747 24.0048 5.43257 23.8297 5.43257 23.6137C5.43257 23.3978 5.25747 23.2227 5.04148 23.2227C4.82549 23.2227 4.65039 23.3978 4.65039 23.6137C4.65039 23.8297 4.82549 24.0048 5.04148 24.0048Z" fill="#212121"/>
<path opacity="0.7" d="M4.85911 21.624C5.0751 21.624 5.2502 21.4489 5.2502 21.2329C5.2502 21.0169 5.0751 20.8418 4.85911 20.8418C4.64311 20.8418 4.46802 21.0169 4.46802 21.2329C4.46802 21.4489 4.64311 21.624 4.85911 21.624Z" fill="#212121"/>
<path opacity="0.7" d="M5.77464 19.3798C5.99063 19.3798 6.16573 19.2047 6.16573 18.9887C6.16573 18.7728 5.99063 18.5977 5.77464 18.5977C5.55864 18.5977 5.38354 18.7728 5.38354 18.9887C5.38354 19.2047 5.55864 19.3798 5.77464 19.3798Z" fill="#212121"/>
<path opacity="0.7" d="M7.67942 17.7548C7.89541 17.7548 8.07051 17.5797 8.07051 17.3637C8.07051 17.1478 7.89541 16.9727 7.67942 16.9727C7.46343 16.9727 7.28833 17.1478 7.28833 17.3637C7.28833 17.5797 7.46343 17.7548 7.67942 17.7548Z" fill="#212121"/>
<path opacity="0.7" d="M10.0134 17.206C10.2294 17.206 10.4045 17.0309 10.4045 16.8149C10.4045 16.5989 10.2294 16.4238 10.0134 16.4238C9.79741 16.4238 9.62231 16.5989 9.62231 16.8149C9.62231 17.0309 9.79741 17.206 10.0134 17.206Z" fill="#212121"/>
<path opacity="0.7" d="M12.3489 17.7548C12.5648 17.7548 12.7399 17.5797 12.7399 17.3637C12.7399 17.1478 12.5648 16.9727 12.3489 16.9727C12.1329 16.9727 11.9578 17.1478 11.9578 17.3637C11.9578 17.5797 12.1329 17.7548 12.3489 17.7548Z" fill="#212121"/>
<path opacity="0.7" d="M14.2517 19.3798C14.4677 19.3798 14.6428 19.2047 14.6428 18.9887C14.6428 18.7728 14.4677 18.5977 14.2517 18.5977C14.0357 18.5977 13.8606 18.7728 13.8606 18.9887C13.8606 19.2047 14.0357 19.3798 14.2517 19.3798Z" fill="#212121"/>
<path opacity="0.7" d="M15.1697 21.624C15.3856 21.624 15.5607 21.4489 15.5607 21.2329C15.5607 21.0169 15.3856 20.8418 15.1697 20.8418C14.9537 20.8418 14.7786 21.0169 14.7786 21.2329C14.7786 21.4489 14.9537 21.624 15.1697 21.624Z" fill="#212121"/>
<path opacity="0.7" d="M14.9851 24.0048C15.2011 24.0048 15.3762 23.8297 15.3762 23.6137C15.3762 23.3978 15.2011 23.2227 14.9851 23.2227C14.7691 23.2227 14.594 23.3978 14.594 23.6137C14.594 23.8297 14.7691 24.0048 14.9851 24.0048Z" fill="#212121"/>
<path opacity="0.7" d="M13.7026 26.1123C13.9186 26.1123 14.0937 25.9372 14.0937 25.7212C14.0937 25.5052 13.9186 25.3301 13.7026 25.3301C13.4866 25.3301 13.3115 25.5052 13.3115 25.7212C13.3115 25.9372 13.4866 26.1123 13.7026 26.1123Z" fill="#212121"/>
</g>
<path d="M7.26146 21.612C7.49478 20.6099 8.23697 19.7299 9.19025 19.341C9.31469 19.2899 9.50801 19.2966 9.56579 19.4521C9.63467 19.6388 9.60134 19.7655 9.39024 19.8854C8.76583 20.2432 8.25474 21.0121 8.06587 21.7965C8.01031 22.0253 7.77477 22.1609 7.54812 22.0942C7.34368 22.0298 7.21258 21.8209 7.26146 21.612Z" fill="#2F7889"/>
<g opacity="0.7">
<path opacity="0.7" d="M22.9916 14.2322C25.3012 14.2322 27.1736 12.3598 27.1736 10.0502C27.1736 7.74051 25.3012 5.86816 22.9916 5.86816C20.6819 5.86816 18.8096 7.74051 18.8096 10.0502C18.8096 12.3598 20.6819 14.2322 22.9916 14.2322Z" fill="#757575"/>
</g>
<path d="M22.9914 13.5839C24.9427 13.5839 26.5245 12.002 26.5245 10.0507C26.5245 8.09942 24.9427 6.51758 22.9914 6.51758C21.0401 6.51758 19.4583 8.09942 19.4583 10.0507C19.4583 12.002 21.0401 13.5839 22.9914 13.5839Z" fill="#37474F"/>
<path d="M20.1765 7.91402C20.0965 8.02068 20.0232 8.13179 19.9565 8.24289L22.1675 9.91836C22.3764 10.0761 22.672 10.0361 22.8297 9.82725C22.9875 9.61837 22.9475 9.32283 22.7386 9.16507L20.5476 7.50293C20.4165 7.62959 20.2899 7.76514 20.1765 7.91402Z" fill="white"/>
<g opacity="0.7">
<path opacity="0.7" d="M19.3027 14.0517C19.5187 14.0517 19.6938 13.8766 19.6938 13.6606C19.6938 13.4446 19.5187 13.2695 19.3027 13.2695C19.0867 13.2695 18.9116 13.4446 18.9116 13.6606C18.9116 13.8766 19.0867 14.0517 19.3027 14.0517Z" fill="#212121"/>
<path opacity="0.7" d="M18.0207 11.9462C18.2367 11.9462 18.4118 11.7711 18.4118 11.5552C18.4118 11.3392 18.2367 11.1641 18.0207 11.1641C17.8047 11.1641 17.6296 11.3392 17.6296 11.5552C17.6296 11.7711 17.8047 11.9462 18.0207 11.9462Z" fill="#212121"/>
<path opacity="0.7" d="M17.8362 9.56538C18.0522 9.56538 18.2273 9.39029 18.2273 9.17429C18.2273 8.9583 18.0522 8.7832 17.8362 8.7832C17.6202 8.7832 17.4451 8.9583 17.4451 9.17429C17.4451 9.39029 17.6202 9.56538 17.8362 9.56538Z" fill="#212121"/>
<path opacity="0.7" d="M18.7536 7.32124C18.9696 7.32124 19.1447 7.14615 19.1447 6.93015C19.1447 6.71416 18.9696 6.53906 18.7536 6.53906C18.5376 6.53906 18.3625 6.71416 18.3625 6.93015C18.3625 7.14615 18.5376 7.32124 18.7536 7.32124Z" fill="#212121"/>
<path opacity="0.7" d="M20.6565 5.69624C20.8725 5.69624 21.0476 5.52115 21.0476 5.30515C21.0476 5.08916 20.8725 4.91406 20.6565 4.91406C20.4405 4.91406 20.2654 5.08916 20.2654 5.30515C20.2654 5.52115 20.4405 5.69624 20.6565 5.69624Z" fill="#212121"/>
<path opacity="0.7" d="M22.9929 5.14742C23.2089 5.14742 23.384 4.97232 23.384 4.75632C23.384 4.54033 23.2089 4.36523 22.9929 4.36523C22.7769 4.36523 22.6018 4.54033 22.6018 4.75632C22.6018 4.97232 22.7769 5.14742 22.9929 5.14742Z" fill="#212121"/>
<path opacity="0.7" d="M25.3266 5.69624C25.5426 5.69624 25.7177 5.52115 25.7177 5.30515C25.7177 5.08916 25.5426 4.91406 25.3266 4.91406C25.1106 4.91406 24.9355 5.08916 24.9355 5.30515C24.9355 5.52115 25.1106 5.69624 25.3266 5.69624Z" fill="#212121"/>
<path opacity="0.7" d="M27.2307 7.32124C27.4467 7.32124 27.6218 7.14615 27.6218 6.93015C27.6218 6.71416 27.4467 6.53906 27.2307 6.53906C27.0147 6.53906 26.8396 6.71416 26.8396 6.93015C26.8396 7.14615 27.0147 7.32124 27.2307 7.32124Z" fill="#212121"/>
<path opacity="0.7" d="M28.1465 9.56538C28.3625 9.56538 28.5376 9.39029 28.5376 9.17429C28.5376 8.9583 28.3625 8.7832 28.1465 8.7832C27.9305 8.7832 27.7554 8.9583 27.7554 9.17429C27.7554 9.39029 27.9305 9.56538 28.1465 9.56538Z" fill="#212121"/>
<path opacity="0.7" d="M27.9641 11.9462C28.1801 11.9462 28.3552 11.7711 28.3552 11.5552C28.3552 11.3392 28.1801 11.1641 27.9641 11.1641C27.7481 11.1641 27.573 11.3392 27.573 11.5552C27.573 11.7711 27.7481 11.9462 27.9641 11.9462Z" fill="#212121"/>
<path opacity="0.7" d="M26.6799 14.0537C26.8959 14.0537 27.071 13.8786 27.071 13.6626C27.071 13.4466 26.8959 13.2715 26.6799 13.2715C26.4639 13.2715 26.2888 13.4466 26.2888 13.6626C26.2888 13.8786 26.4639 14.0537 26.6799 14.0537Z" fill="#212121"/>
</g>
<path d="M20.6813 11.8558C20.2324 11.1447 20.1613 10.6692 20.1902 9.97143C20.1991 9.78255 20.2857 9.46479 20.5657 9.51146C20.819 9.55368 20.7924 9.78033 20.8124 9.93588C20.8946 10.5358 21.0368 10.8625 21.379 11.4136C21.5034 11.6136 21.4323 11.8758 21.2257 11.9913C21.039 12.0913 20.7968 12.038 20.6813 11.8558Z" fill="#2F7889"/>
<g opacity="0.7">
<path opacity="0.7" d="M10.0121 14.2331C12.3217 14.2331 14.1941 12.3608 14.1941 10.0511C14.1941 7.74149 12.3217 5.86914 10.0121 5.86914C7.70242 5.86914 5.83008 7.74149 5.83008 10.0511C5.83008 12.3608 7.70242 14.2331 10.0121 14.2331Z" fill="#757575"/>
</g>
<path d="M10.0122 13.5849C11.9635 13.5849 13.5453 12.003 13.5453 10.0517C13.5453 8.1004 11.9635 6.51855 10.0122 6.51855C8.06085 6.51855 6.479 8.1004 6.479 10.0517C6.479 12.003 8.06085 13.5849 10.0122 13.5849Z" fill="#37474F"/>
<path d="M12.6169 7.66324C12.5258 7.56546 12.4303 7.47436 12.3325 7.3877L10.2904 9.26537C10.0971 9.44314 10.0859 9.74091 10.2615 9.93423C10.4393 10.1276 10.737 10.1387 10.9303 9.96312L12.9569 8.10321C12.8547 7.94989 12.7436 7.80101 12.6169 7.66324Z" fill="white"/>
<g opacity="0.7">
<path opacity="0.7" d="M6.3259 14.0537C6.5419 14.0537 6.717 13.8786 6.717 13.6626C6.717 13.4466 6.5419 13.2715 6.3259 13.2715C6.10991 13.2715 5.93481 13.4466 5.93481 13.6626C5.93481 13.8786 6.10991 14.0537 6.3259 14.0537Z" fill="#212121"/>
<path opacity="0.7" d="M5.04173 11.9462C5.25772 11.9462 5.43282 11.7711 5.43282 11.5552C5.43282 11.3392 5.25772 11.1641 5.04173 11.1641C4.82573 11.1641 4.65063 11.3392 4.65063 11.5552C4.65063 11.7711 4.82573 11.9462 5.04173 11.9462Z" fill="#212121"/>
<path opacity="0.7" d="M4.85935 9.56538C5.07535 9.56538 5.25044 9.39029 5.25044 9.17429C5.25044 8.9583 5.07535 8.7832 4.85935 8.7832C4.64336 8.7832 4.46826 8.9583 4.46826 9.17429C4.46826 9.39029 4.64336 9.56538 4.85935 9.56538Z" fill="#212121"/>
<path opacity="0.7" d="M5.77464 7.32124C5.99063 7.32124 6.16573 7.14615 6.16573 6.93015C6.16573 6.71416 5.99063 6.53906 5.77464 6.53906C5.55864 6.53906 5.38354 6.71416 5.38354 6.93015C5.38354 7.14615 5.55864 7.32124 5.77464 7.32124Z" fill="#212121"/>
<path opacity="0.7" d="M7.67966 5.69624C7.89566 5.69624 8.07075 5.52115 8.07075 5.30515C8.07075 5.08916 7.89566 4.91406 7.67966 4.91406C7.46367 4.91406 7.28857 5.08916 7.28857 5.30515C7.28857 5.52115 7.46367 5.69624 7.67966 5.69624Z" fill="#212121"/>
<path opacity="0.7" d="M10.0134 5.14742C10.2294 5.14742 10.4045 4.97232 10.4045 4.75632C10.4045 4.54033 10.2294 4.36523 10.0134 4.36523C9.79741 4.36523 9.62231 4.54033 9.62231 4.75632C9.62231 4.97232 9.79741 5.14742 10.0134 5.14742Z" fill="#212121"/>
<path opacity="0.7" d="M12.3489 5.69624C12.5648 5.69624 12.7399 5.52115 12.7399 5.30515C12.7399 5.08916 12.5648 4.91406 12.3489 4.91406C12.1329 4.91406 11.9578 5.08916 11.9578 5.30515C11.9578 5.52115 12.1329 5.69624 12.3489 5.69624Z" fill="#212121"/>
<path opacity="0.7" d="M14.2517 7.32124C14.4677 7.32124 14.6428 7.14615 14.6428 6.93015C14.6428 6.71416 14.4677 6.53906 14.2517 6.53906C14.0357 6.53906 13.8606 6.71416 13.8606 6.93015C13.8606 7.14615 14.0357 7.32124 14.2517 7.32124Z" fill="#212121"/>
<path opacity="0.7" d="M15.1697 9.56538C15.3856 9.56538 15.5607 9.39029 15.5607 9.17429C15.5607 8.9583 15.3856 8.7832 15.1697 8.7832C14.9537 8.7832 14.7786 8.9583 14.7786 9.17429C14.7786 9.39029 14.9537 9.56538 15.1697 9.56538Z" fill="#212121"/>
<path opacity="0.7" d="M14.9853 11.9462C15.2013 11.9462 15.3764 11.7711 15.3764 11.5552C15.3764 11.3392 15.2013 11.1641 14.9853 11.1641C14.7693 11.1641 14.5942 11.3392 14.5942 11.5552C14.5942 11.7711 14.7693 11.9462 14.9853 11.9462Z" fill="#212121"/>
<path opacity="0.7" d="M13.7026 14.0537C13.9186 14.0537 14.0937 13.8786 14.0937 13.6626C14.0937 13.4466 13.9186 13.2715 13.7026 13.2715C13.4866 13.2715 13.3115 13.4466 13.3115 13.6626C13.3115 13.8786 13.4866 14.0537 13.7026 14.0537Z" fill="#212121"/>
</g>
<path d="M7.26146 9.54854C7.49478 8.54637 8.23697 7.66642 9.19025 7.27755C9.31469 7.22644 9.50801 7.23311 9.56579 7.38866C9.63467 7.57531 9.60134 7.70197 9.39024 7.82197C8.76583 8.17973 8.25474 8.94858 8.06587 9.73298C8.01031 9.96186 7.77477 10.0974 7.54812 10.0307C7.34368 9.96852 7.21258 9.75742 7.26146 9.54854Z" fill="#2F7889"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

8
frontend/public/Icons/eight-ball.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.9494 13.9422C16.2318 12.4261 17.3268 9.70245 16.1956 6.57511C15.6443 5.05269 15.0219 4.20274 14.2969 3.66277C13.8557 3.33403 12.0933 2.50658 9.75965 2.86781C8.05349 3.13279 5.77487 4.20899 4.29369 5.96014C2.85752 7.6613 1.74883 9.00498 1.69758 10.3099C1.63133 11.9886 2.89627 13.431 3.05001 13.6647C3.32374 14.0797 5.19115 16.4521 8.69971 16.5733C11.797 16.6796 13.8144 15.2847 14.9494 13.9422Z" fill="#403D3E"/>
<path d="M4.55363 2.73722C2.93746 3.89091 1.12131 6.25079 1.44754 9.56061C1.60628 11.1718 2.00251 12.1492 2.57123 12.8504C2.91746 13.2779 4.41988 14.5491 6.77351 14.7366C9.14588 14.9253 10.9495 14.3941 12.8332 13.0842C16.6617 10.4206 16.098 6.39328 15.9343 5.92456C15.7705 5.45583 14.5444 2.69598 11.1733 1.71478C8.19844 0.849823 5.98355 1.71478 4.55363 2.73722Z" fill="#5E6367"/>
<path d="M7.39353 2.96109C5.61737 2.89734 3.91996 4.28852 3.75622 6.00593C3.59248 7.72209 4.65492 9.02952 6.30983 9.29576C7.96475 9.56074 9.87839 8.5558 10.2634 6.45091C10.6609 4.28227 9.08969 3.02234 7.39353 2.96109Z" fill="white"/>
<path d="M7.94217 5.90066C7.94217 5.90066 8.36965 5.81192 8.45465 5.18195C8.53839 4.56198 8.23091 4.03326 7.51345 3.84327C6.73349 3.63703 6.20477 4.06576 6.06727 4.51698C5.87603 5.14445 6.15852 5.44319 6.15852 5.44319C6.15852 5.44319 5.39356 5.62693 5.33231 6.52938C5.27481 7.38058 5.85603 7.83806 6.43975 7.97805C7.16096 8.15179 7.97842 7.9543 8.17841 7.03435C8.34465 6.27689 7.94217 5.90066 7.94217 5.90066Z" fill="#303030"/>
<path d="M6.73983 4.75411C6.67109 5.01284 6.80858 5.26283 7.07857 5.33157C7.3698 5.40532 7.63479 5.30908 7.70603 5.01159C7.76853 4.74786 7.64354 4.51537 7.33605 4.44037C7.08357 4.37788 6.81483 4.47162 6.73983 4.75411Z" fill="white"/>
<path d="M6.95978 6.03974C6.6323 5.93849 6.19982 6.06473 6.13107 6.50471C6.06233 6.94469 6.32606 7.16968 6.67104 7.23217C7.01603 7.29467 7.34226 7.11343 7.40601 6.76095C7.4685 6.40972 7.28601 6.13973 6.95978 6.03974Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

7
frontend/public/Icons/floppy-disc.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.374 7.98958V27.4342C29.374 28.5055 28.505 29.3745 27.4337 29.3745H4.56866C3.49742 29.3745 2.62842 28.5055 2.62842 27.4342V4.56915C2.62842 3.4979 3.49742 2.62891 4.56866 2.62891H24.4912C25.2824 2.62891 26.0336 2.98228 26.5381 3.59347L28.7695 6.3027C29.1606 6.77832 29.374 7.37395 29.374 7.98958Z" fill="#616161"/>
<path d="M24.8782 29.3742H7.11157V17.6128C7.11157 17.2105 7.43828 16.8838 7.84055 16.8838H24.1515C24.5538 16.8838 24.8805 17.2105 24.8805 17.6128V29.3742H24.8782Z" fill="white"/>
<path d="M24.8782 26.6523H7.11157V29.3744H24.8782V26.6523Z" fill="#7190F9"/>
<path d="M5.50049 2.62891V13.2414C5.50049 13.637 5.84942 13.9459 6.3117 13.9459H23.3472C23.8094 13.9459 24.1673 13.6392 24.1673 13.2414V2.62891H5.50049Z" fill="#424242"/>
<path d="M9.5564 2.62891V12.6346C9.5564 13.008 9.81865 13.2969 10.1654 13.2969H22.9358C23.2826 13.2969 23.5515 13.008 23.5515 12.6346V2.62891H9.5564ZM20.8845 12.1168C20.8845 12.2768 20.7534 12.4079 20.5933 12.4079H16.7306C16.5706 12.4079 16.4395 12.2768 16.4395 12.1168V3.80905C16.4395 3.64903 16.5706 3.51791 16.7306 3.51791H20.5933C20.7534 3.51791 20.8845 3.64903 20.8845 3.80905V12.1168Z" fill="#E0E0E0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

15
frontend/public/Icons/hello-wave.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2531 19.2411C10.5948 18.7127 4.48175 12.767 4.41342 12.702C4.14343 12.432 3.97344 12.1519 3.92677 11.8952C3.87844 11.6285 3.96011 11.3952 4.17676 11.1785C4.37842 10.9768 4.62507 10.8701 4.89006 10.8701C5.21337 10.8701 5.54502 11.0234 5.82168 11.3018L8.5932 13.9655C8.64153 14.0122 8.70486 14.0355 8.76652 14.0355C8.83152 14.0355 8.89485 14.0105 8.94318 13.9621C9.03984 13.8655 9.03984 13.7088 8.94485 13.6121L4.52008 9.04153C4.07677 8.59815 3.86844 7.91973 4.39508 7.39299C4.59674 7.1913 4.84339 7.08462 5.10838 7.08462C5.4317 7.08462 5.76335 7.23797 6.04 7.51634L10.5664 11.9302C10.6148 11.9769 10.6781 12.0019 10.7414 12.0019C10.8047 12.0019 10.8697 11.9769 10.9181 11.9286C11.0147 11.8319 11.0164 11.6752 10.9197 11.5769L5.48336 6.00282C5.23171 5.75112 5.08005 5.44942 5.05338 5.15605C5.02838 4.85768 5.13338 4.58098 5.35837 4.35595C5.56002 4.15426 5.80668 4.04758 6.07166 4.04758C6.39498 4.04758 6.72663 4.20093 7.00328 4.47763L12.548 9.88497C12.5963 9.93164 12.6597 9.95665 12.723 9.95665C12.7863 9.95665 12.8513 9.93164 12.8996 9.88331C12.9963 9.78663 12.998 9.62994 12.9013 9.53159L8.87485 5.39274C8.62153 5.13938 8.46987 4.83934 8.44487 4.54597C8.41987 4.2476 8.52487 3.9709 8.74986 3.74587C8.95151 3.54418 9.19817 3.4375 9.46315 3.4375C9.78647 3.4375 10.1181 3.59085 10.3948 3.86922C11.8714 5.3194 15.7262 9.11154 15.8562 9.25156C16.3511 9.59327 16.4511 9.07654 16.4761 8.7415C16.5044 8.35145 16.0578 6.98961 16.3178 5.76446C16.7544 4.13592 18.0127 4.40262 18.041 4.41596C18.731 4.73933 18.5993 5.22272 18.3544 6.19451L18.3294 6.3862C18.0727 7.65636 19.8359 11.4202 19.9659 11.7019C20.6576 13.2154 21.4542 16.2841 18.816 18.9228C15.9245 21.8148 12.3447 20.3329 11.2531 19.2411Z" fill="url(#paint0_radial_2434_27914)"/>
<path d="M14.9634 20.8642C13.1902 20.8642 11.6819 20.0158 11.087 19.4274C10.552 18.9907 7.17551 15.7302 4.42565 13.0616C4.31399 12.9532 4.249 12.8916 4.24233 12.8832C3.93068 12.5715 3.73736 12.2465 3.68236 11.9398C3.61903 11.5914 3.72736 11.2764 4.00068 11.0013C4.25066 10.7513 4.55731 10.6196 4.89063 10.6196C5.28228 10.6196 5.67559 10.7996 5.99891 11.1247L8.76709 13.785L4.34066 9.21443C3.83069 8.70437 3.57403 7.85926 4.219 7.21585C4.46899 6.96582 4.77564 6.83413 5.10895 6.83413C5.5006 6.83413 5.89391 7.01416 6.21723 7.3392L10.7403 11.7497L5.30561 6.17739C5.01562 5.88735 4.8373 5.5323 4.80563 5.17893C4.77397 4.80221 4.90396 4.45717 5.18228 4.1788C5.43227 3.92877 5.73892 3.79709 6.07224 3.79709C6.46221 3.79709 6.85553 3.97544 7.18051 4.30048L12.7236 9.70616L8.6971 5.56731C8.40545 5.27561 8.22712 4.92056 8.19712 4.56718C8.16546 4.19214 8.29545 3.84709 8.57377 3.56873C8.82376 3.31869 9.13041 3.18701 9.46372 3.18701C9.85537 3.18701 10.2487 3.36703 10.572 3.69207L11.7736 4.87056C13.9152 6.97082 15.7051 8.72937 15.8967 8.92606C15.99 9.00107 16.1117 9.02941 16.1634 9.00441C16.1967 8.98774 16.2334 8.91106 16.2267 8.74937C16.2167 8.466 16.1767 8.11429 16.135 7.74258C16.0517 6.99582 15.965 6.22239 16.0734 5.71233C16.31 4.82722 16.775 4.45217 17.1217 4.29048C17.5983 4.07046 18.0599 4.14713 18.1483 4.1888C19.0149 4.59552 18.8432 5.27561 18.6066 6.21906L18.6016 6.24239L18.5749 6.43742C18.4016 7.29086 19.2915 9.64949 20.1815 11.5714L20.1948 11.5981C20.7898 12.8982 21.8614 16.2336 18.9949 19.1007C17.6766 20.4158 16.25 20.8642 14.9634 20.8642ZM4.89063 11.1197C4.69397 11.1197 4.50732 11.2013 4.35399 11.3547C4.19567 11.5131 4.14067 11.6664 4.174 11.8498C4.21067 12.0515 4.35899 12.2915 4.59065 12.5248C4.59231 12.5265 4.65898 12.5915 4.77397 12.7015C8.6771 16.4903 11.0336 18.7423 11.4103 19.0457L11.4303 19.064C12.3502 19.9841 15.7684 21.6176 18.6399 18.7456C21.2848 16.1003 20.2898 13.0116 19.7382 11.8048L19.7265 11.7798C19.1532 10.5429 17.85 7.54256 18.0816 6.34574L18.1199 6.09571C18.3766 5.07558 18.3916 4.86222 17.9566 4.65219C17.8283 4.62886 16.9083 4.51718 16.5567 5.82901C16.4684 6.24739 16.5534 7.01249 16.6283 7.68757C16.6717 8.06929 16.7117 8.431 16.7217 8.73271C16.7383 9.20776 16.5134 9.38945 16.3767 9.45613C16.0984 9.59115 15.7667 9.47613 15.5601 9.30278L15.5384 9.28277C15.4367 9.17276 13.0185 6.8008 11.4186 5.2306L10.2154 4.04879C9.80537 3.63707 9.27707 3.56873 8.92209 3.92377C8.74876 4.09713 8.67043 4.30048 8.68876 4.52551C8.70876 4.76054 8.83542 5.00557 9.04708 5.21727L13.0819 9.35612C13.2719 9.54947 13.2719 9.86618 13.0785 10.0595C12.8935 10.2446 12.5669 10.2479 12.3769 10.0645L6.82886 4.65553C6.41888 4.24548 5.88891 4.17714 5.5356 4.53218C5.36227 4.70553 5.28394 4.90889 5.30228 5.13392C5.32394 5.36895 5.4506 5.61565 5.66059 5.82401L11.0986 11.4014C11.2903 11.5947 11.2886 11.9114 11.0953 12.1048C10.9103 12.2898 10.5837 12.2932 10.3937 12.1098L5.86558 7.69424C5.4556 7.28086 4.92563 7.21418 4.57231 7.56923C4.14067 8.00095 4.37066 8.53601 4.69731 8.86439L9.12541 13.4383C9.3154 13.6316 9.31373 13.9467 9.12041 14.1384C8.93375 14.3251 8.61044 14.3267 8.42045 14.145L5.64892 11.4814C5.4156 11.2464 5.14728 11.1197 4.89063 11.1197Z" fill="#EDA600"/>
<path d="M15.4581 9.09033C14.5431 10.9589 14.6614 13.5742 16.0347 15.6728C16.1897 15.9562 16.4547 15.8178 16.3197 15.5261C14.6614 11.9774 16.3997 9.42037 16.3997 9.42037L15.4581 9.09033Z" fill="#EDA600"/>
<path d="M11.8613 2.08448C12.3646 1.9528 12.9013 1.96446 13.4229 2.08615C13.9412 2.21116 14.4595 2.47453 14.8445 2.90458C15.2212 3.3313 15.4528 3.8497 15.5311 4.3931C15.6045 4.9315 15.5361 5.48657 15.2811 5.94663C15.2512 5.4299 15.1612 4.95484 15.0095 4.51645C14.9312 4.29809 14.8395 4.08973 14.7278 3.89304C14.6179 3.69801 14.4879 3.50466 14.3495 3.3463C14.0679 3.02126 13.6862 2.7679 13.2579 2.57121C12.8279 2.36785 12.3596 2.21783 11.8613 2.08448Z" fill="#B0BEC5"/>
<path d="M11.9998 3.66264C12.2781 3.48595 12.6264 3.44928 12.9547 3.50762C13.2864 3.56596 13.603 3.73098 13.853 3.95935C14.1013 4.19104 14.278 4.48274 14.388 4.78612C14.4413 4.9378 14.468 5.09782 14.493 5.25284C14.5013 5.41286 14.5013 5.57288 14.4763 5.7329C14.3613 5.61122 14.2713 5.48954 14.1863 5.37119C14.088 5.25951 14.0113 5.14116 13.923 5.03281C13.7497 4.81779 13.5813 4.62276 13.3997 4.44941C13.213 4.28105 13.0164 4.1327 12.788 4.00435C12.5614 3.87267 12.3064 3.76265 11.9998 3.66264Z" fill="#90A4AE"/>
<path d="M2.47047 14.2246C2.70546 14.6847 2.95045 15.1114 3.23543 15.4881C3.51875 15.8648 3.84373 16.1849 4.22205 16.3932C4.40537 16.4949 4.62369 16.5832 4.83701 16.6499C5.052 16.7183 5.27532 16.7649 5.50531 16.7966C5.96529 16.8533 6.4486 16.8433 6.96024 16.7649C6.56359 17.11 6.03362 17.2933 5.49365 17.3333C4.94701 17.37 4.39204 17.2517 3.8954 16.9716C3.39542 16.6866 3.02877 16.2332 2.79879 15.7515C2.5688 15.2664 2.44547 14.7447 2.47047 14.2246Z" fill="#B0BEC5"/>
<path d="M4.04627 14.0312C4.20793 14.3113 4.36792 14.5363 4.54291 14.733C4.71623 14.9297 4.90289 15.0914 5.10621 15.2381C5.31287 15.3798 5.53952 15.5048 5.78618 15.6298C5.9095 15.6931 6.04116 15.7431 6.17116 15.8165C6.30615 15.8748 6.44281 15.9365 6.58613 16.0248C6.43448 16.0815 6.27948 16.1148 6.12116 16.1398C5.9645 16.1465 5.80284 16.1548 5.64285 16.1332C5.32287 16.0898 5.00288 15.9782 4.7229 15.7831C4.44791 15.5848 4.21959 15.3097 4.0946 14.998C3.96794 14.688 3.93127 14.3413 4.04627 14.0312Z" fill="#90A4AE"/>
<defs>
<radialGradient id="paint0_radial_2434_27914" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.67256 7.66634) rotate(-45.0051) scale(15.1685)">
<stop offset="0.3533" stop-color="#FFCA28"/>
<stop offset="0.8723" stop-color="#FFB300"/>
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

104
frontend/public/Icons/hurray.svg Normal file
View File

@ -0,0 +1,104 @@
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.71673 14.5874C1.96899 14.8607 3.00801 14.384 3.82811 14.0017C4.44263 13.7161 6.90183 12.7071 8.1242 12.1837C8.45424 12.0426 8.9343 11.8581 9.2799 11.4036C9.58661 10.9991 10.4 9.28113 8.76206 7.54091C7.09963 5.77403 5.38719 6.26186 4.74711 6.71526C4.3704 6.98196 4.06369 7.58314 3.9259 7.88874C3.3436 9.18001 2.5135 11.5459 2.17568 12.476C1.92787 13.1616 1.4667 14.3162 1.71673 14.5874Z"
fill="#FFC107"
/>
<path
d="M3.76148 8.27783C3.77704 8.47119 3.81592 8.78567 3.94925 9.39131C4.04035 9.80691 4.18924 10.2425 4.31034 10.5303C4.67365 11.396 5.18363 11.7449 5.70027 12.025C6.578 12.5006 7.17463 12.5895 7.17463 12.5895L6.45912 12.8817C6.45912 12.8817 6.02581 12.7917 5.43473 12.5006C4.87142 12.2228 4.28479 11.7527 3.85592 10.8326C3.67037 10.4337 3.5626 10.0469 3.50038 9.74024C3.42372 9.36019 3.4115 9.14461 3.4115 9.14461L3.76148 8.27783Z"
fill="#FF8F00"
/>
<path
d="M2.88245 10.5312C2.88245 10.5312 2.97133 11.2523 3.56685 12.1623C4.26459 13.2267 5.23899 13.4011 5.23899 13.4011L4.59124 13.6678C4.59124 13.6678 3.86795 13.4467 3.18021 12.5078C2.75134 11.9223 2.63135 11.2223 2.63135 11.2223L2.88245 10.5312Z"
fill="#FF8F00"
/>
<path
d="M2.26575 12.2402C2.26575 12.2402 2.42796 12.8624 2.7835 13.3268C3.20681 13.8813 3.74567 14.0424 3.74567 14.0424L3.24903 14.2624C3.24903 14.2624 2.87238 14.1835 2.46018 13.6613C2.14687 13.2646 2.05798 12.8091 2.05798 12.8091L2.26575 12.2402Z"
fill="#FF8F00"
/>
<g opacity="0.44">
<path
opacity="0.44"
d="M1.99553 13.8201C1.97331 13.7701 1.97331 13.7134 1.99664 13.6645L4.82649 7.79492L5.29203 9.54514L2.31441 13.8468C2.23441 13.9668 2.05442 13.9513 1.99553 13.8201Z"
fill="#FFFDE7"
/>
</g>
<path
d="M5.51737 10.1336C6.83975 11.6804 8.3455 11.4871 8.84667 11.0959C9.34896 10.7037 9.74567 9.35571 8.42884 7.83441C7.04867 6.24088 5.48625 6.69538 5.12509 7.03987C4.76394 7.38435 4.30388 8.71452 5.51737 10.1336Z"
fill="url(#paint0_linear_2434_23047)"
/>
<path
d="M10.059 10.7698C9.57673 10.3654 9.32003 10.4376 8.97554 10.5809C8.53104 10.7654 7.83206 10.902 6.88306 10.5809L7.16865 9.89321C7.73205 10.0832 8.13988 9.99098 8.49215 9.78321C8.94554 9.51656 9.56561 9.15102 10.5302 9.96098C10.9325 10.2987 11.3447 10.5232 11.647 10.421C11.867 10.3476 11.9837 10.0199 12.0426 9.75877C12.0481 9.73544 12.057 9.66877 12.0637 9.60989C12.117 9.20213 12.2059 8.32218 12.8616 7.8722C13.5628 7.39111 14.2995 7.39111 14.2995 7.39111L14.4329 8.71549C14.094 8.66549 13.8584 8.73438 13.6595 8.84437C12.9105 9.26102 13.5628 10.8609 12.3971 11.3987C11.2758 11.9198 10.359 11.0209 10.059 10.7698Z"
fill="#03A9F4"
/>
<path
d="M5.93365 9.08114L5.45145 8.64886C6.33696 7.65985 6.10364 6.93309 5.93365 6.40413C5.89921 6.29745 5.86699 6.19633 5.84588 6.09965C5.77032 5.75739 5.75477 5.45957 5.7781 5.19954C5.43812 4.77615 5.28813 4.33276 5.27813 4.30276C5.07147 3.67712 5.22702 3.06705 5.58367 2.49475C6.30474 1.3335 7.61023 1.3335 7.61023 1.3335L8.04576 2.4992C7.71467 2.48586 6.62917 2.50253 6.29585 3.02815C5.87476 3.69046 6.15141 4.0994 6.17141 4.14607C6.25252 4.0405 6.33474 3.95605 6.40807 3.89048C6.94026 3.4182 7.40246 3.35042 7.69689 3.37709C8.02798 3.40709 8.32797 3.57378 8.5424 3.84715C8.77683 4.14718 8.87349 4.53723 8.79905 4.89172C8.72683 5.23732 8.49685 5.52958 8.15131 5.71516C7.54801 6.03964 7.04581 5.99519 6.70916 5.88296C6.71139 5.89074 6.7125 5.89963 6.71472 5.9074C6.72694 5.96297 6.75138 6.04075 6.78027 6.13077C6.97693 6.73973 7.34246 7.70652 5.93365 9.08114ZM6.75027 4.91061C6.81471 4.95728 6.88249 4.99618 6.95248 5.02396C7.1858 5.11731 7.44024 5.08619 7.72911 4.93061C7.8991 4.83949 7.9191 4.7417 7.92577 4.70948C7.94576 4.6128 7.91243 4.48945 7.84021 4.39721C7.77688 4.31609 7.70356 4.27387 7.61578 4.26498C7.44912 4.25053 7.22358 4.3561 6.99804 4.55723C6.89026 4.65391 6.80805 4.77282 6.75027 4.91061Z"
fill="#F44336"
/>
<path
d="M7.86428 9.26219L7.17419 9.2433C7.17419 9.2433 7.50201 7.39196 8.56326 7.08081C8.76217 7.02302 8.97998 6.96412 9.19889 6.9319C9.32891 6.9119 9.53449 6.88189 9.63561 6.84411C9.65895 6.66964 9.58561 6.44739 9.50337 6.19514C9.43892 5.99956 9.37225 5.79842 9.33669 5.57839C9.26779 5.14945 9.38225 4.77052 9.65895 4.50937C9.99677 4.19266 10.5424 4.09154 11.158 4.23156C11.5092 4.31157 11.7681 4.48381 11.9959 4.63494C12.3215 4.85164 12.5115 4.96165 12.9094 4.69384C13.3905 4.36935 12.7616 3.09919 12.4271 2.36577L13.675 1.8457C13.8428 2.21242 14.6529 4.09932 14.1184 5.17612C13.9384 5.53839 13.6283 5.77842 13.2216 5.86843C12.3371 6.06623 11.8192 5.72175 11.4414 5.4706C11.2625 5.3517 11.1058 5.25835 10.9358 5.20946C9.75452 4.87275 11.4036 6.61075 10.6313 7.39196C10.1679 7.85979 9.03554 7.98314 8.9622 8.00092C8.23322 8.1765 7.86428 9.26219 7.86428 9.26219Z"
fill="#F48FB1"
/>
<path
d="M5.77735 5.19971C5.75624 5.44414 5.74624 5.58969 5.80957 5.90745C6.11511 6.13188 6.78063 6.13188 6.78063 6.13188C6.75175 6.04189 6.72619 5.96411 6.71508 5.90856C6.71286 5.90078 6.71175 5.89189 6.70953 5.88412C6.03289 5.54636 5.77735 5.19971 5.77735 5.19971Z"
fill="#C92B27"
/>
<path
d="M4.3926 6.29422L3.24377 5.73092L3.81597 4.9043L4.71703 5.50093L4.3926 6.29422Z"
fill="#FFC107"
/>
<path
d="M2.69866 4.73376C2.11203 4.65487 1.51428 4.15712 1.44873 4.10046L2.02537 3.42383C2.1998 3.5716 2.56978 3.81936 2.81755 3.85269L2.69866 4.73376Z"
fill="#FB8C00"
/>
<path
d="M3.73454 3.25204L2.89014 2.97539C2.9868 2.67985 3.01235 2.36097 2.96236 2.05321L3.84009 1.91211C3.9123 2.35875 3.87564 2.82206 3.73454 3.25204Z"
fill="#03A9F4"
/>
<path
d="M9.87734 2.40185L9.00903 2.5918L9.25976 3.73797L10.1281 3.54802L9.87734 2.40185Z"
fill="#FB8C00"
/>
<path
d="M11.1633 2.8636L10.5522 2.21808C10.8722 1.91476 10.9456 1.51812 10.9456 1.51367L11.8233 1.657C11.8122 1.72699 11.7 2.35585 11.1633 2.8636Z"
fill="#FFC107"
/>
<path
d="M12.2788 6.0445L11.5026 6.28711L11.7677 7.13551L12.544 6.8929L12.2788 6.0445Z"
fill="#FB8C00"
/>
<path
d="M11.7289 13.4486L10.8456 13.3442C10.8833 13.0298 10.6489 12.6442 10.5845 12.5587L11.2955 12.0254C11.3489 12.0954 11.8122 12.7365 11.7289 13.4486Z"
fill="#F44336"
/>
<path
d="M14.2643 12.3224C13.9321 12.2724 13.5921 12.2524 13.2566 12.2647L13.2266 11.3758C13.6165 11.3625 14.011 11.3847 14.3965 11.4436L14.2643 12.3224Z"
fill="#FB8C00"
/>
<path
d="M13.6938 12.9134L13.0693 13.5459L13.9287 14.3944L14.5532 13.7619L13.6938 12.9134Z"
fill="#F48FB1"
/>
<path
d="M11.8765 8.66102L11.2344 7.92676L10.5001 8.56893L11.1423 9.30319L11.8765 8.66102Z"
fill="#F44336"
/>
<defs>
<linearGradient
id="paint0_linear_2434_23047"
x1="9.15497"
y1="7.7609"
x2="5.84707"
y2="9.74564"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.0235" stopColor="#8F4700" />
<stop offset="1" stopColor="#703E2D" />
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

8
frontend/public/Icons/logs.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.91663 3.20801L2.91663 11.083" stroke="white" stroke-width="1.16667"/>
<ellipse cx="6.41663" cy="3.20833" rx="3.5" ry="1.45833" stroke="white" stroke-width="1.16667"/>
<ellipse cx="6.41663" cy="3.16439" rx="0.875" ry="0.364583" fill="white"/>
<path d="M9.91663 11.083C9.91663 11.7273 8.34962 12.2497 6.41663 12.2497C4.48363 12.2497 2.91663 11.7273 2.91663 11.083" stroke="white" stroke-width="1.16667"/>
<path d="M5.25 6.41699V7.53424C5.25 7.56276 5.27062 7.58709 5.29874 7.59178L6.95126 7.8672C6.97938 7.87189 7 7.89623 7 7.92474V9.91699" stroke="white" stroke-width="1.16667" stroke-linecap="round"/>
<path d="M9.91663 3.20801V6.31109C9.91663 6.35691 9.96702 6.38484 10.0059 6.36056L12.1819 5.00054C12.2155 4.97954 12.2598 4.99742 12.2694 5.03586L12.5341 6.09457C12.5388 6.11339 12.5338 6.13332 12.5209 6.14774L9.9316 9.0247C9.92196 9.03541 9.91663 9.04931 9.91663 9.06373V11.083" stroke="white" stroke-width="1.16667"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

4
frontend/public/Icons/play-back.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 9.5L1.5 6L6 2.5V9.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.5 9.5L7 6L11.5 2.5V9.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

12
frontend/public/Icons/spinner-half-blue.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.2">
<mask id="path-1-inside-1_2586_2806" fill="white">
<path d="M15.0588 8.00023C15.0588 11.8987 11.8985 15.0591 7.99999 15.0591C4.10151 15.0591 0.941162 11.8987 0.941162 8.00023C0.941162 4.10175 4.10151 0.941406 7.99999 0.941406C11.8985 0.941406 15.0588 4.10175 15.0588 8.00023ZM3.48234 8.00023C3.48234 10.4953 5.50496 12.5179 7.99999 12.5179C10.495 12.5179 12.5176 10.4953 12.5176 8.00023C12.5176 5.5052 10.495 3.48258 7.99999 3.48258C5.50496 3.48258 3.48234 5.5052 3.48234 8.00023Z"/>
</mask>
<path d="M15.0588 8.00023C15.0588 11.8987 11.8985 15.0591 7.99999 15.0591C4.10151 15.0591 0.941162 11.8987 0.941162 8.00023C0.941162 4.10175 4.10151 0.941406 7.99999 0.941406C11.8985 0.941406 15.0588 4.10175 15.0588 8.00023ZM3.48234 8.00023C3.48234 10.4953 5.50496 12.5179 7.99999 12.5179C10.495 12.5179 12.5176 10.4953 12.5176 8.00023C12.5176 5.5052 10.495 3.48258 7.99999 3.48258C5.50496 3.48258 3.48234 5.5052 3.48234 8.00023Z" stroke="#4E74F8" stroke-width="3.25792" mask="url(#path-1-inside-1_2586_2806)"/>
</g>
<mask id="path-2-inside-2_2586_2806" fill="white">
<path d="M7.99999 15.0591C9.8721 15.0591 11.6675 14.3154 12.9913 12.9916C14.3151 11.6678 15.0588 9.87235 15.0588 8.00023C15.0588 6.12811 14.3151 4.33267 12.9913 3.00889C11.6675 1.6851 9.8721 0.941407 7.99999 0.941406L7.99999 3.48258C9.19814 3.48258 10.3472 3.95855 11.1944 4.80577C12.0417 5.65299 12.5176 6.80208 12.5176 8.00023C12.5176 9.19838 12.0417 10.3475 11.1944 11.1947C10.3472 12.0419 9.19814 12.5179 7.99999 12.5179L7.99999 15.0591Z"/>
</mask>
<path d="M7.99999 15.0591C9.8721 15.0591 11.6675 14.3154 12.9913 12.9916C14.3151 11.6678 15.0588 9.87235 15.0588 8.00023C15.0588 6.12811 14.3151 4.33267 12.9913 3.00889C11.6675 1.6851 9.8721 0.941407 7.99999 0.941406L7.99999 3.48258C9.19814 3.48258 10.3472 3.95855 11.1944 4.80577C12.0417 5.65299 12.5176 6.80208 12.5176 8.00023C12.5176 9.19838 12.0417 10.3475 11.1944 11.1947C10.3472 12.0419 9.19814 12.5179 7.99999 12.5179L7.99999 15.0591Z" stroke="#4E74F8" stroke-width="3.25792" mask="url(#path-2-inside-2_2586_2806)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

10
frontend/public/Icons/spinner.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1_2434_32242" fill="white">
<path d="M15.0588 8.00023C15.0588 11.8987 11.8985 15.0591 7.99999 15.0591C4.10151 15.0591 0.941162 11.8987 0.941162 8.00023C0.941162 4.10175 4.10151 0.941406 7.99999 0.941406C11.8985 0.941406 15.0588 4.10175 15.0588 8.00023ZM2.63528 8.00023C2.63528 10.9631 5.03714 13.3649 7.99999 13.3649C10.9628 13.3649 13.3647 10.9631 13.3647 8.00023C13.3647 5.03738 10.9628 2.63552 7.99999 2.63552C5.03714 2.63552 2.63528 5.03738 2.63528 8.00023Z"/>
</mask>
<path d="M15.0588 8.00023C15.0588 11.8987 11.8985 15.0591 7.99999 15.0591C4.10151 15.0591 0.941162 11.8987 0.941162 8.00023C0.941162 4.10175 4.10151 0.941406 7.99999 0.941406C11.8985 0.941406 15.0588 4.10175 15.0588 8.00023ZM2.63528 8.00023C2.63528 10.9631 5.03714 13.3649 7.99999 13.3649C10.9628 13.3649 13.3647 10.9631 13.3647 8.00023C13.3647 5.03738 10.9628 2.63552 7.99999 2.63552C5.03714 2.63552 2.63528 5.03738 2.63528 8.00023Z" stroke="white" stroke-opacity="0.2" stroke-width="3.25792" mask="url(#path-1-inside-1_2434_32242)"/>
<mask id="path-2-inside-2_2434_32242" fill="white">
<path d="M15.0588 8.00023C15.0588 7.07325 14.8762 6.15535 14.5215 5.29893C14.1667 4.44252 13.6468 3.66436 12.9913 3.00889C12.3359 2.35342 11.5577 1.83347 10.7013 1.47873C9.84486 1.12399 8.92696 0.941406 7.99999 0.941406L7.99999 2.63552C8.70449 2.63552 9.40209 2.77429 10.053 3.04389C10.7038 3.31349 11.2952 3.70865 11.7934 4.20681C12.2916 4.70497 12.6867 5.29637 12.9563 5.94725C13.2259 6.59812 13.3647 7.29573 13.3647 8.00023H15.0588Z"/>
</mask>
<path d="M15.0588 8.00023C15.0588 7.07325 14.8762 6.15535 14.5215 5.29893C14.1667 4.44252 13.6468 3.66436 12.9913 3.00889C12.3359 2.35342 11.5577 1.83347 10.7013 1.47873C9.84486 1.12399 8.92696 0.941406 7.99999 0.941406L7.99999 2.63552C8.70449 2.63552 9.40209 2.77429 10.053 3.04389C10.7038 3.31349 11.2952 3.70865 11.7934 4.20681C12.2916 4.70497 12.6867 5.29637 12.9563 5.94725C13.2259 6.59812 13.3647 7.29573 13.3647 8.00023H15.0588Z" stroke="white" stroke-width="3.25792" mask="url(#path-2-inside-2_2434_32242)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

4
frontend/public/Icons/status-inprogress-pill.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="8" cy="7.99998" rx="8" ry="7.99998" fill="#4568DC"/>
<circle cx="7.99992" cy="7.99967" r="4.33333" fill="#4568DC" stroke="white" stroke-width="0.666667" stroke-dasharray="1.33 1.33"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 300 B

5
frontend/public/Icons/status-skipped-pill.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="8" cy="7.99998" rx="8" ry="7.99998" fill="#FFCD56"/>
<path d="M5 5.5L8 8.5L11 5.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 10.5H5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 348 B

78
frontend/public/Icons/triangle-ruler.svg Normal file
View File

@ -0,0 +1,78 @@
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25049 15.7774L9.51287 11.3613L20.0986 23.8473L16.6515 24.1807L8.25049 15.7774Z" fill="#BF8400"/>
<path d="M3.16675 3.07961V29.3362H29.4234C29.5767 29.3362 29.6523 29.1518 29.5434 29.0429L3.46012 2.95959C3.35122 2.85069 3.16675 2.92625 3.16675 3.07961ZM8.63854 15.1345L17.833 24.18H8.63854V15.1345Z" fill="#EAA700"/>
<path d="M8.24961 24.4043L3.16675 29.3352H29.4234C29.5767 29.3352 29.6523 29.1507 29.5434 29.0418L28.3655 27.8641L8.24961 24.4043Z" fill="#BF8400"/>
<path d="M3.85938 3.73486V28.4846C3.85938 28.5713 3.92827 28.6402 4.01495 28.6402H28.7647C28.9025 28.6402 28.9736 28.4713 28.8758 28.3735L4.12607 3.62596C4.02828 3.52817 3.85938 3.59707 3.85938 3.73486ZM8.69776 15.403L17.0988 23.8041H8.69776V15.403Z" fill="url(#paint0_linear_2445_43701)"/>
<path d="M4.51082 6.18231C4.39971 6.29342 4.39971 6.47563 4.51082 6.58674L4.73525 6.81117C4.84636 6.92227 5.02857 6.92227 5.13967 6.81117L6.22628 5.72456L5.59743 5.0957L4.51082 6.18231Z" fill="#795548"/>
<path d="M5.59763 5.09766L5.07544 5.61985L5.70207 6.24649L6.22427 5.72429L5.59763 5.09766Z" fill="url(#paint1_linear_2445_43701)"/>
<path d="M8.68929 10.361C8.57818 10.4721 8.57818 10.6543 8.68929 10.7654L8.91372 10.9899C9.02482 11.101 9.20704 11.101 9.31814 10.9899L10.4048 9.90327L9.7759 9.27441L8.68929 10.361Z" fill="#795548"/>
<path d="M9.77561 9.27441L9.25342 9.79661L9.88005 10.4255L10.4022 9.90327L9.77561 9.27441Z" fill="url(#paint2_linear_2445_43701)"/>
<path d="M12.8668 14.5378C12.7557 14.6489 12.7557 14.8311 12.8668 14.9422L13.0912 15.1666C13.2023 15.2777 13.3845 15.2777 13.4956 15.1666L14.5822 14.08L13.9534 13.4512L12.8668 14.5378Z" fill="#795548"/>
<path d="M13.9529 13.4512L13.4285 13.9734L14.0573 14.6022L14.5795 14.08L13.9529 13.4512Z" fill="url(#paint3_linear_2445_43701)"/>
<path d="M17.0457 18.7175C16.9346 18.8286 16.9346 19.0108 17.0457 19.1219L17.2702 19.3463C17.3813 19.4574 17.5635 19.4574 17.6746 19.3463L18.7612 18.2597L18.1323 17.6309L17.0457 18.7175Z" fill="#795548"/>
<path d="M18.1296 17.6309L17.6074 18.1531L18.2363 18.7819L18.7585 18.2597L18.1296 17.6309Z" fill="url(#paint4_linear_2445_43701)"/>
<path d="M21.2244 22.8962C21.1133 23.0073 21.1133 23.1895 21.2244 23.3006L21.4489 23.525C21.56 23.6361 21.7422 23.6361 21.8533 23.525L22.9399 22.4384L22.3111 21.8096L21.2244 22.8962Z" fill="#795548"/>
<path d="M22.3083 21.8096L21.7861 22.3318L22.415 22.9606L22.9372 22.4384L22.3083 21.8096Z" fill="url(#paint5_linear_2445_43701)"/>
<path d="M25.4032 27.0739C25.292 27.185 25.292 27.3672 25.4032 27.4783L25.6276 27.7028C25.7387 27.8139 25.9209 27.8139 26.032 27.7028L27.1186 26.6162L26.4898 25.9873L25.4032 27.0739Z" fill="#795548"/>
<path d="M26.4875 25.9873L25.9653 26.5095L26.5942 27.1384L27.1164 26.6162L26.4875 25.9873Z" fill="url(#paint6_linear_2445_43701)"/>
<path d="M9.84236 13.2214C9.73126 13.3325 9.73126 13.5147 9.84236 13.6258L10.2312 14.0147C10.3423 14.1258 10.5245 14.1258 10.6357 14.0147L12.4644 12.1859L11.6712 11.3926L9.84236 13.2214Z" fill="#795548"/>
<path d="M11.7822 11.2812L11.2578 11.8034L12.0511 12.5967L12.5733 12.0745L11.7822 11.2812Z" fill="url(#paint7_linear_2445_43701)"/>
<path d="M14.0213 17.3991C13.9102 17.5102 13.9102 17.6924 14.0213 17.8035L14.4102 18.1924C14.5213 18.3035 14.7035 18.3035 14.8146 18.1924L16.6434 16.3636L15.8501 15.5703L14.0213 17.3991Z" fill="#795548"/>
<path d="M15.959 15.459L15.4368 15.9812L16.2301 16.7745L16.7523 16.2523L15.959 15.459Z" fill="url(#paint8_linear_2445_43701)"/>
<path d="M5.66536 9.04266C5.55425 9.15377 5.55425 9.33598 5.66536 9.44708L6.05423 9.83595C6.16533 9.94706 6.34755 9.94706 6.45865 9.83595L8.28744 8.00716L7.49415 7.21387L5.66536 9.04266Z" fill="#795548"/>
<path d="M7.6052 7.10254L7.08301 7.62473L7.87408 8.41803L8.39627 7.89583L7.6052 7.10254Z" fill="url(#paint9_linear_2445_43701)"/>
<path d="M18.1988 21.5778C18.0877 21.6889 18.0877 21.8711 18.1988 21.9822L18.5877 22.3711C18.6988 22.4822 18.881 22.4822 18.9921 22.3711L20.8209 20.5423L20.0276 19.749L18.1988 21.5778Z" fill="#795548"/>
<path d="M20.1367 19.6377L19.6145 20.1599L20.4078 20.9532L20.93 20.431L20.1367 19.6377Z" fill="url(#paint10_linear_2445_43701)"/>
<path d="M22.3778 25.7556C22.2667 25.8667 22.2667 26.0489 22.3778 26.16L22.7666 26.5488C22.8777 26.6599 23.0599 26.6599 23.1711 26.5488L24.9998 24.72L24.2066 23.9268L22.3778 25.7556Z" fill="#795548"/>
<path d="M24.3154 23.8154L23.7932 24.3376L24.5865 25.1309L25.1087 24.6087L24.3154 23.8154Z" fill="url(#paint11_linear_2445_43701)"/>
<defs>
<linearGradient id="paint0_linear_2445_43701" x1="9.0951" y1="23.4067" x2="20.3432" y2="12.1586" gradientUnits="userSpaceOnUse">
<stop offset="0.5456" stop-color="#FDD835"/>
<stop offset="0.7758" stop-color="#F9A825"/>
</linearGradient>
<linearGradient id="paint1_linear_2445_43701" x1="5.38405" y1="5.93783" x2="5.73014" y2="5.59174" gradientUnits="userSpaceOnUse">
<stop stop-color="#5D4037" stop-opacity="0"/>
<stop offset="1" stop-color="#5D4037"/>
</linearGradient>
<linearGradient id="paint2_linear_2445_43701" x1="9.56189" y1="10.1167" x2="9.90798" y2="9.77059" gradientUnits="userSpaceOnUse">
<stop stop-color="#5D4037" stop-opacity="0"/>
<stop offset="1" stop-color="#5D4037"/>
</linearGradient>
<linearGradient id="paint3_linear_2445_43701" x1="13.739" y1="14.2933" x2="14.0851" y2="13.9472" gradientUnits="userSpaceOnUse">
<stop stop-color="#5D4037" stop-opacity="0"/>
<stop offset="1" stop-color="#5D4037"/>
</linearGradient>
<linearGradient id="paint4_linear_2445_43701" x1="17.9178" y1="18.4728" x2="18.2639" y2="18.1268" gradientUnits="userSpaceOnUse">
<stop stop-color="#5D4037" stop-opacity="0"/>
<stop offset="1" stop-color="#5D4037"/>
</linearGradient>
<linearGradient id="paint5_linear_2445_43701" x1="22.0964" y1="22.6514" x2="22.4425" y2="22.3053" gradientUnits="userSpaceOnUse">
<stop stop-color="#5D4037" stop-opacity="0"/>
<stop offset="1" stop-color="#5D4037"/>
</linearGradient>
<linearGradient id="paint6_linear_2445_43701" x1="26.2755" y1="26.829" x2="26.6216" y2="26.4829" gradientUnits="userSpaceOnUse">
<stop stop-color="#5D4037" stop-opacity="0"/>
<stop offset="1" stop-color="#5D4037"/>
</linearGradient>
<linearGradient id="paint7_linear_2445_43701" x1="11.6945" y1="12.1617" x2="11.9778" y2="11.8783" gradientUnits="userSpaceOnUse">
<stop stop-color="#5D4037" stop-opacity="0"/>
<stop offset="1" stop-color="#5D4037"/>
</linearGradient>
<linearGradient id="paint8_linear_2445_43701" x1="15.8733" y1="16.3393" x2="16.1566" y2="16.0559" gradientUnits="userSpaceOnUse">
<stop stop-color="#5D4037" stop-opacity="0"/>
<stop offset="1" stop-color="#5D4037"/>
</linearGradient>
<linearGradient id="paint9_linear_2445_43701" x1="7.51756" y1="7.98312" x2="7.80095" y2="7.69973" gradientUnits="userSpaceOnUse">
<stop stop-color="#5D4037" stop-opacity="0"/>
<stop offset="1" stop-color="#5D4037"/>
</linearGradient>
<linearGradient id="paint10_linear_2445_43701" x1="20.0509" y1="20.5178" x2="20.3342" y2="20.2345" gradientUnits="userSpaceOnUse">
<stop stop-color="#5D4037" stop-opacity="0"/>
<stop offset="1" stop-color="#5D4037"/>
</linearGradient>
<linearGradient id="paint11_linear_2445_43701" x1="24.2294" y1="24.6955" x2="24.5128" y2="24.4121" gradientUnits="userSpaceOnUse">
<stop stop-color="#5D4037" stop-opacity="0"/>
<stop offset="1" stop-color="#5D4037"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

60
frontend/public/Icons/wrench.svg Normal file
View File

@ -0,0 +1,60 @@
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.30535 14.0629C3.04433 14.8019 3.94222 14.5452 4.46117 13.954C4.99124 13.3495 5.2735 12.9984 5.2735 12.9984C5.93469 12.0249 8.66614 8.77116 10.9975 6.42975C11.322 6.5631 11.6665 6.63311 12.0121 6.63311C12.6277 6.63311 13.2445 6.42086 13.7379 5.99525C14.3335 5.48186 14.6691 4.73843 14.6602 3.955C14.6591 3.90055 14.6302 3.84943 14.5824 3.82276C14.5347 3.79609 14.4769 3.79609 14.4291 3.82276L12.8233 4.74954C12.0477 4.48173 11.5887 3.68385 11.7465 2.88598L13.3467 1.96253C13.3945 1.93474 13.4234 1.88474 13.4234 1.82918C13.4234 1.77361 13.3945 1.72361 13.3467 1.69583C12.3077 1.08797 10.9875 1.2591 10.1363 2.11032C9.62071 2.62594 9.33845 3.33937 9.36179 4.06723C9.37512 4.49284 9.48736 4.89734 9.68627 5.2585C7.11039 7.8266 3.96778 10.6036 3.1499 11.2237C3.1499 11.2237 2.65761 11.5804 2.18756 12.0638C1.72416 12.5405 1.55192 13.3095 2.30535 14.0629ZM2.84653 12.9261C2.84653 12.5994 3.111 12.3338 3.43882 12.3338C3.76664 12.3338 4.03112 12.5983 4.03112 12.9261C4.03112 13.2528 3.76664 13.5184 3.43882 13.5184C3.111 13.5184 2.84653 13.2528 2.84653 12.9261Z"
fill="#82AEC0"
/>
<path
d="M9.33398 5.60826C9.44953 5.4938 9.5673 5.37823 9.6873 5.25822C9.48842 4.89706 9.3762 4.49256 9.36287 4.06695C9.35398 3.77803 9.39287 3.49244 9.47509 3.22018C9.54841 3.10017 9.66396 2.97126 9.73729 3.04905C9.7073 3.99472 9.98173 4.9804 10.6395 5.66049C10.9661 5.99831 11.3905 6.24167 11.8461 6.35613C12.0705 6.41281 12.3038 6.43836 12.536 6.42503C12.6727 6.41725 13.0549 6.27612 13.1316 6.38058C13.1316 6.38058 13.1316 6.38391 13.1316 6.38502C12.7782 6.54949 12.3949 6.63172 12.0116 6.63172C11.6661 6.63172 11.3205 6.56171 10.9972 6.42836C10.2428 7.18624 9.61841 7.86854 9.09399 8.47862C9.3562 7.983 10.1284 7.06955 10.335 6.72062C10.3817 6.64172 10.4461 6.43948 10.2995 6.25723C10.0917 6.00164 9.66619 5.76383 9.33398 5.60826Z"
fill="#2F7889"
/>
<path
d="M6.18641 9.52893C6.24641 9.46671 6.18974 9.36227 6.1053 9.38116C5.94753 9.4156 5.71977 9.50559 5.44867 9.72558C4.91759 10.1567 3.51544 11.3211 3.34212 11.551C3.16879 11.781 3.86431 11.5477 4.10874 11.5044C4.30984 11.4677 5.71088 10.0233 6.18641 9.52893Z"
fill="#B9E4EA"
/>
<path
d="M11.0483 2.10366C10.7517 2.31588 10.485 2.56808 10.2072 2.80474C10.1361 2.86585 10.0306 2.92695 9.95726 2.86918C9.87726 2.80585 9.92726 2.67808 9.98726 2.59586C10.5128 1.87368 11.4938 1.35704 12.4427 1.56258C11.9427 1.72368 11.4927 1.7859 11.0483 2.10366Z"
fill="#B9E4EA"
/>
<path
d="M13.4078 4.58291C13.2912 4.65291 13.1289 4.74624 13.0367 4.7729C12.9245 4.80401 12.6067 4.68069 12.5145 4.60736C12.8945 4.35959 13.3178 4.08294 13.6978 3.83517C13.7411 3.8074 13.7845 3.77851 13.8345 3.76296C13.8933 3.74407 13.9578 3.74629 14.02 3.74851C14.1067 3.75296 14.53 3.73851 14.58 3.81295C14.63 3.8885 14.4544 3.96183 14.3966 3.99628C14.0667 4.19293 13.7367 4.38737 13.4078 4.58291Z"
fill="#2F7889"
/>
<path
d="M8.86729 8.68619L7.62402 7.25293C7.17404 7.67624 6.72851 8.08844 6.30298 8.47842L6.66518 8.39954C6.82406 8.3662 6.9885 8.41509 7.10405 8.52953L7.68402 9.1795C7.80623 9.30171 7.82623 9.51392 7.77957 9.68058L7.71513 9.98834C8.08177 9.56503 8.46953 9.12616 8.86729 8.68619Z"
fill="#2F7889"
/>
<path
d="M14.3782 13.8579L13.6336 14.5013C13.3469 14.7491 12.9113 14.7158 12.6657 14.4291L3.84131 3.77776L4.97589 2.92432L14.4349 12.9C14.6904 13.1789 14.6638 13.6112 14.3782 13.8579Z"
fill="#A06841"
/>
<path
d="M4.64795 4.75126L6.74784 7.28669C7.0756 6.79338 7.24226 6.2023 7.37669 5.45567L5.34902 3.31689C5.18459 3.45133 5.04348 3.61355 4.9346 3.79576C4.76239 4.08574 4.67239 4.41461 4.64795 4.75126Z"
fill="#7D5133"
/>
<path
d="M8.81067 1.43737C6.88376 1.41514 6.17034 1.58627 5.09687 2.51417C4.77461 2.79198 4.45346 3.06979 4.13119 3.34872C3.78115 3.65098 3.31554 3.91546 3.38888 4.43774C3.41555 4.62888 3.47445 4.82224 3.43889 5.01115C3.40444 5.19006 3.19663 5.27896 3.04884 5.17673C2.90993 5.08116 2.75658 4.96337 2.58545 4.94336C2.42543 4.92558 2.25652 4.97559 2.13539 5.08338L1.38863 5.7468C1.38863 5.7468 1.28195 6.1813 2.11761 7.12697C2.95327 8.07264 3.49111 8.00486 3.49111 8.00486L4.19342 7.387C4.31122 7.28366 4.37234 7.13142 4.369 6.97473C4.36567 6.79137 4.25899 6.64913 4.19454 6.48467C4.18231 6.45355 4.1123 6.34243 4.23454 6.2413C4.34344 6.14685 4.56792 6.17907 4.69571 6.21352C4.8235 6.24797 4.94574 6.30242 5.07465 6.33576C5.32579 6.40132 5.44358 6.28464 5.61805 6.13462C5.77251 6.00127 6.70263 5.19784 7.01267 4.92892C7.63163 4.39329 6.68818 3.4554 6.68818 3.4554C6.24368 2.952 8.94068 1.68629 8.94068 1.68629C9.13849 1.61739 9.07848 1.43959 8.81067 1.43737Z"
fill="#82AEC0"
/>
<path
d="M5.07585 6.33655C5.12807 6.34988 5.17363 6.35433 5.21585 6.35322C5.21585 6.34655 5.21585 6.33877 5.21585 6.33211C5.20474 6.21211 5.13918 6.10323 5.07252 6.00212C4.65588 5.36771 4.13813 4.80108 3.54482 4.32888C3.49594 4.28999 3.44483 4.25111 3.3915 4.21777C3.38039 4.28555 3.37817 4.35888 3.38928 4.43776C3.41594 4.62886 3.47483 4.82219 3.43927 5.01107C3.4015 5.20661 3.19706 5.26105 3.04041 5.18772C3.44816 5.45104 3.79703 5.80213 4.05146 6.21545C4.08591 6.271 4.12035 6.32989 4.16035 6.38322C4.1659 6.32877 4.19034 6.27655 4.2359 6.24211C4.34478 6.14767 4.56921 6.17989 4.69698 6.21434C4.82587 6.24767 4.94697 6.30211 5.07585 6.33655Z"
fill="#2F7889"
/>
<path
d="M2.77746 6.57238C3.36299 7.18457 3.69186 7.81898 3.51187 7.99119C3.33299 8.1623 2.71302 7.80565 2.1275 7.19457C1.54197 6.58349 1.20977 5.91908 1.38865 5.74687C1.56753 5.57576 2.19194 5.96019 2.77746 6.57238Z"
fill="#2F7889"
/>
<path
d="M5.05664 3.4082C5.52217 3.21043 5.93659 2.78601 6.47879 2.31826C6.63322 2.18493 6.82988 2.05827 7.03098 1.96272C7.10653 1.92717 7.07876 1.81384 6.99543 1.81495C6.71655 1.81939 6.46768 1.90383 6.22325 2.01049C5.88104 2.15938 5.57884 2.38492 5.28774 2.61824C5.08775 2.77823 4.61889 3.17377 4.32335 3.42375C4.26779 3.47042 4.31112 3.54375 4.38334 3.54375C4.59111 3.54597 4.70777 3.55708 5.05664 3.4082Z"
fill="#B9E4EA"
/>
<path
d="M2.12439 5.3515C1.92773 5.5726 2.17883 5.63259 2.61992 5.99702C2.93101 6.25478 3.2621 6.01591 3.26544 5.77481C3.26766 5.55815 3.21322 5.44149 2.89879 5.24373C2.58436 5.04596 2.30215 5.15151 2.12439 5.3515Z"
fill="#B9E4EA"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

17
frontend/public/Images/activeDot.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_2445_31698)">
<circle cx="23" cy="23" r="3" fill="#51E7A8"/>
</g>
<defs>
<filter id="filter0_d_2445_31698" x="0" y="0" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="10"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.317647 0 0 0 0 0.905882 0 0 0 0 0.658824 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2445_31698"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2445_31698" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 910 B

891
frontend/public/Images/allInOne.svg Normal file
View File

@ -0,0 +1,891 @@
<svg width="189" height="536" viewBox="0 0 189 536" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2434_21797)">
<path d="M126.756 568.295L126.756 329.756L126.756 24.3083C126.756 20.2857 123.495 17.0248 119.473 17.0248H57.5084C53.4859 17.0248 50.2249 20.2857 50.2249 24.3083V82.1939C50.2249 86.2165 46.964 89.4774 42.9414 89.4774H-147.722" stroke="#E5484D" stroke-opacity="0.1" stroke-width="7.2835"/>
<path d="M126.756 568.295L126.756 329.756L126.756 24.3083C126.756 20.2857 123.495 17.0248 119.473 17.0248H57.5084C53.4859 17.0248 50.2249 20.2857 50.2249 24.3083V82.4853C50.2249 86.5078 46.964 89.7688 42.9414 89.7688H-147.722" stroke="#E5484D" stroke-width="0.87402"/>
<path d="M137.682 568.295L137.682 322.39L137.682 7.28355C137.682 3.26098 134.421 4.47147e-05 130.398 4.47147e-05H65.1235C61.1009 4.47147e-05 57.84 3.26098 57.84 7.28355V109.951C57.84 113.974 54.5791 117.235 50.5565 117.235H-148.669" stroke="#4E74F8" stroke-opacity="0.1" stroke-width="7.2835"/>
<path d="M137.682 568.295L137.682 322.39L137.682 7.28355C137.682 3.26098 134.421 4.47147e-05 130.398 4.47147e-05H65.1235C61.1009 4.47147e-05 57.84 3.26098 57.84 7.28355V109.951C57.84 113.974 54.5791 117.235 50.5565 117.235H-148.669" stroke="#4E74F8" stroke-width="0.87402"/>
<path d="M116.195 568.295L116.195 329.757L116.195 35.9623C116.195 31.9398 112.934 28.6788 108.912 28.6788H46.9474C42.9248 28.6788 39.6639 31.9398 39.6639 35.9623V55.1726C39.6639 59.1951 36.403 62.4561 32.3804 62.4561H-149.798" stroke="#FFCD56" stroke-opacity="0.1" stroke-width="7.2835"/>
<path d="M116.195 568.295L116.195 329.757L116.195 35.9623C116.195 31.9398 112.934 28.6788 108.912 28.6788H46.9474C42.9248 28.6788 39.6639 31.9398 39.6639 35.9623V55.1726C39.6639 59.1951 36.403 62.4561 32.3804 62.4561H-149.798" stroke="#FFCD56" stroke-width="0.87402"/>
<rect x="66.7788" y="63.1685" width="121.016" height="49.0787" fill="#121317"/>
<rect x="79" y="230" width="96" height="32" fill="#121317"/>
<rect x="85" y="444" width="84" height="48" fill="#121317"/>
<g clip-path="url(#clip1_2434_21797)">
<line x1="152.792" y1="380.059" x2="158.176" y2="374.675" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="384.917" x2="158.176" y2="379.534" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="389.776" x2="158.176" y2="384.392" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="394.635" x2="158.176" y2="389.251" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="399.494" x2="158.176" y2="394.11" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="404.352" x2="158.176" y2="398.969" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="409.211" x2="158.176" y2="403.827" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="414.07" x2="158.176" y2="408.686" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="418.929" x2="158.176" y2="413.545" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="423.788" x2="158.176" y2="418.404" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="428.646" x2="158.176" y2="423.263" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="433.505" x2="158.176" y2="428.121" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="438.364" x2="158.176" y2="432.98" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="443.223" x2="158.176" y2="437.839" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="448.081" x2="158.176" y2="442.698" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="452.94" x2="158.176" y2="447.556" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="457.799" x2="158.176" y2="452.415" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="462.658" x2="158.176" y2="457.274" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="467.517" x2="158.176" y2="462.133" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="472.375" x2="158.176" y2="466.992" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="477.234" x2="158.176" y2="471.85" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="482.093" x2="158.176" y2="476.709" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="486.952" x2="158.176" y2="481.568" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="491.81" x2="158.176" y2="486.427" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="496.669" x2="158.176" y2="491.285" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="501.528" x2="158.176" y2="496.144" stroke="#62687C" stroke-width="0.26255"/>
<line x1="152.792" y1="506.387" x2="158.176" y2="501.003" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="153.016" y="374.899" width="5.12133" height="131.45" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip2_2434_21797)">
<line x1="150.429" y1="380.059" x2="155.813" y2="374.675" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="384.917" x2="155.813" y2="379.534" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="389.776" x2="155.813" y2="384.392" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="394.635" x2="155.813" y2="389.251" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="399.494" x2="155.813" y2="394.11" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="404.352" x2="155.813" y2="398.969" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="409.211" x2="155.813" y2="403.827" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="414.07" x2="155.813" y2="408.686" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="418.929" x2="155.813" y2="413.545" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="423.788" x2="155.813" y2="418.404" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="428.646" x2="155.813" y2="423.263" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="433.505" x2="155.813" y2="428.121" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="438.364" x2="155.813" y2="432.98" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="443.223" x2="155.813" y2="437.839" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="448.081" x2="155.813" y2="442.698" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="452.94" x2="155.813" y2="447.556" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="457.799" x2="155.813" y2="452.415" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="462.658" x2="155.813" y2="457.274" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="467.517" x2="155.813" y2="462.133" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="472.375" x2="155.813" y2="466.992" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="477.234" x2="155.813" y2="471.85" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="482.093" x2="155.813" y2="476.709" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="486.952" x2="155.813" y2="481.568" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="491.81" x2="155.813" y2="486.427" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="496.669" x2="155.813" y2="491.285" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="501.528" x2="155.813" y2="496.144" stroke="#62687C" stroke-width="0.26255"/>
<line x1="150.429" y1="506.387" x2="155.813" y2="501.003" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="150.653" y="374.899" width="5.12133" height="131.45" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip3_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 380.151)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 385.01)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 389.869)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 394.728)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 399.586)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 404.445)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 409.304)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 414.163)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 419.021)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 423.88)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 428.739)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 433.598)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 438.457)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 443.315)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 448.174)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 453.033)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 457.892)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 462.75)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 467.609)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 472.468)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 477.327)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 482.186)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 487.044)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 491.903)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 496.762)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 501.621)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 100.77 506.479)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.12133" height="131.45" transform="matrix(-1 0 0 1 100.507 374.768)" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip4_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 273.031)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 276.315)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 279.598)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 282.882)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 286.165)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 289.449)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 292.732)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 296.016)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 299.299)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 302.583)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 305.866)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.251" height="34.6566" transform="matrix(-1 0 0 1 111.139 267.647)" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip5_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 123.377)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 126.661)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 129.944)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 133.228)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 136.511)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 139.795)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 143.079)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 146.362)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 149.646)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 152.929)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 111.337 156.212)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.251" height="34.6566" transform="matrix(-1 0 0 1 111.139 117.994)" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip6_2434_21797)">
<line x1="142.355" y1="272.938" x2="147.739" y2="267.555" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="276.222" x2="147.739" y2="270.838" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="279.505" x2="147.739" y2="274.121" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="282.789" x2="147.739" y2="277.405" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="286.072" x2="147.739" y2="280.688" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="289.356" x2="147.739" y2="283.972" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="292.64" x2="147.739" y2="287.256" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="295.923" x2="147.739" y2="290.539" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="299.206" x2="147.739" y2="293.823" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="302.49" x2="147.739" y2="297.106" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="305.773" x2="147.739" y2="300.389" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="142.514" y="267.779" width="5.251" height="34.6566" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip7_2434_21797)">
<line x1="142.355" y1="123.285" x2="147.739" y2="117.901" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="126.568" x2="147.739" y2="121.184" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="129.852" x2="147.739" y2="124.468" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="133.135" x2="147.739" y2="127.751" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="136.418" x2="147.739" y2="131.035" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="139.702" x2="147.739" y2="134.318" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="142.986" x2="147.739" y2="137.602" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="146.269" x2="147.739" y2="140.885" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="149.553" x2="147.739" y2="144.169" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="152.836" x2="147.739" y2="147.452" stroke="#62687C" stroke-width="0.26255"/>
<line x1="142.355" y1="156.12" x2="147.739" y2="150.736" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="142.514" y="118.125" width="5.251" height="34.6566" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip8_2434_21797)">
<line x1="161.521" y1="476.939" x2="166.905" y2="471.556" stroke="#62687C" stroke-width="0.26255"/>
<line x1="161.521" y1="480.223" x2="166.905" y2="474.839" stroke="#62687C" stroke-width="0.26255"/>
<line x1="161.521" y1="483.506" x2="166.905" y2="478.122" stroke="#62687C" stroke-width="0.26255"/>
<line x1="161.521" y1="486.79" x2="166.905" y2="481.406" stroke="#62687C" stroke-width="0.26255"/>
<line x1="161.521" y1="490.073" x2="166.905" y2="484.689" stroke="#62687C" stroke-width="0.26255"/>
<line x1="161.521" y1="493.357" x2="166.905" y2="487.973" stroke="#62687C" stroke-width="0.26255"/>
<line x1="161.521" y1="496.641" x2="166.905" y2="491.257" stroke="#62687C" stroke-width="0.26255"/>
<line x1="161.521" y1="499.924" x2="166.905" y2="494.54" stroke="#62687C" stroke-width="0.26255"/>
<line x1="161.521" y1="503.207" x2="166.905" y2="497.824" stroke="#62687C" stroke-width="0.26255"/>
<line x1="161.521" y1="506.491" x2="166.905" y2="501.107" stroke="#62687C" stroke-width="0.26255"/>
<line x1="161.521" y1="509.774" x2="166.905" y2="504.39" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="161.68" y="471.78" width="5.251" height="34.6566" rx="2.6255" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip9_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 92.1709 477.032)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 92.1709 480.316)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 92.1709 483.599)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 92.1709 486.883)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 92.1709 490.166)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 92.1709 493.45)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 92.1709 496.733)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 92.1709 500.017)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 92.1709 503.3)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 92.1709 506.583)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 92.1709 509.867)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.251" height="34.6566" rx="2.6255" transform="matrix(-1 0 0 1 91.973 471.648)" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip10_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 88.7576 168.799)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 88.7576 172.083)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 88.7576 175.366)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 88.7576 178.649)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 88.7576 181.933)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 88.7576 185.216)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 88.7576 188.5)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 88.7576 191.783)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 88.7576 195.067)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 88.7576 198.35)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 88.7576 201.634)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.251" height="34.6566" rx="2.6255" transform="matrix(-1 0 0 1 88.56 163.415)" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip11_2434_21797)">
<line x1="164.672" y1="168.706" x2="170.055" y2="163.322" stroke="#62687C" stroke-width="0.26255"/>
<line x1="164.672" y1="171.99" x2="170.055" y2="166.606" stroke="#62687C" stroke-width="0.26255"/>
<line x1="164.672" y1="175.273" x2="170.055" y2="169.889" stroke="#62687C" stroke-width="0.26255"/>
<line x1="164.672" y1="178.557" x2="170.055" y2="173.173" stroke="#62687C" stroke-width="0.26255"/>
<line x1="164.672" y1="181.84" x2="170.055" y2="176.456" stroke="#62687C" stroke-width="0.26255"/>
<line x1="164.672" y1="185.123" x2="170.055" y2="179.74" stroke="#62687C" stroke-width="0.26255"/>
<line x1="164.672" y1="188.407" x2="170.055" y2="183.023" stroke="#62687C" stroke-width="0.26255"/>
<line x1="164.672" y1="191.69" x2="170.055" y2="186.307" stroke="#62687C" stroke-width="0.26255"/>
<line x1="164.672" y1="194.974" x2="170.055" y2="189.59" stroke="#62687C" stroke-width="0.26255"/>
<line x1="164.672" y1="198.257" x2="170.055" y2="192.873" stroke="#62687C" stroke-width="0.26255"/>
<line x1="164.672" y1="201.541" x2="170.055" y2="196.157" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="164.831" y="163.546" width="5.251" height="34.6566" rx="2.6255" stroke="#62687C" stroke-width="0.26255"/>
<rect x="170.082" y="168.009" width="6.8263" height="1.83785" stroke="#62687C" stroke-width="0.26255"/>
<rect x="170.082" y="175.886" width="6.8263" height="1.83785" stroke="#62687C" stroke-width="0.26255"/>
<rect x="170.082" y="183.762" width="6.8263" height="1.83785" stroke="#62687C" stroke-width="0.26255"/>
<rect x="170.082" y="191.639" width="6.8263" height="1.83785" stroke="#62687C" stroke-width="0.26255"/>
<rect x="76.8764" y="168.009" width="6.56375" height="1.83785" stroke="#62687C" stroke-width="0.26255"/>
<rect x="76.8764" y="175.886" width="6.56375" height="1.83785" stroke="#62687C" stroke-width="0.26255"/>
<rect x="76.8764" y="183.762" width="6.56375" height="1.83785" stroke="#62687C" stroke-width="0.26255"/>
<rect x="76.8764" y="191.639" width="6.56375" height="1.83785" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip12_2434_21797)">
<rect width="5.251" height="32.0311" transform="matrix(0 -1 -1 0 141.595 497.116)" fill="#0B0C0E"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 136.211 497.183)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 131.352 497.183)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 126.494 497.183)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 121.635 497.183)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 116.776 497.183)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 111.917 497.183)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 107.059 497.183)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="-0.131275" width="4.98845" height="31.7686" transform="matrix(0 -1 -1 0 141.332 496.854)" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip13_2434_21797)">
<rect width="2.36714" height="28.7698" transform="matrix(0 -1 -1 0 141.323 502.489)" fill="#0B0C0E"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 135.939 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 133.706 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 131.473 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 129.24 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 127.006 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 124.773 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 122.54 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 120.306 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 118.073 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 115.84 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 113.607 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 111.374 503.998)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 109.14 503.998)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="-0.131275" width="2.10459" height="28.5073" transform="matrix(0 -1 -1 0 141.061 502.227)" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip14_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 380.151)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 385.01)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 389.869)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 394.728)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 399.586)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 404.445)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 409.304)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 414.163)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 419.021)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 423.88)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 428.739)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 433.598)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 438.457)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 443.315)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 448.174)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 453.033)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 457.892)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 462.75)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 467.609)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 472.468)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 477.327)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 482.186)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 487.044)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 491.903)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 496.762)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 501.621)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.133 506.479)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.12133" height="131.45" transform="matrix(-1 0 0 1 102.871 374.768)" stroke="#62687C" stroke-width="0.26255"/>
<rect x="97.8805" y="374.899" width="2.75678" height="24.6797" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<rect x="153.016" y="374.899" width="2.75678" height="24.6797" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip15_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 235.749)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 240.608)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 245.467)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 250.326)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 255.184)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 260.043)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 264.902)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 269.761)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 274.62)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 279.478)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 284.337)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 289.196)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 294.055)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 298.913)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 303.772)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 308.631)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 313.49)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 318.349)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 323.207)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 328.066)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 332.925)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 337.784)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 342.642)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 347.501)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 352.36)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 357.219)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 171.396 362.077)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.12133" height="131.45" transform="matrix(-1 0 0 1 171.133 230.365)" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip16_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 235.749)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 240.608)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 245.467)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 250.326)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 255.184)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 260.043)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 264.902)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 269.761)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 274.62)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 279.478)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 284.337)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 289.196)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 294.055)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 298.913)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 303.772)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 308.631)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 313.49)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 318.349)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 323.207)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 328.066)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 332.925)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 337.784)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 342.642)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 347.501)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 352.36)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 357.219)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 169.033 362.077)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.12133" height="131.45" transform="matrix(-1 0 0 1 168.771 230.365)" stroke="#62687C" stroke-width="0.26255"/>
<rect x="166.143" y="230.497" width="2.75678" height="24.6797" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip17_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 86.0952)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 90.9541)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 95.8125)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 100.671)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 105.53)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 110.389)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 115.248)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 120.106)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 124.965)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 129.824)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 134.683)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 139.542)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 144.4)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 149.259)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 154.118)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 158.977)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 163.835)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 168.694)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 173.553)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 178.412)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 183.271)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 188.129)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 192.988)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 197.847)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 202.706)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 207.564)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 184.523 212.423)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.12133" height="131.45" transform="matrix(-1 0 0 1 184.261 80.7114)" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip18_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 86.0952)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 90.9541)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 95.8125)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 100.671)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 105.53)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 110.389)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 115.248)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 120.106)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 124.965)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 129.824)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 134.683)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 139.542)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 144.4)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 149.259)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 154.118)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 158.977)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 163.835)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 168.694)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 173.553)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 178.412)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 183.271)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 188.129)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 192.988)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 197.847)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 202.706)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 207.564)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 182.161 212.423)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.12133" height="131.45" transform="matrix(-1 0 0 1 181.898 80.7114)" stroke="#62687C" stroke-width="0.26255"/>
<rect x="179.271" y="80.8427" width="2.75678" height="24.6797" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip19_2434_21797)">
<line x1="84.5288" y1="235.656" x2="89.9126" y2="230.272" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="240.515" x2="89.9126" y2="235.131" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="245.374" x2="89.9126" y2="239.99" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="250.233" x2="89.9126" y2="244.849" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="255.091" x2="89.9126" y2="249.707" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="259.95" x2="89.9126" y2="254.566" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="264.809" x2="89.9126" y2="259.425" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="269.668" x2="89.9126" y2="264.284" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="274.527" x2="89.9126" y2="269.143" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="279.385" x2="89.9126" y2="274.001" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="284.244" x2="89.9126" y2="278.86" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="289.103" x2="89.9126" y2="283.719" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="293.962" x2="89.9126" y2="288.578" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="298.82" x2="89.9126" y2="293.436" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="303.679" x2="89.9126" y2="298.295" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="308.538" x2="89.9126" y2="303.154" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="313.397" x2="89.9126" y2="308.013" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="318.256" x2="89.9126" y2="312.872" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="323.114" x2="89.9126" y2="317.73" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="327.973" x2="89.9126" y2="322.589" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="332.832" x2="89.9126" y2="327.448" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="337.691" x2="89.9126" y2="332.307" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="342.549" x2="89.9126" y2="337.165" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="347.408" x2="89.9126" y2="342.024" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="352.267" x2="89.9126" y2="346.883" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="357.126" x2="89.9126" y2="351.742" stroke="#62687C" stroke-width="0.26255"/>
<line x1="84.5288" y1="361.984" x2="89.9126" y2="356.6" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="84.7529" y="230.497" width="5.12133" height="131.45" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip20_2434_21797)">
<line x1="82.166" y1="235.656" x2="87.5498" y2="230.272" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="240.515" x2="87.5498" y2="235.131" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="245.374" x2="87.5498" y2="239.99" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="250.233" x2="87.5498" y2="244.849" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="255.091" x2="87.5498" y2="249.707" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="259.95" x2="87.5498" y2="254.566" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="264.809" x2="87.5498" y2="259.425" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="269.668" x2="87.5498" y2="264.284" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="274.526" x2="87.5498" y2="269.142" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="279.385" x2="87.5498" y2="274.001" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="284.244" x2="87.5498" y2="278.86" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="289.103" x2="87.5498" y2="283.719" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="293.961" x2="87.5498" y2="288.577" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="298.82" x2="87.5498" y2="293.436" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="303.679" x2="87.5498" y2="298.295" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="308.538" x2="87.5498" y2="303.154" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="313.397" x2="87.5498" y2="308.013" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="318.256" x2="87.5498" y2="312.872" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="323.115" x2="87.5498" y2="317.731" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="327.973" x2="87.5498" y2="322.589" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="332.832" x2="87.5498" y2="327.448" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="337.69" x2="87.5498" y2="332.306" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="342.55" x2="87.5498" y2="337.166" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="347.409" x2="87.5498" y2="342.025" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="352.267" x2="87.5498" y2="346.883" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="357.126" x2="87.5498" y2="351.742" stroke="#62687C" stroke-width="0.26255"/>
<line x1="82.166" y1="361.985" x2="87.5498" y2="356.601" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="82.3901" y="230.497" width="5.12133" height="131.45" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip21_2434_21797)">
<line x1="95.2934" y1="269.788" x2="100.677" y2="264.404" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="273.072" x2="100.677" y2="267.688" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="276.355" x2="100.677" y2="270.971" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="279.639" x2="100.677" y2="274.255" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="282.922" x2="100.677" y2="277.538" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="286.206" x2="100.677" y2="280.822" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="289.489" x2="100.677" y2="284.105" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="292.772" x2="100.677" y2="287.389" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="296.056" x2="100.677" y2="290.672" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="299.339" x2="100.677" y2="293.955" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="302.623" x2="100.677" y2="297.239" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="305.907" x2="100.677" y2="300.523" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="309.19" x2="100.677" y2="303.806" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="312.474" x2="100.677" y2="307.09" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="315.757" x2="100.677" y2="310.373" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="319.04" x2="100.677" y2="313.657" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="322.324" x2="100.677" y2="316.94" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="325.607" x2="100.677" y2="320.223" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="328.891" x2="100.677" y2="323.507" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="332.174" x2="100.677" y2="326.79" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="335.458" x2="100.677" y2="330.074" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="338.741" x2="100.677" y2="333.357" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="342.025" x2="100.677" y2="336.641" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="345.308" x2="100.677" y2="339.924" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="348.592" x2="100.677" y2="343.208" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="351.875" x2="100.677" y2="346.491" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="355.159" x2="100.677" y2="349.775" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="95.5175" y="264.628" width="5.12133" height="90.4917" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip22_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 269.881)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 273.165)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 276.448)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 279.731)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 283.015)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 286.298)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 289.582)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 292.865)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 296.149)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 299.432)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 302.716)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 306)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 309.283)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 312.566)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 315.85)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 319.133)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 322.417)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 325.7)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 328.983)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 332.267)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 335.551)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 338.834)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 342.118)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 345.401)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 348.685)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 351.968)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 355.251)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.12133" height="90.4917" transform="matrix(-1 0 0 1 158.006 264.497)" stroke="#62687C" stroke-width="0.26255"/>
<rect x="84.7529" y="230.497" width="2.75678" height="24.6797" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip23_2434_21797)">
<line x1="71.4013" y1="86.0024" x2="76.7852" y2="80.6185" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="90.8613" x2="76.7852" y2="85.4774" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="95.7197" x2="76.7852" y2="90.3358" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="100.579" x2="76.7852" y2="95.1947" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="105.437" x2="76.7852" y2="100.054" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="110.296" x2="76.7852" y2="104.912" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="115.155" x2="76.7852" y2="109.771" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="120.014" x2="76.7852" y2="114.63" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="124.873" x2="76.7852" y2="119.489" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="129.731" x2="76.7852" y2="124.348" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="134.59" x2="76.7852" y2="129.206" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="139.449" x2="76.7852" y2="134.065" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="144.308" x2="76.7852" y2="138.924" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="149.166" x2="76.7852" y2="143.783" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="154.025" x2="76.7852" y2="148.641" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="158.884" x2="76.7852" y2="153.5" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="163.743" x2="76.7852" y2="158.359" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="168.602" x2="76.7852" y2="163.218" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="173.46" x2="76.7852" y2="168.077" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="178.319" x2="76.7852" y2="172.935" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="183.178" x2="76.7852" y2="177.794" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="188.037" x2="76.7852" y2="182.653" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="192.895" x2="76.7852" y2="187.512" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="197.754" x2="76.7852" y2="192.37" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="202.613" x2="76.7852" y2="197.229" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="207.472" x2="76.7852" y2="202.088" stroke="#62687C" stroke-width="0.26255"/>
<line x1="71.4013" y1="212.331" x2="76.7852" y2="206.947" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="71.6254" y="80.8427" width="5.12133" height="131.45" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip24_2434_21797)">
<line x1="69.0385" y1="86.0024" x2="74.4224" y2="80.6185" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="90.8613" x2="74.4224" y2="85.4774" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="95.7197" x2="74.4224" y2="90.3358" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="100.579" x2="74.4224" y2="95.1947" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="105.437" x2="74.4224" y2="100.054" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="110.296" x2="74.4224" y2="104.912" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="115.155" x2="74.4224" y2="109.771" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="120.014" x2="74.4224" y2="114.63" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="124.873" x2="74.4224" y2="119.489" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="129.731" x2="74.4224" y2="124.348" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="134.59" x2="74.4224" y2="129.206" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="139.449" x2="74.4224" y2="134.065" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="144.308" x2="74.4224" y2="138.924" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="149.166" x2="74.4224" y2="143.783" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="154.025" x2="74.4224" y2="148.641" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="158.884" x2="74.4224" y2="153.5" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="163.743" x2="74.4224" y2="158.359" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="168.602" x2="74.4224" y2="163.218" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="173.46" x2="74.4224" y2="168.077" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="178.319" x2="74.4224" y2="172.935" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="183.178" x2="74.4224" y2="177.794" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="188.037" x2="74.4224" y2="182.653" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="192.895" x2="74.4224" y2="187.512" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="197.754" x2="74.4224" y2="192.37" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="202.613" x2="74.4224" y2="197.229" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="207.472" x2="74.4224" y2="202.088" stroke="#62687C" stroke-width="0.26255"/>
<line x1="69.0385" y1="212.331" x2="74.4224" y2="206.947" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="69.2626" y="80.8427" width="5.12133" height="131.45" stroke="#62687C" stroke-width="0.26255"/>
<rect x="71.6254" y="80.8427" width="2.75678" height="24.6797" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip25_2434_21797)">
<line x1="95.2934" y1="120.134" x2="100.677" y2="114.75" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="123.418" x2="100.677" y2="118.034" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="126.701" x2="100.677" y2="121.317" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="129.985" x2="100.677" y2="124.601" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="133.269" x2="100.677" y2="127.885" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="136.552" x2="100.677" y2="131.168" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="139.835" x2="100.677" y2="134.452" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="143.119" x2="100.677" y2="137.735" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="146.402" x2="100.677" y2="141.018" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="149.685" x2="100.677" y2="144.302" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="152.969" x2="100.677" y2="147.585" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="156.252" x2="100.677" y2="150.869" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="159.536" x2="100.677" y2="154.152" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="162.82" x2="100.677" y2="157.436" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="166.103" x2="100.677" y2="160.719" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="169.387" x2="100.677" y2="164.003" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="172.67" x2="100.677" y2="167.286" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="175.954" x2="100.677" y2="170.57" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="179.237" x2="100.677" y2="173.853" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="182.52" x2="100.677" y2="177.137" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="185.804" x2="100.677" y2="180.42" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="189.087" x2="100.677" y2="183.703" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="192.371" x2="100.677" y2="186.987" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="195.654" x2="100.677" y2="190.27" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="198.938" x2="100.677" y2="193.554" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="202.221" x2="100.677" y2="196.837" stroke="#62687C" stroke-width="0.26255"/>
<line x1="95.2934" y1="205.505" x2="100.677" y2="200.121" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="95.5175" y="114.975" width="5.12133" height="90.4917" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip26_2434_21797)">
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 120.227)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 123.511)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 126.794)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 130.078)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 133.361)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 136.645)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 139.928)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 143.211)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 146.495)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 149.778)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 153.062)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 156.345)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 159.629)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 162.913)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 166.196)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 169.479)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 172.763)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 176.046)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 179.33)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 182.613)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 185.896)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 189.18)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 192.464)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 195.747)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 199.031)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 202.314)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="7.61395" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 158.269 205.598)" stroke="#62687C" stroke-width="0.26255"/>
</g>
<rect x="-0.131275" y="0.131275" width="5.12133" height="90.4917" transform="matrix(-1 0 0 1 158.006 114.843)" stroke="#62687C" stroke-width="0.26255"/>
<rect x="95.5175" y="264.628" width="2.6255" height="62.6156" transform="rotate(-90 95.5175 264.628)" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<rect x="95.5175" y="114.974" width="2.6255" height="62.6156" transform="rotate(-90 95.5175 114.974)" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M102.213 269.223V269.091H102.081H100.768V264.628H111.27V269.091H109.958H109.826V269.223V270.667H107.07V269.223V269.091H106.938H104.313H104.182V269.223V270.667H102.213V269.223Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M102.213 119.569V119.437H102.081H100.768V114.974H111.27V119.437H109.958H109.826V119.569V121.013H107.07V119.569V119.437H106.938H104.313H104.182V119.569V121.013H102.213V119.569Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M105.232 332.103H105.101V331.972V330.659H100.637V341.161H105.101V339.848V339.717H105.232H106.676V336.96H105.232H105.101V336.829V334.204V334.072H105.232H106.676V332.103H105.232Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M105.232 182.45H105.101V182.319V181.006H100.637V191.508H105.101V190.195V190.064H105.232H106.676V187.307H105.232H105.101V187.176V184.55V184.419H105.232H106.676V182.45H105.232Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M78.3205 52.8812V52.75H78.4517H79.7645V48.2866H69.2625V52.75H70.5752H70.7065V52.8812V54.3253H73.4633V52.8812V52.75H73.5946H76.2201H76.3513V52.8812V54.3253H78.3205V52.8812Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M175.464 52.8812V52.75H175.333H174.02V48.2866H184.522V52.75H183.209H183.078V52.8812V54.3253H180.321V52.8812V52.75H180.19H177.564H177.433V52.8812V54.3253H175.464V52.8812Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M183.078 52.8812V52.75H183.209H184.522V48.2866H174.02V52.75H175.333H175.464V52.8812V54.3253H178.221V52.8812V52.75H178.352H180.978H181.109V52.8812V54.3253H183.078V52.8812Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M70.7066 52.8812V52.75H70.5754H69.2626V48.2866H79.7646V52.75H78.4519H78.3206V52.8812V54.3253H75.5638V52.8812V52.75H75.4325H72.807H72.6758V52.8812V54.3253H70.7066V52.8812Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M148.421 332.103H148.553V331.972V330.659H153.016V341.161H148.553V339.848V339.717H148.421H146.977V336.96H148.421H148.553V336.829V334.204V334.072H148.421H146.977V332.103H148.421Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M148.421 182.45H148.553V182.319V181.006H153.016V191.508H148.553V190.195V190.064H148.421H146.977V187.307H148.421H148.553V187.176V184.55V184.419H148.421H146.977V182.45H148.421Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M151.572 269.223V269.091H151.703H153.016V264.628H142.514V269.091H143.827H143.958V269.223V270.667H146.715V269.223V269.091H146.846H149.472H149.603V269.223V270.667H151.572V269.223Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<path d="M151.572 119.569V119.437H151.703H153.016V114.974H142.514V119.437H143.827H143.958V119.569V121.013H146.715V119.569V119.437H146.846H149.472H149.603V119.569V121.013H151.572V119.569Z" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<rect x="102.475" y="497.116" width="48.5718" height="3.1506" stroke="#62687C" stroke-width="0.26255"/>
<rect x="102.475" y="502.367" width="48.5718" height="1.83785" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<rect x="102.475" y="302.435" width="48.5718" height="1.83785" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<rect x="102.475" y="152.782" width="48.5718" height="1.83785" fill="#0B0C0E" stroke="#62687C" stroke-width="0.26255"/>
<line x1="104.707" y1="444.081" x2="104.707" y2="455.108" stroke="#62687C" stroke-width="0.26255"/>
<path d="M150.233 459.177C135.481 466.665 118.041 466.665 103.289 459.177C118.041 451.689 135.481 451.689 150.233 459.177Z" stroke="#62687C" stroke-width="0.26255"/>
<mask id="path-636-inside-1_2434_21797" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M150.784 444.081H102.869V456.155C117.956 448.615 135.729 448.66 150.784 456.289V444.081ZM150.784 456.289C150.698 456.333 150.611 456.377 150.524 456.42H150.784V456.289Z"/>
</mask>
<path d="M102.869 444.081V443.818H102.606V444.081H102.869ZM150.784 444.081H151.047V443.818H150.784V444.081ZM102.869 456.155H102.606V456.58L102.986 456.39L102.869 456.155ZM150.784 456.289L150.666 456.523L151.047 456.717V456.289H150.784ZM150.784 456.289H151.047V455.862L150.666 456.055L150.784 456.289ZM150.524 456.42L150.406 456.186L150.524 456.683V456.42ZM150.784 456.42V456.683H151.047V456.42H150.784ZM102.869 444.343H150.784V443.818H102.869V444.343ZM103.131 456.155V444.081H102.606V456.155H103.131ZM102.986 456.39C117.999 448.887 135.685 448.931 150.666 456.523L150.903 456.055C135.774 448.388 117.913 448.343 102.752 455.92L102.986 456.39ZM150.522 444.081V456.289H151.047V444.081H150.522ZM150.666 456.055C150.579 456.099 150.493 456.142 150.406 456.186L150.641 456.655C150.729 456.612 150.816 456.568 150.903 456.523L150.666 456.055ZM150.784 456.158H150.524V456.683H150.784V456.158ZM150.522 456.289V456.42H151.047V456.289H150.522Z" fill="#62687C" mask="url(#path-636-inside-1_2434_21797)"/>
<path d="M126.761 456.104C128.18 457.906 128.18 460.449 126.761 462.251C125.342 460.449 125.342 457.906 126.761 456.104Z" stroke="#62687C" stroke-width="0.26255"/>
<line x1="126.104" y1="459.177" x2="127.417" y2="459.177" stroke="#62687C" stroke-width="0.26255"/>
<line x1="126.367" y1="458.39" x2="127.155" y2="458.39" stroke="#62687C" stroke-width="0.26255"/>
<line x1="126.367" y1="459.965" x2="127.155" y2="459.965" stroke="#62687C" stroke-width="0.26255"/>
<line x1="126.63" y1="460.753" x2="126.892" y2="460.753" stroke="#62687C" stroke-width="0.26255"/>
<line x1="126.63" y1="457.602" x2="126.892" y2="457.602" stroke="#62687C" stroke-width="0.26255"/>
<path d="M132.8 456.104C134.218 457.906 134.218 460.449 132.8 462.251C131.381 460.449 131.381 457.906 132.8 456.104Z" stroke="#62687C" stroke-width="0.26255"/>
<line x1="132.143" y1="459.177" x2="133.456" y2="459.177" stroke="#62687C" stroke-width="0.26255"/>
<line x1="132.406" y1="458.39" x2="133.193" y2="458.39" stroke="#62687C" stroke-width="0.26255"/>
<line x1="132.406" y1="459.965" x2="133.193" y2="459.965" stroke="#62687C" stroke-width="0.26255"/>
<line x1="132.668" y1="460.753" x2="132.931" y2="460.753" stroke="#62687C" stroke-width="0.26255"/>
<line x1="132.668" y1="457.602" x2="132.931" y2="457.602" stroke="#62687C" stroke-width="0.26255"/>
<path d="M138.838 456.104C140.257 457.906 140.257 460.449 138.838 462.251C137.419 460.449 137.419 457.906 138.838 456.104Z" stroke="#62687C" stroke-width="0.26255"/>
<line x1="138.182" y1="459.177" x2="139.495" y2="459.177" stroke="#62687C" stroke-width="0.26255"/>
<line x1="138.444" y1="458.39" x2="139.232" y2="458.39" stroke="#62687C" stroke-width="0.26255"/>
<line x1="138.444" y1="459.965" x2="139.232" y2="459.965" stroke="#62687C" stroke-width="0.26255"/>
<line x1="138.707" y1="460.753" x2="138.97" y2="460.753" stroke="#62687C" stroke-width="0.26255"/>
<line x1="138.707" y1="457.602" x2="138.97" y2="457.602" stroke="#62687C" stroke-width="0.26255"/>
<path d="M120.722 456.104C122.141 457.906 122.141 460.449 120.722 462.251C119.303 460.449 119.303 457.906 120.722 456.104Z" stroke="#62687C" stroke-width="0.26255"/>
<line x1="120.066" y1="459.177" x2="121.379" y2="459.177" stroke="#62687C" stroke-width="0.26255"/>
<line x1="120.329" y1="458.39" x2="121.116" y2="458.39" stroke="#62687C" stroke-width="0.26255"/>
<line x1="120.329" y1="459.965" x2="121.116" y2="459.965" stroke="#62687C" stroke-width="0.26255"/>
<line x1="120.591" y1="460.753" x2="120.854" y2="460.753" stroke="#62687C" stroke-width="0.26255"/>
<line x1="120.591" y1="457.602" x2="120.854" y2="457.602" stroke="#62687C" stroke-width="0.26255"/>
<path d="M114.684 456.104C116.103 457.906 116.103 460.449 114.684 462.251C113.265 460.449 113.265 457.906 114.684 456.104Z" stroke="#62687C" stroke-width="0.26255"/>
<line x1="114.027" y1="459.177" x2="115.34" y2="459.177" stroke="#62687C" stroke-width="0.26255"/>
<line x1="114.29" y1="458.39" x2="115.077" y2="458.39" stroke="#62687C" stroke-width="0.26255"/>
<line x1="114.29" y1="459.965" x2="115.077" y2="459.965" stroke="#62687C" stroke-width="0.26255"/>
<line x1="114.552" y1="460.753" x2="114.815" y2="460.753" stroke="#62687C" stroke-width="0.26255"/>
<line x1="114.552" y1="457.602" x2="114.815" y2="457.602" stroke="#62687C" stroke-width="0.26255"/>
<path d="M149.209 444.081V455.371" stroke="#62687C" stroke-width="0.26255"/>
<path d="M157.414 250.109C138.095 259.915 115.255 259.915 95.9363 250.109C115.255 240.303 138.095 240.303 157.414 250.109Z" stroke="#62687C" stroke-width="0.343833"/>
<mask id="path-670-inside-2_2434_21797" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M158.136 230.339H95.3862V246.152C115.144 236.277 138.42 236.336 158.136 246.327C158.022 246.385 157.908 246.442 157.794 246.499H158.136V230.339Z"/>
</mask>
<path d="M95.3862 230.339V229.995H95.0424V230.339H95.3862ZM158.136 230.339H158.48V229.995H158.136V230.339ZM95.3862 246.152H95.0424V246.708L95.5399 246.459L95.3862 246.152ZM158.136 246.327L158.291 246.634L158.896 246.327L158.291 246.02L158.136 246.327ZM157.794 246.499L157.641 246.191L157.794 246.843V246.499ZM158.136 246.499V246.843H158.48V246.499H158.136ZM95.3862 230.683H158.136V229.995H95.3862V230.683ZM95.7301 246.152V230.339H95.0424V246.152H95.7301ZM95.5399 246.459C115.2 236.633 138.361 236.692 157.98 246.634L158.291 246.02C138.478 235.98 115.087 235.921 95.2325 245.844L95.5399 246.459ZM157.98 246.02C157.867 246.078 157.754 246.135 157.641 246.191L157.948 246.807C158.062 246.749 158.177 246.692 158.291 246.634L157.98 246.02ZM158.136 246.155H157.794V246.843H158.136V246.155ZM157.792 230.339V246.499H158.48V230.339H157.792Z" fill="#62687C" mask="url(#path-670-inside-2_2434_21797)"/>
<path d="M126.675 246.084C128.533 248.444 128.533 251.775 126.675 254.135C124.817 251.775 124.817 248.444 126.675 246.084Z" stroke="#62687C" stroke-width="0.343833"/>
<line x1="125.815" y1="250.11" x2="127.535" y2="250.11" stroke="#62687C" stroke-width="0.343833"/>
<line x1="126.159" y1="249.079" x2="127.191" y2="249.079" stroke="#62687C" stroke-width="0.343833"/>
<line x1="126.159" y1="251.142" x2="127.191" y2="251.142" stroke="#62687C" stroke-width="0.343833"/>
<line x1="126.503" y1="252.172" x2="126.847" y2="252.172" stroke="#62687C" stroke-width="0.343833"/>
<line x1="126.503" y1="248.047" x2="126.847" y2="248.047" stroke="#62687C" stroke-width="0.343833"/>
<path d="M134.583 246.084C136.441 248.444 136.441 251.775 134.583 254.135C132.725 251.775 132.725 248.444 134.583 246.084Z" stroke="#62687C" stroke-width="0.343833"/>
<line x1="133.723" y1="250.11" x2="135.443" y2="250.11" stroke="#62687C" stroke-width="0.343833"/>
<line x1="134.067" y1="249.079" x2="135.099" y2="249.079" stroke="#62687C" stroke-width="0.343833"/>
<line x1="134.067" y1="251.142" x2="135.099" y2="251.142" stroke="#62687C" stroke-width="0.343833"/>
<line x1="134.411" y1="252.172" x2="134.755" y2="252.172" stroke="#62687C" stroke-width="0.343833"/>
<line x1="134.411" y1="248.047" x2="134.755" y2="248.047" stroke="#62687C" stroke-width="0.343833"/>
<path d="M142.491 246.084C144.35 248.444 144.35 251.775 142.491 254.135C140.633 251.775 140.633 248.444 142.491 246.084Z" stroke="#62687C" stroke-width="0.343833"/>
<line x1="141.632" y1="250.11" x2="143.351" y2="250.11" stroke="#62687C" stroke-width="0.343833"/>
<line x1="141.976" y1="249.079" x2="143.007" y2="249.079" stroke="#62687C" stroke-width="0.343833"/>
<line x1="141.976" y1="251.142" x2="143.007" y2="251.142" stroke="#62687C" stroke-width="0.343833"/>
<line x1="142.319" y1="252.172" x2="142.663" y2="252.172" stroke="#62687C" stroke-width="0.343833"/>
<line x1="142.319" y1="248.047" x2="142.663" y2="248.047" stroke="#62687C" stroke-width="0.343833"/>
<path d="M118.767 246.084C120.625 248.444 120.625 251.775 118.767 254.135C116.909 251.775 116.909 248.444 118.767 246.084Z" stroke="#62687C" stroke-width="0.343833"/>
<line x1="117.907" y1="250.11" x2="119.627" y2="250.11" stroke="#62687C" stroke-width="0.343833"/>
<line x1="118.251" y1="249.079" x2="119.283" y2="249.079" stroke="#62687C" stroke-width="0.343833"/>
<line x1="118.251" y1="251.142" x2="119.283" y2="251.142" stroke="#62687C" stroke-width="0.343833"/>
<line x1="118.595" y1="252.172" x2="118.939" y2="252.172" stroke="#62687C" stroke-width="0.343833"/>
<line x1="118.595" y1="248.047" x2="118.939" y2="248.047" stroke="#62687C" stroke-width="0.343833"/>
<path d="M110.859 246.084C112.717 248.444 112.717 251.775 110.859 254.135C109.001 251.775 109.001 248.444 110.859 246.084Z" stroke="#62687C" stroke-width="0.343833"/>
<line x1="109.999" y1="250.11" x2="111.718" y2="250.11" stroke="#62687C" stroke-width="0.343833"/>
<line x1="110.343" y1="249.079" x2="111.374" y2="249.079" stroke="#62687C" stroke-width="0.343833"/>
<line x1="110.343" y1="251.142" x2="111.374" y2="251.142" stroke="#62687C" stroke-width="0.343833"/>
<line x1="110.687" y1="252.172" x2="111.031" y2="252.172" stroke="#62687C" stroke-width="0.343833"/>
<line x1="110.687" y1="248.047" x2="111.031" y2="248.047" stroke="#62687C" stroke-width="0.343833"/>
<path d="M156.073 230.339V245.124" stroke="#62687C" stroke-width="0.343833"/>
<path d="M170.519 90.7001C143.583 104.373 111.736 104.373 84.799 90.7001C111.736 77.0273 143.583 77.0273 170.519 90.7001Z" stroke="#62687C" stroke-width="0.479417"/>
<mask id="path-704-inside-3_2434_21797" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M171.526 63.1328H84.0322V85.1812C111.581 71.4127 144.035 71.4943 171.526 85.4258C171.367 85.5061 171.209 85.586 171.05 85.6654H171.526V63.1328Z"/>
</mask>
<path d="M84.0322 63.1328V62.8703H83.7697V63.1328H84.0322ZM171.526 63.1328H171.788V62.8703H171.526V63.1328ZM84.0322 85.1812H83.7697V85.6059L84.1496 85.416L84.0322 85.1812ZM171.526 85.4258L171.644 85.66L172.107 85.4258L171.644 85.1916L171.526 85.4258ZM171.05 85.6654L170.932 85.4306L171.05 85.928V85.6654ZM171.526 85.6654V85.928H171.788V85.6654H171.526ZM84.0322 63.3954H171.526V62.8703H84.0322V63.3954ZM84.2948 85.1812V63.1328H83.7697V85.1812H84.2948ZM84.1496 85.416C111.624 71.6848 143.991 71.7661 171.407 85.66L171.644 85.1916C144.08 71.2225 111.538 71.1407 83.9149 84.9463L84.1496 85.416ZM171.407 85.1916C171.249 85.2717 171.091 85.3514 170.932 85.4306L171.167 85.9002C171.326 85.8206 171.486 85.7406 171.644 85.66L171.407 85.1916ZM171.526 85.4029H171.05V85.928H171.526V85.4029ZM171.263 63.1328V85.6654H171.788V63.1328H171.263Z" fill="#62687C" mask="url(#path-704-inside-3_2434_21797)"/>
<path d="M127.659 85.0873C130.25 88.3781 130.25 93.0222 127.659 96.313C125.068 93.0222 125.068 88.3781 127.659 85.0873Z" stroke="#62687C" stroke-width="0.479417"/>
<line x1="126.461" y1="90.6997" x2="128.858" y2="90.6997" stroke="#62687C" stroke-width="0.479417"/>
<line x1="126.94" y1="89.2622" x2="128.378" y2="89.2622" stroke="#62687C" stroke-width="0.479417"/>
<line x1="126.94" y1="92.1387" x2="128.378" y2="92.1387" stroke="#62687C" stroke-width="0.479417"/>
<line x1="127.419" y1="93.5767" x2="127.899" y2="93.5767" stroke="#62687C" stroke-width="0.479417"/>
<line x1="127.419" y1="87.8238" x2="127.899" y2="87.8238" stroke="#62687C" stroke-width="0.479417"/>
<path d="M138.686 85.0873C141.277 88.3781 141.277 93.0222 138.686 96.313C136.095 93.0222 136.095 88.3781 138.686 85.0873Z" stroke="#62687C" stroke-width="0.479417"/>
<line x1="137.487" y1="90.6997" x2="139.884" y2="90.6997" stroke="#62687C" stroke-width="0.479417"/>
<line x1="137.967" y1="89.2622" x2="139.405" y2="89.2622" stroke="#62687C" stroke-width="0.479417"/>
<line x1="137.967" y1="92.1387" x2="139.405" y2="92.1387" stroke="#62687C" stroke-width="0.479417"/>
<line x1="138.446" y1="93.5767" x2="138.925" y2="93.5767" stroke="#62687C" stroke-width="0.479417"/>
<line x1="138.446" y1="87.8238" x2="138.925" y2="87.8238" stroke="#62687C" stroke-width="0.479417"/>
<path d="M149.712 85.0873C152.303 88.3781 152.303 93.0222 149.712 96.313C147.121 93.0222 147.121 88.3781 149.712 85.0873Z" stroke="#62687C" stroke-width="0.479417"/>
<line x1="148.514" y1="90.6997" x2="150.911" y2="90.6997" stroke="#62687C" stroke-width="0.479417"/>
<line x1="148.993" y1="89.2622" x2="150.431" y2="89.2622" stroke="#62687C" stroke-width="0.479417"/>
<line x1="148.993" y1="92.1387" x2="150.431" y2="92.1387" stroke="#62687C" stroke-width="0.479417"/>
<line x1="149.473" y1="93.5767" x2="149.952" y2="93.5767" stroke="#62687C" stroke-width="0.479417"/>
<line x1="149.473" y1="87.8238" x2="149.952" y2="87.8238" stroke="#62687C" stroke-width="0.479417"/>
<path d="M116.633 85.0873C119.224 88.3781 119.224 93.0222 116.633 96.313C114.042 93.0222 114.042 88.3781 116.633 85.0873Z" stroke="#62687C" stroke-width="0.479417"/>
<line x1="115.434" y1="90.6997" x2="117.831" y2="90.6997" stroke="#62687C" stroke-width="0.479417"/>
<line x1="115.914" y1="89.2622" x2="117.352" y2="89.2622" stroke="#62687C" stroke-width="0.479417"/>
<line x1="115.914" y1="92.1387" x2="117.352" y2="92.1387" stroke="#62687C" stroke-width="0.479417"/>
<line x1="116.393" y1="93.5767" x2="116.872" y2="93.5767" stroke="#62687C" stroke-width="0.479417"/>
<line x1="116.393" y1="87.8238" x2="116.872" y2="87.8238" stroke="#62687C" stroke-width="0.479417"/>
<path d="M105.606 85.0873C108.197 88.3781 108.197 93.0222 105.606 96.313C103.015 93.0222 103.015 88.3781 105.606 85.0873Z" stroke="#62687C" stroke-width="0.479417"/>
<line x1="104.407" y1="90.6997" x2="106.805" y2="90.6997" stroke="#62687C" stroke-width="0.479417"/>
<line x1="104.887" y1="89.2622" x2="106.325" y2="89.2622" stroke="#62687C" stroke-width="0.479417"/>
<line x1="104.887" y1="92.1387" x2="106.325" y2="92.1387" stroke="#62687C" stroke-width="0.479417"/>
<line x1="105.366" y1="93.5767" x2="105.846" y2="93.5767" stroke="#62687C" stroke-width="0.479417"/>
<line x1="105.366" y1="87.8238" x2="105.846" y2="87.8238" stroke="#62687C" stroke-width="0.479417"/>
<path d="M168.649 63.1338V83.7487" stroke="#62687C" stroke-width="0.26255"/>
<rect x="86.5907" y="65.6152" width="4.94927" height="9.71435" stroke="#62687C" stroke-width="0.26255"/>
<rect x="89.5688" y="69.04" width="4.94927" height="2.86454" stroke="#62687C" stroke-width="0.26255"/>
<path d="M103 374.899H106.1C106.494 374.899 106.884 374.973 107.25 375.119V375.119C108.149 375.477 109.164 375.396 109.994 374.9L110.581 374.55C111.851 373.792 113.431 373.775 114.718 374.506V374.506C115.174 374.765 115.676 374.935 116.196 375.005L119.694 375.48C120.704 375.617 121.728 375.606 122.735 375.448L124.224 375.214C125.55 375.006 126.904 375.065 128.207 375.389V375.389C129 375.586 129.814 375.686 130.632 375.686H132.837C134.12 375.686 135.369 375.272 136.397 374.505V374.505C137.426 373.738 138.675 373.323 139.958 373.323H141.458C142.541 373.323 143.594 373.685 144.449 374.35V374.35C145.541 375.2 146.944 375.545 148.306 375.299L150.522 374.899" stroke="#62687C" stroke-width="0.26255"/>
<path d="M89.8728 361.64H94.6521C95.293 361.64 95.9221 361.813 96.4727 362.141V362.141C97.8079 362.937 99.5049 362.773 100.664 361.738L101.622 360.881C103.493 359.21 106.31 359.176 108.22 360.801V360.801C108.866 361.351 109.642 361.729 110.474 361.898L116 363.02C117.485 363.322 119.019 363.298 120.494 362.951L122.978 362.367C124.994 361.893 127.105 362.026 129.046 362.748L129.233 362.818C130.405 363.254 131.646 363.478 132.897 363.478H135.738C138.092 363.478 140.335 362.475 141.906 360.721V360.721C143.476 358.967 145.719 357.964 148.074 357.964H149.334C151.277 357.964 153.123 358.813 154.388 360.288V360.288C156.06 362.237 158.704 363.05 161.183 362.379L163.912 361.64" stroke="#62687C" stroke-width="0.26255"/>
<path d="M76.7451 211.987H83.2746C84.1129 211.987 84.942 212.161 85.7094 212.498V212.498C87.5892 213.325 89.7601 213.142 91.4743 212.011L92.7286 211.183C95.3802 209.434 98.8094 209.396 101.499 211.086V211.086C102.445 211.68 103.503 212.072 104.608 212.238L113.511 213.573C114.624 213.74 115.756 213.726 116.865 213.534L123.463 212.389C124.987 212.124 126.551 212.199 128.043 212.609L131.098 213.449C132.005 213.698 132.941 213.825 133.881 213.825H140.115C142.553 213.825 144.915 212.976 146.796 211.425L147.663 210.711C149.544 209.159 151.906 208.311 154.344 208.311H157.787C160.142 208.311 162.42 209.156 164.206 210.693V210.693C166.503 212.669 169.583 213.477 172.554 212.883L177.039 211.987" stroke="#62687C" stroke-width="0.26255"/>
<rect x="-0.131275" y="0.131275" width="8.9267" height="17.3283" transform="matrix(-1 0 0 1 176.777 117.993)" stroke="#62687C" stroke-width="0.26255"/>
<rect x="-0.131275" y="0.131275" width="8.9267" height="5.251" transform="matrix(-1 0 0 1 171.526 124.032)" stroke="#62687C" stroke-width="0.26255"/>
<rect x="160.63" y="118.124" width="8.9267" height="17.3283" stroke="#62687C" stroke-width="0.26255"/>
<rect x="165.881" y="124.163" width="8.9267" height="5.251" stroke="#62687C" stroke-width="0.26255"/>
<rect x="-0.131275" y="0.131275" width="8.9267" height="17.3283" transform="matrix(-1 0 0 1 92.892 117.993)" stroke="#62687C" stroke-width="0.26255"/>
<rect x="-0.131275" y="0.131275" width="8.9267" height="5.251" transform="matrix(-1 0 0 1 87.641 124.032)" stroke="#62687C" stroke-width="0.26255"/>
<rect x="76.7453" y="118.124" width="8.9267" height="17.3283" stroke="#62687C" stroke-width="0.26255"/>
<rect x="81.9963" y="124.163" width="8.9267" height="5.251" stroke="#62687C" stroke-width="0.26255"/>
<rect x="62.1738" y="34.1088" width="127.074" height="14.1777" fill="#121317" stroke="#62687C" stroke-width="0.26255"/>
<g clip-path="url(#clip27_2434_21797)">
<line x1="164.607" y1="48.3247" x2="178.784" y2="34.1474" stroke="#62687C" stroke-width="0.26255"/>
<line x1="170.382" y1="48.3247" x2="184.56" y2="34.1474" stroke="#62687C" stroke-width="0.26255"/>
<line x1="176.158" y1="48.3247" x2="190.335" y2="34.1474" stroke="#62687C" stroke-width="0.26255"/>
<line x1="181.934" y1="48.3247" x2="196.111" y2="34.1474" stroke="#62687C" stroke-width="0.26255"/>
<line x1="187.709" y1="48.3247" x2="201.887" y2="34.1474" stroke="#62687C" stroke-width="0.26255"/>
</g>
<g clip-path="url(#clip28_2434_21797)">
<line y1="-0.131275" x2="20.0497" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 86.7222 48.4175)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="20.0497" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 80.9465 48.4175)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="20.0497" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 75.1707 48.4175)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="20.0497" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 69.395 48.4175)" stroke="#62687C" stroke-width="0.26255"/>
<line y1="-0.131275" x2="20.0497" y2="-0.131275" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 63.6194 48.4175)" stroke="#62687C" stroke-width="0.26255"/>
</g>
</g>
<defs>
<clipPath id="clip0_2434_21797">
<rect width="340" height="536" fill="white" transform="translate(-151)"/>
</clipPath>
<clipPath id="clip1_2434_21797">
<rect x="152.885" y="374.768" width="5.38388" height="131.712" fill="white"/>
</clipPath>
<clipPath id="clip2_2434_21797">
<rect x="150.522" y="374.768" width="5.38388" height="131.712" fill="white"/>
</clipPath>
<clipPath id="clip3_2434_21797">
<rect width="5.38388" height="131.712" transform="matrix(-1 0 0 1 100.77 374.768)" fill="white"/>
</clipPath>
<clipPath id="clip4_2434_21797">
<rect width="5.51355" height="34.9192" transform="matrix(-1 0 0 1 111.402 267.647)" fill="white"/>
</clipPath>
<clipPath id="clip5_2434_21797">
<rect width="5.51355" height="34.9192" transform="matrix(-1 0 0 1 111.402 117.994)" fill="white"/>
</clipPath>
<clipPath id="clip6_2434_21797">
<rect x="142.383" y="267.647" width="5.51355" height="34.9192" fill="white"/>
</clipPath>
<clipPath id="clip7_2434_21797">
<rect x="142.383" y="117.994" width="5.51355" height="34.9192" fill="white"/>
</clipPath>
<clipPath id="clip8_2434_21797">
<rect x="161.549" y="471.648" width="5.51355" height="34.9192" rx="2.75678" fill="white"/>
</clipPath>
<clipPath id="clip9_2434_21797">
<rect width="5.51355" height="34.9192" rx="2.75678" transform="matrix(-1 0 0 1 92.2356 471.648)" fill="white"/>
</clipPath>
<clipPath id="clip10_2434_21797">
<rect width="5.51355" height="34.9192" rx="2.75678" transform="matrix(-1 0 0 1 88.8225 163.415)" fill="white"/>
</clipPath>
<clipPath id="clip11_2434_21797">
<rect x="164.699" y="163.415" width="5.51355" height="34.9192" rx="2.75678" fill="white"/>
</clipPath>
<clipPath id="clip12_2434_21797">
<rect width="5.251" height="32.0311" transform="matrix(0 -1 -1 0 141.595 497.116)" fill="white"/>
</clipPath>
<clipPath id="clip13_2434_21797">
<rect width="2.36714" height="28.7698" transform="matrix(0 -1 -1 0 141.323 502.489)" fill="white"/>
</clipPath>
<clipPath id="clip14_2434_21797">
<rect width="5.38388" height="131.712" transform="matrix(-1 0 0 1 103.133 374.768)" fill="white"/>
</clipPath>
<clipPath id="clip15_2434_21797">
<rect width="5.38388" height="131.712" transform="matrix(-1 0 0 1 171.396 230.365)" fill="white"/>
</clipPath>
<clipPath id="clip16_2434_21797">
<rect width="5.38388" height="131.712" transform="matrix(-1 0 0 1 169.033 230.365)" fill="white"/>
</clipPath>
<clipPath id="clip17_2434_21797">
<rect width="5.38388" height="131.712" transform="matrix(-1 0 0 1 184.523 80.7114)" fill="white"/>
</clipPath>
<clipPath id="clip18_2434_21797">
<rect width="5.38388" height="131.712" transform="matrix(-1 0 0 1 182.161 80.7114)" fill="white"/>
</clipPath>
<clipPath id="clip19_2434_21797">
<rect x="84.6216" y="230.365" width="5.38388" height="131.712" fill="white"/>
</clipPath>
<clipPath id="clip20_2434_21797">
<rect x="82.2588" y="230.365" width="5.38388" height="131.712" fill="white"/>
</clipPath>
<clipPath id="clip21_2434_21797">
<rect x="95.3862" y="264.497" width="5.38388" height="90.7543" fill="white"/>
</clipPath>
<clipPath id="clip22_2434_21797">
<rect width="5.38388" height="90.7543" transform="matrix(-1 0 0 1 158.269 264.497)" fill="white"/>
</clipPath>
<clipPath id="clip23_2434_21797">
<rect x="71.4941" y="80.7114" width="5.38388" height="131.712" fill="white"/>
</clipPath>
<clipPath id="clip24_2434_21797">
<rect x="69.1313" y="80.7114" width="5.38388" height="131.712" fill="white"/>
</clipPath>
<clipPath id="clip25_2434_21797">
<rect x="95.3862" y="114.843" width="5.38388" height="90.7543" fill="white"/>
</clipPath>
<clipPath id="clip26_2434_21797">
<rect width="5.38388" height="90.7543" transform="matrix(-1 0 0 1 158.269 114.843)" fill="white"/>
</clipPath>
<clipPath id="clip27_2434_21797">
<rect width="24.6797" height="14.7028" fill="white" transform="translate(164.699 33.9775)"/>
</clipPath>
<clipPath id="clip28_2434_21797">
<rect width="24.6797" height="14.7028" fill="white" transform="matrix(-1 0 0 1 86.7222 33.9775)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

458
frontend/public/Images/dotted-divider.svg Normal file
View File

@ -0,0 +1,458 @@
<svg
width="1348"
height="8"
viewBox="0 0 1348 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="2" height="2" rx="1" fill="#242834" />
<rect x="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="12" width="2" height="2" rx="1" fill="#242834" />
<rect x="18" width="2" height="2" rx="1" fill="#242834" />
<rect x="24" width="2" height="2" rx="1" fill="#242834" />
<rect x="30" width="2" height="2" rx="1" fill="#242834" />
<rect x="36" width="2" height="2" rx="1" fill="#242834" />
<rect x="42" width="2" height="2" rx="1" fill="#242834" />
<rect x="48" width="2" height="2" rx="1" fill="#242834" />
<rect x="54" width="2" height="2" rx="1" fill="#242834" />
<rect x="60" width="2" height="2" rx="1" fill="#242834" />
<rect x="66" width="2" height="2" rx="1" fill="#242834" />
<rect x="72" width="2" height="2" rx="1" fill="#242834" />
<rect x="78" width="2" height="2" rx="1" fill="#242834" />
<rect x="84" width="2" height="2" rx="1" fill="#242834" />
<rect x="90" width="2" height="2" rx="1" fill="#242834" />
<rect x="96" width="2" height="2" rx="1" fill="#242834" />
<rect x="102" width="2" height="2" rx="1" fill="#242834" />
<rect x="108" width="2" height="2" rx="1" fill="#242834" />
<rect x="114" width="2" height="2" rx="1" fill="#242834" />
<rect x="120" width="2" height="2" rx="1" fill="#242834" />
<rect x="126" width="2" height="2" rx="1" fill="#242834" />
<rect x="132" width="2" height="2" rx="1" fill="#242834" />
<rect x="138" width="2" height="2" rx="1" fill="#242834" />
<rect x="144" width="2" height="2" rx="1" fill="#242834" />
<rect x="150" width="2" height="2" rx="1" fill="#242834" />
<rect x="156" width="2" height="2" rx="1" fill="#242834" />
<rect x="162" width="2" height="2" rx="1" fill="#242834" />
<rect x="168" width="2" height="2" rx="1" fill="#242834" />
<rect x="174" width="2" height="2" rx="1" fill="#242834" />
<rect x="180" width="2" height="2" rx="1" fill="#242834" />
<rect x="186" width="2" height="2" rx="1" fill="#242834" />
<rect x="192" width="2" height="2" rx="1" fill="#242834" />
<rect x="198" width="2" height="2" rx="1" fill="#242834" />
<rect x="204" width="2" height="2" rx="1" fill="#242834" />
<rect x="210" width="2" height="2" rx="1" fill="#242834" />
<rect x="216" width="2" height="2" rx="1" fill="#242834" />
<rect x="222" width="2" height="2" rx="1" fill="#242834" />
<rect x="228" width="2" height="2" rx="1" fill="#242834" />
<rect x="234" width="2" height="2" rx="1" fill="#242834" />
<rect x="240" width="2" height="2" rx="1" fill="#242834" />
<rect x="246" width="2" height="2" rx="1" fill="#242834" />
<rect x="252" width="2" height="2" rx="1" fill="#242834" />
<rect x="258" width="2" height="2" rx="1" fill="#242834" />
<rect x="264" width="2" height="2" rx="1" fill="#242834" />
<rect x="270" width="2" height="2" rx="1" fill="#242834" />
<rect x="276" width="2" height="2" rx="1" fill="#242834" />
<rect x="282" width="2" height="2" rx="1" fill="#242834" />
<rect x="288" width="2" height="2" rx="1" fill="#242834" />
<rect x="294" width="2" height="2" rx="1" fill="#242834" />
<rect x="300" width="2" height="2" rx="1" fill="#242834" />
<rect x="306" width="2" height="2" rx="1" fill="#242834" />
<rect x="312" width="2" height="2" rx="1" fill="#242834" />
<rect x="318" width="2" height="2" rx="1" fill="#242834" />
<rect x="324" width="2" height="2" rx="1" fill="#242834" />
<rect x="330" width="2" height="2" rx="1" fill="#242834" />
<rect x="336" width="2" height="2" rx="1" fill="#242834" />
<rect x="342" width="2" height="2" rx="1" fill="#242834" />
<rect x="348" width="2" height="2" rx="1" fill="#242834" />
<rect x="354" width="2" height="2" rx="1" fill="#242834" />
<rect x="360" width="2" height="2" rx="1" fill="#242834" />
<rect x="366" width="2" height="2" rx="1" fill="#242834" />
<rect x="372" width="2" height="2" rx="1" fill="#242834" />
<rect x="378" width="2" height="2" rx="1" fill="#242834" />
<rect x="384" width="2" height="2" rx="1" fill="#242834" />
<rect x="390" width="2" height="2" rx="1" fill="#242834" />
<rect x="396" width="2" height="2" rx="1" fill="#242834" />
<rect x="402" width="2" height="2" rx="1" fill="#242834" />
<rect x="408" width="2" height="2" rx="1" fill="#242834" />
<rect x="414" width="2" height="2" rx="1" fill="#242834" />
<rect x="420" width="2" height="2" rx="1" fill="#242834" />
<rect x="426" width="2" height="2" rx="1" fill="#242834" />
<rect x="432" width="2" height="2" rx="1" fill="#242834" />
<rect x="438" width="2" height="2" rx="1" fill="#242834" />
<rect x="444" width="2" height="2" rx="1" fill="#242834" />
<rect x="450" width="2" height="2" rx="1" fill="#242834" />
<rect x="456" width="2" height="2" rx="1" fill="#242834" />
<rect x="462" width="2" height="2" rx="1" fill="#242834" />
<rect x="468" width="2" height="2" rx="1" fill="#242834" />
<rect x="474" width="2" height="2" rx="1" fill="#242834" />
<rect x="480" width="2" height="2" rx="1" fill="#242834" />
<rect x="486" width="2" height="2" rx="1" fill="#242834" />
<rect x="492" width="2" height="2" rx="1" fill="#242834" />
<rect x="498" width="2" height="2" rx="1" fill="#242834" />
<rect x="504" width="2" height="2" rx="1" fill="#242834" />
<rect x="510" width="2" height="2" rx="1" fill="#242834" />
<rect x="516" width="2" height="2" rx="1" fill="#242834" />
<rect x="522" width="2" height="2" rx="1" fill="#242834" />
<rect x="528" width="2" height="2" rx="1" fill="#242834" />
<rect x="534" width="2" height="2" rx="1" fill="#242834" />
<rect x="540" width="2" height="2" rx="1" fill="#242834" />
<rect x="546" width="2" height="2" rx="1" fill="#242834" />
<rect x="552" width="2" height="2" rx="1" fill="#242834" />
<rect x="558" width="2" height="2" rx="1" fill="#242834" />
<rect x="564" width="2" height="2" rx="1" fill="#242834" />
<rect x="570" width="2" height="2" rx="1" fill="#242834" />
<rect x="576" width="2" height="2" rx="1" fill="#242834" />
<rect x="582" width="2" height="2" rx="1" fill="#242834" />
<rect x="588" width="2" height="2" rx="1" fill="#242834" />
<rect x="594" width="2" height="2" rx="1" fill="#242834" />
<rect x="600" width="2" height="2" rx="1" fill="#242834" />
<rect x="606" width="2" height="2" rx="1" fill="#242834" />
<rect x="612" width="2" height="2" rx="1" fill="#242834" />
<rect x="618" width="2" height="2" rx="1" fill="#242834" />
<rect x="624" width="2" height="2" rx="1" fill="#242834" />
<rect x="630" width="2" height="2" rx="1" fill="#242834" />
<rect x="636" width="2" height="2" rx="1" fill="#242834" />
<rect x="642" width="2" height="2" rx="1" fill="#242834" />
<rect x="648" width="2" height="2" rx="1" fill="#242834" />
<rect x="654" width="2" height="2" rx="1" fill="#242834" />
<rect x="660" width="2" height="2" rx="1" fill="#242834" />
<rect x="666" width="2" height="2" rx="1" fill="#242834" />
<rect x="672" width="2" height="2" rx="1" fill="#242834" />
<rect x="678" width="2" height="2" rx="1" fill="#242834" />
<rect x="684" width="2" height="2" rx="1" fill="#242834" />
<rect x="690" width="2" height="2" rx="1" fill="#242834" />
<rect x="696" width="2" height="2" rx="1" fill="#242834" />
<rect x="702" width="2" height="2" rx="1" fill="#242834" />
<rect x="708" width="2" height="2" rx="1" fill="#242834" />
<rect x="714" width="2" height="2" rx="1" fill="#242834" />
<rect x="720" width="2" height="2" rx="1" fill="#242834" />
<rect x="726" width="2" height="2" rx="1" fill="#242834" />
<rect x="732" width="2" height="2" rx="1" fill="#242834" />
<rect x="738" width="2" height="2" rx="1" fill="#242834" />
<rect x="744" width="2" height="2" rx="1" fill="#242834" />
<rect x="750" width="2" height="2" rx="1" fill="#242834" />
<rect x="756" width="2" height="2" rx="1" fill="#242834" />
<rect x="762" width="2" height="2" rx="1" fill="#242834" />
<rect x="768" width="2" height="2" rx="1" fill="#242834" />
<rect x="774" width="2" height="2" rx="1" fill="#242834" />
<rect x="780" width="2" height="2" rx="1" fill="#242834" />
<rect x="786" width="2" height="2" rx="1" fill="#242834" />
<rect x="792" width="2" height="2" rx="1" fill="#242834" />
<rect x="798" width="2" height="2" rx="1" fill="#242834" />
<rect x="804" width="2" height="2" rx="1" fill="#242834" />
<rect x="810" width="2" height="2" rx="1" fill="#242834" />
<rect x="816" width="2" height="2" rx="1" fill="#242834" />
<rect x="822" width="2" height="2" rx="1" fill="#242834" />
<rect x="828" width="2" height="2" rx="1" fill="#242834" />
<rect x="834" width="2" height="2" rx="1" fill="#242834" />
<rect x="840" width="2" height="2" rx="1" fill="#242834" />
<rect x="846" width="2" height="2" rx="1" fill="#242834" />
<rect x="852" width="2" height="2" rx="1" fill="#242834" />
<rect x="858" width="2" height="2" rx="1" fill="#242834" />
<rect x="864" width="2" height="2" rx="1" fill="#242834" />
<rect x="870" width="2" height="2" rx="1" fill="#242834" />
<rect x="876" width="2" height="2" rx="1" fill="#242834" />
<rect x="882" width="2" height="2" rx="1" fill="#242834" />
<rect x="888" width="2" height="2" rx="1" fill="#242834" />
<rect x="894" width="2" height="2" rx="1" fill="#242834" />
<rect x="900" width="2" height="2" rx="1" fill="#242834" />
<rect x="906" width="2" height="2" rx="1" fill="#242834" />
<rect x="912" width="2" height="2" rx="1" fill="#242834" />
<rect x="918" width="2" height="2" rx="1" fill="#242834" />
<rect x="924" width="2" height="2" rx="1" fill="#242834" />
<rect x="930" width="2" height="2" rx="1" fill="#242834" />
<rect x="936" width="2" height="2" rx="1" fill="#242834" />
<rect x="942" width="2" height="2" rx="1" fill="#242834" />
<rect x="948" width="2" height="2" rx="1" fill="#242834" />
<rect x="954" width="2" height="2" rx="1" fill="#242834" />
<rect x="960" width="2" height="2" rx="1" fill="#242834" />
<rect x="966" width="2" height="2" rx="1" fill="#242834" />
<rect x="972" width="2" height="2" rx="1" fill="#242834" />
<rect x="978" width="2" height="2" rx="1" fill="#242834" />
<rect x="984" width="2" height="2" rx="1" fill="#242834" />
<rect x="990" width="2" height="2" rx="1" fill="#242834" />
<rect x="996" width="2" height="2" rx="1" fill="#242834" />
<rect x="1002" width="2" height="2" rx="1" fill="#242834" />
<rect x="1008" width="2" height="2" rx="1" fill="#242834" />
<rect x="1014" width="2" height="2" rx="1" fill="#242834" />
<rect x="1020" width="2" height="2" rx="1" fill="#242834" />
<rect x="1026" width="2" height="2" rx="1" fill="#242834" />
<rect x="1032" width="2" height="2" rx="1" fill="#242834" />
<rect x="1038" width="2" height="2" rx="1" fill="#242834" />
<rect x="1044" width="2" height="2" rx="1" fill="#242834" />
<rect x="1050" width="2" height="2" rx="1" fill="#242834" />
<rect x="1056" width="2" height="2" rx="1" fill="#242834" />
<rect x="1062" width="2" height="2" rx="1" fill="#242834" />
<rect x="1068" width="2" height="2" rx="1" fill="#242834" />
<rect x="1074" width="2" height="2" rx="1" fill="#242834" />
<rect x="1080" width="2" height="2" rx="1" fill="#242834" />
<rect x="1086" width="2" height="2" rx="1" fill="#242834" />
<rect x="1092" width="2" height="2" rx="1" fill="#242834" />
<rect x="1098" width="2" height="2" rx="1" fill="#242834" />
<rect x="1104" width="2" height="2" rx="1" fill="#242834" />
<rect x="1110" width="2" height="2" rx="1" fill="#242834" />
<rect x="1116" width="2" height="2" rx="1" fill="#242834" />
<rect x="1122" width="2" height="2" rx="1" fill="#242834" />
<rect x="1128" width="2" height="2" rx="1" fill="#242834" />
<rect x="1134" width="2" height="2" rx="1" fill="#242834" />
<rect x="1140" width="2" height="2" rx="1" fill="#242834" />
<rect x="1146" width="2" height="2" rx="1" fill="#242834" />
<rect x="1152" width="2" height="2" rx="1" fill="#242834" />
<rect x="1158" width="2" height="2" rx="1" fill="#242834" />
<rect x="1164" width="2" height="2" rx="1" fill="#242834" />
<rect x="1170" width="2" height="2" rx="1" fill="#242834" />
<rect x="1176" width="2" height="2" rx="1" fill="#242834" />
<rect x="1182" width="2" height="2" rx="1" fill="#242834" />
<rect x="1188" width="2" height="2" rx="1" fill="#242834" />
<rect x="1194" width="2" height="2" rx="1" fill="#242834" />
<rect x="1200" width="2" height="2" rx="1" fill="#242834" />
<rect x="1206" width="2" height="2" rx="1" fill="#242834" />
<rect x="1212" width="2" height="2" rx="1" fill="#242834" />
<rect x="1218" width="2" height="2" rx="1" fill="#242834" />
<rect x="1224" width="2" height="2" rx="1" fill="#242834" />
<rect x="1230" width="2" height="2" rx="1" fill="#242834" />
<rect x="1236" width="2" height="2" rx="1" fill="#242834" />
<rect x="1242" width="2" height="2" rx="1" fill="#242834" />
<rect x="1248" width="2" height="2" rx="1" fill="#242834" />
<rect x="1254" width="2" height="2" rx="1" fill="#242834" />
<rect x="1260" width="2" height="2" rx="1" fill="#242834" />
<rect x="1266" width="2" height="2" rx="1" fill="#242834" />
<rect x="1272" width="2" height="2" rx="1" fill="#242834" />
<rect x="1278" width="2" height="2" rx="1" fill="#242834" />
<rect x="1284" width="2" height="2" rx="1" fill="#242834" />
<rect x="1290" width="2" height="2" rx="1" fill="#242834" />
<rect x="1296" width="2" height="2" rx="1" fill="#242834" />
<rect x="1302" width="2" height="2" rx="1" fill="#242834" />
<rect x="1308" width="2" height="2" rx="1" fill="#242834" />
<rect x="1314" width="2" height="2" rx="1" fill="#242834" />
<rect x="1320" width="2" height="2" rx="1" fill="#242834" />
<rect x="1326" width="2" height="2" rx="1" fill="#242834" />
<rect x="1332" width="2" height="2" rx="1" fill="#242834" />
<rect x="1338" width="2" height="2" rx="1" fill="#242834" />
<rect x="1344" width="2" height="2" rx="1" fill="#242834" />
<rect y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="6" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="12" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="18" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="24" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="30" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="36" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="42" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="48" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="54" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="60" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="66" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="72" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="78" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="84" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="90" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="96" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="102" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="108" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="114" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="120" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="126" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="132" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="138" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="144" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="150" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="156" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="162" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="168" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="174" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="180" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="186" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="192" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="198" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="204" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="210" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="216" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="222" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="228" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="234" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="240" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="246" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="252" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="258" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="264" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="270" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="276" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="282" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="288" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="294" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="300" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="306" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="312" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="318" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="324" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="330" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="336" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="342" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="348" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="354" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="360" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="366" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="372" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="378" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="384" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="390" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="396" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="402" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="408" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="414" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="420" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="426" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="432" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="438" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="444" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="450" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="456" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="462" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="468" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="474" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="480" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="486" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="492" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="498" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="504" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="510" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="516" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="522" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="528" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="534" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="540" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="546" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="552" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="558" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="564" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="570" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="576" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="582" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="588" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="594" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="600" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="606" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="612" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="618" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="624" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="630" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="636" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="642" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="648" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="654" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="660" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="666" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="672" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="678" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="684" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="690" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="696" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="702" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="708" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="714" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="720" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="726" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="732" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="738" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="744" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="750" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="756" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="762" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="768" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="774" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="780" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="786" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="792" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="798" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="804" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="810" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="816" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="822" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="828" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="834" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="840" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="846" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="852" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="858" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="864" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="870" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="876" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="882" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="888" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="894" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="900" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="906" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="912" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="918" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="924" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="930" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="936" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="942" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="948" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="954" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="960" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="966" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="972" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="978" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="984" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="990" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="996" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1002" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1008" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1014" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1020" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1026" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1032" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1038" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1044" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1050" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1056" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1062" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1068" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1074" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1080" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1086" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1092" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1098" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1104" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1110" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1116" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1122" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1128" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1134" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1140" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1146" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1152" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1158" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1164" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1170" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1176" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1182" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1188" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1194" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1200" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1206" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1212" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1218" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1224" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1230" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1236" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1242" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1248" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1254" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1260" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1266" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1272" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1278" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1284" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1290" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1296" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1302" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1308" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1314" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1320" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1326" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1332" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1338" y="6" width="2" height="2" rx="1" fill="#242834" />
<rect x="1344" y="6" width="2" height="2" rx="1" fill="#242834" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

1002
frontend/public/Images/perilianBackground.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

1
frontend/public/locales/en-GB/titles.json
View File

@ -5,6 +5,7 @@
"SERVICE_METRICS": "SigNoz | Service Metrics",
"SERVICE_MAP": "SigNoz | Service Map",
"TRACE": "SigNoz | Trace",
"HOME": "SigNoz | Home",
"TRACE_DETAIL": "SigNoz | Trace Detail",
"TRACES_EXPLORER": "SigNoz | Traces Explorer",
"SETTINGS": "SigNoz | Settings",

1
frontend/public/locales/en/titles.json
View File

@ -1,6 +1,7 @@
{
"SIGN_UP": "SigNoz | Sign Up",
"LOGIN": "SigNoz | Login",
"HOME": "SigNoz | Home",
"SERVICE_METRICS": "SigNoz | Service Metrics",
"SERVICE_MAP": "SigNoz | Service Map",
"GET_STARTED_OLD": "SigNoz | Get Started",

4
frontend/src/AppRoutes/Private.tsx
View File

@ -216,7 +216,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
history.push(fromPathname);
setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
} else if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
history.push(ROUTES.APPLICATION);
history.push(ROUTES.HOME);
}
} else {
// do nothing as the unauthenticated routes are LOGIN and SIGNUP and the LOGIN container takes care of routing to signup if
@ -230,7 +230,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
history.push(fromPathname);
setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
} else {
history.push(ROUTES.APPLICATION);
history.push(ROUTES.HOME);
}
} else {
setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);

3
frontend/src/AppRoutes/index.tsx
View File

@ -249,9 +249,6 @@ function App(): JSX.Element {
// if the user is in logged in state
if (isLoggedInState) {
if (pathname === ROUTES.HOME_PAGE) {
history.replace(ROUTES.APPLICATION);
}
// if the setup calls are loading then return a spinner
if (isFetchingLicenses || isFetchingUser || isFetchingFeatureFlags) {
return <Spinner tip="Loading..." />;

4
frontend/src/AppRoutes/pageComponents.ts
View File

@ -1,5 +1,9 @@
import Loadable from 'components/Loadable';
export const Home = Loadable(
() => import(/* webpackChunkName: "Home" */ 'pages/HomePage/HomePage'),
);
export const ServicesTablePage = Loadable(
() => import(/* webpackChunkName: "ServicesTablePage" */ 'pages/Services'),
);

8
frontend/src/AppRoutes/routes.ts
View File

@ -17,6 +17,7 @@ import {
EditAlertChannelsAlerts,
EditRulesPage,
ErrorDetails,
Home,
InfrastructureMonitoring,
IngestionSettings,
InstalledIntegrations,
@ -80,6 +81,13 @@ const routes: AppRoutes[] = [
isPrivate: true,
key: 'GET_STARTED_WITH_CLOUD',
},
{
path: ROUTES.HOME,
exact: true,
component: Home,
isPrivate: true,
key: 'HOME',
},
{
path: ROUTES.ONBOARDING,
exact: false,

9
frontend/src/api/preferences/updateUserPreference.ts
View File

@ -10,9 +10,12 @@ const updateUserPreference = async (
): Promise<
SuccessResponse<UpdateUserPreferenceResponseProps> | ErrorResponse
> => {
const response = await axios.put(`/user/preferences`, {
preference_value: preferencePayload.value,
});
const response = await axios.put(
`/user/preferences/${preferencePayload.preferenceID}`,
{
preference_value: preferencePayload.value,
},
);
return {
statusCode: 200,

29
frontend/src/components/Header/Header.styles.scss Normal file
View File

@ -0,0 +1,29 @@
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
height: 48px;
box-sizing: border-box;
background: rgba(11, 12, 14, 0.9);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--Slate-500, #161922);
}
.header-left {
display: flex;
align-items: center;
}
.header-right {
display: flex;
align-items: center;
}
.lightMode {
.header-container {
background: var(--bg-vanilla-100);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--bg-vanilla-300);
}
}

17
frontend/src/components/Header/Header.tsx Normal file
View File

@ -0,0 +1,17 @@
import './Header.styles.scss';
export default function Header({
leftComponent,
rightComponent,
}: {
leftComponent: React.ReactNode;
rightComponent: React.ReactNode | null;
}): JSX.Element {
return (
<div className="header-container">
<div className="header-left">{leftComponent}</div>
{rightComponent && <div className="header-right">{rightComponent}</div>}
</div>
);
}

4
frontend/src/components/NotFound/__snapshots__/NotFound.test.tsx.snap
View File

@ -120,10 +120,10 @@ exports[`Not Found page test should render Not Found page without errors 1`] = `
</div>
<a
class="c3"
href="/services"
href="/home"
tabindex="0"
>
Return To Services Page
Return Home
</a>
</div>
</DocumentFragment>

4
frontend/src/components/NotFound/index.tsx
View File

@ -14,8 +14,8 @@ function NotFound({ text = defaultText }: Props): JSX.Element {
<Text>Page Not Found</Text>
</TextContainer>
<Button to={ROUTES.APPLICATION} tabIndex={0}>
Return To Services Page
<Button to={ROUTES.HOME} tabIndex={0}>
Return Home
</Button>
</Container>
);

3
frontend/src/constants/routes.ts
View File

@ -1,6 +1,7 @@
const ROUTES = {
SIGN_UP: '/signup',
LOGIN: '/login',
HOME: '/home',
SERVICE_METRICS: '/services/:servicename',
SERVICE_TOP_LEVEL_OPERATIONS: '/services/:servicename/top-level-operations',
SERVICE_MAP: '/service-map',
@ -47,7 +48,6 @@ const ROUTES = {
LOGS_EXPLORER: '/logs/logs-explorer',
LIVE_LOGS: '/logs/logs-explorer/live',
LOGS_PIPELINES: '/logs/pipelines',
HOME_PAGE: '/',
PASSWORD_RESET: '/password-reset',
LIST_LICENSES: '/licenses',
LOGS_INDEX_FIELDS: '/logs-explorer/index-fields',
@ -69,6 +69,7 @@ const ROUTES = {
METRICS_EXPLORER: '/metrics-explorer/summary',
METRICS_EXPLORER_EXPLORER: '/metrics-explorer/explorer',
METRICS_EXPLORER_VIEWS: '/metrics-explorer/views',
HOME_PAGE: '/',
} as const;
export default ROUTES;

6
frontend/src/container/AppLayout/AppLayout.styles.scss
View File

@ -4,11 +4,15 @@
width: 100%;
.app-content {
width: 100%;
width: calc(100% - 64px); // width of the sidebar
z-index: 0;
margin: 0 auto;
&.full-screen-content {
width: 100% !important;
}
.content-container {
position: relative;
margin: 0 1rem;

10
frontend/src/container/AppLayout/index.tsx
View File

@ -301,6 +301,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
}
}, [activeLicenseV3?.key, manageCreditCard]);
const isHome = (): boolean => routeKey === 'HOME';
const isLogsView = (): boolean =>
routeKey === 'LOGS' ||
routeKey === 'LOGS_EXPLORER' ||
@ -540,13 +542,19 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
<Flex className={cx('app-layout', isDarkMode ? 'darkMode' : 'lightMode')}>
{isToDisplayLayout && !renderFullScreen && <SideNav />}
<div className="app-content" data-overlayscrollbars-initialize>
<div
className={cx('app-content', {
'full-screen-content': renderFullScreen,
})}
data-overlayscrollbars-initialize
>
<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
<LayoutContent data-overlayscrollbars-initialize>
<OverlayScrollbar>
<ChildrenContainer
style={{
margin:
isHome() ||
isLogsView() ||
isTracesView() ||
isDashboardView() ||

232
frontend/src/container/Home/AlertRules/AlertRules.tsx Normal file
View File

@ -0,0 +1,232 @@
import { Button, Skeleton, Tag } from 'antd';
import getAll from 'api/alerts/getAll';
import logEvent from 'api/common/logEvent';
import { QueryParams } from 'constants/query';
import ROUTES from 'constants/routes';
import history from 'lib/history';
import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
import { ArrowRight, ArrowUpRight, Plus } from 'lucide-react';
import Card from 'periscope/components/Card/Card';
import { useAppContext } from 'providers/App/App';
import { useEffect, useState } from 'react';
import { useQuery } from 'react-query';
import { Link, useLocation } from 'react-router-dom';
import { GettableAlert } from 'types/api/alerts/get';
import { USER_ROLES } from 'types/roles';
export default function AlertRules({
onUpdateChecklistDoneItem,
loadingUserPreferences,
}: {
onUpdateChecklistDoneItem: (itemKey: string) => void;
loadingUserPreferences: boolean;
}): JSX.Element {
const { user } = useAppContext();
const [rulesExist, setRulesExist] = useState(false);
const [sortedAlertRules, setSortedAlertRules] = useState<GettableAlert[]>([]);
const location = useLocation();
const params = new URLSearchParams(location.search);
// Fetch Alerts
const { data: alerts, isError, isLoading } = useQuery('allAlerts', {
queryFn: getAll,
cacheTime: 0,
});
useEffect(() => {
const rules = alerts?.payload || [];
setRulesExist(rules.length > 0);
const sortedRules = rules.sort((a, b) => {
// First, prioritize firing alerts
if (a.state === 'firing' && b.state !== 'firing') return -1;
if (a.state !== 'firing' && b.state === 'firing') return 1;
// Then sort by updateAt timestamp
const aUpdateAt = new Date(a.updateAt).getTime();
const bUpdateAt = new Date(b.updateAt).getTime();
return bUpdateAt - aUpdateAt;
});
if (sortedRules.length > 0 && !loadingUserPreferences) {
onUpdateChecklistDoneItem('SETUP_ALERTS');
}
setSortedAlertRules(sortedRules.slice(0, 5));
}, [alerts, onUpdateChecklistDoneItem, loadingUserPreferences]);
const emptyStateCard = (): JSX.Element => (
<div className="empty-state-container">
<div className="empty-state-content-container">
<div className="empty-state-content">
<img
src="/Icons/beacon.svg"
alt="empty-alert-icon"
className="empty-state-icon"
/>
<div className="empty-title">No Alert rules yet.</div>
{user?.role !== USER_ROLES.VIEWER && (
<div className="empty-description">
Create an Alert Rule to get started
</div>
)}
</div>
{user?.role !== USER_ROLES.VIEWER && (
<div className="empty-actions-container">
<Link to={ROUTES.ALERTS_NEW}>
<Button
type="default"
className="periscope-btn secondary"
icon={<Plus size={16} />}
onClick={(): void => {
logEvent('Homepage: Create alert rule clicked', {});
}}
>
Create Alert Rule
</Button>
</Link>
<Button
type="link"
className="learn-more-link"
onClick={(): void => {
logEvent('Homepage: Learn more clicked', {
source: 'Alert Rules',
});
window.open(
'https://signoz.io/docs/alerts/',
'_blank',
'noreferrer noopener',
);
}}
>
Learn more <ArrowUpRight size={12} />
</Button>
</div>
)}
</div>
</div>
);
const onEditHandler = (record: GettableAlert) => (): void => {
logEvent('Homepage: Alert clicked', {
ruleId: record.id,
ruleName: record.alert,
ruleState: record.state,
});
const compositeQuery = mapQueryDataFromApi(record.condition.compositeQuery);
params.set(
QueryParams.compositeQuery,
encodeURIComponent(JSON.stringify(compositeQuery)),
);
params.set(QueryParams.panelTypes, record.condition.compositeQuery.panelType);
params.set(QueryParams.ruleId, record.id.toString());
history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
};
const renderAlertRules = (): JSX.Element => (
<div className="alert-rules-container home-data-item-container">
<div className="alert-rules-list">
{sortedAlertRules.map((rule) => (
<div
role="button"
tabIndex={0}
className="alert-rule-item home-data-item"
key={rule.id}
onClick={onEditHandler(rule)}
onKeyDown={(e): void => {
if (e.key === 'Enter') {
onEditHandler(rule);
}
}}
>
<div className="alert-rule-item-name-container home-data-item-name-container">
<img
src={
rule.id % 2 === 0 ? '/Icons/eight-ball.svg' : '/Icons/circus-tent.svg'
}
alt="alert-rules"
className="alert-rules-img"
/>
<div className="alert-rule-item-name home-data-item-name">
{rule.alert}
</div>
</div>
<div className="alert-rule-item-description home-data-item-tag">
<Tag color={rule?.labels?.severity}>{rule?.labels?.severity}</Tag>
{rule?.state === 'firing' && (
<Tag color="red" className="firing-tag">
{rule?.state}
</Tag>
)}
</div>
</div>
))}
</div>
</div>
);
if (isLoading) {
return (
<Card className="dashboards-list-card home-data-card loading-card">
<Card.Content>
<Skeleton active />
</Card.Content>
</Card>
);
}
if (isError) {
return (
<Card className="dashboards-list-card home-data-card error-card">
<Card.Content>
<Skeleton active />
</Card.Content>
</Card>
);
}
return (
<Card className="alert-rules-card home-data-card">
{rulesExist && (
<Card.Header>
<div className="alert-rules-header home-data-card-header">Alerts</div>
</Card.Header>
)}
<Card.Content>
{rulesExist ? renderAlertRules() : emptyStateCard()}
</Card.Content>
{rulesExist && (
<Card.Footer>
<div className="alert-rules-footer home-data-card-footer">
<Link to={ROUTES.LIST_ALL_ALERT}>
<Button
type="link"
className="periscope-btn link learn-more-link"
onClick={(): void => {
logEvent('Homepage: All alert rules clicked', {});
}}
>
All Alert Rules <ArrowRight size={12} />
</Button>
</Link>
</div>
</Card.Footer>
)}
</Card>
);
}

216
frontend/src/container/Home/Dashboards/Dashboards.tsx Normal file
View File

@ -0,0 +1,216 @@
import { Button, Skeleton, Tag } from 'antd';
import logEvent from 'api/common/logEvent';
import ROUTES from 'constants/routes';
import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
import { useSafeNavigate } from 'hooks/useSafeNavigate';
import { ArrowRight, ArrowUpRight, Plus } from 'lucide-react';
import Card from 'periscope/components/Card/Card';
import { useAppContext } from 'providers/App/App';
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { Dashboard } from 'types/api/dashboard/getAll';
import { USER_ROLES } from 'types/roles';
export default function Dashboards({
onUpdateChecklistDoneItem,
loadingUserPreferences,
}: {
onUpdateChecklistDoneItem: (itemKey: string) => void;
loadingUserPreferences: boolean;
}): JSX.Element {
const { safeNavigate } = useSafeNavigate();
const { user } = useAppContext();
const [sortedDashboards, setSortedDashboards] = useState<Dashboard[]>([]);
// Fetch Dashboards
const {
data: dashboardsList,
isLoading: isDashboardListLoading,
isError: isDashboardListError,
} = useGetAllDashboard();
useEffect(() => {
if (!dashboardsList) return;
const sortedDashboards = dashboardsList.sort((a, b) => {
const aUpdateAt = new Date(a.updatedAt).getTime();
const bUpdateAt = new Date(b.updatedAt).getTime();
return bUpdateAt - aUpdateAt;
});
if (sortedDashboards.length > 0 && !loadingUserPreferences) {
onUpdateChecklistDoneItem('SETUP_DASHBOARDS');
}
setSortedDashboards(sortedDashboards.slice(0, 5));
}, [dashboardsList, onUpdateChecklistDoneItem, loadingUserPreferences]);
const emptyStateCard = (): JSX.Element => (
<div className="empty-state-container">
<div className="empty-state-content-container">
<div className="empty-state-content">
<img
src="/Icons/dials.svg"
alt="empty-alert-icon"
className="empty-state-icon"
/>
<div className="empty-title">You don’t have any dashboards yet.</div>
{user?.role !== USER_ROLES.VIEWER && (
<div className="empty-description">Create a dashboard to get started</div>
)}
</div>
{user?.role !== USER_ROLES.VIEWER && (
<div className="empty-actions-container">
<Link to={ROUTES.ALL_DASHBOARD}>
<Button
type="default"
className="periscope-btn secondary"
icon={<Plus size={16} />}
onClick={(): void => {
logEvent('Homepage: Create dashboard clicked', {});
}}
>
New Dashboard
</Button>
</Link>
<Button
type="link"
className="learn-more-link"
onClick={(): void => {
logEvent('Homepage: Learn more clicked', {
source: 'Dashboards',
});
window.open(
'https://signoz.io/docs/userguide/manage-dashboards/',
'_blank',
);
}}
>
Learn more <ArrowUpRight size={12} />
</Button>
</div>
)}
</div>
</div>
);
const renderDashboardsList = (): JSX.Element => (
<div className="home-dashboards-list-container home-data-item-container">
<div className="dashboards-list">
{sortedDashboards.slice(0, 5).map((dashboard) => {
const getLink = (): string => `${ROUTES.ALL_DASHBOARD}/${dashboard.uuid}`;
const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
event.stopPropagation();
logEvent('Homepage: Dashboard clicked', {
dashboardId: dashboard.id,
dashboardName: dashboard.data.title,
});
if (event.metaKey || event.ctrlKey) {
window.open(getLink(), '_blank');
} else {
safeNavigate(getLink());
}
};
return (
<div
role="button"
tabIndex={0}
className="dashboard-item home-data-item"
key={dashboard.id}
onClick={onClickHandler}
onKeyDown={(e): void => {
if (e.key === 'Enter') {
onClickHandler((e as unknown) as React.MouseEvent<HTMLElement>);
}
}}
>
<div className="dashboard-item-name-container home-data-item-name-container">
<img
src={
dashboard.id % 2 === 0
? '/Icons/eight-ball.svg'
: '/Icons/circus-tent.svg'
}
alt="alert-rules"
className="alert-rules-img"
/>
<div className="alert-rule-item-name home-data-item-name">
{dashboard.data.title}
</div>
</div>
<div className="alert-rule-item-description home-data-item-tag">
{dashboard.data.tags?.map((tag) => (
<Tag color={tag} key={tag}>
{tag}
</Tag>
))}
</div>
</div>
);
})}
</div>
</div>
);
if (isDashboardListLoading) {
return (
<Card className="dashboards-list-card home-data-card loading-card">
<Card.Content>
<Skeleton active />
</Card.Content>
</Card>
);
}
if (isDashboardListError) {
return (
<Card className="dashboards-list-card home-data-card error-card">
<Card.Content>
<Skeleton active />
</Card.Content>
</Card>
);
}
const dashboardsExist = sortedDashboards.length > 0;
return (
<Card className="dashboards-list-card home-data-card">
{dashboardsExist && (
<Card.Header>
<div className="dashboards-header home-data-card-header">Dashboards</div>
</Card.Header>
)}
<Card.Content>
{dashboardsExist ? renderDashboardsList() : emptyStateCard()}
</Card.Content>
{dashboardsExist && (
<Card.Footer>
<div className="dashboards-footer home-data-card-footer">
<Link to={ROUTES.ALL_DASHBOARD}>
<Button
type="link"
className="periscope-btn link learn-more-link"
onClick={(): void => {
logEvent('Homepage: All dashboards clicked', {});
}}
>
All Dashboards <ArrowRight size={12} />
</Button>
</Link>
</div>
</Card.Footer>
)}
</Card>
);
}

184
frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx Normal file
View File

@ -0,0 +1,184 @@
/* eslint-disable sonarjs/no-identical-functions */
import { Button, Skeleton, Tag, Typography } from 'antd';
import logEvent from 'api/common/logEvent';
import ROUTES from 'constants/routes';
import { useGetDeploymentsData } from 'hooks/CustomDomain/useGetDeploymentsData';
import history from 'lib/history';
import { Globe, Link2 } from 'lucide-react';
import Card from 'periscope/components/Card/Card';
import { useEffect, useState } from 'react';
function DataSourceInfo({
dataSentToSigNoz,
isLoading,
}: {
dataSentToSigNoz: boolean;
isLoading: boolean;
}): JSX.Element {
const notSendingData = !dataSentToSigNoz;
const {
data: deploymentsData,
isError: isErrorDeploymentsData,
} = useGetDeploymentsData();
const [region, setRegion] = useState<string>('');
const [url, setUrl] = useState<string>('');
useEffect(() => {
if (deploymentsData) {
switch (deploymentsData?.data.data.cluster.region.name) {
case 'in':
setRegion('India');
break;
case 'us':
setRegion('United States');
break;
case 'eu':
setRegion('Europe');
break;
default:
setRegion(deploymentsData?.data.data.cluster.region.name);
break;
}
setUrl(
`${deploymentsData?.data.data.name}.${deploymentsData?.data.data.cluster.region.dns}`,
);
}
}, [deploymentsData]);
const renderNotSendingData = (): JSX.Element => (
<>
<Typography className="welcome-title">
Hello there, Welcome to your SigNoz workspace
</Typography>
<Typography className="welcome-description">
You’re not sending any data yet. <br />
SigNoz is so much better with your data ⎯ start by sending your telemetry
data to SigNoz.
</Typography>
<Card className="welcome-card">
<Card.Content>
<div className="workspace-ready-container">
<div className="workspace-ready-header">
<Typography className="workspace-ready-title">
<img src="/Icons/hurray.svg" alt="hurray" />
Your workspace is ready
</Typography>
<Button
type="primary"
className="periscope-btn primary"
icon={<img src="/Icons/container-plus.svg" alt="plus" />}
role="button"
tabIndex={0}
onClick={(): void => {
logEvent('Homepage: Connect dataSource clicked', {});
history.push(ROUTES.GET_STARTED);
}}
onKeyDown={(e): void => {
if (e.key === 'Enter') {
logEvent('Homepage: Connect dataSource clicked', {});
history.push(ROUTES.GET_STARTED);
}
}}
>
Connect Data Source
</Button>
</div>
{!isErrorDeploymentsData && deploymentsData && (
<div className="workspace-details">
<div className="workspace-region">
<Globe size={10} />
<Typography>{region}</Typography>
</div>
<div className="workspace-url">
<Link2 size={12} />
<Typography className="workspace-url-text">
{url}
<Tag color="default" className="workspace-url-tag">
default
</Tag>
</Typography>
</div>
</div>
)}
</div>
</Card.Content>
</Card>
</>
);
const renderDataReceived = (): JSX.Element => (
<>
<Typography className="welcome-title">
Hello there, Welcome to your SigNoz workspace
</Typography>
{!isErrorDeploymentsData && deploymentsData && (
<Card className="welcome-card">
<Card.Content>
<div className="workspace-ready-container">
<div className="workspace-details">
<div className="workspace-region">
<Globe size={10} />
<Typography>{region}</Typography>
</div>
<div className="workspace-url">
<Link2 size={12} />
<Typography className="workspace-url-text">
{url}
<Tag color="default" className="workspace-url-tag">
default
</Tag>
</Typography>
</div>
</div>
</div>
</Card.Content>
</Card>
)}
</>
);
return (
<div className="welcome-container">
<div className="hello-wave-container">
<div className="hello-wave-img-container">
<img
src="/Icons/hello-wave.svg"
alt="hello-wave"
className="hello-wave-img"
width={36}
height={36}
/>
</div>
</div>
{isLoading && (
<>
<Skeleton.Avatar active size={36} shape="square" />
<Skeleton active />
</>
)}
{!isLoading && dataSentToSigNoz && renderDataReceived()}
{!isLoading && notSendingData && renderNotSendingData()}
</div>
);
}
export default DataSourceInfo;

1059
frontend/src/container/Home/Home.styles.scss Normal file
View File

File diff suppressed because it is too large Load Diff

721
frontend/src/container/Home/Home.tsx Normal file
View File

@ -0,0 +1,721 @@
/* eslint-disable sonarjs/no-duplicate-string */
import './Home.styles.scss';
import { Color } from '@signozhq/design-tokens';
import { Button, Popover } from 'antd';
import logEvent from 'api/common/logEvent';
import { HostListPayload } from 'api/infraMonitoring/getHostLists';
import { K8sPodsListPayload } from 'api/infraMonitoring/getK8sPodsList';
import getAllUserPreferences from 'api/preferences/getAllUserPreference';
import updateUserPreferenceAPI from 'api/preferences/updateUserPreference';
import Header from 'components/Header/Header';
import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import ROUTES from 'constants/routes';
import { getHostListsQuery } from 'container/InfraMonitoringHosts/utils';
import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
import { useGetK8sPodsList } from 'hooks/infraMonitoring/useGetK8sPodsList';
import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
import history from 'lib/history';
import cloneDeep from 'lodash-es/cloneDeep';
import { CompassIcon, DotIcon, HomeIcon, Plus, Wrench } from 'lucide-react';
import { AnimatePresence } from 'motion/react';
import * as motion from 'motion/react-client';
import Card from 'periscope/components/Card/Card';
import { useAppContext } from 'providers/App/App';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useMutation, useQuery } from 'react-query';
import { DataSource } from 'types/common/queryBuilder';
import { UserPreference } from 'types/reducer/app';
import { USER_ROLES } from 'types/roles';
import { popupContainer } from 'utils/selectPopupContainer';
import AlertRules from './AlertRules/AlertRules';
import { defaultChecklistItemsState } from './constants';
import Dashboards from './Dashboards/Dashboards';
import DataSourceInfo from './DataSourceInfo/DataSourceInfo';
import HomeChecklist, { ChecklistItem } from './HomeChecklist/HomeChecklist';
import SavedViews from './SavedViews/SavedViews';
import Services from './Services/Services';
import StepsProgress from './StepsProgress/StepsProgress';
const homeInterval = 30 * 60 * 1000;
// eslint-disable-next-line sonarjs/cognitive-complexity
export default function Home(): JSX.Element {
const { user } = useAppContext();
const [startTime, setStartTime] = useState<number | null>(null);
const [endTime, setEndTime] = useState<number | null>(null);
const [updatingUserPreferences, setUpdatingUserPreferences] = useState(false);
const [loadingUserPreferences, setLoadingUserPreferences] = useState(true);
const [checklistItems, setChecklistItems] = useState<ChecklistItem[]>(
defaultChecklistItemsState,
);
const [isWelcomeChecklistSkipped, setIsWelcomeChecklistSkipped] = useState(
false,
);
useEffect(() => {
const now = new Date();
const startTime = new Date(now.getTime() - homeInterval);
const endTime = now;
setStartTime(startTime.getTime());
setEndTime(endTime.getTime());
}, []);
// Detect Logs
const { data: logsData, isLoading: isLogsLoading } = useGetQueryRange(
{
query: initialQueriesMap[DataSource.LOGS],
graphType: PANEL_TYPES.TABLE,
selectedTime: 'GLOBAL_TIME',
globalSelectedInterval: '30m',
params: {
dataSource: DataSource.LOGS,
},
},
DEFAULT_ENTITY_VERSION,
{
queryKey: [
REACT_QUERY_KEY.GET_QUERY_RANGE,
'30m',
endTime || Date.now(),
startTime || Date.now(),
initialQueriesMap[DataSource.LOGS],
],
enabled: !!startTime && !!endTime,
},
);
// Detect Traces
const { data: tracesData, isLoading: isTracesLoading } = useGetQueryRange(
{
query: initialQueriesMap[DataSource.TRACES],
graphType: PANEL_TYPES.TABLE,
selectedTime: 'GLOBAL_TIME',
globalSelectedInterval: '30m',
params: {
dataSource: DataSource.TRACES,
},
},
DEFAULT_ENTITY_VERSION,
{
queryKey: [
REACT_QUERY_KEY.GET_QUERY_RANGE,
'30m',
endTime || Date.now(),
startTime || Date.now(),
initialQueriesMap[DataSource.TRACES],
],
enabled: !!startTime && !!endTime,
},
);
// Detect Infra Metrics - Hosts
const query = useMemo(() => {
const baseQuery = getHostListsQuery();
let queryStartTime = startTime;
let queryEndTime = endTime;
if (!startTime || !endTime) {
const now = new Date();
const startTime = new Date(now.getTime() - homeInterval);
const endTime = now;
queryStartTime = startTime.getTime();
queryEndTime = endTime.getTime();
}
return {
...baseQuery,
limit: 10,
offset: 0,
filters: {
items: [],
op: 'AND',
},
start: queryStartTime,
end: queryEndTime,
};
}, [startTime, endTime]);
const { data: hostData } = useGetHostList(query as HostListPayload, {
queryKey: ['hostList', query],
enabled: !!query,
});
const { data: k8sPodsData } = useGetK8sPodsList(query as K8sPodsListPayload, {
queryKey: ['K8sPodsList', query],
enabled: !!query,
});
const [isLogsIngestionActive, setIsLogsIngestionActive] = useState(false);
const [isTracesIngestionActive, setIsTracesIngestionActive] = useState(false);
const [isMetricsIngestionActive, setIsMetricsIngestionActive] = useState(
false,
);
const processUserPreferences = (userPreferences: UserPreference[]): void => {
const checklistSkipped = userPreferences?.find(
(preference) => preference.key === 'WELCOME_CHECKLIST_DO_LATER',
)?.value;
const updatedChecklistItems = cloneDeep(checklistItems);
const newChecklistItems = updatedChecklistItems.map((item) => {
const newItem = { ...item };
newItem.isSkipped =
userPreferences?.find(
(preference) => preference.key === item.skippedPreferenceKey,
)?.value || false;
return newItem;
});
setChecklistItems(newChecklistItems);
setIsWelcomeChecklistSkipped(checklistSkipped || false);
};
// Fetch User Preferences
const { refetch: refetchUserPreferences } = useQuery({
queryFn: () => getAllUserPreferences(),
queryKey: ['getUserPreferences'],
enabled: true,
refetchOnWindowFocus: false,
onSuccess: (response) => {
if (response.payload && response.payload.data) {
processUserPreferences(response.payload.data);
}
setLoadingUserPreferences(false);
setUpdatingUserPreferences(false);
},
onError: () => {
setUpdatingUserPreferences(false);
setLoadingUserPreferences(false);
},
});
const { mutate: updateUserPreference } = useMutation(updateUserPreferenceAPI, {
onSuccess: () => {
setUpdatingUserPreferences(false);
refetchUserPreferences();
},
onError: () => {
setUpdatingUserPreferences(false);
},
});
const handleWillDoThisLater = (): void => {
logEvent('Welcome Checklist: Will do this later clicked', {});
setUpdatingUserPreferences(true);
updateUserPreference({
preferenceID: 'WELCOME_CHECKLIST_DO_LATER',
value: true,
});
};
const handleSkipChecklistItem = (item: ChecklistItem): void => {
if (item.skippedPreferenceKey) {
setUpdatingUserPreferences(true);
updateUserPreference({
preferenceID: item.skippedPreferenceKey,
value: true,
});
}
};
const renderWelcomeChecklistModal = (): JSX.Element => (
<div className="welcome-checklist-popover-container">
<HomeChecklist
checklistItems={checklistItems}
onSkip={handleSkipChecklistItem}
isLoading={loadingUserPreferences || updatingUserPreferences}
/>
</div>
);
const handleUpdateChecklistDoneItem = useCallback((itemKey: string): void => {
setChecklistItems((prevItems) =>
prevItems.map((item) =>
item.id === itemKey ? { ...item, completed: true } : item,
),
);
}, []);
useEffect(() => {
const logsDataTotal = parseInt(
logsData?.payload?.data?.newResult?.data?.result?.[0]?.series?.[0]
?.values?.[0]?.value || '0',
10,
);
if (logsDataTotal > 0) {
setIsLogsIngestionActive(true);
handleUpdateChecklistDoneItem('SEND_LOGS');
handleUpdateChecklistDoneItem('ADD_DATA_SOURCE');
}
}, [logsData, handleUpdateChecklistDoneItem]);
useEffect(() => {
const tracesDataTotal = parseInt(
tracesData?.payload?.data?.newResult?.data?.result?.[0]?.series?.[0]
?.values?.[0]?.value || '0',
10,
);
if (tracesDataTotal > 0) {
setIsTracesIngestionActive(true);
handleUpdateChecklistDoneItem('SEND_TRACES');
handleUpdateChecklistDoneItem('ADD_DATA_SOURCE');
}
}, [tracesData, handleUpdateChecklistDoneItem]);
useEffect(() => {
const hostDataTotal = hostData?.payload?.data?.total ?? 0;
const k8sPodsDataTotal = k8sPodsData?.payload?.data?.total ?? 0;
if (hostDataTotal > 0 || k8sPodsDataTotal > 0) {
setIsMetricsIngestionActive(true);
handleUpdateChecklistDoneItem('ADD_DATA_SOURCE');
handleUpdateChecklistDoneItem('SEND_INFRA_METRICS');
}
}, [hostData, k8sPodsData, handleUpdateChecklistDoneItem]);
useEffect(() => {
logEvent('Homepage: Visited', {});
}, []);
return (
<div className="home-container">
<div className="sticky-header">
<Header
leftComponent={
<div className="home-header-left">
<HomeIcon size={14} /> Home
</div>
}
rightComponent={
<div className="home-header-right">
{isWelcomeChecklistSkipped && (
<Popover
placement="bottomRight"
arrow={false}
trigger="click"
autoAdjustOverflow
onOpenChange={(visible): void => {
if (visible) {
logEvent('Welcome Checklist: Expanded', {});
} else {
logEvent('Welcome Checklist: Minimized', {});
}
}}
content={renderWelcomeChecklistModal()}
getPopupContainer={popupContainer}
rootClassName="welcome-checklist-popover"
>
<Button
type="default"
size="small"
className="periscope-btn secondary welcome-checklist-btn"
>
<img
src="/Icons/spinner-half-blue.svg"
alt="spinner-half-blue"
width={16}
height={16}
className="welcome-checklist-icon"
/>
&nbsp; Welcome checklist
</Button>
</Popover>
)}
</div>
}
/>
</div>
<div className="home-content">
<div className="home-left-content">
<DataSourceInfo
dataSentToSigNoz={
isLogsIngestionActive ||
isTracesIngestionActive ||
isMetricsIngestionActive
}
isLoading={isLogsLoading || isTracesLoading}
/>
<div className="divider">
<img src="/Images/dotted-divider.svg" alt="divider" />
</div>
<div className="active-ingestions-container">
{isLogsIngestionActive && (
<Card className="active-ingestion-card" size="small">
<Card.Content>
<div className="active-ingestion-card-content-container">
<div className="active-ingestion-card-content">
<div className="active-ingestion-card-content-icon">
<DotIcon size={16} color={Color.BG_FOREST_500} />
</div>
<div className="active-ingestion-card-content-description">
Logs ingestion is active
</div>
</div>
<div
role="button"
tabIndex={0}
className="active-ingestion-card-actions"
onClick={(): void => {
// eslint-disable-next-line sonarjs/no-duplicate-string
logEvent('Homepage: Ingestion Active Explore clicked', {
source: 'Logs',
});
history.push(ROUTES.LOGS_EXPLORER);
}}
onKeyDown={(e): void => {
if (e.key === 'Enter') {
logEvent('Homepage: Ingestion Active Explore clicked', {
source: 'Logs',
});
history.push(ROUTES.LOGS_EXPLORER);
}
}}
>
<CompassIcon size={12} />
Explore Logs
</div>
</div>
</Card.Content>
</Card>
)}
{isTracesIngestionActive && (
<Card className="active-ingestion-card" size="small">
<Card.Content>
<div className="active-ingestion-card-content-container">
<div className="active-ingestion-card-content">
<div className="active-ingestion-card-content-icon">
<DotIcon size={16} color={Color.BG_FOREST_500} />
</div>
<div className="active-ingestion-card-content-description">
Traces ingestion is active
</div>
</div>
<div
className="active-ingestion-card-actions"
role="button"
tabIndex={0}
onClick={(): void => {
logEvent('Homepage: Ingestion Active Explore clicked', {
source: 'Traces',
});
history.push(ROUTES.TRACES_EXPLORER);
}}
onKeyDown={(e): void => {
if (e.key === 'Enter') {
logEvent('Homepage: Ingestion Active Explore clicked', {
source: 'Traces',
});
history.push(ROUTES.TRACES_EXPLORER);
}
}}
>
<CompassIcon size={12} />
Explore Traces
</div>
</div>
</Card.Content>
</Card>
)}
{isMetricsIngestionActive && (
<Card className="active-ingestion-card" size="small">
<Card.Content>
<div className="active-ingestion-card-content-container">
<div className="active-ingestion-card-content">
<div className="active-ingestion-card-content-icon">
<DotIcon size={16} color={Color.BG_FOREST_500} />
</div>
<div className="active-ingestion-card-content-description">
Metrics ingestion is active
</div>
</div>
<div
className="active-ingestion-card-actions"
role="button"
tabIndex={0}
onClick={(): void => {
logEvent('Homepage: Ingestion Active Explore clicked', {
source: 'Metrics',
});
history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
}}
onKeyDown={(e): void => {
if (e.key === 'Enter') {
logEvent('Homepage: Ingestion Active Explore clicked', {
source: 'Metrics',
});
history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
}
}}
>
<CompassIcon size={12} />
Explore Infra Metrics
</div>
</div>
</Card.Content>
</Card>
)}
</div>
{user?.role !== USER_ROLES.VIEWER && (
<div className="explorers-container">
<Card className="explorer-card">
<Card.Content>
<div className="section-container">
<div className="section-content">
<div className="section-icon">
<img
src="/Icons/wrench.svg"
alt="wrench"
width={16}
height={16}
loading="lazy"
/>
</div>
<div className="section-title">
<div className="title">Filter and save views with the Explorer</div>
<div className="description">
Explore your data, and save useful views for everyone in the team.
</div>
</div>
</div>
<div className="section-actions">
<Button
type="default"
className="periscope-btn secondary"
icon={<Wrench size={14} />}
onClick={(): void => {
logEvent('Homepage: Explore clicked', {
source: 'Logs',
});
history.push(ROUTES.LOGS_EXPLORER);
}}
>
Open Logs Explorer
</Button>
<Button
type="default"
className="periscope-btn secondary"
icon={<Wrench size={14} />}
onClick={(): void => {
logEvent('Homepage: Explore clicked', {
source: 'Traces',
});
history.push(ROUTES.TRACES_EXPLORER);
}}
>
Open Traces Explorer
</Button>
</div>
</div>
</Card.Content>
</Card>
<Card className="explorer-card">
<Card.Content>
<div className="section-container">
<div className="section-content">
<div className="section-icon">
<img
src="/Icons/dashboard.svg"
alt="dashboard"
width={16}
height={16}
/>
</div>
<div className="section-title">
<div className="title">Create a dashboard</div>
<div className="description">
Create a dashboard to visualize your data.
</div>
</div>
</div>
<div className="section-actions">
<Button
type="default"
className="periscope-btn secondary"
icon={<Plus size={14} />}
onClick={(): void => {
logEvent('Homepage: Explore clicked', {
source: 'Dashboards',
});
history.push(ROUTES.ALL_DASHBOARD);
}}
>
Create dashboard
</Button>
</div>
</div>
</Card.Content>
</Card>
<Card className="explorer-card">
<Card.Content>
<div className="section-container">
<div className="section-content">
<div className="section-icon">
<img
src="/Icons/cracker.svg"
alt="cracker"
width={16}
height={16}
loading="lazy"
/>
</div>
<div className="section-title">
<div className="title">Add an alert</div>
<div className="description">
Create bespoke alerting rules to suit your needs.
</div>
</div>
</div>
<div className="section-actions">
<Button
type="default"
className="periscope-btn secondary"
icon={<Plus size={14} />}
onClick={(): void => {
logEvent('Homepage: Explore clicked', {
source: 'Alerts',
});
history.push(ROUTES.ALERTS_NEW);
}}
>
Create an alert
</Button>
</div>
</div>
</Card.Content>
</Card>
</div>
)}
{(isLogsIngestionActive ||
isTracesIngestionActive ||
isMetricsIngestionActive) && (
<>
<AlertRules
onUpdateChecklistDoneItem={handleUpdateChecklistDoneItem}
loadingUserPreferences={loadingUserPreferences}
/>
<Dashboards
onUpdateChecklistDoneItem={handleUpdateChecklistDoneItem}
loadingUserPreferences={loadingUserPreferences}
/>
</>
)}
</div>
<div className="home-right-content">
{!isWelcomeChecklistSkipped && !loadingUserPreferences && (
<AnimatePresence initial={false}>
<Card className="checklist-card">
<Card.Content>
<motion.div
initial={{ opacity: 0, scale: 0 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0 }}
key="box"
>
<div className="checklist-container">
<div className="checklist-items-container">
<StepsProgress checklistItems={checklistItems} />
<HomeChecklist
checklistItems={checklistItems}
onSkip={handleSkipChecklistItem}
isLoading={updatingUserPreferences || loadingUserPreferences}
/>
</div>
<div className="checklist-container-right-img">
<div className="checklist-img-bg-container">
<img
src="/Images/perilianBackground.svg"
alt="not-found"
className="checklist-img-bg"
/>
</div>
<div className="checklist-img-container">
<img
src="/Images/allInOne.svg"
alt="checklist-img"
className="checklist-img"
/>
</div>
</div>
</div>
</motion.div>
</Card.Content>
<Card.Footer>
<div className="checklist-footer-container">
<Button
type="link"
onClick={handleWillDoThisLater}
loading={updatingUserPreferences}
>
I&apos;ll do this later
</Button>
</div>
</Card.Footer>
</Card>
</AnimatePresence>
)}
{(isLogsIngestionActive ||
isTracesIngestionActive ||
isMetricsIngestionActive) && (
<>
<Services
onUpdateChecklistDoneItem={handleUpdateChecklistDoneItem}
loadingUserPreferences={loadingUserPreferences}
/>
<SavedViews
onUpdateChecklistDoneItem={handleUpdateChecklistDoneItem}
loadingUserPreferences={loadingUserPreferences}
/>
</>
)}
</div>
</div>
</div>
);
}

381
frontend/src/container/Home/HomeChecklist/HomeChecklist.styles.scss Normal file
View File

@ -0,0 +1,381 @@
.home-checklist-container {
display: flex;
flex-direction: column;
gap: 24px;
.completed-checklist-container {
flex: 1;
.completed-checklist-title {
color: var(--Vanilla-400, #c0c1c3);
font-family: Inter;
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 163.636% */
letter-spacing: 0.88px;
text-transform: uppercase;
margin-left: -1rem;
margin-bottom: 16px;
}
.completed-checklist-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-left: 16px;
margin-bottom: 8px;
position: relative;
&:before {
position: absolute;
left: -18px;
top: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: var(--bg-ink-400);
border: 1px solid var(--bg-slate-400);
color: var(--bg-ink-400);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
background-color: var(--bg-forest-400);
content: '✓';
font-size: 16px;
font-weight: 300;
}
&:not(:last-child):after {
content: '';
position: absolute;
left: -9px;
top: 24px;
bottom: 0px;
width: 1px;
height: 100%;
background: linear-gradient(
to bottom,
var(--bg-forest-400) 0%,
var(--bg-forest-400) 50%,
transparent 50%,
transparent 100%
);
background-size: 2px 10px;
}
.completed-checklist-item-title {
color: var(--Vanilla-400, #c0c1c3);
font-family: Inter;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 171.429% */
letter-spacing: -0.07px;
}
.completed-checklist-item-description {
color: var(--Vanilla-400, #c0c1c3);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}
}
}
.whats-next-checklist-container {
flex: 1;
.whats-next-checklist-title {
color: var(--Vanilla-400, #c0c1c3);
font-family: Inter;
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 163.636% */
letter-spacing: 0.88px;
text-transform: uppercase;
margin-left: -1rem;
margin-bottom: 16px;
}
.whats-next-checklist-items-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.whats-next-checklist-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-left: 16px;
position: relative;
&:before {
content: '';
position: absolute;
left: -18px;
top: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: var(--bg-ink-400);
border: 1px dashed var(--bg-slate-100);
color: var(--bg-ink-400);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
&.active {
&:before {
background-color: #4568dc;
content: '';
display: inline-block;
background: url('/public/Icons/status-inprogress-pill.svg') no-repeat
center;
background-size: contain;
border: none !important;
color: #fff;
font-size: 16px;
border: 1px dashed white;
border-radius: 50%;
}
}
&.skipped {
&:before {
background-color: var(--bg-amber-400);
content: '';
display: inline-block;
background: url('/public/Icons/status-skipped-pill.svg') no-repeat center;
background-size: contain;
border: none;
color: var(--bg-ink-400);
font-size: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
}
&:not(:last-child):after {
content: '';
position: absolute;
left: -9px;
top: 24px;
bottom: 0px;
width: 1px;
height: 100%;
background: linear-gradient(
to bottom,
var(--bg-slate-100) 0%,
var(--bg-slate-100) 50%,
transparent 50%,
transparent 100%
);
background-size: 2px 10px;
}
&.active {
&:not(:last-child):after {
content: '';
position: absolute;
left: -9px;
top: 24px;
bottom: 0px;
width: 1px;
height: 100%;
background: linear-gradient(
to bottom,
#4568dc 0%,
#4568dc 50%,
transparent 50%,
transparent 100%
);
background-size: 2px 10px;
}
}
&.skipped {
&:not(:last-child):after {
content: '';
position: absolute;
left: -9px;
top: 24px;
bottom: 0px;
width: 1px;
height: 100%;
background: linear-gradient(
to bottom,
var(--bg-amber-400) 0%,
var(--bg-amber-400) 50%,
transparent 50%,
transparent 100%
);
background-size: 2px 10px;
}
}
.whats-next-checklist-item-title {
color: var(--Vanilla-400, #c0c1c3);
font-family: Inter;
font-size: 13px;
font-style: normal;
line-height: 24px; /* 171.429% */
letter-spacing: -0.07px;
cursor: pointer;
}
.whats-next-checklist-item-description {
color: var(--Vanilla-400, #c0c1c3);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}
.whats-next-checklist-item-content {
display: none;
flex-direction: column;
gap: 0.5rem;
}
&:hover {
.whats-next-checklist-item-content {
display: flex;
}
}
&:hover {
.whats-next-checklist-item-title {
color: var(--Vanilla-100, #fff) !important;
}
}
.active {
.whats-next-checklist-item-content {
display: flex;
}
}
&.active {
.whats-next-checklist-item-title {
color: var(--Vanilla-100, #fff) !important;
}
}
.whats-next-checklist-item-action-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 0.5rem;
.whats-next-checklist-item-action-buttons-container {
display: flex;
flex-direction: row;
gap: 0.5rem;
}
.periscope-btn.secondary {
border-radius: 2px;
border: 1px solid var(--Slate-200, #2c3140);
background: var(--Ink-200, #23262e);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}
.skip-btn {
&:hover {
color: var(--bg-amber-400);
}
}
}
}
}
}
.lightMode {
.home-checklist-container {
.completed-checklist-container {
.completed-checklist-title {
color: var(--bg-ink-300);
}
.completed-checklist-item {
&:before {
border: 1px solid var(--bg-vanilla-300);
color: var(--bg-ink-300);
background-color: var(--bg-forest-400);
}
.completed-checklist-item-title {
color: var(--bg-ink-300);
}
.completed-checklist-item-description {
color: var(--bg-ink-300);
}
}
}
.whats-next-checklist-container {
.whats-next-checklist-title {
color: var(--bg-ink-300);
}
.whats-next-checklist-item {
&:before {
background-color: var(--bg-vanilla-100);
border: 1px dashed var(--bg-vanilla-300);
color: var(--bg-ink-300);
}
.whats-next-checklist-item-title {
color: var(--bg-ink-300);
}
.whats-next-checklist-item-description {
color: var(--bg-ink-300);
}
&:hover {
.whats-next-checklist-item-title {
color: var(--bg-ink-300) !important;
}
}
&.active {
.whats-next-checklist-item-title {
color: var(--bg-ink-300) !important;
}
}
.whats-next-checklist-item-action-buttons {
.periscope-btn.secondary {
border-radius: 2px;
border: 1px solid var(--bg-vanilla-300);
background: var(--bg-vanilla-100);
box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.1);
}
}
}
}
}
}

144
frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx Normal file
View File

@ -0,0 +1,144 @@
import './HomeChecklist.styles.scss';
import { Button } from 'antd';
import logEvent from 'api/common/logEvent';
import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
import { useAppContext } from 'providers/App/App';
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { USER_ROLES } from 'types/roles';
export type ChecklistItem = {
id: string;
title: string;
description: string;
completed: boolean;
isSkipped: boolean;
skippedPreferenceKey?: string;
toRoute?: string;
docsLink?: string;
};
function HomeChecklist({
checklistItems,
onSkip,
isLoading,
}: {
checklistItems: ChecklistItem[];
onSkip: (item: ChecklistItem) => void;
isLoading: boolean;
}): JSX.Element {
const { user } = useAppContext();
const [completedChecklistItems, setCompletedChecklistItems] = useState<
ChecklistItem[]
>([]);
const [whatsNextChecklistItems, setWhatsNextChecklistItems] = useState<
ChecklistItem[]
>([]);
useEffect(() => {
setCompletedChecklistItems(checklistItems.filter((item) => item.completed));
setWhatsNextChecklistItems(checklistItems.filter((item) => !item.completed));
}, [checklistItems]);
return (
<div className="home-checklist-container">
<div className="completed-checklist-container">
<div className="completed-checklist-title">Completed</div>
{completedChecklistItems.map((item) => (
<div key={item.id} className="completed-checklist-item">
<div className="completed-checklist-item-title">{item.title}</div>
</div>
))}
</div>
{whatsNextChecklistItems.length > 0 && (
<div className="whats-next-checklist-container">
<div className="whats-next-checklist-title">What&apos;s Next</div>
<div className="whats-next-checklist-items-container">
{whatsNextChecklistItems.map((item, index) => (
<div
key={item.id}
className={`whats-next-checklist-item ${
item.isSkipped && !item.completed ? 'skipped' : ''
} ${
index === 0 && !item.isSkipped && !item.completed ? 'active' : ''
} ${isLoading ? 'loading' : ''}`}
>
<div className="whats-next-checklist-item-title">{item.title}</div>
<div className="whats-next-checklist-item-content">
<div className="whats-next-checklist-item-description">
{item.description}
</div>
{user?.role !== USER_ROLES.VIEWER && (
<div className="whats-next-checklist-item-action-buttons">
<div className="whats-next-checklist-item-action-buttons-container">
<Link to={item.toRoute || ''}>
<Button
type="default"
className="periscope-btn secondary"
onClick={(): void => {
logEvent('Welcome Checklist: Get started clicked', {
step: item.id,
});
}}
>
Get Started &nbsp; <ArrowRight size={16} />
</Button>
</Link>
{item.docsLink && (
<Button
type="default"
className="periscope-btn secondary"
onClick={(): void => {
logEvent('Welcome Checklist: Docs clicked', {
step: item.id,
});
window?.open(item.docsLink, '_blank');
}}
>
<BookOpenText size={16} />
</Button>
)}
</div>
{!item.isSkipped && (
<div className="whats-next-checklist-item-action-buttons-container">
<Button
type="link"
className="periscope-btn link skip-btn"
onClick={(): void => {
logEvent('Welcome Checklist: Skip clicked', {
step: item.id,
});
onSkip(item);
}}
disabled={isLoading}
loading={isLoading}
icon={<ArrowRightToLine size={16} />}
>
Skip for now
</Button>
</div>
)}
</div>
)}
</div>
</div>
))}
</div>
</div>
)}
</div>
);
}
export default HomeChecklist;

339
frontend/src/container/Home/SavedViews/SavedViews.tsx Normal file
View File

@ -0,0 +1,339 @@
import { Button, Skeleton, Tag } from 'antd';
import logEvent from 'api/common/logEvent';
import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
import ROUTES from 'constants/routes';
import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
import {
ArrowRight,
ArrowUpRight,
CompassIcon,
DraftingCompass,
} from 'lucide-react';
import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
import Card from 'periscope/components/Card/Card';
import { useAppContext } from 'providers/App/App';
import { useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { ViewProps } from 'types/api/saveViews/types';
import { DataSource } from 'types/common/queryBuilder';
import { USER_ROLES } from 'types/roles';
export default function SavedViews({
onUpdateChecklistDoneItem,
loadingUserPreferences,
}: {
onUpdateChecklistDoneItem: (itemKey: string) => void;
loadingUserPreferences: boolean;
}): JSX.Element {
const { user } = useAppContext();
const [selectedEntity, setSelectedEntity] = useState<string>('logs');
const [selectedEntityViews, setSelectedEntityViews] = useState<any[]>([]);
const {
data: logsViewsData,
isLoading: logsViewsLoading,
isError: logsViewsError,
} = useGetAllViews(DataSource.LOGS);
const {
data: tracesViewsData,
isLoading: tracesViewsLoading,
isError: tracesViewsError,
} = useGetAllViews(DataSource.TRACES);
const logsViews = useMemo(() => [...(logsViewsData?.data.data || [])], [
logsViewsData,
]);
const tracesViews = useMemo(() => [...(tracesViewsData?.data.data || [])], [
tracesViewsData,
]);
useEffect(() => {
setSelectedEntityViews(selectedEntity === 'logs' ? logsViews : tracesViews);
}, [selectedEntity, logsViews, tracesViews]);
const hasTracesViews = tracesViews.length > 0;
const hasLogsViews = logsViews.length > 0;
const hasSavedViews = hasTracesViews || hasLogsViews;
const { handleExplorerTabChange } = useHandleExplorerTabChange();
const handleRedirectQuery = (view: ViewProps): void => {
logEvent('Homepage: Saved view clicked', {
viewId: view.uuid,
viewName: view.name,
entity: selectedEntity,
});
const currentViewDetails = getViewDetailsUsingViewKey(
view.uuid,
selectedEntity === 'logs' ? logsViews : tracesViews,
);
if (!currentViewDetails) return;
const { query, name, uuid, panelType: currentPanelType } = currentViewDetails;
if (selectedEntity) {
handleExplorerTabChange(
currentPanelType,
{
query,
name,
uuid,
},
SOURCEPAGE_VS_ROUTES[selectedEntity],
);
}
};
useEffect(() => {
if (hasSavedViews && !loadingUserPreferences) {
onUpdateChecklistDoneItem('SETUP_SAVED_VIEWS');
}
}, [hasSavedViews, onUpdateChecklistDoneItem, loadingUserPreferences]);
const emptyStateCard = (): JSX.Element => (
<div className="empty-state-container">
<div className="empty-state-content-container">
<div className="empty-state-content">
<img
src="/Icons/floppy-disc.svg"
alt="empty-alert-icon"
className="empty-state-icon"
/>
<div className="empty-title">You have not saved any views yet.</div>
{user?.role !== USER_ROLES.VIEWER && (
<div className="empty-description">
Explore your data and save them as views.
</div>
)}
</div>
{user?.role !== USER_ROLES.VIEWER && (
<div className="empty-actions-container">
<Link
to={
selectedEntity === 'logs'
? ROUTES.LOGS_EXPLORER
: ROUTES.TRACES_EXPLORER
}
>
<Button
type="default"
className="periscope-btn secondary"
onClick={(): void => {
logEvent('Homepage: Get Started clicked', {
source: 'Saved Views',
entity: selectedEntity,
});
}}
>
Get Started &nbsp; <ArrowRight size={16} />
</Button>
</Link>
<Button
type="link"
className="learn-more-link"
onClick={(): void => {
logEvent('Homepage: Learn more clicked', {
source: 'Saved Views',
entity: selectedEntity,
});
window.open(
'https://signoz.io/docs/product-features/saved-view/',
'_blank',
'noopener noreferrer',
);
}}
>
Learn more <ArrowUpRight size={12} />
</Button>
</div>
)}
</div>
</div>
);
const renderSavedViews = (): JSX.Element => (
<div className="saved-views-list-container home-data-item-container">
<div className="saved-views-list">
{selectedEntityViews.slice(0, 5).map((view) => (
<div
role="button"
tabIndex={0}
className="saved-view-item home-data-item"
key={view.id}
onClick={(): void => handleRedirectQuery(view)}
onKeyDown={(e): void => {
if (e.key === 'Enter') {
handleRedirectQuery(view);
}
}}
>
<div className="saved-view-item-name-container home-data-item-name-container">
<img
src={
view.id % 2 === 0 ? '/Icons/eight-ball.svg' : '/Icons/circus-tent.svg'
}
alt="alert-rules"
className="alert-rules-img"
/>
<div className="saved-view-item-name home-data-item-name">
{view.name}
</div>
</div>
<div className="saved-view-item-description home-data-item-tag">
{view.tags?.map((tag: string) => {
if (tag === '') {
return null;
}
return (
<Tag color={tag} key={tag}>
{tag}
</Tag>
);
})}
</div>
<Button
type="link"
size="small"
className="periscope-btn link"
onClick={(): void => handleRedirectQuery(view)}
>
<CompassIcon size={16} />
</Button>
</div>
))}
{selectedEntityViews.length === 0 && (
<div className="saved-views-list-empty-state">
<div className="saved-views-list-empty-state-message">
No saved views found.
</div>
</div>
)}
{selectedEntity === 'logs' && logsViewsError && (
<div className="logs-saved-views-error-container">
<div className="logs-saved-views-error-message">
Oops, something went wrong while loading your saved views.
</div>
</div>
)}
{selectedEntity === 'traces' && tracesViewsError && (
<div className="traces-saved-views-error-container">
<div className="traces-saved-views-error-message">
Oops, something went wrong while loading your saved views.
</div>
</div>
)}
</div>
</div>
);
const handleTabChange = (tab: string): void => {
logEvent('Homepage: Saved views switched', {
tab,
});
setSelectedEntityViews(tab === 'logs' ? logsViews : tracesViews);
setSelectedEntity(tab);
};
if (logsViewsLoading || tracesViewsLoading) {
return (
<Card className="saved-views-list-card home-data-card loading-card">
<Card.Content>
<Skeleton active />
</Card.Content>
</Card>
);
}
if (logsViewsError || tracesViewsError) {
return (
<Card className="saved-views-list-card home-data-card error-card">
<Card.Content>
<Skeleton active />
</Card.Content>
</Card>
);
}
return (
<Card className="saved-views-list-card home-data-card">
{hasSavedViews && (
<Card.Header>
<div className="saved-views-header home-data-card-header">
Saved Views
<div className="saved-views-header-actions">
<Button.Group className="views-tabs">
<Button
value="logs"
className={
// eslint-disable-next-line sonarjs/no-duplicate-string
selectedEntity === 'logs' ? 'selected tab' : 'tab'
}
onClick={(): void => handleTabChange('logs')}
>
<img src="/Icons/logs.svg" alt="logs-icon" className="logs-icon" />
Logs
</Button>
<Button
value="traces"
className={
// eslint-disable-next-line sonarjs/no-duplicate-string
selectedEntity === 'traces' ? 'selected tab' : 'tab'
}
onClick={(): void => handleTabChange('traces')}
>
<DraftingCompass size={14} /> Traces
</Button>
</Button.Group>
</div>
</div>
</Card.Header>
)}
<Card.Content>
{selectedEntityViews.length > 0 ? renderSavedViews() : emptyStateCard()}
</Card.Content>
{selectedEntityViews.length > 0 && (
<Card.Footer>
<div className="services-footer home-data-card-footer">
<Link
to={
selectedEntity === 'logs'
? ROUTES.LOGS_SAVE_VIEWS
: ROUTES.TRACES_SAVE_VIEWS
}
>
<Button
type="link"
className="periscope-btn link learn-more-link"
onClick={(): void => {
logEvent('Homepage: All saved views clicked', {
entity: selectedEntity,
});
}}
>
All Views <ArrowRight size={12} />
</Button>
</Link>
</div>
</Card.Footer>
)}
</Card>
);
}

339
frontend/src/container/Home/Services/ServiceMetrics.tsx Normal file
View File

@ -0,0 +1,339 @@
import { Button, Select, Skeleton, Table } from 'antd';
import logEvent from 'api/common/logEvent';
import { ENTITY_VERSION_V4 } from 'constants/app';
import ROUTES from 'constants/routes';
import {
getQueryRangeRequestData,
getServiceListFromQuery,
} from 'container/ServiceApplication/utils';
import { useGetQueriesRange } from 'hooks/queryBuilder/useGetQueriesRange';
import useGetTopLevelOperations from 'hooks/useGetTopLevelOperations';
import useResourceAttribute from 'hooks/useResourceAttribute';
import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
import { useSafeNavigate } from 'hooks/useSafeNavigate';
import { ArrowRight, ArrowUpRight } from 'lucide-react';
import Card from 'periscope/components/Card/Card';
import { useAppContext } from 'providers/App/App';
import { IUser } from 'providers/App/types';
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { QueryKey } from 'react-query';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { AppState } from 'store/reducers';
import { ServicesList } from 'types/api/metrics/getService';
import { GlobalReducer } from 'types/reducer/globalTime';
import { Tags } from 'types/reducer/trace';
import { USER_ROLES } from 'types/roles';
import { columns, TIME_PICKER_OPTIONS } from './constants';
const homeInterval = 30 * 60 * 1000;
// Extracted EmptyState component
const EmptyState = memo(
({ user }: { user: IUser }): JSX.Element => (
<div className="empty-state-container">
<div className="empty-state-content-container">
<div className="empty-state-content">
<img
src="/Icons/triangle-ruler.svg"
alt="empty-alert-icon"
className="empty-state-icon"
/>
<div className="empty-title">You are not sending traces yet.</div>
<div className="empty-description">
Start sending traces to see your services.
</div>
</div>
{user?.role !== USER_ROLES.VIEWER && (
<div className="empty-actions-container">
<Link to={ROUTES.GET_STARTED}>
<Button
type="default"
className="periscope-btn secondary"
onClick={(): void => {
logEvent('Homepage: Get Started clicked', {
source: 'Service Metrics',
});
}}
>
Get Started &nbsp; <ArrowRight size={16} />
</Button>
</Link>
<Button
type="link"
className="learn-more-link"
onClick={(): void => {
logEvent('Homepage: Learn more clicked', {
source: 'Service Metrics',
});
window.open(
'https://signoz.io/docs/instrumentation/overview/',
'_blank',
);
}}
>
Learn more <ArrowUpRight size={12} />
</Button>
</div>
)}
</div>
</div>
),
);
EmptyState.displayName = 'EmptyState';
// Extracted ServicesList component
const ServicesListTable = memo(
({
services,
onRowClick,
}: {
services: ServicesList[];
onRowClick: (record: ServicesList) => void;
}): JSX.Element => (
<div className="services-list-container home-data-item-container metrics-services-list">
<div className="services-list">
<Table<ServicesList>
columns={columns}
dataSource={services}
pagination={false}
className="services-table"
onRow={(record): { onClick: () => void } => ({
onClick: (): void => onRowClick(record),
})}
/>
</div>
</div>
),
);
ServicesListTable.displayName = 'ServicesListTable';
function ServiceMetrics({
onUpdateChecklistDoneItem,
loadingUserPreferences,
}: {
onUpdateChecklistDoneItem: (itemKey: string) => void;
loadingUserPreferences: boolean;
}): JSX.Element {
const { selectedTime: globalSelectedInterval } = useSelector<
AppState,
GlobalReducer
>((state) => state.globalTime);
const { user } = useAppContext();
const [timeRange, setTimeRange] = useState(() => {
const now = new Date().getTime();
return {
startTime: now - homeInterval,
endTime: now,
selectedInterval: homeInterval,
};
});
const { queries } = useResourceAttribute();
const { safeNavigate } = useSafeNavigate();
const selectedTags = useMemo(
() => (convertRawQueriesToTraceSelectedTags(queries) as Tags[]) || [],
[queries],
);
const [isError, setIsError] = useState(false);
const queryKey: QueryKey = useMemo(
() => [
timeRange.startTime,
timeRange.endTime,
selectedTags,
globalSelectedInterval,
],
[
timeRange.startTime,
timeRange.endTime,
selectedTags,
globalSelectedInterval,
],
);
const {
data,
isLoading: isLoadingTopLevelOperations,
isError: isErrorTopLevelOperations,
} = useGetTopLevelOperations(queryKey, {
start: timeRange.startTime * 1e6,
end: timeRange.endTime * 1e6,
});
const handleTimeIntervalChange = useCallback((value: number): void => {
const timeInterval = TIME_PICKER_OPTIONS.find(
(option) => option.value === value,
);
logEvent('Homepage: Services time interval updated', {
updatedTimeInterval: timeInterval?.label,
});
const now = new Date();
setTimeRange({
startTime: now.getTime() - value,
endTime: now.getTime(),
selectedInterval: value,
});
}, []);
const topLevelOperations = useMemo(() => Object.entries(data || {}), [data]);
const queryRangeRequestData = useMemo(
() =>
getQueryRangeRequestData({
topLevelOperations,
minTime: timeRange.startTime * 1e6,
maxTime: timeRange.endTime * 1e6,
globalSelectedInterval,
}),
[
globalSelectedInterval,
timeRange.endTime,
timeRange.startTime,
topLevelOperations,
],
);
const dataQueries = useGetQueriesRange(
queryRangeRequestData,
ENTITY_VERSION_V4,
{
queryKey: useMemo(
() => [
`GetMetricsQueryRange-home-${globalSelectedInterval}`,
timeRange.endTime,
timeRange.startTime,
globalSelectedInterval,
],
[globalSelectedInterval, timeRange.endTime, timeRange.startTime],
),
keepPreviousData: true,
enabled: true,
refetchOnMount: false,
onError: () => {
setIsError(true);
},
},
);
const isLoading = useMemo(() => dataQueries.some((query) => query.isLoading), [
dataQueries,
]);
const services: ServicesList[] = useMemo(
() =>
getServiceListFromQuery({
queries: dataQueries,
topLevelOperations,
isLoading,
}),
[dataQueries, topLevelOperations, isLoading],
);
const sortedServices = useMemo(
() =>
services?.sort((a, b) => {
const aUpdateAt = new Date(a.p99).getTime();
const bUpdateAt = new Date(b.p99).getTime();
return bUpdateAt - aUpdateAt;
}) || [],
[services],
);
const servicesExist = sortedServices.length > 0;
const top5Services = useMemo(() => sortedServices.slice(0, 5), [
sortedServices,
]);
useEffect(() => {
if (!loadingUserPreferences && servicesExist) {
onUpdateChecklistDoneItem('SETUP_SERVICES');
}
}, [onUpdateChecklistDoneItem, loadingUserPreferences, servicesExist]);
const handleRowClick = useCallback(
(record: ServicesList) => {
logEvent('Homepage: Service clicked', {
serviceName: record.serviceName,
});
safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
},
[safeNavigate],
);
if (isLoadingTopLevelOperations || isLoading) {
return (
<Card className="services-list-card home-data-card loading-card">
<Card.Content>
<Skeleton active />
</Card.Content>
</Card>
);
}
if (isErrorTopLevelOperations || isError) {
return (
<Card className="services-list-card home-data-card error-card">
<Card.Content>
<Skeleton active />
</Card.Content>
</Card>
);
}
return (
<Card className="services-list-card home-data-card">
{servicesExist && (
<Card.Header>
<div className="services-header home-data-card-header">
{' '}
Services
<div className="services-header-actions">
<Select
value={timeRange.selectedInterval}
onChange={handleTimeIntervalChange}
options={TIME_PICKER_OPTIONS}
className="services-header-select"
/>
</div>
</div>
</Card.Header>
)}
<Card.Content>
{servicesExist ? (
<ServicesListTable services={top5Services} onRowClick={handleRowClick} />
) : (
<EmptyState user={user} />
)}
</Card.Content>
{servicesExist && (
<Card.Footer>
<div className="services-footer home-data-card-footer">
<Link to="/services">
<Button
type="link"
className="periscope-btn link learn-more-link"
onClick={(): void => {
logEvent('Homepage: All Services clicked', {});
}}
>
All Services <ArrowRight size={12} />
</Button>
</Link>
</div>
</Card.Footer>
)}
</Card>
);
}
export default memo(ServiceMetrics);

237
frontend/src/container/Home/Services/ServiceTraces.tsx Normal file
View File

@ -0,0 +1,237 @@
import { Button, Select, Skeleton, Table } from 'antd';
import logEvent from 'api/common/logEvent';
import ROUTES from 'constants/routes';
import { useQueryService } from 'hooks/useQueryService';
import { useSafeNavigate } from 'hooks/useSafeNavigate';
import { ArrowRight, ArrowUpRight } from 'lucide-react';
import Card from 'periscope/components/Card/Card';
import { useAppContext } from 'providers/App/App';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { AppState } from 'store/reducers';
import { ServicesList } from 'types/api/metrics/getService';
import { GlobalReducer } from 'types/reducer/globalTime';
import { USER_ROLES } from 'types/roles';
import { columns, TIME_PICKER_OPTIONS } from './constants';
const homeInterval = 30 * 60 * 1000;
export default function ServiceTraces({
onUpdateChecklistDoneItem,
loadingUserPreferences,
}: {
onUpdateChecklistDoneItem: (itemKey: string) => void;
loadingUserPreferences: boolean;
}): JSX.Element {
const { selectedTime } = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime,
);
const { user } = useAppContext();
const now = new Date().getTime();
const [timeRange, setTimeRange] = useState({
startTime: now - homeInterval,
endTime: now,
selectedInterval: homeInterval,
});
const { safeNavigate } = useSafeNavigate();
// Fetch Services
const {
data: services,
isLoading: isServicesLoading,
isFetching: isServicesFetching,
isError: isServicesError,
} = useQueryService({
minTime: timeRange.startTime * 1e6,
maxTime: timeRange.endTime * 1e6,
selectedTime,
selectedTags: [],
options: {
enabled: true,
},
});
const sortedServices = useMemo(
() => services?.sort((a, b) => b.p99 - a.p99) || [],
[services],
);
const servicesExist = useMemo(() => sortedServices.length > 0, [
sortedServices,
]);
const top5Services = useMemo(() => sortedServices.slice(0, 5), [
sortedServices,
]);
useEffect(() => {
if (servicesExist && !loadingUserPreferences) {
onUpdateChecklistDoneItem('SETUP_SERVICES');
}
}, [servicesExist, onUpdateChecklistDoneItem, loadingUserPreferences]);
const handleTimeIntervalChange = useCallback((value: number): void => {
const now = new Date();
const timeInterval = TIME_PICKER_OPTIONS.find(
(option) => option.value === value,
);
logEvent('Homepage: Services time interval updated', {
updatedTimeInterval: timeInterval?.label,
});
setTimeRange({
startTime: now.getTime() - value,
endTime: now.getTime(),
selectedInterval: value,
});
}, []);
const emptyStateCard = useMemo(
() => (
<div className="empty-state-container">
<div className="empty-state-content-container">
<div className="empty-state-content">
<img
src="/Icons/triangle-ruler.svg"
alt="empty-alert-icon"
className="empty-state-icon"
/>
<div className="empty-title">You are not sending traces yet.</div>
<div className="empty-description">
Start sending traces to see your services.
</div>
</div>
{user?.role !== USER_ROLES.VIEWER && (
<div className="empty-actions-container">
<Link to={ROUTES.GET_STARTED}>
<Button
type="default"
className="periscope-btn secondary"
onClick={(): void => {
logEvent('Homepage: Get Started clicked', {
source: 'Service Traces',
});
}}
>
Get Started &nbsp; <ArrowRight size={16} />
</Button>
</Link>
<Button
type="link"
className="learn-more-link"
onClick={(): void => {
logEvent('Homepage: Learn more clicked', {
source: 'Service Traces',
});
window.open(
'https://signoz.io/docs/instrumentation/overview/',
'_blank',
);
}}
>
Learn more <ArrowUpRight size={12} />
</Button>
</div>
)}
</div>
</div>
),
[user?.role],
);
const renderDashboardsList = useCallback(
() => (
<div className="services-list-container home-data-item-container traces-services-list">
<div className="services-list">
<Table<ServicesList>
columns={columns}
dataSource={top5Services}
pagination={false}
className="services-table"
onRow={(record): { onClick: () => void } => ({
onClick: (): void => {
logEvent('Homepage: Service clicked', {
serviceName: record.serviceName,
});
safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
},
})}
/>
</div>
</div>
),
[top5Services, safeNavigate],
);
if (isServicesLoading || isServicesFetching) {
return (
<Card className="dashboards-list-card home-data-card loading-card">
<Card.Content>
<Skeleton active />
</Card.Content>
</Card>
);
}
if (isServicesError) {
return (
<Card className="dashboards-list-card home-data-card">
<Card.Content>
<Skeleton active />
</Card.Content>
</Card>
);
}
return (
<Card className="dashboards-list-card home-data-card">
{servicesExist && (
<Card.Header>
<div className="services-header home-data-card-header">
Services
<div className="services-header-actions">
<Select
value={timeRange.selectedInterval}
onChange={handleTimeIntervalChange}
options={TIME_PICKER_OPTIONS}
className="services-header-select"
/>
</div>
</div>
</Card.Header>
)}
<Card.Content>
{servicesExist ? renderDashboardsList() : emptyStateCard}
</Card.Content>
{servicesExist && (
<Card.Footer>
<div className="services-footer home-data-card-footer">
<Link to="/services">
<Button
type="link"
className="periscope-btn link learn-more-link"
onClick={(): void => {
logEvent('Homepage: All Services clicked', {});
}}
>
All Services <ArrowRight size={12} />
</Button>
</Link>
</div>
</Card.Footer>
)}
</Card>
);
}

40
frontend/src/container/Home/Services/Services.tsx Normal file
View File

@ -0,0 +1,40 @@
import * as Sentry from '@sentry/react';
import { FeatureKeys } from 'constants/features';
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
import { useAppContext } from 'providers/App/App';
import ServiceMetrics from './ServiceMetrics';
import ServiceTraces from './ServiceTraces';
function Services({
onUpdateChecklistDoneItem,
loadingUserPreferences,
}: {
onUpdateChecklistDoneItem: (itemKey: string) => void;
loadingUserPreferences: boolean;
}): JSX.Element {
const { featureFlags } = useAppContext();
const isSpanMetricEnabled =
featureFlags?.find((flag) => flag.name === FeatureKeys.USE_SPAN_METRICS)
?.active || false;
return (
<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
<div className="home-services-container">
{isSpanMetricEnabled ? (
<ServiceMetrics
onUpdateChecklistDoneItem={onUpdateChecklistDoneItem}
loadingUserPreferences={loadingUserPreferences}
/>
) : (
<ServiceTraces
onUpdateChecklistDoneItem={onUpdateChecklistDoneItem}
loadingUserPreferences={loadingUserPreferences}
/>
)}
</div>
</Sentry.ErrorBoundary>
);
}
export default Services;

80
frontend/src/container/Home/Services/constants.ts Normal file
View File

@ -0,0 +1,80 @@
import { TableProps } from 'antd';
import { ServicesList } from 'types/api/metrics/getService';
export const columns: TableProps<ServicesList>['columns'] = [
{
title: 'APPLICATION',
dataIndex: 'serviceName',
key: 'serviceName',
},
{
title: 'P99 LATENCY (in ms)',
dataIndex: 'p99',
key: 'p99',
render: (value: number): string => (value / 1000000).toFixed(2),
},
{
title: 'ERROR RATE (% of total)',
dataIndex: 'errorRate',
key: 'errorRate',
render: (value: number): string => value.toFixed(2),
},
{
title: 'OPS / SEC',
dataIndex: 'callRate',
key: 'callRate',
render: (value: number): string => value.toFixed(2),
},
];
export enum TimeIntervalsEnum {
LAST_5_MINUTES = 60 * 5 * 1000, // 300000
LAST_15_MINUTES = 60 * 15 * 1000, // 900000
LAST_30_MINUTES = 60 * 30 * 1000, // 1800000
LAST_1_HOUR = 60 * 60 * 1000, // 3600000
LAST_6_HOURS = 60 * 60 * 6 * 1000, // 21600000
LAST_1_DAY = 60 * 60 * 24 * 1000, // 86400000
LAST_3_DAYS = 60 * 60 * 24 * 3 * 1000, // 259200000
LAST_7_DAYS = 60 * 60 * 24 * 7 * 1000, // 604800000
LAST_30_DAYS = 60 * 60 * 24 * 30 * 1000, // 2592000000
}
export const TIME_PICKER_OPTIONS = [
{
value: TimeIntervalsEnum.LAST_5_MINUTES,
label: 'Last 5 minutes',
},
{
value: TimeIntervalsEnum.LAST_15_MINUTES,
label: 'Last 15 minutes',
},
{
value: TimeIntervalsEnum.LAST_30_MINUTES,
label: 'Last 30 minutes',
},
{
value: TimeIntervalsEnum.LAST_1_HOUR,
label: 'Last 1 hour',
},
{
value: TimeIntervalsEnum.LAST_6_HOURS,
label: 'Last 6 hours',
},
{
value: TimeIntervalsEnum.LAST_1_DAY,
label: 'Last 1 day',
},
{
value: TimeIntervalsEnum.LAST_3_DAYS,
label: 'Last 3 days',
},
{
value: TimeIntervalsEnum.LAST_7_DAYS,
label: 'Last 1 week',
},
{
value: TimeIntervalsEnum.LAST_30_DAYS,
label: 'Last 1 month',
},
];

55
frontend/src/container/Home/StepsProgress/StepsProgress.styles.scss Normal file
View File

@ -0,0 +1,55 @@
.steps-progress-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.steps-progress-title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
.steps-progress-title-text {
color: var(--Vanilla-400, #c0c1c3);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
letter-spacing: -0.07px;
}
.steps-progress-count {
color: var(--Vanilla-400, #c0c1c3);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
letter-spacing: -0.07px;
}
.steps-progress-progress {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100% !important;
.ant-progress-steps-outer {
width: 100% !important;
}
}
.lightMode {
.steps-progress-title-text {
color: var(--bg-ink-300);
}
.steps-progress-count {
color: var(--bg-ink-300);
}
}

45
frontend/src/container/Home/StepsProgress/StepsProgress.tsx Normal file
View File

@ -0,0 +1,45 @@
import './StepsProgress.styles.scss';
import { Progress } from 'antd';
import { ChecklistItem } from '../HomeChecklist/HomeChecklist';
function StepsProgress({
checklistItems,
}: {
checklistItems: ChecklistItem[];
}): JSX.Element {
const completedChecklistItems = checklistItems.filter(
(item) => item.completed,
);
const totalChecklistItems = checklistItems.length;
const progress = Math.round(
(completedChecklistItems.length / totalChecklistItems) * 100,
);
return (
<div className="steps-progress-container">
<div className="steps-progress-title">
<div className="steps-progress-title-text">
Build your observability base
</div>
<div className="steps-progress-count">
Step {completedChecklistItems.length} / {totalChecklistItems}
</div>
</div>
<div className="steps-progress-progress">
<Progress
steps={totalChecklistItems}
percent={progress}
showInfo={false}
strokeLinecap="butt"
/>
</div>
</div>
);
}
export default StepsProgress;

112
frontend/src/container/Home/constants.ts Normal file
View File

@ -0,0 +1,112 @@
import ROUTES from 'constants/routes';
import { ChecklistItem } from './HomeChecklist/HomeChecklist';
export const checkListStepToPreferenceKeyMap = {
WILL_DO_LATER: 'WELCOME_CHECKLIST_DO_LATER',
SEND_LOGS: 'WELCOME_CHECKLIST_SEND_LOGS_SKIPPED',
SEND_TRACES: 'WELCOME_CHECKLIST_SEND_TRACES_SKIPPED',
SEND_INFRA_METRICS: 'WELCOME_CHECKLIST_SEND_INFRA_METRICS_SKIPPED',
SETUP_DASHBOARDS: 'WELCOME_CHECKLIST_SETUP_DASHBOARDS_SKIPPED',
SETUP_ALERTS: 'WELCOME_CHECKLIST_SETUP_ALERTS_SKIPPED',
SETUP_SAVED_VIEWS: 'WELCOME_CHECKLIST_SETUP_SAVED_VIEW_SKIPPED',
SETUP_WORKSPACE: 'WELCOME_CHECKLIST_SETUP_WORKSPACE_SKIPPED',
ADD_DATA_SOURCE: 'WELCOME_CHECKLIST_ADD_DATA_SOURCE_SKIPPED',
};
export const DOCS_LINKS = {
SEND_LOGS: 'https://signoz.io/docs/userguide/logs/',
SEND_TRACES: 'https://signoz.io/docs/userguide/traces/',
SEND_INFRA_METRICS:
'https://signoz.io/docs/infrastructure-monitoring/overview/',
SETUP_ALERTS: 'https://signoz.io/docs/userguide/alerts-management/',
SETUP_SAVED_VIEWS:
'https://signoz.io/docs/product-features/saved-view/#step-2-save-your-view',
SETUP_DASHBOARDS: 'https://signoz.io/docs/userguide/manage-dashboards/',
};
export const defaultChecklistItemsState: ChecklistItem[] = [
{
id: 'SETUP_WORKSPACE',
title: 'Set up your workspace',
description: '',
completed: true,
isSkipped: false,
skippedPreferenceKey: checkListStepToPreferenceKeyMap.SETUP_WORKSPACE,
},
{
id: 'ADD_DATA_SOURCE',
title: 'Add your first data source',
description: '',
completed: false,
isSkipped: false,
skippedPreferenceKey: checkListStepToPreferenceKeyMap.ADD_DATA_SOURCE,
toRoute: ROUTES.GET_STARTED,
},
{
id: 'SEND_LOGS',
title: 'Send your logs',
description:
'Send your logs to SigNoz to get more visibility into how your resources interact.',
completed: false,
isSkipped: false,
skippedPreferenceKey: checkListStepToPreferenceKeyMap.SEND_LOGS,
toRoute: ROUTES.GET_STARTED,
docsLink: DOCS_LINKS.SEND_LOGS,
},
{
id: 'SEND_TRACES',
title: 'Send your traces',
description:
'Send your traces to SigNoz to get more visibility into how your resources interact.',
completed: false,
isSkipped: false,
skippedPreferenceKey: checkListStepToPreferenceKeyMap.SEND_TRACES,
toRoute: ROUTES.GET_STARTED,
docsLink: DOCS_LINKS.SEND_TRACES,
},
{
id: 'SEND_INFRA_METRICS',
title: 'Send your infra metrics',
description:
'Send your infra metrics to SigNoz to get more visibility into your infrastructure.',
completed: false,
isSkipped: false,
skippedPreferenceKey: checkListStepToPreferenceKeyMap.SEND_INFRA_METRICS,
toRoute: ROUTES.GET_STARTED,
docsLink: DOCS_LINKS.SEND_INFRA_METRICS,
},
{
id: 'SETUP_ALERTS',
title: 'Setup Alerts',
description:
'Setup alerts to get notified when your resources are not performing as expected.',
completed: false,
isSkipped: false,
skippedPreferenceKey: checkListStepToPreferenceKeyMap.SETUP_ALERTS,
toRoute: ROUTES.ALERTS_NEW,
docsLink: DOCS_LINKS.SETUP_ALERTS,
},
{
id: 'SETUP_SAVED_VIEWS',
title: 'Setup Saved Views',
description:
'Save your views to get a quick overview of your data and share it with your team.',
completed: false,
isSkipped: false,
skippedPreferenceKey: checkListStepToPreferenceKeyMap.SETUP_SAVED_VIEWS,
toRoute: ROUTES.LOGS_EXPLORER,
docsLink: DOCS_LINKS.SETUP_SAVED_VIEWS,
},
{
id: 'SETUP_DASHBOARDS',
title: 'Setup Dashboards',
description:
'Create dashboards to visualize your data and share it with your team.',
completed: false,
isSkipped: false,
skippedPreferenceKey: checkListStepToPreferenceKeyMap.SETUP_DASHBOARDS,
toRoute: ROUTES.ALL_DASHBOARD,
docsLink: DOCS_LINKS.SETUP_DASHBOARDS,
},
];

3
frontend/src/container/Home/index.tsx Normal file
View File

@ -0,0 +1,3 @@
import Home from './Home';
export default Home;

2
frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx
View File

@ -380,7 +380,7 @@ export default function ModuleStepsContainer({
};
const handleLogoClick = (): void => {
history.push('/');
history.push('/home');
};
return (

2
frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx
View File

@ -426,7 +426,7 @@ function OnboardingAddDataSource(): JSX.Element {
},
);
history.push(ROUTES.APPLICATION);
history.push(ROUTES.HOME);
}}
/>
<Typography.Text>Get Started (2/4)</Typography.Text>

1
frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx
View File

@ -114,6 +114,7 @@ function ServiceMetricTable({
loading={isLoading}
dataSource={services}
rowKey="serviceName"
className="service-metrics-table"
/>
</>
);

1
frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx
View File

@ -71,6 +71,7 @@ function ServiceTraceTable({
loading={loading}
dataSource={services}
rowKey="serviceName"
className="service-traces-table"
/>
</>
);

4
frontend/src/container/SideNav/SideNav.tsx
View File

@ -352,7 +352,7 @@ function SideNav(): JSX.Element {
// eslint-disable-next-line react/no-unknown-property
onClick={(event: MouseEvent): void => {
// Current home page
onClickHandler(ROUTES.APPLICATION, event);
onClickHandler(ROUTES.HOME, event);
}}
>
<img src="/Logos/signoz-brand-logo.svg" alt="SigNoz" />
@ -366,7 +366,7 @@ function SideNav(): JSX.Element {
</div>
</div>
{isCloudUserVal && (
{isCloudUserVal && user?.role !== USER_ROLES.VIEWER && (
<div className="get-started-nav-items">
<Button
className="get-started-btn"

1
frontend/src/container/SideNav/config.ts
View File

@ -58,4 +58,5 @@ export const routeConfig: Record<string, QueryParams[]> = {
[ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES]: [
QueryParams.resourceAttributes,
],
[ROUTES.HOME]: [QueryParams.resourceAttributes],
};

12
frontend/src/container/SideNav/menuItems.tsx
View File

@ -8,6 +8,7 @@ import {
Cloudy,
DraftingCompass,
FileKey2,
Home,
Layers2,
LayoutGrid,
ListMinus,
@ -36,6 +37,12 @@ export const getStartedV3MenuItem = {
icon: <RocketOutlined rotate={45} />,
};
export const homeMenuItem = {
key: ROUTES.HOME,
label: 'Home',
icon: <Home size={16} />,
};
export const inviteMemberMenuItem = {
key: `${ROUTES.ORG_SETTINGS}#invite-team-members`,
label: 'Invite Team Member',
@ -73,6 +80,11 @@ export const trySignozCloudMenuItem: SidebarItem = {
};
const menuItems: SidebarItem[] = [
{
key: ROUTES.HOME,
label: 'Home',
icon: <Home size={16} />,
},
{
key: ROUTES.APPLICATION,
label: 'Services',

3
frontend/src/container/TopNav/Breadcrumbs/index.tsx
View File

@ -4,6 +4,7 @@ import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
const breadcrumbNameMap: Record<string, string> = {
[ROUTES.APPLICATION]: 'Services',
[ROUTES.HOME]: 'Home',
[ROUTES.TRACE]: 'Traces',
[ROUTES.TRACES_EXPLORER]: 'Traces Explorer',
[ROUTES.SERVICE_MAP]: 'Service Map',
@ -57,7 +58,7 @@ function ShowBreadcrumbs(props: RouteComponentProps): JSX.Element {
const breadcrumbItems = [
<Breadcrumb.Item key="home">
<Link to="/services">Home</Link>
<Link to="/home">Home</Link>
</Breadcrumb.Item>,
].concat(extraBreadcrumbItems);

1
frontend/src/container/TopNav/DateTimeSelection/config.ts
View File

@ -102,6 +102,7 @@ export const getOptions = (routes: string): Option[] => {
export const routesToHideBreadCrumbs = [ROUTES.SUPPORT, ROUTES.ALL_DASHBOARD];
export const routesToSkip = [
ROUTES.HOME,
ROUTES.SETTINGS,
ROUTES.LIST_ALL_ALERT,
ROUTES.TRACE_DETAIL,

1
frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
View File

@ -175,6 +175,7 @@ export const getOptions = (routes: string): Option[] => {
export const routesToHideBreadCrumbs = [ROUTES.SUPPORT, ROUTES.ALL_DASHBOARD];
export const routesToSkip = [
ROUTES.HOME,
ROUTES.SETTINGS,
ROUTES.LIST_ALL_ALERT,
ROUTES.TRACE_DETAIL,

7
frontend/src/pages/HomePage/HomePage.tsx Normal file
View File

@ -0,0 +1,7 @@
import Home from 'container/Home';
function HomePage(): JSX.Element {
return <Home />;
}
export default HomePage;

3
frontend/src/pages/HomePage/index.tsx Normal file
View File

@ -0,0 +1,3 @@
import HomePage from './HomePage';
export default HomePage;

9
frontend/src/periscope.scss
View File

@ -36,6 +36,15 @@
&:disabled {
opacity: 0.5;
}
&.link {
color: var(--bg-vanilla-400);
border: none;
box-shadow: none;
background: transparent;
font-size: 11px;
font-weight: 400;
}
}
.periscope-tab {

89
frontend/src/periscope/components/Card/Card.styles.scss Normal file
View File

@ -0,0 +1,89 @@
.periscope-card {
border-radius: 4px;
border: 1px solid var(--bg-slate-400, #1d212d);
background: var(--bg-ink-400, #121317);
color: var(--bg-vanilla-100);
.periscope-card-header {
padding: 12px;
width: 100%;
border-bottom: 1px solid var(--bg-slate-400, #1d212d);
display: flex;
align-items: center;
flex-direction: row;
gap: 1rem;
}
.periscope-card-content {
padding: 12px;
width: 100%;
}
.periscope-card-footer {
border-top: 1px solid var(--bg-slate-400, #1d212d);
padding: 12px;
width: 100%;
}
&.small {
.periscope-card-header {
padding: 8px;
}
.periscope-card-content {
padding: 8px;
}
.periscope-card-footer {
padding: 8px;
}
}
&.medium {
.periscope-card-header {
padding: 12px;
}
.periscope-card-content {
padding: 12px;
}
.periscope-card-footer {
padding: 12px;
}
}
&.large {
.periscope-card-header {
padding: 16px;
}
.periscope-card-content {
padding: 16px;
}
.periscope-card-footer {
padding: 16px;
}
}
}
.lightMode {
.periscope-card {
border: 1px solid var(--bg-vanilla-300);
border-radius: 4px;
background: var(--bg-vanilla-100);
color: var(--bg-ink-300);
.periscope-card-header {
border-bottom: 1px solid var(--bg-vanilla-300);
}
.periscope-card-footer {
border-top: 1px solid var(--bg-vanilla-300);
}
}
}

37
frontend/src/periscope/components/Card/Card.tsx Normal file
View File

@ -0,0 +1,37 @@
import './Card.styles.scss';
import cx from 'classnames';
import { ReactNode } from 'react';
type CardProps = {
children: ReactNode;
className?: string;
size?: 'small' | 'medium' | 'large';
};
function Card({ children, className, size }: CardProps): JSX.Element {
return <div className={cx('periscope-card', className, size)}>{children}</div>;
}
function CardHeader({ children }: { children: ReactNode }): JSX.Element {
return <div className="periscope-card-header">{children}</div>;
}
function CardContent({ children }: { children: ReactNode }): JSX.Element {
return <div className="periscope-card-content">{children}</div>;
}
function CardFooter({ children }: { children: ReactNode }): JSX.Element {
return <div className="periscope-card-footer">{children}</div>;
}
Card.Header = CardHeader;
Card.Content = CardContent;
Card.Footer = CardFooter;
Card.defaultProps = {
className: '',
size: 'medium',
};
export default Card;

4
frontend/src/types/api/preferences/userOrgPreferences.ts
View File

@ -1,4 +1,4 @@
import { OrgPreference } from 'types/reducer/app';
import { OrgPreference, UserPreference } from 'types/reducer/app';
export interface GetOrgPreferenceResponseProps {
status: string;
@ -17,7 +17,7 @@ export interface GetAllOrgPreferencesResponseProps {
export interface GetAllUserPreferencesResponseProps {
status: string;
data: Record<string, unknown>;
data: UserPreference[];
}
export interface UpdateOrgPreferenceProps {

12
frontend/src/types/reducer/app.ts
View File

@ -22,6 +22,18 @@ export interface OrgPreference {
value: boolean;
}
export interface UserPreference {
key: string;
name: string;
description: string;
valueType: string;
defaultValue: boolean;
allowedValues: any[];
isDiscreteValues: boolean;
allowedScopes: string[];
value: boolean;
}
export default interface AppReducer {
currentVersion: string;
latestVersion: string;

5
frontend/src/utils/permission/index.ts
View File

@ -45,6 +45,7 @@ export const componentPermission: Record<ComponentTypes, ROLES[]> = {
};
export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
HOME: ['ADMIN', 'EDITOR', 'VIEWER'],
ALERTS_NEW: ['ADMIN', 'EDITOR'],
ORG_SETTINGS: ['ADMIN'],
MY_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
@ -85,9 +86,9 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
LOGS_INDEX_FIELDS: ['ADMIN', 'EDITOR', 'VIEWER'],
LOGS_PIPELINES: ['ADMIN', 'EDITOR', 'VIEWER'],
TRACE_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
GET_STARTED: ['ADMIN', 'EDITOR', 'VIEWER'],
GET_STARTED: ['ADMIN', 'EDITOR'],
ONBOARDING: ['ADMIN'],
GET_STARTED_WITH_CLOUD: ['ADMIN', 'EDITOR', 'VIEWER'],
GET_STARTED_WITH_CLOUD: ['ADMIN', 'EDITOR'],
GET_STARTED_APPLICATION_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
GET_STARTED_INFRASTRUCTURE_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
GET_STARTED_LOGS_MANAGEMENT: ['ADMIN', 'EDITOR', 'VIEWER'],

8
frontend/tests/traces/utils.ts
View File

@ -1,12 +1,12 @@
import { Page } from '@playwright/test';
import attributeKeyServiceNameSuccessResponse from '../fixtures/api/traces/attributeKeysServiceName200.json';
import attributeKeyNameSuccessResponse from '../fixtures/api/traces/attributeKeysName200.json';
import attributeKeyDurationNanoSuccessResponse from '../fixtures/api/traces/attributeKeysDurationNano200.json';
import attributeKeyResponseStatusCodeSuccessResponse from '../fixtures/api/traces/attributeKeysResponseStatusCode200.json';
import attributeKeyHttpMethodSuccessResponse from '../fixtures/api/traces/attributeKeysHttpMethod200.json';
import traceExplorerViewsSuccessResponse from '../fixtures/api/traces/traceExplorerViews200.json';
import attributeKeyNameSuccessResponse from '../fixtures/api/traces/attributeKeysName200.json';
import attributeKeyResponseStatusCodeSuccessResponse from '../fixtures/api/traces/attributeKeysResponseStatusCode200.json';
import attributeKeyServiceNameSuccessResponse from '../fixtures/api/traces/attributeKeysServiceName200.json';
import traceExplorerViewsPostSuccessResponse from '../fixtures/api/traces/traceExplorerViewPost200.json';
import traceExplorerViewsSuccessResponse from '../fixtures/api/traces/traceExplorerViews200.json';
import { JsonApplicationType } from '../fixtures/constant';
export const queryRangeApiEndpoint = 'query_range';

19
frontend/webpack.config.js
View File

@ -119,10 +119,23 @@ const config = {
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
'file-loader?hash=sha512&digest=hex&name=img/[chunkhash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
{
loader: 'file-loader',
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
optipng: {
optimizationLevel: 7,
},
gifsicle: {
interlaced: false,
},
},
},
],
},
{

20
frontend/webpack.config.prod.js
View File

@ -144,12 +144,26 @@ const config = {
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
'file-loader?hash=sha512&digest=hex&name=img/[chunkhash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
{
loader: 'file-loader',
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
optipng: {
optimizationLevel: 7,
},
gifsicle: {
interlaced: false,
},
},
},
],
},
{
test: /\.(ttf|eot|woff|woff2)$/,
use: ['file-loader'],

1187
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff