หน้าจอ

Synto-Angular/src/app/admin/admin.module.ts

@@ -14,6 +14,8 @@ import { SharedModule } from '../shared/sharedmodule';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ApproveBorrowComponent } from './approve-borrow/approve-borrow.component';
 import { ReturnBorrowComponent } from './return-borrow/return-borrow.component';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { DpDatePickerModule } from 'ng2-date-picker';
 
 @NgModule({
   imports: [
@@ -22,6 +24,8 @@ import { ReturnBorrowComponent } from './return-borrow/return-borrow.component';
     SharedModule,
     FormsModule,
     ReactiveFormsModule,
+    NgSelectModule,
+    DpDatePickerModule
   ],
   declarations: [AdminComponent, UserManagementComponent, ProjectManagementComponent, ProductManagementComponent, ProjectEmployeeManagementComponent, ProjectProductManagementComponent, HomeAdminComponent, TransectionProductManagementComponent, HistoryProductComponent, ApproveBorrowComponent, ReturnBorrowComponent]
 })

Synto-Angular/src/app/admin/transection-product-management/transection-product-management.component.html

+<app-page-header
+  title="Invoice List"
+  title1="Invoice List"
+  activeitem="Pages"
+></app-page-header>
+
+<!-- Start::row-1 -->
 <div class="grid grid-cols-12 gap-6">
   <div class="col-span-12">
-    <div class="box">
+    <div class="box invoice-list">
+      <div class="box-header lg:flex lg:justify-between">
+        <h5 class="box-title my-auto">Invoice List</h5>
+        <a
+          href="javascript:void(0);"
+          class="ti-btn ti-btn-primary hs-dropdown-toggle m-0 py-2"
+          id="invoice-create"
+          data-hs-overlay="#invoice-modal"
+          ><i class="ri ri-add-line"></i>Create Invoice</a
+        >
+      </div>
       <div class="box-body">
-        <div class="lg:grid grid-cols-12 gap-6 space-y-6 lg:space-y-0">
-          <div class="col-span-12 lg:col-span-4">
+        <div class="xl:flex xl:justify-between space-y-3 xl:space-y-0">
+          <div
+            class="sm:flex sm:space-x-3 space-y-3 sm:space-y-0 rtl:space-x-reverse"
+          >
             <div class="relative max-w-xs">
               <label for="hs-table-search" class="sr-only">Search</label>
-              <div
-                class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-4 rtl:pl-4"
-              >
-                <i class="ti ti-search"></i>
-              </div>
               <input
                 type="text"
                 name="hs-table-search"
                 id="hs-table-search"
-                class="p-2 ltr:pr-10 rtl:pl-10 ti-form-input"
-                placeholder="Enter Your Text"
+                class="px-3 py-2 ltr:pr-10 rtl:pl-10 ti-form-input invoice-search"
+                placeholder="Search for items"
               />
+              <div
+                class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-4 rtl:pl-4"
+              >
+                <i class="ri-search-line text-gray-500 dark:text-white/70"></i>
+              </div>
             </div>
+            <button
+              aria-label="button"
+              type="button"
+              class="ti-btn px-3 py-2 ti-btn-outline me-1 border-gray-200 text-gray-500 dark:text-white/70 hover:text-white hover:bg-gray-500 hover:border-gray-500 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10 m-0"
+            >
+              <i class="ri-refresh-line leading-none text-lg"></i>
+            </button>
+            <button
+              aria-label="button"
+              type="button"
+              id="delete-btn"
+              class="ti-btn px-3 py-2 ti-btn-danger m-0"
+            >
+              <i class="ri-delete-bin-7-line leading-none text-lg"></i>
+            </button>
           </div>
