Finished the Client-delivery COmponent, Added AG-Grid for managing table

backend-server/src/index.ts

@@ -285,8 +285,8 @@ app.put("/api/delivery/update/:id", async(req, res)=> {
     res.status(200).send("Delivery Type Updated")
 })
 
-//TODO: FIx the file structure
+//TODO1: FIx the file structure
-//TODO: delivery Delete
+//TODO2: delivery Delete
 
 const PORT = 3000;
 app.listen(PORT,()=>{

package-lock.json

@@ -16,6 +16,8 @@
         "@angular/platform-browser": "^18.2.0",
         "@angular/platform-browser-dynamic": "^18.2.0",
         "@angular/router": "^18.2.0",
+        "ag-grid-angular": "^33.1.1",
+        "ag-grid-community": "^33.1.1",
         "express": "^4.21.1",
         "ngx-clipboard": "^16.0.0",
         "rxjs": "~7.8.0",
@@ -4769,6 +4771,35 @@
         "node": ">=8.9.0"
       }
     },
+    "node_modules/ag-charts-types": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-11.1.1.tgz",
+      "integrity": "sha512-bRmUcf5VVhEEekhX8Vk0NSwa8Te8YM/zchjyYKR2CX4vDYiwoohM1Jg9RFvbIhVbLC1S6QrPEbx5v2C6RDfpSA==",
+      "license": "MIT"
+    },
+    "node_modules/ag-grid-angular": {
+      "version": "33.1.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-33.1.1.tgz",
+      "integrity": "sha512-6U0oM4ofcXB1q318dYkWnsFuz6Ne2aKZ9E8A+6IPsx5/9UaF9VlBaA2hIlKXDf2O1JPdoO6gnkm81OAyVu81wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-grid-community": "33.1.1",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">= 17.0.0",
+        "@angular/core": ">= 17.0.0"
+      }
+    },
+    "node_modules/ag-grid-community": {
+      "version": "33.1.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-33.1.1.tgz",
+      "integrity": "sha512-CNubIro0ipj4nfQ5WJPG9Isp7UI6MMDvNzrPdHNf3W+IoM8Uv3RUhjEn7xQqpQHuu6o/tMjrqpacipMUkhzqnw==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-types": "11.1.1"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",

package.json

@@ -18,6 +18,8 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "ag-grid-angular": "^33.1.1",
+    "ag-grid-community": "^33.1.1",
     "express": "^4.21.1",
     "ngx-clipboard": "^16.0.0",
     "rxjs": "~7.8.0",

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

@@ -1,8 +1,10 @@
 <div class="container">
     <div class="form-container">
         <form action="" #clientForm="ngForm" (ngSubmit)="addNewClient()">
+            <div class="form-control">
                 <label for="clientName">Client Name</label>
                 <input type="text" id="clientName" name="clientName" placeholder="Enter client name" [(ngModel)]="newClient.client_name" #clientName="ngModel" required>
+            </div>
             <div class="form-control">
                 <label for="clientDeliveryStatus">Client Delivery Status</label>
                 <select type="text" id="clientDeliveryStatus" name="clientDeliveryStatus"  placeholder="Enter delivery status" [(ngModel)]="newClient.delivery_status" #clientDeliveryStatus="ngModel" required>
@@ -14,27 +16,35 @@
             <div class="form-control" id="type">
                 <label for="clientDeliveryType">Client Delivery Type</label>
                 <select type="text" id="clientDeliveryType" name="clientDeliveryType" placeholder="Enter delivery type" [(ngModel)]="newClient.delivery_type" #clientDeliveryType="ngModel" required>
-                    <option value="test">Test</option>
+                    <option value="remove">Delivery</option>
+                    <option value="test">Test - End</option>
                     <option value="termination">Termination</option>
                     <option value="remove">Remove VM</option>
                 </select>
             </div>
+            <div class="form-control">
                 <label for="clientDeliveryDate">Client Delivery Date</label>
                 <input type="date" id="clientDeliveryDate" name="clientDeliveryDate"  placeholder="Enter delivery date" [(ngModel)]="newClient.delivery_date" #clientDeliveryDate="ngModel" required>
+            </div>
+            <div class="from-control">
                 <label for="remarks">Remarks</label>
                 <input type="text" id="remarks" name="remarks"  placeholder="Enter Remarks" [(ngModel)]="newClient.remarks" #remarks="ngModel" required>
+            </div>
+            <div class="form-control">
                 <button type="submit" [disabled]="clientForm.invalid">Add</button>
+            </div>
         </form>
     </div>
     <div class="client_list today-task">
         <h1>Todays Task</h1>
-        <table>
+        <!-- <table>
             <thead>
                 <tr>
                     <th>Client Name</th>
                     <th>Delivery Status</th>
                     <th>Delivery Type</th>
                     <th>Delivery Date</th>
+                    <th>Remarks</th>
                     <th>Action</th>
                 </tr>
             </thead>
@@ -45,17 +55,23 @@
                         <td>{{client.delivery_status}}</td>
                         <td>{{client.delivery_type}}</td>
                         <td>{{client.delivery_date }}</td>
+                        <td>{{ client.remarks }}</td>
                         <td>
                             <button (click)="completedTask(client)">Completed</button>
                         </td>
                     </ng-container>
                 </tr>
             </tbody>
-        </table>
+        </table> -->
+        <ag-grid-angular
+        class="task-table"
+        [rowData]="filteredDeliveryTask"
+        [columnDefs]="colDefs" />
     </div>
     
     <div class="pending-cotainer">
-        <div class="client_list">
+        <h1>Pending Tasks</h1>
+   <!-- <div class="client_list">
             <h1>Pending Task</h1>
             <table>
                 <thead>
@@ -77,10 +93,14 @@
                             <td>
                                 <button (click)="completedTask(client)">Completed</button>
                             </td>
-                        </ng-container>
+                        </ng-container> -->
-                    </tr>
+                    <!-- </tr>
                 </tbody>
-            </table>
+            </table> -->
-        </div>
+            <ag-grid-angular
+            class="task-table"
+            [rowData]="filteredPreviousTasks"
+            [columnDefs]="colDefs" 
+             />
     </div>
 </div>

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

@@ -1,2 +1,55 @@
-// TODO: Style the Input fields
+// TODO1: Style the Input fields
-// TODO: Style the Table
+// TODO2: Style the Table
+@import "../../../shared/scss/colors.scss";
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 5rem;
+    padding-left: 15rem;
+    position: relative;
+}
+
+.container div {
+    padding-top: 0.7rem;
+}
+
+// form-container css
+.form-container {
+    position: absolute;
+    left: 3rem;
+    top: 5rem;
+}
+
+form, form div {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-control {
+    margin-bottom: 1rem;
+}
+
+input, select {
+    border-radius: 10px;
+}
+
+button {
+    margin-top: 0.5rem;
+}
+
+// table-container css
+.task-table {
+    height: 300px;
+    width: 70rem;
+}
+
+h1 {
+    text-align: center;
+}
+
+.pending-cotainer h1 {
+    color: $danger;
+}

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

@@ -4,40 +4,80 @@ import { ClientDeliveryService } from './client-service.service';
 import { DeliveryModel } from './client-service.model';
 import { Subscription } from 'rxjs';
 import { FormsModule } from '@angular/forms';
+import { AgGridAngular } from 'ag-grid-angular'; // Angular Data Grid Component
+import type { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
+import { ChangeDetectorRef } from '@angular/core';
+
+
 
-// ###############################################
-// TODO: Client-Service
-// Hide the Full Task if the isCompleted Field is true
-// Add button for update
 
 
 
 @Component({
   selector: 'app-client-service',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, AgGridAngular],
   templateUrl: './client-service.component.html',
   styleUrl: './client-service.component.scss'
 })
 export class ClientServiceComponent implements OnInit, OnDestroy {
 
+  // Define the date variables
   date = new Date();
   day = String(this.date.getDate()).padStart(2,'0');
   month = String(this.date.getMonth()+1).padStart(2,'0');
   year = this.date.getFullYear();
+
+  // Formate todays date in YYYY-MM-DD
   today =  this.year + "-" + this.month +"-"+ this.day;
-  isCompleted= false;
+
+  // Array to store all delivery tasks
   allDeliveryTasks!: DeliveryModel[];
+  filteredDeliveryTask!: DeliveryModel[];
+  filteredPreviousTasks!: DeliveryModel[];
+
+  // Object to hold data for a new client
   newClient: DeliveryModel = new DeliveryModel()
+
+  // Subscription object to manage observable subscriptions
   allDeliverySubscription!: Subscription;
 
+  // ColDef
+  colDefs: ColDef[] = [
+    { field: 'client_name', headerName: 'Client Name', sortable: true, filter: true },
+    { field: 'delivery_status', headerName: 'Delivery Status', sortable: true, filter: true },
+    { field: 'delivery_type', headerName: 'Delivery Type', sortable: true, filter: true },
+    { field: 'delivery_date', headerName: 'Delivery Date', sortable: true, filter: true },
+    { field: 'remarks', headerName: 'Remarks', sortable: true, filter: true },
+    { headerName: 'Action',
+      cellRenderer: (params: any) => {
+      // Create the button directly and return it as HTML
+      const button = document.createElement('button');
+      button.innerText = 'Complete';
       
-  constructor(private clientDeliveryService: ClientDeliveryService){}
+      // Add a click event listener to handle the click
+      button.addEventListener('click', () => {
+        this.completedTask(params.data); // Call the completedTask method
+      });
+
+      return button;      }
+     }
+  ]
 
 
+
+  constructor(private clientDeliveryService: ClientDeliveryService, private cdr: ChangeDetectorRef){}
+
+  /**
+  * Lifecycle hook that runs when the component initializes.
+  * Fetches all delivery tasks from the service.
+  */
   ngOnInit(): void {
     this.allDeliverySubscription = this.clientDeliveryService.allDelivery().subscribe(data=>{
       this.allDeliveryTasks = data;
+
+      this.filteredDeliveryTask = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date===this.today)
+      this.filteredPreviousTasks = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date<this.today)
     })
   }
 
