tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/dashboard/dashboard.component.scss

@@ -0,0 +1,237 @@
+.ellipse1 {
+    border-radius: 6px;
+    border-bottom: 2px solid var(--Gray-200, #EAECF0);
+    background: radial-gradient(206.89% 107.47% at 16.16% 32.77%, rgba(255, 255, 255, 0.40) 0%, rgba(69, 187, 254, 0.20) 100%), #F2F4F7;
+
+    /* Shadow/Soft Shadow */
+    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.card .card-header {
+    padding: 0px 1.50rem;
+}
+
+.card-border {
+    padding: 8px;
+    border-radius: 12px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White, #FFF);
+}
+
+.cardcount {
+    color: var(--Black, #101828);
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 38px;
+    /* 126.667% */
+}
+
+.cardtext {
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.cardsubcount {
+    color: var(--Black, #101828);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 30px;
+    /* 150% */
+}
+
+.card-border {
+    padding: 8px;
+    border-radius: 12px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White, #FFF);
+}
+
+.percent-value {
+    color: var(--Gray-500, #667085);
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 18px;
+    /* 112.5% */
+}
+
+.week-font {
+    color: var(--Gray-800, #1D2939);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
+    /* 150% */
+}
+
+.nav-item {
+    .nav-link {
+        color: var(--Gray-500, #667085);
+        font-size: 16px;
+        font-weight: 500;
+    }
+}
+
+.activebtn {
+    color: var(--Primary-700, #009BF3) !important;
+    border-radius: 6px !important;
+    background: var(--Primary-50, #EAF8FF) !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+}
+
+.buttonsec {
+    border-radius: 8px;
+    margin: 0px;
+    // border: 1px solid var(--gray-100, #F2F4F7);
+    background: var(--gray-50, white);
+    width: 100%;
+    height: fit-content;
+    padding: 5px;
+}
+
+.table-title-primary {
+    color: var(--Primary-700, #009BF3) !important;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    /* 142.857% */
+    text-decoration-line: underline;
+}
+
+.nodatamaintext {
+    font-family: 'Inter';
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    text-align: center;
+    color: #101828;
+}
+
+.nodatasubtext {
+    font-family: 'Inter';
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color: #667085;
+}
+
+.rotate {
+    transform: rotate(180deg);
+}
+
+.loader {
+    .title {
+        width: 65%;
+    }
+
+    .link {
+        width: 85%;
+    }
+
+    .description {
+        width: 95%;
+    }
+
+    .shimmer {
+        padding: 15px;
+        width: 95%;
+        height: 120px;
+        margin: 10px auto;
+        background: #ffffff;
+    }
+
+    .shimmer .image-card {
+        height: 90px;
+        width: 90px;
+        float: right;
+        border-radius: 8px;
+    }
+
+    .stroke {
+        height: 15px;
+        background: #777;
+        margin-top: 20px;
+    }
+
+    .wrapper {
+        width: 0px;
+        animation: fullView 0.5s forwards linear;
+    }
+
+    @keyframes fullView {
+        100% {
+            width: 100%;
+        }
+    }
+
+    .animate {
+        animation: shimmer 3s;
+        animation-iteration-count: infinite;
+        background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
+        background-size: 1000px 100%;
+    }
+
+    @keyframes shimmer {
+        from {
+            background-position: -1000px 0;
+        }
+
+        to {
+            background-position: 1000px 0;
+        }
+    }
+}
+
+table tr {
+    vertical-align: middle;
+}
+
+table th,
+table td {
+    height: 44px !important;
+    padding: 20px 15px !important;
+    align-items: center;
+    gap: 12px;
+    align-self: stretch;
+}
+
+.table-title {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    /* 142.857% */
+}
+.daterange {
+    color: var(--Gray-500, #667085);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    /* 150% */
+}
+.nav-group-outline {
+    border-radius: 8px;
+    border: 1px solid var(--Primary-300, #6BCAFF);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+.nav-group .btn.activePlanBtn {
+    border-right: 1px solid var(--Primary-300, #6BCAFF);
+    background: var(--Primary-600, #00A3FF);
+    color: white;
+}
+.nav-group .btn.inactivePlanBtn {
+    background-color: white;
+    color: #333;
+    border: 1px solid #dcdcdc;
+}

package/src/lib/components/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DashboardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});