Created the framework for client-service delivery

src/app/components/pages/client-service/client-service.component.html

@@ -1 +1,28 @@
-<p>client-service works!</p>
+<div class="container">
+    <div class="client_list">
+        <table>
+            <thead>
+                <tr>
+                    <th>Client Name</th>
+                    <th>Delivery Status</th>
+                    <th>Delivery Type</th>
+                    <th>Delivery Date</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let client of data">
+                    <ng-container *ngIf="client.delivery_date === today && !isCompleted">
+                        <td>{{client.client_name}}</td>
+                        <td>{{client.delivery_status}}</td>
+                        <td>{{client.delivery_type}}</td>
+                        <td>{{client.delivery_date }}</td>
+                        <td>
+                            <button (click)="isCompleted=true">Completed</button>
+                        </td>
+                    </ng-container>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>

src/app/components/pages/client-service/client-service.component.ts

@@ -1,12 +1,41 @@
-import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-client-service',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './client-service.component.html',
   styleUrl: './client-service.component.scss'
 })
-export class ClientServiceComponent {
-
+export class ClientServiceComponent implements OnInit {
+  data = [
+    {
+      "client_name" : "client",
+      // Termination, provision, Test
+      "delivery_type" : "Test", 
+      // "delivery_type" : "Termination",
+      // "delivery_type" : "Provision",
+      "delivery_status" : "Pending",
+      "delivery_date" : "16/03/2025",
+      "remarks" : "Loream Ipsum is the",
+    }
+  ]
+
+  date = new Date();
+  day = String(this.date.getDate()).padStart(2,'0');
+  month = String(this.date.getMonth()+1).padStart(2,'0');
+  year = this.date.getFullYear();
+  today = this.day + '/' + this.month + '/' + this.year;
+  isCompleted= false;
+
+  ngOnInit(): void {
+    // if(this.data.delivery_date === this.today) {
+    //   console.log("Date Matched")
+    // } else {
+    //   console.log("Date does not matched")
+    //   console.log(this.data.delivery_date)
+    //   console.log(this.today)
+    // }
+  }
 }

src/app/components/pages/dashboard/dashboard-data.ts

@@ -98,10 +98,9 @@ export const service_links: navLink[] =[
   ]
 
 
-  export const shift_update = [
+  export const service_delivery = [
     {
       "name" : "Client Delivery",
-      "url" : "localhost:4200/delivery"
+      "url" : "http://localhost:4200/delivery"
     }
   ]
-

src/app/components/pages/dashboard/dashboard.component.html

@@ -33,7 +33,7 @@
             </div>
             <div class="delivery">
                 <div class="dropdown">
-                    <button class="dropbtn">Tools</button>
+                    <button class="dropbtn">Shift-update</button>
                     <div class="dropdown-content">
                         <ng-container *ngFor="let link of deliveryStatus_links">
                             <a href={{link.url}} target="_blank">{{ link.name }}</a>

src/app/components/pages/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { monitoring_tools_links, service_links, tools_links } from './dashboard-data';
+import { monitoring_tools_links, service_links, tools_links, service_delivery } from './dashboard-data';
 import { navLink } from '../../../shared/model/nav-link.model';
 import { CommonModule } from '@angular/common';
 
@@ -20,6 +20,6 @@ export class DashboardComponent implements OnInit {
     this.service_link = service_links;
     this.monitoring_links = monitoring_tools_links;
     this.tools_links = tools_links;
-    this.deliveryStatus_links = service_links;
+    this.deliveryStatus_links = service_delivery;
   }
 }