Skip to content

B
BookingMyHrManagement
Commit 9df7d108 by Ooh-Ao
Options

หน้าจอ

parent 7465b46c
Showing with 762 additions and 123 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="relative max-w-xs">
<label for="hs-table-search" class="sr-only">Search</label>
<div <div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-4 rtl:pl-4" class="sm:flex sm:space-x-3 space-y-3 sm:space-y-0 rtl:space-x-reverse"
> >
<i class="ti ti-search"></i> <div class="relative max-w-xs">
</div> <label for="hs-table-search" class="sr-only">Search</label>
<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>
</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>
</div>
<div class="col-span-12 lg:col-span-4">
<div <div
class="flex space-x-3 rtl:space-x-reverse lg:justify-end team-right" class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-4 rtl:pl-4"
>
<!-- <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"> <i class="ri-search-line text-gray-500 dark:text-white/70"></i>
{{ option.label }}
</ng-option>
</ng-select>
</ng-option>
</ng-select> -->
</div>
</div> </div>
</div> </div>
</div> <button
</div> aria-label="button"
</div> type="button"
</div> 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"
<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"
> >
<div class="table-header-group"> <i class="ri-refresh-line leading-none text-lg"></i>
<div class="table-row"> </button>
<div <button
class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase" aria-label="button"
type="button"
id="delete-btn"
class="ti-btn px-3 py-2 ti-btn-danger m-0"
> >
Name <i class="ri-delete-bin-7-line leading-none text-lg"></i>
</button>
</div> </div>
<div <div
class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase" class="sm:space-x-3 sm:flex space-y-3 sm:space-y-0 rtl:space-x-reverse"
> >
Oder ID <div class="inline-flex">
</div>
<div <div
class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase" 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"
> >
Address Project <span class="text-sm text-gray-500 dark:text-white/70"
</div> ><i class="ri ri-calendar-line"></i
<div ></span>
class="table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase" </div>
<dp-date-picker
class="ti-form-input joining-date input-date-picker flatpickr-input date active"
placeholder="Choose date"
[config]="datePickerConfig"
required="true"
> >
Status </dp-date-picker>
</div> </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 <div
class="table-cell px-6 py-3 text-end text-xs font-medium text-gray-500 uppercase" 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
> >
Action <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>
</div>
<div class="table-responsive">
<div <div
class="table-row-group divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-black/20" class="mt-5 table-bordered rounded-sm ti-custom-table-head overflow-scroll"
> >
<div class="table-row"> <table
<div class="ti-custom-table ti-custom-table-head edit-table whitespace-nowrap text-center"
class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200"
> >
John Brown <thead class="bg-gray-50 dark:bg-black/20">
</div> <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 <div
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" class="flex items-center h-5 invoice-checkbox justify-center"
> >
#52225 <input
</div> id="invoice-check-1"
<div type="checkbox"
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" [checked]="isSelected"
class="border-gray-500 ti-form-checkbox"
/>
<label for="invoice-check-1" class="sr-only"
>Checkbox</label
> >
New York No. 1 Lake Park
</div> </div>
</td>
<td>{{ payment.id }}</td>
<td>
<div <div
class="badge bg-warning/10 leading-none rounded-md text-warning" class="flex space-x-3 rtl:space-x-reverse text-start truncate"
> >
Pending <img
</div> class="avatar avatar-sm rounded-sm"
<div src="{{ payment.src }}"
class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium" 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 <a
routerLink="/page/ecommerce/borrow" href="javascript:void(0);"
class="text-primary hover:text-primary" 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"
>Details</a
> >
</div> <i class="ti ti-send"></i>
</div> <span
<div class="table-row"> 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"
<div role="tooltip"
class="table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200"
> >
Jim Green Send
</span>
</a>
</div> </div>
<div <div class="hs-tooltip ti-main-tooltip">
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" <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"
> >
#52400 <i class="ti ti-pencil"></i>
</div> <span
<div 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"
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" role="tooltip"
> >
London No. 1 Lake Park Edit
</span>
</a>
</div> </div>
<div <div class="hs-tooltip ti-main-tooltip">
class="badge bg-success/10 leading-none rounded-md text-success" <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"
> >
Approve Delete
</span>
</a>
</div> </div>
<div </td>
class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium" </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 <a
class="text-primary hover:text-primary" 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);" href="javascript:void(0);"
>Details</a >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 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>
<div </div>
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" <!-- End::row-1 -->
<!-- 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"
>
<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"
> >
#52100 <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> </div>
<div <input
class="table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200" 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="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"
> >
Sidney No. 1 Lake Park </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>
<div </div>
class="badge bg-danger/10 leading-none rounded-md text-danger" <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>
<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>
</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
> >
Not Approve
</div> </div>
<div <div class="py-5">
class="table-cell px-6 py-4 whitespace-nowrap text-end text-sm font-medium" <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 <a
class="text-primary hover:text-primary"
href="javascript:void(0);" href="javascript:void(0);"
>Details</a 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"
>
<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"
>
<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"
> >
<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> </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> </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