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

refactor: enhance DashboardCard interaction and update SimulationPlayer ROI calculation, improve dashboard styles for better layout and responsiveness

This commit is contained in:
Nalvazhuthi 2025-06-10 11:03:39 +05:30
parent cfa63ff6ed
commit e5a9d650cf
3 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/components/Dashboard/DashboardCard.tsx
View File

@ -182,6 +182,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
className="dashboard-card-container" className="dashboard-card-container"
onClick={navigateToProject} onClick={navigateToProject}
title={projectName} title={projectName}
onMouseLeave={() => setIsKebabOpen(false)}
> >
<div className="dashboard-card-wrapper"> <div className="dashboard-card-wrapper">
<div className="preview-container"> <div className="preview-container">

8
app/src/components/ui/simulation/simulationPlayer.tsx
View File

@ -120,7 +120,7 @@ const SimulationPlayer: React.FC = () => {
// UI-Part // UI-Part
const hourlySimulation = 25; const hourlySimulation = 25;
const dailyProduction = 75; const dailyProduction = 75;
const monthlyROI = 50; const monthlyROI = 10;
const { processBar } = useProcessBar(); const { processBar } = useProcessBar();
useEffect(() => { }, [processBar]); useEffect(() => { }, [processBar]);
@ -219,7 +219,7 @@ const SimulationPlayer: React.FC = () => {
<div className="progress-wrapper"> <div className="progress-wrapper">
<div <div
className="progress" className="progress"
style={{ width: monthlyROI }} style={{ width: `${monthlyROI}%` }}
></div> ></div>
</div>{" "} </div>{" "}
</div> </div>
@ -315,8 +315,8 @@ const SimulationPlayer: React.FC = () => {
{index < intervals.length - 1 && ( {index < intervals.length - 1 && (
<div <div
className={`line ${progress >= ((index + 1) / totalSegments) * 100 className={`line ${progress >= ((index + 1) / totalSegments) * 100
? "filled" ? "filled"
: "" : ""
}`} }`}
></div> ></div>
)} )}

20
app/src/styles/pages/dashboard.scss
View File

@ -85,6 +85,12 @@
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
background: var(--background-color-button); background: var(--background-color-button);
svg {
path {
stroke: var(--background-color-selected);
}
}
&:hover { &:hover {
background: var(--background-color-button); background: var(--background-color-button);
} }
@ -206,6 +212,10 @@
transition: transform 0.25s linear; transition: transform 0.25s linear;
.project-details { .project-details {
display: flex;
flex-direction: column;
align-items: flex-start;
.project-name { .project-name {
margin-bottom: 7px; margin-bottom: 7px;
} }
@ -226,7 +236,8 @@
line-height: 26px; line-height: 26px;
text-align: center; text-align: center;
background: var(--accent-color); background: var(--accent-color);
color: var(--primary-color); // color: var(--primary-color);
color: var(--text-color);
border-radius: #{$border-radius-circle}; border-radius: #{$border-radius-circle};
} }
@ -247,6 +258,7 @@
border-radius: 8px; border-radius: 8px;
z-index: 100; z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transform: translate(100%, 100%); transform: translate(100%, 100%);
@ -265,16 +277,18 @@
text-transform: capitalize; text-transform: capitalize;
&:hover { &:hover {
background-color: var(--background-color-secondary); background-color: var(--background-color-selected);
} }
} }
} }
&:hover { &:hover {
overflow: visible; overflow: visible;
.kebab-options-wrapper { .kebab-options-wrapper {
display: flex; display: flex;
} }
.project-details-container { .project-details-container {
transform: translateY(0); transform: translateY(0);
} }
@ -334,4 +348,4 @@
font-family: #{$font-roboto}; font-family: #{$font-roboto};
cursor: pointer; cursor: pointer;
} }
} }