@@ -45,23 +85,46 @@ export class ClientServiceComponent implements OnInit, OnDestroy {
     this.allDeliverySubscription.unsubscribe();
   }
 
+  /**
+   * Marks a task as completed by updating its status.
+   * Calls the service to update the status in the database.
+   * @param client - The delivery task to be marked as completed.
+   */
   completedTask(client: DeliveryModel): void {
     client.delivery_status = "Completed";
     this.clientDeliveryService.updateStatus(client).subscribe(response=>{
       console.log(response)
+
+      // Refresh the delivery tasks list after adding a new client
       this.clientDeliveryService.allDelivery().subscribe(data=>{
         this.allDeliveryTasks = data;
+        this.filteredDeliveryTask = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date=== this.today)
+        this.filteredPreviousTasks = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date<this.today)
+        this.cdr.detectChanges();
+
       })
     })
   }
 
+
+    /**
+   * Adds a new client to the database.
+   * Calls the service to save the new client and refreshes the task list.
+   */
   addNewClient() {
     this.clientDeliveryService.addNewClientToDB(this.newClient).subscribe(response=>{
       console.log("response", response);
+
+      // Reset the newClient object after adding a new entry
       this.newClient = new DeliveryModel();
+
+      // Refresh the delivery tasks list after adding a new client
       this.clientDeliveryService.allDelivery().subscribe(data=>{
         this.allDeliveryTasks = data;
+        this.filteredDeliveryTask = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date=== this.today)
+        this.filteredPreviousTasks = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date<this.today)
       },error=>{console.log("error", error)}) 
     })
   }
+
 }

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

@@ -8,7 +8,6 @@ import { DELIVERY_CREATE_URL, DELIVERY_UPDATE_URL, DELIVERY_URL } from "../../..
     providedIn: 'root'
   })
 
-//TODO: change the URI of the Delivery API after Full development
 
 export class ClientDeliveryService {
 

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

@@ -75,6 +75,14 @@ export const service_links: navLink[] =[
     {
         "name" : "FortiAnalyzer",
         "url" : "https://118.67.209.115/p/login/"
+    },
+    {
+      "name" : "Observium",
+      "url" : "http://observium.brilliant.com.bd/",
+    },
+    {
+      "name" : "smokeping",
+      "url" : "http://103.209.42.218:10180/smokeping/"
     }
   ]
 

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

@@ -3,7 +3,7 @@ import { monitoring_tools_links, service_links, tools_links, shift_tasks, client
 import { navLink } from '../../../shared/model/nav-link.model';
 import { CommonModule } from '@angular/common';
 
-//TODO10: Create a document list in data-ts file
+//TODO3: Create a document list in data-ts file
 
 
 @Component({

src/main.ts

@@ -1,6 +1,10 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
+
+
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));