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

Update package versions and refactor components for improved functionality and readability

Browse Source
This commit is contained in:
Vishnu
2025-12-09 10:41:30 +05:30
parent 5dd9a8a86d
commit 3f594482e9
8 changed files with 120 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "aalai-beta",
"version": "0.1.0",
"version": "0.1.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "aalai-beta",
"version": "0.1.0",
"version": "0.1.1",
"dependencies": {
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",

4
app/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "aalai-beta",
"version": "0.1.0",
"version": "0.1.1",
"private": true,
"dependencies": {
"@dnd-kit/core": "^6.3.1",
@@ -56,7 +56,7 @@
"prepare": "husky",
"prestart": "tsc scripts/git-prompt.ts && node scripts/git-prompt.js",
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
"test": "jest"
},
"eslintConfig": {

28
app/src/components/Dashboard/TutorialCard.tsx
View File

@@ -1,21 +1,39 @@
import { getUserData } from "../../functions/getUserData";
import { ALPHA_ORG } from "../../pages/Dashboard";
import { DeleteIcon } from "../icons/ContextMenuIcons";
import RenameInput from "../ui/inputs/RenameInput";
export const TutorialCard: React.FC<{ tutorial: Tutorial; onClick: (tutorial: Tutorial) => void }> = ({ tutorial, onClick }) => {
export const TutorialCard: React.FC<{
tutorial: Tutorial;
onClick: (tutorial: Tutorial) => void;
}> = ({ tutorial, onClick }) => {
const { organization } = getUserData();
return (
<div className="tutorial-card-container" onClick={() => onClick(tutorial)}>
<div
className="preview-container"
style={{
backgroundImage: tutorial.thumbnail ? `url(${tutorial.thumbnail})` : "linear-gradient(135deg, #ddd, #bbb)",
backgroundImage: tutorial.thumbnail
? `url(${tutorial.thumbnail})`
: "linear-gradient(135deg, #ddd, #bbb)",
}}
></div>
<div className="tutorial-details">
<div
className="tutorial-details"
onClick={(e) => {
e.stopPropagation();
}}
>
<div className="context">
<div className="tutorial-name">{tutorial.projectName}</div>
<div className="updated-date">{new Date(tutorial.createdAt).toLocaleDateString()}</div>
<div className="tutorial-name">
<RenameInput
value={tutorial.projectName}
canEdit={organization === ALPHA_ORG}
/>
</div>
<div className="updated-date">
{new Date(tutorial.createdAt).toLocaleDateString()}
</div>
</div>
{organization === ALPHA_ORG && (
<div className="delete-option">

3
app/src/components/ui/analysis/ProductionCapacity.tsx
View File

@@ -3,7 +3,7 @@ import { Line } from "react-chartjs-2";
import { Chart as ChartJS, LineElement, CategoryScale, LinearScale, PointElement } from "chart.js";
import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
import SkeletonUI from "../../templates/SkeletonUI";
import { useInputValues, useMachineUptime, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
import { useInputValues, useMachineUptime, useProductionCapacityData } from "../../../store/builder/store";
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
@@ -28,7 +28,6 @@ const ThroughputSummary: React.FC = () => {
];
const { productionCapacityData } = useProductionCapacityData();
const { throughputData: data } = useThroughPutData();
const chartOptions = {
responsive: true,

1
app/src/components/ui/analysis/ROISummary.tsx
View File

@@ -1,7 +1,6 @@
import React, { useEffect, useState } from "react";
import {
CostBreakDownIcon,
LightBulpIcon,
ROISummaryIcon,
ROISummaryProductName,
SonarCrownIcon,

172
app/src/components/ui/analysis/ThroughputSummary.tsx
View File

@@ -1,99 +1,111 @@
import { useEffect, useState } from "react";
import { useInputValues, useMachineCount, useMachineUptime, useMaterialCycle, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
import {
ThroughputSummaryIcon,
} from "../../icons/analysis";
useInputValues,
useMachineUptime,
useMaterialCycle,
useThroughPutData,
} from "../../../store/builder/store";
import { ThroughputSummaryIcon } from "../../icons/analysis";
import SkeletonUI from "../../templates/SkeletonUI";
const ProductionCapacity = ({
avgProcessTime = "28.4 Secs/unit",
machineUtilization = "78%",
throughputValue = 128,
timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
avgProcessTime = "28.4 Secs/unit",
machineUtilization = "78%",
throughputValue = 128,
timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
}) => {
const { machineActiveTime } = useMachineUptime();
const { materialCycleTime } = useMaterialCycle();
const { throughputData } = useThroughPutData()
const { inputValues } = useInputValues();
const { machineActiveTime } = useMachineUptime();
const { materialCycleTime } = useMaterialCycle();
const { throughputData } = useThroughPutData();
const { inputValues } = useInputValues();
const progressPercent = machineActiveTime;
const progressPercent = machineActiveTime;
const shiftLength = parseFloat(inputValues["Shift length"]);
const shiftLength = parseFloat(inputValues["Shift length"]);
const totalBars = 6;
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
const partialFillPercent = ((progressPercent / 1000) * totalBars - barsToFill) * 100;
const totalBars = 6;
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
const partialFillPercent = ((progressPercent / 1000) * totalBars - barsToFill) * 100;
const [isLoading, setIsLoading] = useState(true);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (throughputData > 0) {
setIsLoading(false);
} else {
setIsLoading(false);
}
}, [throughputData])
useEffect(() => {
if (throughputData > 0) {
setIsLoading(false);
} else {
setIsLoading(false);
}
}, [throughputData]);
const Units_per_hour = ((shiftLength * 60) / (materialCycleTime / 60) / shiftLength)
const Units_per_hour = (shiftLength * 60) / (materialCycleTime / 60) / shiftLength;
return (
<>
{!isLoading && <div className="throughtputSummary-container analysis-card">
<div className="throughtputSummary-wrapper analysis-card-wrapper">
<div className="card-header">
<div className="header">
<div className="main-header">Throughput Summary</div>
<div className="sub-header">
{timeRange.startTime} - {timeRange.endTime}
</div>
</div>
<div className="icon-wrapper">
<ThroughputSummaryIcon />
</div>
</div>
{!isLoading ? (
<>
<div className="process-container">
<div className="throughput-value">
<span className="value">{(Units_per_hour).toFixed(2) === "Infinity"? 0 : (Units_per_hour).toFixed(2) }</span> Units/hour
</div>
return (
<>
{!isLoading && (
<div className="throughtputSummary-container analysis-card">
<div className="throughtputSummary-wrapper analysis-card-wrapper">
<div className="card-header">
<div className="header">
<div className="main-header">Throughput Summary</div>
<div className="sub-header">
{timeRange.startTime} - {timeRange.endTime}
</div>
</div>
<div className="icon-wrapper">
<ThroughputSummaryIcon />
</div>
</div>
{!isLoading ? (
<>
<div className="process-container">
<div className="throughput-value">
<span className="value">
{Units_per_hour.toFixed(2) === "Infinity"
? 0
: Units_per_hour.toFixed(2)}
</span>{" "}
Units/hour
</div>
{/* Dynamic Progress Bar */}
<div className="progress-bar-wrapper">
{[...Array(totalBars)].map((_, i) => (
<div className="progress-bar" key={i}>
{i < barsToFill ? (
<div className="bar-fill full" />
) : i === barsToFill ? (
<div
className="bar-fill partial"
style={{ width: `${partialFillPercent}%` }}
/>
) : null}
{/* Dynamic Progress Bar */}
<div className="progress-bar-wrapper">
{[...Array(totalBars)].map((_, i) => (
<div className="progress-bar" key={i}>
{i < barsToFill ? (
<div className="bar-fill full" />
) : i === barsToFill ? (
<div
className="bar-fill partial"
style={{ width: `${partialFillPercent}%` }}
/>
) : null}
</div>
))}
</div>
</div>
<div className="metrics-section">
<div className="metric">
<span className="label">Avg. Process Time</span>
<span className="value">
{materialCycleTime} secs/unit{" "}
</span>
</div>
<div className="metric">
<span className="label">Machine Utilization</span>
<span className="value">{machineActiveTime}</span>
{/* <span className="value">{machineActiveTime}</span> */}
</div>
</div>
</>
) : (
<SkeletonUI type={"default"} />
)}
</div>
))}
</div>
</div>
<div className="metrics-section">
<div className="metric">
<span className="label">Avg. Process Time</span>
<span className="value">{materialCycleTime} secs/unit </span>
</div>
<div className="metric">
<span className="label">Machine Utilization</span>
<span className="value">{machineActiveTime}</span>
{/* <span className="value">{machineActiveTime}</span> */}
</div>
</div>
</>
) : (
<SkeletonUI type={"default"} />
)}
</div>
</div>}
</>
);
)}
</>
);
};
export default ProductionCapacity;

5
app/src/components/ui/inputs/RenameInput.tsx
View File

@@ -1,10 +1,5 @@
import React, { useState, useRef, useEffect } from "react";
// interface RenameInputProps {
// value: string;
// onRename?: (newText: string) => void;
// }
interface RenameInputProps {
value: string;
onRename?: (newText: string) => void;

6
package-lock.json generated
View File

@@ -1,6 +0,0 @@
{
"name": "Dwinzo_Demo",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}