Skip to content

B
BookingMyHrManagement
Commit 9df7d108 by Ooh-Ao
Options

หน้าจอ

parent 7465b46c
Showing with 797 additions and 158 deletions
Synto-Angular/src/app/admin/admin.module.ts
...@@ -14,6 +14,8 @@ import { SharedModule } from '../shared/sharedmodule'; ...@@ -14,6 +14,8 @@ import { SharedModule } from '../shared/sharedmodule';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ApproveBorrowComponent } from './approve-borrow/approve-borrow.component'; import { ApproveBorrowComponent } from './approve-borrow/approve-borrow.component';
import { ReturnBorrowComponent } from './return-borrow/return-borrow.component'; import { ReturnBorrowComponent } from './return-borrow/return-borrow.component';
import { NgSelectModule } from '@ng-select/ng-select';
import { DpDatePickerModule } from 'ng2-date-picker';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -22,6 +24,8 @@ import { ReturnBorrowComponent } from './return-borrow/return-borrow.component'; ...@@ -22,6 +24,8 @@ import { ReturnBorrowComponent } from './return-borrow/return-borrow.component';
SharedModule, SharedModule,
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
NgSelectModule,
DpDatePickerModule
], ],
declarations: [AdminComponent, UserManagementComponent, ProjectManagementComponent, ProductManagementComponent, ProjectEmployeeManagementComponent, ProjectProductManagementComponent, HomeAdminComponent, TransectionProductManagementComponent, HistoryProductComponent, ApproveBorrowComponent, ReturnBorrowComponent] 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="grid grid-cols-12 gap-6">
<div class="col-span-12"> <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="box-body">
<div class="lg:grid grid-cols-12 gap-6 space-y-6 lg:space-y-0"> <div class="xl:flex xl:justify-between space-y-3 xl:space-y-0">
<div class="col-span-12 lg:col-span-4"> <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"> <div class="relative max-w-xs">
<label for="hs-table-search" class="sr-only">Search</label> <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 <input
type="text" type="text"
name="hs-table-search" name="hs-table-search"
id="hs-table-search" id="hs-table-search"
class="p-2 ltr:pr-10 rtl:pl-10 ti-form-input" class="px-3 py-2 ltr:pr-10 rtl:pl-10 ti-form-input invoice-search"
placeholder="Enter Your Text" 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> </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>
<div class="col-span-12 lg:col-span-4"> <div
<div class="text-center max-w-xs lg:mx-auto"> class="sm:space-x-3 sm:flex space-y-3 sm:space-y-0 rtl:space-x-reverse"
<nav >
class="flex justify-center space-x-3 rtl:space-x-reverse" <div class="inline-flex">
aria-label="Tabs" <div
role="tablist" 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"
></nav> >
<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> </div>
<div class="col-span-12 lg:col-span-4"> </div>
<div <div class="table-responsive">
class="flex space-x-3 rtl:space-x-reverse lg:justify-end team-right" <div
> class="mt-5 table-bordered rounded-sm ti-custom-table-head overflow-scroll"
<!-- <ng-select
class="ti-form-select"
name="team-choice"
id="team-choice"
placeholder="Status"
[(ngModel)]="selectedStatus"
> >
<ng-option *ngFor="let option of statusOptions" [value]="option.value"> <table
{{ option.label }} class="ti-custom-table ti-custom-table-head edit-table whitespace-nowrap text-center"
</ng-option> >
</ng-select> <thead class="bg-gray-50 dark:bg-black/20">
</ng-option> <tr class="cart-box">
</ng-select> --> <th scope="col" class="dark:text-white/70">
</div> <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>
</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>
</div> </div>
</div> </div>
<!-- End::row-1 -->
<div class="box-body p-0"> <!-- Start::Invoice Modal-->
<div class="-m-1.5 overflow-auto"> <div
<div class="p-1.5 min-w-full inline-block align-middle"> id="invoice-modal"
<div class="overflow-auto"> class="hs-overlay hidden ti-modal"
<div *ngFor="let payment of Payments"
class="table border-collapse table-auto w-full divide-y divide-gray-200 dark:divide-white/10" >
<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"> <span class="sr-only">Close</span>
<div class="table-row"> <svg
<div class="w-3.5 h-3.5"
class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase" width="8"
> height="8"
Name viewBox="0 0 8 8"
</div> fill="none"
<div xmlns="http://www.w3.org/2000/svg"
class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase" >
> <path
Oder ID 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"
</div> fill="currentColor"
<div />
class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase" </svg>
> </button>
Address Project </div>
</div> <div class="ti-modal-body p-6">
<div <div class="flex flex-col md:flex-row space-y-6 justify-between mb-5">
class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase" <div class="space-y-2">
> <div class="mb-2">
Status <img
</div> src="./assets/img/brand-logos/desktop-logo.png"
<div alt="logo"
class="table-cell px-6 py-3 text-end text-xs font-medium text-gray-500 uppercase" class="flex dark:hidden"
> />
Action <img
</div> src="./assets/img/brand-logos/desktop-dark.png"
alt="logo"
class="hidden dark:flex"
/>
</div> </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>
<div <div class="space-y-2 text-end inline-block">
class="table-row-group divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-black/20" <h3 class="text-2xl text-primary uppercase font-semibold">
> Invoice
<div class="table-row"> </h3>
<div <input
class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200" type="text"
> class="invoice-id ti-form-input md:w-72 inline-block text-start"
John Brown placeholder="Invoice Id"
</div> [value]="payment.id"
<div />
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200"
> <dp-date-picker
#52225 class="ti-form-input joining-date flatpickr-input date active"
</div> placeholder="Created date"
<div [config]="datePickerConfig"
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" required="true"
> >
New York No. 1 Lake Park </dp-date-picker>
</div>
<div <dp-date-picker
class="badge bg-warning/10 leading-none rounded-md text-warning" class="ti-form-input joining-date flatpickr-input date active"
> placeholder="Due date"
Pending [config]="datePickerConfig"
</div> required="true"
<div >
class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium" </dp-date-picker>
> </div>
<a </div>
routerLink="/page/ecommerce/borrow" <hr class="pb-5 dark:border-t-white/10" />
class="text-primary hover:text-primary" <div class="grid grid-cols-12 gap-6 mb-5">
>Details</a <div class="lg:col-span-6 col-span-12">
> <div class="space-y-3 inline-block">
</div> <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>
<div class="table-row"> </div>
<div <div class="lg:col-span-6 col-span-12 text-end">
class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200" <div class="space-y-3 inline-block">
> <h3 class="font-semibold text-lg">Shipped To :</h3>
Jim Green <input
</div> type="text"
<div class="company-name ti-form-input md:w-72 text-end"
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" placeholder="Company Name"
> [value]="payment.name"
#52400 />
</div> <input
<div type="text"
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" class="company-address ti-form-input md:w-72 text-end"
> placeholder="Company Address"
London No. 1 Lake Park [value]="payment.address"
</div> />
<div <input
class="badge bg-success/10 leading-none rounded-md text-success" type="text"
> class="company-address1 ti-form-input md:w-72 text-end"
Approve placeholder="Complete Address"
</div> [value]="payment.mail"
<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>
<div class="table-row"> </div>
<div </div>
class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200" <div class="sm:flex space-y-4 justify-between">
> <h5 class="font-semibold text-lg my-auto">Invoic Items</h5>
Joe Black <a
</div> href="javascript:void(0);"
<div class="invoice-add-item ti-btn ti-btn-primary m-0 py-2"
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" ><i class="ri ri-add-line"></i>Add Item Deatils</a
> >
#52100 </div>
</div> <div class="py-5">
<div <div class="overflow-auto lg:overflow-hidden">
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" <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 <tr class="!border-b-0">
</div> <td colspan="3" class="!p-1"></td>
<div <td class="!pb-1">Sub-Total</td>
class="badge bg-danger/10 leading-none rounded-md text-danger" <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 <ng-option value="0">Status</ng-option>
</div> <ng-option value="0">paid</ng-option>
<div <ng-option value="0">Due</ng-option>
class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium" <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 <ng-option value="0">Payment Type</ng-option>
class="text-primary hover:text-primary" <ng-option value="0">Debit/Credit Card</ng-option>
href="javascript:void(0);" <ng-option value="0">Net Banking</ng-option>
>Details</a <ng-option value="0">Paypal</ng-option>
> <ng-option value="0">Upi</ng-option>
</div> </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> </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> </div>
</div> </div>
<!-- End::Invoice Modal-->
Synto-Angular/src/app/admin/transection-product-management/transection-product-management.component.ts
import { Component } from '@angular/core'; 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({ @Component({
selector: 'app-transection-product-management', selector: 'app-transection-product-management',
templateUrl: './transection-product-management.component.html', templateUrl: './transection-product-management.component.html',
...@@ -20,4 +152,39 @@ export class TransectionProductManagementComponent { ...@@ -20,4 +152,39 @@ export class TransectionProductManagementComponent {
ngOnInit() { 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--;
}
};
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment