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

added logs list

Browse Source
This commit is contained in:
Nalvazhuthi
2025-05-02 17:58:28 +05:30
parent db0f32ae85 44e3f5c207
commit 8659f4be71
27 changed files with 1250 additions and 1086 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/src/styles/components/analysis/ROISummary.scss
View File

@@ -1,3 +1,6 @@
@use "../../abstracts/variables" as *;
@use "../../abstracts/mixins" as *;
.roiSummary-container {
.roiSummary-wrapper {
background-color: var(--background-color);
@@ -64,7 +67,7 @@
width: 100%;
border-radius: 6px;
border: 1px solid #00FF56;
background: #436D51;
background: #17eb5d65;
display: flex;
flex-direction: column;
padding: 4px 6px;
@@ -223,12 +226,11 @@
background: none;
.btn {
background-color: var(--accent-color);
color: var(--background-color);
padding: 4px 6px;
border-radius: 5px;
color: var(--text-button-color);
background: var(--background-color-button);
padding: 4px 12px;
border-radius: #{$border-radius-large};
display: inline-block;
font-size: 14px;
text-align: center;
}
}
@@ -244,7 +246,6 @@
height: 250px;
border-radius: 50%;
position: relative;
transition: background 0.5s ease;
}
.progress-cover {
position: absolute;
@@ -252,7 +253,6 @@
height: 75%;
top: 12.5%;
left: 12.5%;
background: #000000cc;
border-radius: 50%;
}
}

466
app/src/styles/components/analysis/analysis.scss
View File