-          <div class="col-span-12 lg:col-span-4">
-            <div class="text-center max-w-xs lg:mx-auto">
-              <nav
-                class="flex justify-center space-x-3 rtl:space-x-reverse"
-                aria-label="Tabs"
-                role="tablist"
-              ></nav>
+          <div
+            class="sm:space-x-3 sm:flex space-y-3 sm:space-y-0 rtl:space-x-reverse"
+          >
+            <div class="inline-flex">
+              <div
+                class="px-4 py-2 inline-flex items-center min-w-fit ltr:rounded-l-sm rtl:rounded-r-sm border ltr:border-r-0 rtl:border-l-0 border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10"
+              >
+                <span class="text-sm text-gray-500 dark:text-white/70"
+                  ><i class="ri ri-calendar-line"></i
+                ></span>
+              </div>
+              <dp-date-picker
+                class="ti-form-input joining-date input-date-picker flatpickr-input date active"
+                placeholder="Choose date"
+                [config]="datePickerConfig"
+                required="true"
+              >
+              </dp-date-picker>
+            </div>
+            <div class="hs-dropdown ti-dropdown">
+              <button
+                id="hs-dropdown-transform-style"
+                type="button"
+                class="px-3 py-2 hs-dropdown-toggle ti-dropdown-toggle"
+              >
+                All Invoices
+                <svg
+                  class="hs-dropdown-open:rotate-180 ti-dropdown-caret"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+
+              <div class="hs-dropdown-menu hidden z-10">
+                <div
+                  class="hs-dropdown-open:ease-in hs-dropdown-open:opacity-100 hs-dropdown-open:scale-100 transition ease-out scale-95 duration-200 origin-top-left ti-dropdown-menu block"
+                  aria-labelledby="hs-dropdown-transform-style"
+                  data-hs-transition
+                >
+                  <a class="ti-dropdown-item" href="javascript:void(0);">
+                    All Invoices
+                  </a>
+                  <a class="ti-dropdown-item" href="javascript:void(0);">
+                    Paid Invoices
+                  </a>
+                  <a class="ti-dropdown-item" href="javascript:void(0);">
+                    Unpaid Invoices
+                  </a>
+                  <a class="ti-dropdown-item" href="javascript:void(0);">
+                    Draft Invoices
+                  </a>
+                  <a class="ti-dropdown-item" href="javascript:void(0);">
+                    Overdue Invoices
+                  </a>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="col-span-12 lg:col-span-4">
-            <div
-              class="flex space-x-3 rtl:space-x-reverse lg:justify-end team-right"
-            >
-            <!-- <ng-select
-            class="ti-form-select"
-            name="team-choice"
-            id="team-choice"
-            placeholder="Status"
-            [(ngModel)]="selectedStatus"
+        </div>
+        <div class="table-responsive">
+          <div
+            class="mt-5 table-bordered rounded-sm ti-custom-table-head overflow-scroll"
           >
