Added Imput form and modified Shift update

src/app/shared/components/input-form/input-form.component.html

@@ -1 +1,18 @@
-<p>input-form works!</p>
+<div class="container">
+    <div class="form" [ngClass]="{'hidden': !isFormVisible}">
+        <form #inputForm="ngForm" (submit)="onSubmit(inputForm)">
+            <div class="form-container">
+                <div class="control" *ngFor="let field of fields">
+                    <label [for]="field">{{field}}</label>
+                    <input class="form-control" type="text" [id]="field" [name]="field"  [(ngModel)]="formData[field]" [placeholder]="'enter '+field" required>
+                </div>
+                <div class="btn">
+                    <button [disabled]="inputForm.invalid">Submit</button>
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="toggle" (click)="toggleForm()">
+        <h1><i class="bi bi-plus-circle-fill"></i></h1>
+    </div>
+</div>

src/app/shared/components/input-form/input-form.component.scss

@@ -0,0 +1,63 @@
+@import "../../scss/colors.scss";
+
+.hidden {
+    display: none;
+}
+
+.form-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2rem;
+    .control {
+        display: flex;
+        flex-direction: column;
+    
+        >* {
+            margin: 0.3rem 0.5rem 0rem 1rem;
+        }
+        input {
+            border: none;
+            background-color: $bg-color;
+            border-bottom: 1px solid $txt-color;
+            &:focus{
+                outline: none;
+            }
+        }
+        
+    }
+    .btn{
+        margin-left: 2rem;
+        button{
+            background-color: $hover-color;
+            height: 3rem;
+            width: 7rem;
+            border: none;
+            border-radius: 1rem;
+            &:hover {
+                background-color: darken($color: $hover-color, $amount: 10);
+            }
+            &:active {
+                background-color: darken($color: $hover-color, $amount: 50);
+            }
+            &:disabled {
+                background-color: darken($color: $hover-color, $amount: 0);
+            }
+        }
+    }
+}
+
+.toggle{
+    position: absolute;
+    right: 2.5rem;
+    bottom: 0;
+}
+
+i {
+    color:$title;
+    font-size: 5rem;
+}
+
+i:hover{
+    color: darken($title,20)
+}
+

src/app/shared/components/input-form/input-form.component.ts

@@ -1,12 +1,24 @@
-import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormsModule, NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-input-form',
   standalone: true,
-  imports: [],
+  imports: [FormsModule, CommonModule],
   templateUrl: './input-form.component.html',
   styleUrl: './input-form.component.scss'
 })
 export class InputFormComponent {
+  @Input() fields: string[] = ["demo1", "demo2", "demo3", "demo4"]
+  @Output() formValues: EventEmitter<{}> = new EventEmitter<{}>();
+  formData: {[key: string]: string} = {}
+  @Input() isFormVisible: boolean = false;
 
+  onSubmit(formData: NgForm){
+    this.formValues.emit(formData.value)
+  }
+  toggleForm() {
+    this.isFormVisible = !this.isFormVisible;
+  }
 }

src/app/shared/components/table/table.component.scss

@@ -25,6 +25,7 @@ th{
     color: $txt-heading-color;
     font-size: 1.5rem;
     padding-bottom: 3rem;
+    position:sticky;
 }
 
 tbody tr {

src/app/shared/model/update.model.ts

@@ -1,7 +1,9 @@
 export class Update{
     id!: string;
     date!: string;
-    detail!: string;
-    ref!: string;
+    details!: string;
+    remarks!: string;
+    Sales_Concern!: string;
+    reference!: string;
     handler!: string;
 }