@@ -1,279 +1,269 @@
.analysis {
position: fixed;
top: 0;
left: 0;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: start;
width: 100%;
height: 100vh;
pointer-events: none;
padding: 10px;
z-index: 2;
.analysis-wrapper {
display: flex;
justify-content: space-between;
align-items: start;
width: 100%;
height: 100vh;
// pointer-events: none;
z-index: 10000;
.analysis-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
}
.analysis-card {
flex-direction: column;
gap: 12px;
}
.analysis-card {
min-width: 333px;
background: var(--background-color);
border-radius: 20px;
padding: 8px;
backdrop-filter: blur(10px);
outline: 1px solid var(--border-color);
outline-offset: -1px;
pointer-events: all;
.analysis-card-wrapper {
width: 100%;
background: var(--background-color);
border-radius: 14px;
padding: 16px;
width: 100%;
background: var(--background-color);
border-radius: 14px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 14px;
.card-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.main-header {
line-height: 20px;
font-size: var(--font-size-regular);
}
}
.process-container {
display: flex;
flex-direction: column;
gap: 14px;
.card-header {
.throughput-value {
font-size: 1rem;
.value {
font-weight: bold;
font-size: 1.5rem;
}
}
.progress-bar-wrapper {
display: flex;
gap: 8px;
margin-top: 6px;
}
.progress-bar {
position: relative;
width: 100%;
height: 4px;
border-radius: 13px;
overflow: hidden;
background: #fbebd7;
.bar-fill {
position: absolute;
height: 100%;
top: 0;
left: 0;
background: #fc9d2f;
border-radius: 13px;
}
.bar-fill.full {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.main-header {
line-height: 20px;
font-size: var(--font-size-regular);
}
.bar-fill.partial {
width: 0; // inline style will override this
}
}
}
.process-container {
display: flex;
flex-direction: column;
.metrics-section {
padding-top: 16px;
border-top: 1px solid var(--background-color-gray);
.throughput-value {
font-size: 1rem;
.metric {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
margin-bottom: 8px;
.value {
font-weight: bold;
font-size: 1.5rem;
}
}
.label {
color: var(--text-color);
}
.progress-bar-wrapper {
display: flex;
gap: 8px;
margin-top: 6px;
}
.progress-bar {
position: relative;
// width: 36px;
width: 100%;
height: 4px;
border-radius: 13px;
overflow: hidden;
background: #FBEBD7;
.bar-fill {
position: absolute;
height: 100%;
top: 0;
left: 0;
background: #FC9D2F;
border-radius: 13px;
}
.bar-fill.full {
width: 100%;
}
.bar-fill.partial {
width: 0; // inline style will override this
}
}
}
.metrics-section {
padding-top: 16px;
border-top: 1px solid var(--background-color-gray);
.metric {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
margin-bottom: 8px;
.label {
color: var(--text-color);
}
.value {
font-weight: bold;
}
}
.value {
font-weight: bold;
}
}
}
}
}
.throughoutSummary {
.throughoutSummary-wrapper {
.process-container {
.process-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 16px;
width: 100%;
.throughput-value {
font-size: var(--font-size-small);
flex: 1;
display: flex;
flex-direction: column;
.value {
color: var(--accent-color);
}
/* Let the text take available space */
}
.lineChart {
max-width: 200px;
height: 100px;
position: relative;
.assetUsage {
text-align: right;
position: absolute;
right: 0;
top: 0;
}
canvas {
background: transparent;
}
}
}
.footer {
display: flex;
gap: 16px; // Space between cards
margin-top: 24px;
.footer-card {
width: 100%;
background: var(--background-color-gray);
border-radius: 6px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
&:first-child {
width: 85%;
}
.header {
font-size: var(--font-size-regular);
}
.value-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
gap: 6px;
}
}
.shiftUtilization {
.value-container {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 16px;
width: 100%;
.throughput-value {
font-size: var(--font-size-small);
flex: 1;
display: flex;
flex-direction: column;
.value {
color: var(--accent-color);
}
/* Let the text take available space */
.value {
font-size: var(--font-size-xlarge);
}
.lineChart {
max-width: 200px;
height: 100px;
position: relative;
.progress-wrapper {
width: 100%;
display: flex;
gap: 6px;
.assetUsage {
text-align: right;
position: absolute;
right: 0;
top: 0;
}
canvas {
background: transparent;
}
}
}
.footer {
display: flex;
gap: 16px; // Space between cards
margin-top: 24px;
.footer-card {
width: 100%;
background: var(--background-color-gray);
.progress {
border-radius: 6px;
padding: 8px;
height: 5px;
&:nth-child(1) {
background: #f3c64d;
}
&:nth-child(2) {
background: #67b3f4;
}
&:nth-child(3) {
background: #7981f5;
}
}
}
.progress-indicator {
display: flex;
justify-content: space-between;
width: 100%;
gap: 6px;
.shift-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
gap: 5px;
&:first-child {
width: 85%;
/* Align items vertically */
&:nth-child(1) {
.indicator {
background: #f3c64d;
}
}
.header {
font-size: var(--font-size-regular);
&:nth-child(2) {
.indicator {
background: #67b3f4;
}
}
.value-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
gap: 6px;
&:nth-child(3) {
.indicator {
background: #7981f5;
}
}
label {
font-size: var(--font-size-small);
position: relative;
}
.indicator {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
}
}
}
.shiftUtilization {
.value-container {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
.value {
font-size: var(--font-size-xlarge);
}
.progress-wrapper {
width: 100%;
display: flex;
gap: 6px;
.progress {
border-radius: 6px;
height: 5px;
&:nth-child(1) {
background: #F3C64D;
}
&:nth-child(2) {
background: #67B3F4;
}
&:nth-child(3) {
background: #7981F5;
}
}
}
.progress-indicator {
display: flex;
justify-content: space-between;
width: 100%;
gap: 6px;
.shift-wrapper {
display: flex;
align-items: center;
gap: 5px;
/* Align items vertically */
&:nth-child(1) {
.indicator {
background: #F3C64D;
}
}
&:nth-child(2) {
.indicator {
background: #67B3F4;
}
}
&:nth-child(3) {
.indicator {
background: #7981F5;
}
}
label {
font-size: var(--font-size-small);
position: relative;
}
.indicator {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
}
}
}
}
}
}
}
}
}
}
}
}

24
app/src/styles/components/button.scss
View File

@@ -0,0 +1,24 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.labeled-button-container {
@include flex-space-between;
padding: 6px 12px;
button {
padding: 2px 32px;
border: none;
border-radius: #{$border-radius-large};
color: var(--text-button-color);
background: var(--background-color-button);
transition: all 0.2s;
cursor: pointer;
}
}
button {
border: none;
outline: none;
background: none;
cursor: pointer;
}

10
app/src/styles/components/footer/footer.scss
View File

@@ -6,7 +6,7 @@
z-index: 1;
display: flex;
justify-content: space-between;
padding: 6px;
padding: 12px 24px;
.selection-wrapper {
display: flex;
@@ -22,8 +22,7 @@
color: var(--text-color);
.selector {
color: var(--text-button-color);
font-weight: 200;
color: var(--text-color);
}
}
}
@@ -34,13 +33,14 @@
.logs-detail,
.version {
border-radius: 12px;
background: var(--background-color);
padding: 3px 6px;
color: var(--text-button-color);
font-weight: 200;
color: var(--text-color);
display: flex;
align-items: center;
gap: 6px;
}
.logs-detail {

15
app/src/styles/components/input.scss
View File

@@ -639,21 +639,6 @@ input[type="number"] {
}
}
.labeled-button-container {
@include flex-space-between;
padding: 6px 12px;
button {
padding: 2px 32px;
border: none;
border-radius: #{$border-radius-large};
color: var(--text-button-color);
background: var(--background-color-button);
transition: all 0.2s;
cursor: pointer;
}
}
.value-field-container {
margin-bottom: 6px;
padding: 6px 12px;

6
app/src/styles/components/logs/logs.scss
View File

@@ -1,8 +1,8 @@
.log-list-container {
width: 100vw;
height: 100vh;
background: var(--background-color-secondary);
backdrop-filter: blur(2px);
// background: var(--background-color-secondary);
// backdrop-filter: blur(2px);
.log-list-wrapper {
height: 50%;
@@ -18,6 +18,7 @@
display: flex;
flex-direction: column;
gap: 12px;
backdrop-filter: blur(50px);
.log-header {
display: flex;
@@ -30,6 +31,7 @@
}
.close {
// transform: scale(1.5);
cursor: pointer;
}
}

13
app/src/styles/components/simulation/simulation.scss
View File

@@ -32,10 +32,17 @@
}
.controls-container {
@include flex-center;
@include flex-space-between;
gap: 12px;
justify-content: space-between;
.header{
@include flex-center;
gap: 6px;
padding: 0 8px;
svg{
scale: 1.3;
}
}
.production-details,
.controls-wrapper {
@include flex-center;
@@ -72,7 +79,7 @@
.expand-icon-container {
@include flex-center;
padding: 6px 8px;
padding: 0 8px;
cursor: pointer;
}

4
app/src/styles/components/tools.scss
View File

@@ -15,7 +15,7 @@
transition: width 0.2s;
background: var(--background-color);
backdrop-filter: blur(8px);
z-index: #{$z-index-default};
z-index: 2;
outline: 1px solid var(--border-color);
outline-offset: -1px;
@@ -124,6 +124,8 @@
padding: 4px;
border-radius: #{$border-radius-medium};
background: var(--background-color);
outline: 1px solid var(--border-color);
outline-offset: -1px;
gap: 5px;
position: relative;