-            <ng-option *ngFor="let option of statusOptions" [value]="option.value">
-              {{ option.label }}
-            </ng-option>
-          </ng-select>
-                </ng-option>
-              </ng-select> -->
-            </div>
+            <table
+              class="ti-custom-table ti-custom-table-head edit-table whitespace-nowrap text-center"
+            >
+              <thead class="bg-gray-50 dark:bg-black/20">
+                <tr class="cart-box">
+                  <th scope="col" class="dark:text-white/70">
+                    <div class="flex leading-[0] justify-center">
+                      <input
+                        type="checkbox"
+                        (change)="isSelected = true"
+                        class="border-gray-500 ti-form-checkbox mt-0.5 check-all"
+                        id="hs-default-checkbox"
+                      />
+                      <label
+                        for="hs-default-checkbox"
+                        class="text-sm text-gray-500 dark:text-white/70"
+                      ></label>
+                    </div>
+                  </th>
+                  <th scope="col" class="dark:text-white/70">Invoice Id</th>
+                  <th scope="col" class="dark:text-white/70">Customer</th>
+                  <th scope="col" class="dark:text-white/70">Created Date</th>
+                  <th scope="col" class="dark:text-white/70">Due Date</th>
+                  <th scope="col" class="dark:text-white/70">Status</th>
+                  <th scope="col" class="dark:text-white/70">payment Mode</th>
+                  <th scope="col" class="dark:text-white/70">Amount</th>
+                  <th scope="col" class="dark:text-white/70">Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="invoice-list" *ngFor="let payment of Payments">
+                  <td class="">
+                    <div
+                      class="flex items-center h-5 invoice-checkbox justify-center"
+                    >
+                      <input
+                        id="invoice-check-1"
+                        type="checkbox"
+                        [checked]="isSelected"
+                        class="border-gray-500 ti-form-checkbox"
+                      />
+                      <label for="invoice-check-1" class="sr-only"
+                        >Checkbox</label
+                      >
+                    </div>
+                  </td>
+                  <td>{{ payment.id }}</td>
+                  <td>
+                    <div
+                      class="flex space-x-3 rtl:space-x-reverse text-start truncate"
+                    >
+                      <img
+                        class="avatar avatar-sm rounded-sm"
+                        src="{{ payment.src }}"
+                        alt="Image Description"
+                      />
+                      <div class="block">
+                        <p
+                          class="block text-sm font-semibold text-gray-800 dark:text-white my-auto"
+                        >
+                          {{ payment.name }}
+                        </p>
+                        <p
+                          class="block text-xs text-gray-500 dark:text-white/70 my-auto"
+                        >
+                          {{ payment.mail }}
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td>{{ payment.createddate }}</td>
+                  <td>{{ payment.duedate }}</td>
+                  <td>
+                    <span
+                      class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-{{
+                        payment.background
+                      }}/10 text-{{ payment.text }}/80"
+                      >{{ payment.status }}Paid</span
+                    >
+                  </td>
+                  <td>{{ payment.paymode }}</td>
+                  <td>{{ payment.price }}</td>
+                  <td class="font-medium space-x-2 rtl:space-x-reverse">
+                    <div class="hs-tooltip ti-main-tooltip">
+                      <a
+                        href="javascript:void(0);"
+                        class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary"
+                      >
+                        <i class="ti ti-send"></i>
+                        <span
+                          class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
+                          role="tooltip"
+                        >
+                          Send
+                        </span>
+                      </a>
+                    </div>
+                    <div class="hs-tooltip ti-main-tooltip">
+                      <a
+                        href="javascript:void(0);"
+                        data-hs-overlay="#invoice-modal"
+                        class="invoice-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary"
+                      >
+                        <i class="ti ti-pencil"></i>
+                        <span
+                          class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
+                          role="tooltip"
+                        >
+                          Edit
+                        </span>
+                      </a>
+                    </div>
+                    <div class="hs-tooltip ti-main-tooltip">
+                      <a
+                        href="javascript:void(0);"
+                        class="invoice-btn m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger"
+                        (click)="click(payment.id)"
+                      >
+                        <i class="ti ti-trash"></i>
+                        <span
+                          class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
+                          role="tooltip"
+                        >
+                          Delete
+                        </span>
+                      </a>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
+        <nav
+          class="flex justify-end items-center space-x-2 rtl:space-x-reverse mt-5"
+        >
+          <a
+            class="w-10 h-10 bg-white dark:bg-black/20 text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center text-sm font-medium items-center gap-2 rounded-full"
+            href="javascript:void(0);"
+          >
+            <span aria-hidden="true">«</span>
+            <span class="sr-only">Previous</span>
+          </a>
+          <a
+            class="w-10 h-10 bg-primary text-white p-2 inline-flex items-center justify-center text-sm font-medium rounded-full"
+            href="javascript:void(0);"
+            aria-current="page"
+            >1</a
+          >
+          <a
+            class="w-10 h-10 bg-white dark:bg-black/20 text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center items-center text-sm font-medium rounded-full"
+            href="javascript:void(0);"
+            >2</a
+          >
+          <a
+            class="w-10 h-10 bg-white dark:bg-black/20 text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center items-center text-sm font-medium rounded-full"
+            href="javascript:void(0);"
+            >3</a
+          >
+          <a
+            class="w-10 h-10 bg-white dark:bg-black/20 text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center text-sm font-medium items-center gap-2 rounded-full"
+            href="javascript:void(0);"
+          >
+            <span class="sr-only">Next</span>
+            <span aria-hidden="true">»</span>
+          </a>
+        </nav>
       </div>
     </div>
   </div>
 </div>
