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

feat: Update icon components for consistency; refactor SVG attributes and styles

This commit is contained in:
Vishnu 2025-05-03 17:21:37 +05:30
parent f8abd71116
commit 2711702efa
4 changed files with 306 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/src/components/icons/analysis.tsx
View File

@ -28,10 +28,10 @@ export function ProductionCapacityIcon() {
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="25" rx="12.5" fill="#6F42C1" />
<g clip-path="url(#clip0_4107_2562)">
<g clipPath="url(#clip0_4107_2562)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M13.5167 7.88281H15.3741C15.668 7.88281 15.9053 8.09496 15.9053 8.35581V13.0575H9.079L9.00279 13.0583V8.35581C9.00279 8.09417 9.24007 7.88281 9.53393 7.88281H11.3921V10.251C11.3921 10.3138 11.4204 10.3735 11.4707 10.4183C11.5226 10.4633 11.5891 10.4879 11.6577 10.4875H13.2511C13.3201 10.4881 13.3868 10.4635 13.4389 10.4183C13.4625 10.3971 13.4815 10.3713 13.4949 10.3426C13.5082 10.3138 13.5157 10.2826 13.5167 10.251V7.88281ZM9.079 14.0389H15.921C16.4243 14.0491 16.9035 14.2561 17.2559 14.6157C17.6082 14.9752 17.8056 15.4585 17.8056 15.9619C17.8056 16.4653 17.6082 16.9486 17.2559 17.3082C16.9035 17.6677 16.4243 17.8748 15.921 17.885H9.079C8.82319 17.8901 8.56892 17.8442 8.33108 17.7499C8.09324 17.6556 7.87661 17.5147 7.69387 17.3357C7.51113 17.1566 7.36596 16.9428 7.26685 16.707C7.16775 16.4711 7.1167 16.2178 7.1167 15.9619C7.1167 15.7061 7.16775 15.4528 7.26685 15.2169C7.36596 14.981 7.51113 14.7673 7.69387 14.5882C7.87661 14.4091 8.09324 14.2683 8.33108 14.174C8.56892 14.0796 8.82319 14.0337 9.079 14.0389ZM10.4626 15.956C10.4626 16.1384 10.3902 16.3132 10.2613 16.4422C10.1323 16.5711 9.95748 16.6435 9.77514 16.6435C9.59281 16.6435 9.41794 16.5711 9.28901 16.4422C9.16008 16.3132 9.08764 16.1384 9.08764 15.956C9.08764 15.7737 9.16008 15.5988 9.28901 15.4699C9.41794 15.341 9.59281 15.2685 9.77514 15.2685C9.95748 15.2685 10.1323 15.341 10.2613 15.4699C10.3902 15.5988 10.4626 15.7737 10.4626 15.956ZM13.1914 15.956C13.1914 16.1384 13.119 16.3132 12.9901 16.4422C12.8611 16.5711 12.6863 16.6435 12.5039 16.6435C12.3216 16.6435 12.1467 16.5711 12.0178 16.4422C11.8889 16.3132 11.8164 16.1384 11.8164 15.956C11.8164 15.7737 11.8889 15.5988 12.0178 15.4699C12.1467 15.341 12.3216 15.2685 12.5039 15.2685C12.6863 15.2685 12.8611 15.341 12.9901 15.4699C13.119 15.5988 13.1914 15.7737 13.1914 15.956ZM15.2319 16.6427C15.4143 16.6427 15.5891 16.5703 15.7181 16.4414C15.847 16.3124 15.9194 16.1376 15.9194 15.9552C15.9194 15.7729 15.847 15.598 15.7181 15.4691C15.5891 15.3402 15.4143 15.2677 15.2319 15.2677C15.0496 15.2677 14.8747 15.3402 14.7458 15.4691C14.6169 15.598 14.5444 15.7729 14.5444 15.9552C14.5444 16.1376 14.6169 16.3124 14.7458 16.4414C14.8747 16.5703 15.0496 16.6427 15.2319 16.6427Z"
fill="var(--text-color)"
/>
@ -59,15 +59,11 @@ export function ROISummaryIcon() {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="0.515625" width="25" height="25" rx="12.5" fill="#28B9F3" />
<rect y="0.515625" width="25" height="25" rx="12.5" fill="#2676D7" />
<path d="M6 7.51562V19.0974H19" stroke="white" strokeLinecap="round" />
<path
d="M6.00015 7.51562V19.0974H19.0002"
stroke="var(--text-color)"
strokeLinecap="round"
/>
<path
d="M6.50037 15.0553L10.3102 11.847C10.6984 11.52 11.2701 11.5358 11.6397 11.8837L15.0095 15.0553L19.5004 11.2734"
stroke="var(--text-color)"
d="M6.5 15.0553L10.3098 11.847C10.6981 11.52 11.2697 11.5358 11.6393 11.8837L15.0091 15.0553L19.5 11.2734"
stroke="white"
strokeLinecap="round"
/>
</svg>
@ -83,7 +79,7 @@ export function PowerIcon() {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_4107_3144)">
<g clipPath="url(#clip0_4107_3144)">
<path
d="M12.1277 1.76564L10.7174 9.17535L15.8265 9.19254L8.87213 19.2375L10.2824 11.0856L5.17369 11.0678L12.1277 1.76564ZM12.1287 0.515664C12.0949 0.515664 12.0612 0.516895 12.0281 0.519375C11.8075 0.537207 11.6612 0.610957 11.4878 0.72752C11.3901 0.792624 11.3021 0.871096 11.2262 0.960645C11.2034 0.987526 11.1819 1.01547 11.1618 1.04439L4.15775 10.3141C3.88119 10.6931 3.84056 11.1935 4.05306 11.6116C4.26525 12.0297 4.69431 12.2947 5.16463 12.2982L8.77275 12.3244L7.63838 19.0079C7.53056 19.5822 7.83681 20.1547 8.37588 20.3854C8.53254 20.4527 8.70128 20.4873 8.87179 20.4872C9.26461 20.4872 9.58742 20.3035 9.82963 19.9716L16.8424 9.92658C17.119 9.5475 17.1593 9.04656 16.9471 8.62906C16.7349 8.21094 16.3059 7.94592 15.8356 7.9425L12.2274 7.93625L13.3496 2.05969C13.3734 1.96348 13.3854 1.86473 13.3853 1.76562C13.3853 1.08938 12.8468 0.538125 12.1731 0.51625C12.1581 0.515625 12.1434 0.515625 12.1287 0.515625L12.1287 0.515664Z"
fill="#F3C64D"
@ -119,13 +115,13 @@ export function ROISummaryProductName() {
<path
d="M16.9999 6.48175L9.83331 2.89844L2.66669 6.48175V13.6484L9.83331 17.2317L16.9999 13.6484V6.48175Z"
stroke="var(--text-color)"
stroke-linejoin="round"
strokeLinejoin="round"
/>
<path
d="M2.66669 6.47916L9.83331 10.0625M9.83331 10.0625V17.2291M9.83331 10.0625L16.9999 6.47916M13.4166 4.6875L6.25 8.27081"
stroke="var(--text-color)"
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
@ -147,8 +143,8 @@ export function SonarCrownIcon() {
<path
d="M5.81403 20.0469H21.7323"
stroke="#FFCC00"
stroke-width="1.89503"
stroke-linecap="round"
strokeWidth="1.89503"
strokeLinecap="round"
/>
</svg>
);
@ -166,9 +162,9 @@ export function CostBreakDownIcon() {
<path
d="M8.00012 12.5H11.1251C11.8126 12.5 12.3751 11.9375 12.3751 11.25C12.3751 10.5625 11.8126 10 11.1251 10H9.87512C9.18762 10 8.62512 9.4375 8.62512 8.75C8.62512 8.0625 9.18762 7.5 9.87512 7.5H13.0001M10.5001 5.625V7.08375M10.5001 11.875V14.375M18.6251 10C18.6251 12.1549 17.7691 14.2215 16.2454 15.7452C14.7216 17.269 12.655 18.125 10.5001 18.125C8.34524 18.125 6.27861 17.269 4.75488 15.7452C3.23115 14.2215 2.37512 12.1549 2.37512 10C2.37512 7.84512 3.23115 5.77849 4.75488 4.25476C6.27861 2.73102 8.34524 1.875 10.5001 1.875C12.655 1.875 14.7216 2.73102 16.2454 4.25476C17.7691 5.77849 18.6251 7.84512 18.6251 10Z"
stroke="#FFCC00"
stroke-width="1.25"
stroke-miterlimit="10"
stroke-linejoin="round"
strokeWidth="1.25"
strokeMiterlimit="10"
strokeLinejoin="round"
/>
</svg>
);

26
app/src/components/ui/analysis/SemiCircleProgress.tsx
View File

@ -1,9 +1,7 @@
import React from "react";
const SemiCircleProgress = ({ progress = 10 }) => {
const SemiCircleProgress = ({ progress = 60, years = 4.02 }) => {
const clampedProgress = Math.min(Math.max(progress, 0), 100);
const radius = 80;
const strokeWidth = 20;
const strokeWidth = 26;
const circumference = Math.PI * radius;
const strokeDashoffset =
circumference - (clampedProgress / 100) * circumference;
@ -15,22 +13,36 @@ const SemiCircleProgress = ({ progress = 10 }) => {
<path
d="M20,100 A80,80 0 0,1 180,100"
fill="none"
stroke="lightgray"
stroke="#6F6F7A"
strokeWidth={strokeWidth}
/>
{/* Progress track */}
<path
d="M20,100 A80,80 0 0,1 180,100"
fill="none"
stroke="skyblue"
stroke="url(#paint0_linear_4200_2273)"
strokeWidth={strokeWidth}
strokeDasharray={circumference}
strokeDashoffset={strokeDashoffset}
strokeLinecap="round"
/>
<defs>
<linearGradient
id="paint0_linear_4200_2273"
x1="26.7278"
y1="279.417"
x2="298.886"
y2="65.0002"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#3D3795" />
<stop offset="0.535019" stopColor="#2A9BCF" />
<stop offset="1" stopColor="#0DB3F4" />
</linearGradient>
</defs>
</svg>
<div className="label-wrapper">
<div className="label">{clampedProgress}%</div>
<div className="label">{years}</div>
<div className="label-content">Years</div>
</div>
</div>

64
app/src/modules/simulation/events/points/creator/pointsCreator.tsx
View File

@ -1,7 +1,9 @@
import React, { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
import useModuleStore, { useSubModuleStore } from "../../../../../store/useModuleStore";
import useModuleStore, {
useSubModuleStore,
} from "../../../../../store/useModuleStore";
import { TransformControls } from "@react-three/drei";
import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
import {
@ -13,13 +15,21 @@ import { useThree } from "@react-three/fiber";
function PointsCreator() {
const { gl, raycaster, scene, pointer, camera } = useThree();
const { subModule } = useSubModuleStore();
const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
const { events, updatePoint, getPointByUuid, getEventByModelUuid } =
useEventsStore();
const { activeModule } = useModuleStore();
const transformRef = useRef<any>(null);
const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
const [transformMode, setTransformMode] = useState<
"translate" | "rotate" | null
>(null);
const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere, } = useSelectedEventSphere();
const { selectedEventData, setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
const {
selectedEventSphere,
setSelectedEventSphere,
clearSelectedEventSphere,
} = useSelectedEventSphere();
const { setSelectedEventData, clearSelectedEventData } =
useSelectedEventData();
useEffect(() => {
if (selectedEventSphere) {
@ -35,6 +45,7 @@ function PointsCreator() {
} else {
clearSelectedEventData();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedEventSphere]);
useEffect(() => {
@ -55,11 +66,24 @@ function PointsCreator() {
const updatePointToState = (selectedEventSphere: THREE.Mesh) => {
let point = JSON.parse(
JSON.stringify(getPointByUuid(selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid))
JSON.stringify(
getPointByUuid(
selectedEventSphere.userData.modelUuid,
selectedEventSphere.userData.pointUuid
)
)
);
if (point) {
point.position = [selectedEventSphere.position.x, selectedEventSphere.position.y, selectedEventSphere.position.z,];
updatePoint(selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid, point);
point.position = [
selectedEventSphere.position.x,
selectedEventSphere.position.y,
selectedEventSphere.position.z,
];
updatePoint(
selectedEventSphere.userData.modelUuid,
selectedEventSphere.userData.pointUuid,
point
);
}
};
@ -79,16 +103,13 @@ function PointsCreator() {
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster
.intersectObjects(scene.children, true)
.filter(
(intersect) =>
intersect.object.name === ('Event-Sphere')
);
.filter((intersect) => intersect.object.name === "Event-Sphere");
if (intersects.length === 0) {
clearSelectedEventSphere();
setTransformMode(null);
}
}
}
};
const onMouseMove = () => {
if (isMouseDown) {
@ -96,7 +117,7 @@ function PointsCreator() {
}
};
if (subModule === 'mechanics') {
if (subModule === "mechanics") {
canvasElement.addEventListener("mousedown", onMouseDown);
canvasElement.addEventListener("mouseup", onMouseUp);
canvasElement.addEventListener("mousemove", onMouseMove);
@ -107,7 +128,7 @@ function PointsCreator() {
canvasElement.removeEventListener("mouseup", onMouseUp);
canvasElement.removeEventListener("mousemove", onMouseMove);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [gl, subModule, selectedEventSphere]);
return (
@ -115,15 +136,16 @@ function PointsCreator() {
{activeModule === "simulation" && (
<>
<group name="EventPointsGroup">
{events.map((event, i) => {
{events.map((event, index) => {
if (event.type === "transfer") {
return (
<group
key={i}
key={`${index}-${event.modelUuid}`}
position={new THREE.Vector3(...event.position)}
>
{event.points.map((point) => (
{event.points.map((point, i) => (
<mesh
key={`${i}-${point.uuid}`}
name="Event-Sphere"
uuid={point.uuid}
ref={(el) => (sphereRefs.current[point.uuid] = el!)}
@ -148,7 +170,7 @@ function PointsCreator() {
} else if (event.type === "vehicle") {
return (
<group
key={i}
key={`${index}-${event.modelUuid}`}
position={new THREE.Vector3(...event.position)}
>
<mesh
@ -175,7 +197,7 @@ function PointsCreator() {
} else if (event.type === "roboticArm") {
return (
<group
key={i}
key={`${index}-${event.modelUuid}`}
position={new THREE.Vector3(...event.position)}
>
<mesh
@ -202,7 +224,7 @@ function PointsCreator() {
} else if (event.type === "machine") {
return (
<group
key={i}
key={`${index}-${event.modelUuid}`}
position={new THREE.Vector3(...event.position)}
>
<mesh

36
app/src/styles/components/simulation/analysis.scss
View File

@ -11,19 +11,12 @@
width: 100%;
height: 100vh;
pointer-events: none;
padding: 10px;
z-index: 2;
.analysis-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
.analysis-card {
min-width: 333px;
border-radius: 20px;
padding: 8px;
margin: 8px;
pointer-events: all;
.analysis-card-wrapper {
@ -50,6 +43,7 @@
}
.sub-header {
font-weight: 300;
font-size: var(--font-size-tiny);
color: var(--text-button-color);
}
@ -170,12 +164,13 @@
.footer-card {
width: 100%;
background: var(--background-color-gray);
background: var(--background-color);
border-radius: 6px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 12px;
outline: 1px solid var(--border-color);
&:first-child {
width: 85%;
@ -326,10 +321,11 @@
flex-direction: column;
gap: 3px;
align-items: center;
font-weight: 300;
.key {
font-size: var(--font-size-xlarge);
color: #28B9F3;
font-weight: 500;
font-size: var(--font-size-large);
color: #28b9f3;
}
}
}
@ -376,8 +372,9 @@
gap: 6px;
.metric-item {
padding: 8px;
border-radius: #{$border-radius-large};
background-color: var(--background-color);
background: var(--background-color);
border: 1px solid var(--border-color);
}
}
@ -385,10 +382,12 @@
}
.cost-breakdown {
background-color: var(--background-color);
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: #{$border-radius-extra-large};
border-radius: #{$border-radius-large};
max-height: 20vh;
padding: 16px;
overflow: auto;
.breakdown-header {
display: flex;
@ -448,7 +447,7 @@
}
.tips-section {
background-color: var(--background-color);
background: var(--background-color);
border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color);
display: flex;
@ -510,18 +509,17 @@
.label-wrapper {
width: 100%;
position: absolute;
bottom: 0px;
bottom: 2px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.label {
font-size: var(--font-size-xlarge);
font-size: var(--font-size-xxlarge);
}
}
}
}
.breakdown-table-wrapper {