+<!-- End::row-1 -->
 
-<div class="box-body p-0">
-  <div class="-m-1.5 overflow-auto">
-    <div class="p-1.5 min-w-full inline-block align-middle">
-      <div class="overflow-auto">
-        <div
-          class="table border-collapse table-auto w-full divide-y divide-gray-200 dark:divide-white/10"
+<!-- Start::Invoice Modal-->
+<div
+  id="invoice-modal"
+  class="hs-overlay hidden ti-modal"
+  *ngFor="let payment of Payments"
+>
+  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out sm:!max-w-6xl">
+    <div class="ti-modal-content">
+      <div class="ti-modal-header">
+        <h3 class="ti-modal-title invoice-title">Create Invoice</h3>
+        <button
+          type="button"
+          class="hs-dropdown-toggle ti-modal-close-btn"
+          data-hs-overlay="#invoice-modal"
         >
-          <div class="table-header-group">
-            <div class="table-row">
-              <div
-                class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase"
-              >
-                Name
-              </div>
-              <div
-                class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase"
-              >
-                Oder ID
-              </div>
-              <div
-                class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase"
-              >
-                Address Project
-              </div>
-              <div
-                class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase"
-              >
-                Status
-              </div>
-              <div
-                class="table-cell px-6 py-3 text-end text-xs font-medium text-gray-500 uppercase"
-              >
-                Action
-              </div>
+          <span class="sr-only">Close</span>
+          <svg
+            class="w-3.5 h-3.5"
+            width="8"
+            height="8"
+            viewBox="0 0 8 8"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
+      <div class="ti-modal-body p-6">
+        <div class="flex flex-col md:flex-row space-y-6 justify-between mb-5">
+          <div class="space-y-2">
+            <div class="mb-2">
+              <img
+                src="./assets/img/brand-logos/desktop-logo.png"
+                alt="logo"
+                class="flex dark:hidden"
+              />
+              <img
+                src="./assets/img/brand-logos/desktop-dark.png"
+                alt="logo"
+                class="hidden dark:flex"
+              />
             </div>
+            <input
+              type="text"
+              class="company-name ti-form-input md:w-72"
+              placeholder="Company Name"
+              [value]="payment.name"
+            />
+            <input
+              type="text"
+              class="company-address ti-form-input md:w-72"
+              placeholder="Company Address"
+              [value]="payment.address"
+            />
+            <input
+              type="text"
+              class="company-address1 ti-form-input md:w-72"
+              placeholder="Complete Address"
+              [value]="payment.mail"
+            />
           </div>
-          <div
-            class="table-row-group divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-black/20"
-          >
-            <div class="table-row">
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200"
-              >
-                John Brown
-              </div>
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200"
-              >
-                #52225
-              </div>
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200"
-              >
-                New York No. 1 Lake Park
-              </div>
-              <div
-                class="badge bg-warning/10 leading-none rounded-md text-warning"
-              >
-                Pending
-              </div>
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium"
-              >
-                <a
-                  routerLink="/page/ecommerce/borrow"
-                  class="text-primary hover:text-primary"
-                  >Details</a
-                >
-              </div>
+          <div class="space-y-2 text-end inline-block">
+            <h3 class="text-2xl text-primary uppercase font-semibold">
+              Invoice
+            </h3>
+            <input
+              type="text"
+              class="invoice-id ti-form-input md:w-72 inline-block text-start"
+              placeholder="Invoice Id"
+              [value]="payment.id"
+            />
+
+            <dp-date-picker
+              class="ti-form-input joining-date flatpickr-input date active"
+              placeholder="Created date"
+              [config]="datePickerConfig"
+              required="true"
+            >
+            </dp-date-picker>
+
+            <dp-date-picker
+              class="ti-form-input joining-date flatpickr-input date active"
+              placeholder="Due date"
+              [config]="datePickerConfig"
+              required="true"
+            >
+            </dp-date-picker>
+          </div>
+        </div>
+        <hr class="pb-5 dark:border-t-white/10" />
+        <div class="grid grid-cols-12 gap-6 mb-5">
+          <div class="lg:col-span-6 col-span-12">
+            <div class="space-y-3 inline-block">
+              <h3 class="font-semibold text-lg">Billed To :</h3>
+              <input
+                type="text"
+                class="company-name ti-form-input md:w-72"
+                placeholder="Company Name"
+                [value]="payment.name"
+              />
+              <input
+                type="text"
+                class="company-address ti-form-input md:w-72"
+                placeholder="Company Address"
+                [value]="payment.address"
+              />
+              <input
+                type="text"
+                class="company-address1 ti-form-input md:w-72"
+                placeholder="Complete Address"
+                [value]="payment.mail"
+              />
             </div>
-            <div class="table-row">
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200"
-              >
-                Jim Green
-              </div>
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200"
-              >
-                #52400
-              </div>
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200"
-              >
-                London No. 1 Lake Park
-              </div>
-              <div
-                class="badge bg-success/10 leading-none rounded-md text-success"
-              >
-                Approve
-              </div>
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium"
-              >
-                <a
-                  class="text-primary hover:text-primary"
-                  href="javascript:void(0);"
-                  >Details</a
-                >
-              </div>
+          </div>
+          <div class="lg:col-span-6 col-span-12 text-end">
+            <div class="space-y-3 inline-block">
+              <h3 class="font-semibold text-lg">Shipped To :</h3>
+              <input
+                type="text"
+                class="company-name ti-form-input md:w-72 text-end"
+                placeholder="Company Name"
+                [value]="payment.name"
+              />
+              <input
+                type="text"
+                class="company-address ti-form-input md:w-72 text-end"
+                placeholder="Company Address"
+                [value]="payment.address"
+              />
+              <input
+                type="text"
+                class="company-address1 ti-form-input md:w-72 text-end"
+                placeholder="Complete Address"
+                [value]="payment.mail"
+              />
             </div>
-            <div class="table-row">
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200"
-              >
-                Joe Black
-              </div>
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200"
-              >
-                #52100
-              </div>
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200"
+          </div>
+        </div>
+        <div class="sm:flex space-y-4 justify-between">
+          <h5 class="font-semibold text-lg my-auto">Invoic Items</h5>
+          <a
+            href="javascript:void(0);"
+            class="invoice-add-item ti-btn ti-btn-primary m-0 py-2"
+            ><i class="ri ri-add-line"></i>Add Item Deatils</a
+          >
+        </div>
+        <div class="py-5">
+          <div class="overflow-auto lg:overflow-hidden">
+            <table
+              class="ti-custom-table !border dark:border-white/10 !border-x-0 text-center"
+            >
+              <thead class="bg-gray-50 dark:bg-black/20 overflow-hidden">
+                <tr>
+                  <th scope="col" class="!text-center">S.No</th>
+                  <th scope="col" class="!text-center">Product</th>
+                  <th scope="col" class="!text-center">Quantity</th>
+                  <th scope="col" class="!text-center">Unit</th>
+                  <th scope="col" class="!text-center">Amount</th>
+                  <th scope="col" class="!text-center">Action</th>
+                </tr>
+              </thead>
+              <tbody class="invoice-body">
+                <tr class="invoice-list">
+                  <td class="">
+                    <input
+                      type="number"
+                      class="ti-form-input"
+                      placeholder="s.no"
+                    />
+                  </td>
+                  <td class="">
+                    <input
+                      type="text"
+                      class="ti-form-input"
+                      placeholder="Product name"
+                    />
+                  </td>
+                  <td class="font-semibold">
+                    <div class="flex rounded-sm shadow-sm">
+                      <button
+                        aria-label="button"
+                        type="button"
+                        class="quantity-minus inline-flex flex-shrink-0 justify-center items-center h-8 w-8 ltr:rounded-l-sm rtl:rounded-r-sm border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm"
+                      >
+                        <i class="ti ti-minus" (click)="plus()"></i>
+                      </button>
+                      <input
+                        type="text"
+                        id="quantity1"
+                        name="quantity"
+                        value="{{ input }}"
+                        class="p-0 ti-form-input w-20 rounded-none shadow-sm focus:z-10 text-center"
+                        value="0"
+                        readonly
+                      />
+                      <button
+                        aria-label="button"
+                        type="button"
+                        class="quantity-plus inline-flex flex-shrink-0 justify-center items-center h-8 w-8 ltr:rounded-r-sm rtl:rounded-l-sm border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm"
+                      >
+                        <i class="ti ti-plus" (click)="minus()"></i>
+                      </button>
+                    </div>
+                  </td>
+                  <td class="">
+                    <input
+                      type="number"
+                      class="ti-form-input"
+                      placeholder="value"
+                    />
+                  </td>
+                  <td class="font-medium">
+                    <input
+                      type="number"
+                      class="ti-form-input"
+                      placeholder="Total amount"
+                    />
+                  </td>
+                  <td class="font-medium">
+                    <div class="hs-tooltip ti-main-tooltip">
+                      <a
+                        href="javascript:void(0);"
+                        class="invoice-btn m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger"
+                      >
+                        <i class="ti ti-trash"></i>
+                        <span
+                          class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
+                          role="tooltip"
+                        >
+                          Delete
+                        </span>
+                      </a>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+              <tbody
+                class="border-t border-b-0 border-x-0 border-gray-200 dark:border-white/10"
               >
-                Sidney No. 1 Lake Park
-              </div>
-              <div
-                class="badge bg-danger/10 leading-none rounded-md text-danger"
+                <tr class="!border-b-0">
+                  <td colspan="3" class="!p-1"></td>
+                  <td class="!pb-1">Sub-Total</td>
+                  <td class="!pb-1">
+                    <input
+                      type="number"
+                      class="ti-form-input"
+                      placeholder="sub Total"
+                    />
+                  </td>
+                  <td></td>
+                </tr>
+                <tr class="!border-b-0 !border-t-0">
+                  <td colspan="3" class="!p-1"></td>
+                  <td class="!py-1">Tax</td>
+                  <td class="!py-1">
+                    <input
+                      type="number"
+                      class="ti-form-input"
+                      placeholder="Tax"
+                    />
+                  </td>
+                  <td></td>
+                </tr>
+                <tr class="!border-b-0 !border-t-0">
+                  <td colspan="3" class="!p-1"></td>
+                  <td class="!py-1">Discount</td>
+                  <td class="!py-1">
+                    <input
+                      type="number"
+                      class="ti-form-input"
+                      placeholder="Discount"
+                    />
+                  </td>
+                  <td></td>
+                </tr>
+                <tr class="!border-t-0">
+                  <td colspan="3" class="!p-1"></td>
+                  <td class="!pt-1">Total</td>
+                  <td class="!pt-1">
+                    <input
+                      type="number"
+                      class="ti-form-input"
+                      placeholder="Total"
+                    />
+                  </td>
+                  <td></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <h3 class="font-semibold text-xl mb-4">Payment Details</h3>
+        <div class="grid grid-cols-12 gap-6 mb-5 invoice-pay">
+          <div class="lg:col-span-6 col-span-12 max-w-xs">
+            <div class="space-y-3">
+              <ng-select
+                class="ti-form-select"
+                data-trigger
+                placeholder="Status"
               >
-                Not Approve
-              </div>
-              <div
-                class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium"
+                <ng-option value="0">Status</ng-option>
+                <ng-option value="0">paid</ng-option>
+                <ng-option value="0">Due</ng-option>
+                <ng-option value="0">Unpaid</ng-option>
+                <ng-option value="0">OverDue</ng-option>
+              </ng-select>
+              <input
+                type="text"
+                class="ti-form-input"
+                placeholder="Card Holder Name"
+              />
+              <input
+                type="number"
+                class="ti-form-input"
+                placeholder="Card Number"
+              />
+            </div>
+          </div>
+          <div class="lg:col-span-6 col-span-12 max-w-xs">
+            <div class="space-y-3">
+              <ng-select
+                class="ti-form-select"
+                data-trigger
+                placeholder="Payment Method"
               >
-                <a
-                  class="text-primary hover:text-primary"
-                  href="javascript:void(0);"
-                  >Details</a
-                >
-              </div>
+                <ng-option value="0">Payment Type</ng-option>
+                <ng-option value="0">Debit/Credit Card</ng-option>
+                <ng-option value="0">Net Banking</ng-option>
+                <ng-option value="0">Paypal</ng-option>
+                <ng-option value="0">Upi</ng-option>
+              </ng-select>
+              <input
+                type="text"
+                class="ti-form-input"
+                placeholder="Bank Details"
+              />
+              <input type="number" class="ti-form-input" placeholder="Amount" />
             </div>
           </div>
         </div>
       </div>
+      <div class="ti-modal-footer sm:flex !block space-y-2 text-end">
+        <a class="ti-btn ti-btn-primary" href="javascript:void(0);">
+          <i class="ri-save-line"></i>Save changes
+        </a>
+        <a class="ti-btn ti-btn-secondary" href="javascript:void(0);">
+          <i class="ri-send-plane-line"></i> Send Invoice
+        </a>
+        <a class="ti-btn ti-btn-danger" href="javascript:void(0);">
+          <i class="ri-download-cloud-2-line"></i> Download
+        </a>
+      </div>
     </div>
   </div>
 </div>
+<!-- End::Invoice Modal-->

Synto-Angular/src/app/admin/transection-product-management/transection-product-management.component.ts

 import { Component } from '@angular/core';
-
+const DATA = [
+  {
+    id: '#IN5252155',
+    src: './assets/img/users/2.jpg',
+    name: 'Socrates Itumay',
+    mail: 'socratesitumany@abc.com',
+    createddate: '25-09-2022',
+    duedate: '15-10-2022',
+    status: 'paid',
+    background: 'success',
+    text: 'success',
+    paymode: 'card',
+    price: '$999',
+    address: 'P.O. Box 283 8562 Fusce Rd., 20620',
+  },
+  {
+    id: '#IN2363363',
+    src: './assets/img/users/3.jpg',
+    name: 'Json Taylor',
+    mail: 'jsontaylor2416@gmail.com',
+    createddate: '12-09-2022',
+    duedate: '20-10-2022',
+    status: 'Overdue',
+    background: 'danger',
+    text: 'danger',
+    paymode: 'Net Banking',
+    price: '$2526',
+  },
+  {
+    id: '#IN125252',
+    src: './assets/img/users/4.jpg',
+    name: 'Suzika Stallone',
+    mail: 'suzikastallone3214@gmail.com',
+    createddate: '12-09-2022',
+    duedate: '20-10-2022',
+    status: 'Due',
+    background: 'warning',
+    text: 'warning',
+    paymode: 'UPI ID',
+    price: '$2526',
+  },
+  {
+    id: '#IN5656',
+    src: './assets/img/users/5.jpg',
+    name: 'Selena Deoyl',
+    mail: 'selenadeoyl114@gmail.com',
+    createddate: '12-09-2022',
+    duedate: '20-10-2022',
+    status: 'Unpaid',
+    background: 'secondary',
+    text: 'secondary',
+    paymode: 'Paypal',
+    price: '$2526',
+  },
+  {
+    id: '#IN25252',
+    src: './assets/img/users/9.jpg',
+    name: 'Roman Killon',
+    mail: 'romankillon143@gmail.com',
+    createddate: '12-09-2022',
+    duedate: '20-10-2022',
+    status: 'Draft',
+    background: 'primary',
+    text: 'primary',
+    paymode: 'Paypal',
+    price: '$2526',
+  },
+  {
+    id: '#IN5252155',
+    src: './assets/img/users/10.jpg',
+    name: 'Charlie Davieson',
+    mail: 'charliedavieson@gmail.com',
+    createddate: '25-09-2022',
+    duedate: '15-10-2022',
+    status: 'Paid',
+    background: 'success',
+    text: 'success',
+    paymode: 'Card',
+    price: '$999',
+  },
+  {
+    id: '#IN2363363',
+    src: './assets/img/users/11.jpg',
+    name: 'Joseph Samurai',
+    mail: 'josephsamurai@gmail.com',
+    createddate: '12-09-2022',
+    duedate: '20-10-2022',
+    status: 'Overdue',
+    background: 'danger',
+    text: 'danger',
+    paymode: 'Net Banking',
+    price: '$2526',
+  },
+  {
+    id: '#IN125252',
+    src: './assets/img/users/12.jpg',
+    name: 'Kevin Powell',
+    mail: 'kevinpowell@gmail.com',
+    createddate: '12-09-2022',
+    duedate: '20-10-2022',
+    status: 'Due',
+    background: 'warning',
+    text: 'warning',
+    paymode: 'UPI ID',
+    price: '$2526',
+  },
+  {
+    id: '#IN5656',
+    src: './assets/img/users/6.jpg',
+    name: 'Darla Jung',
+    mail: 'darlajung555@gmail.com',
+    createddate: '12-09-2022',
+    duedate: '20-10-2022',
+    status: 'Unpaid',
+    background: 'secondary',
+    text: 'secondary',
+    paymode: 'Paypal',
+    price: '$2526',
+  },
+  {
+    id: '#IN25252',
+    src: './assets/img/users/7.jpg',
+    name: 'Kiara Advensh',
+    mail: 'kiaraadvensh87@gmail.com',
+    createddate: '12-09-2022',
+    duedate: '20-10-2022',
+    status: 'Draft',
+    background: 'primary',
+    text: 'primary',
+    paymode: 'Paypal',
+    price: '$2526',
+  },
+];
 @Component({
   selector: 'app-transection-product-management',
   templateUrl: './transection-product-management.component.html',
@@ -20,4 +152,39 @@ export class TransectionProductManagementComponent {
   ngOnInit() {
   }
 
+  datePickerConfig = {
+    format: 'DD-MM-YY',
+  };
+
+  updateFormat() {
+    this.datePickerConfig = {
+      ...this.datePickerConfig,
+      format: 'DD-MM-YY',
+    };
+  }
+  Payments = DATA;
+
+  click = (id: string) => {
+    const data = this.Payments.filter((x: { id: string }) => {
+      return x.id != id;
+    });
+    this.Payments = data;
+  };
+
+  isSelected = false;
+
+  selectAll(event: Event): void {
+    this.isSelected = (event.target as HTMLInputElement).checked;
+  }
+
+  input = 1;
+  minus() {
+    this.input++;
+  }
+  plus = () => {
+    if (this.input > 0) {
+      this.input--;
+    }
+  };
+
 }