Skip to content

B
BookingMyHrManagement
Commit 32d21e32 by Ooh-Ao
Options

menu borrow

parent 251b8d1c
Showing with 1519 additions and 11 deletions
Web-Manage/src/app/DPU/common/approve-borrow/approve-borrow.component.html 0 → 100644
<app-page-header [title]="'Invoice List'" [activeTitle]="'Invoice'" [title1]="'Invoice List'"></app-page-header>
<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-6">
<div class="xl:col-span-9 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
Manage Invoices
</div>
<div class="flex">
<button type="button" class="ti-btn !py-1 !px-2 !text-[0.75rem] !text-white !font-medium bg-primary"><i class="ri-add-line font-semibold align-middle me-1"></i> Create Invoice</button>
<div class="hs-dropdown ti-dropdown ms-2">
<button aria-label="button" type="button" class="ti-btn ti-btn-secondary ti-btn-sm" aria-expanded="false">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block" href="javascript:void(0);">All Invoices</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block" href="javascript:void(0);">Paid Invoices</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block" href="javascript:void(0);">Pending Invoices</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block" href="javascript:void(0);">Overdue Invoices</a></li>
</ul>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap table-bordered min-w-full">
<thead>
<tr >
<th scope="col" class="text-start">Client</th>
<th scope="col" class="text-start">Invoice ID</th>
<th scope="col" class="text-start">Issued Date</th>
<th scope="col" class="text-start">Amount</th>
<th scope="col" class="text-start">Status</th>
<th scope="col" class="text-start">Due Date</th>
<th scope="col" class="text-start">Action</th>
</tr>
</thead>
<tbody>
@for(invoice of invoices;track invoice.id){
<tr class="invoice-list border border-defaultborder dark:border-defaultborder/10" >
<td>
<div class="flex items-center">
<div class="me-2 leading-none">
<span class="avatar avatar-sm avatar-rounded">
<img src= {{invoice.img}} alt="">
</span>
</div>
<div>
<p class="mb-0 font-semibold">{{invoice.name}}</p>
<p class="mb-0 text-[.6875rem] text-[#8c9097] dark:text-white/50">{{invoice.mail}}</p>
</div>
</div>
</td>
<td>
<a href="javascript:void(0);" class="font-semibold text-primary">
{{invoice.id}}
</a>
</td>
<td>
{{invoice.issueDate}}
</td>
<td>
{{invoice.price}}
</td>
<td>
<span class="badge bg-{{invoice.bg}} text-{{invoice.text}}">{{invoice.status}}</span>
</td>
<td>
{{invoice.dueDate}}
</td>
<td>
<button aria-label="button" type="button" class="ti-btn ti-btn-primary ti-btn-icon ti-btn-sm me-2"><i class="ri-printer-line"></i></button>
<button aria-label="button" type="button" class="ti-btn ti-btn-danger ti-btn-icon ms-1 ti-btn-sm invoice-btn" (click)="click(invoice.id)" ><i class="ri-delete-bin-5-line"></i></button>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<nav aria-label="Page navigation">
<ul class="ti-pagination ltr:float-right rtl:float-left mb-0">
<li class="page-item disabled"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">2</a></li>
<li class="page-item hidden sm:block"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">3</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">Next</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="xl:col-span-3 col-span-12">
<div class="box">
<div class="box-body !p-0">
<div class="p-6 border-b border-dashed dark:border-defaultborder/10 flex items-start">
<div class="svg-icon-background bg-primary/10 me-6">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" class="svg-primary"><path d="M13,16H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2ZM9,10h2a1,1,0,0,0,0-2H9a1,1,0,0,0,0,2Zm12,2H18V3a1,1,0,0,0-.5-.87,1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0A1,1,0,0,0,2,3V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A1,1,0,0,0,21,12ZM5,20a1,1,0,0,1-1-1V4.73L6,5.87a1.08,1.08,0,0,0,1,0l3-1.72,3,1.72a1.08,1.08,0,0,0,1,0l2-1.14V19a3,3,0,0,0,.18,1Zm15-1a1,1,0,0,1-2,0V14h2Zm-7-7H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z"/></svg>
</div>
<div class="flex-grow">
<h6 class="mb-1 text-[0.75rem]">Total Invoices Amount
<span class="badge bg-primary text-white font-semibold ltr:float-right rtl:float-left">
12,345
</span>
</h6>
<div class="pb-0 mt-0">
<div>
<h4 class="text-[1.125rem] font-semibold mb-2">$<span class="count-up" data-count="192"[countUp]="192">192</span>.87K</h4>
<p class="text-[#8c9097] dark:text-white/50 text-[.6875rem] mb-0 leading-none">
<span class="text-success me-1 font-semibold">
<i class="ri-arrow-up-s-line me-1 align-middle"></i>3.25%
</span>
<span>this month</span>
</p>
</div>
</div>
</div>
</div>
<div class="p-6 border-b border-dashed dark:border-defaultborder/10 flex items-start">
<div class="svg-icon-background bg-success/10 !fill-success me-6">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-success"><path d="M11.5,20h-6a1,1,0,0,1-1-1V5a1,1,0,0,1,1-1h5V7a3,3,0,0,0,3,3h3v5a1,1,0,0,0,2,0V9s0,0,0-.06a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19.29.29,0,0,0-.1,0A1.1,1.1,0,0,0,11.56,2H5.5a3,3,0,0,0-3,3V19a3,3,0,0,0,3,3h6a1,1,0,0,0,0-2Zm1-14.59L15.09,8H13.5a1,1,0,0,1-1-1ZM7.5,14h6a1,1,0,0,0,0-2h-6a1,1,0,0,0,0,2Zm4,2h-4a1,1,0,0,0,0,2h4a1,1,0,0,0,0-2Zm-4-6h1a1,1,0,0,0,0-2h-1a1,1,0,0,0,0,2Zm13.71,6.29a1,1,0,0,0-1.42,0l-3.29,3.3-1.29-1.3a1,1,0,0,0-1.42,1.42l2,2a1,1,0,0,0,1.42,0l4-4A1,1,0,0,0,21.21,16.29Z"/></svg>
</div>
<div class="flex-grow">
<h6 class="mb-1 text-[0.75rem]">Total Paid Invoices
<span class="badge bg-success text-white font-semibold ltr:float-right rtl:float-left">
4,176
</span>
</h6>
<div>
<h4 class="text-[1.125rem] font-semibold mb-2">$<span class="count-up" data-count="68.83"[countUp]="68">68.83</span>K</h4>
<p class="text-[#8c9097] dark:text-white/50 text-[.6875rem] mb-0 leading-none">
<span class="text-danger me-1 font-semibold">
<i class="ri-arrow-down-s-line me-1 align-middle"></i>1.16%
</span>
<span>this month</span>
</p>
</div>
</div>
</div>
<div class="flex items-start p-6 border-b dark:border-defaultborder/10 border-dashed">
<div class="svg-icon-background bg-warning/10 !fill-warning me-6">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="svg-warning"><path d="M19,12h-7V5c0-0.6-0.4-1-1-1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9C20,12.4,19.6,12,19,12z M12,19.9c-3.8,0.6-7.4-2.1-7.9-5.9C3.5,10.2,6.2,6.6,10,6.1V13c0,0.6,0.4,1,1,1h6.9C17.5,17.1,15.1,19.5,12,19.9z M15,2c-0.6,0-1,0.4-1,1v6c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1C22,5.1,18.9,2,15,2z M16,8V4.1C18,4.5,19.5,6,19.9,8H16z"/></svg>
</div>
<div class="flex-grow">
<h6 class="mb-1 text-[0.75rem]">Pending Invoices
<span class="badge bg-warning text-white font-semibold ltr:float-right rtl:float-left">
7,064
</span>
</h6>
<div>
<h4 class="text-[1.125rem] font-semibold mb-2">$<span class="count-up" data-count="81.57"[countUp]="81">81.57</span>K</h4>
<p class="text-[#8c9097] dark:text-white/50 text-[.6875rem] mb-0 leading-none">
<span class="text-success me-1 font-semibold">
<i class="ri-arrow-up-s-line me-1 align-middle"></i>0.25%
</span>
<span>this month</span>
</p>
</div>
</div>
</div>
<div class="flex items-start p-6 border-b dark:border-defaultborder/10 border-dashed">
<div class="svg-icon-background !bg-light me-6">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="svg-dark dark:fill-white"><path d="M19,12h-7V5c0-0.6-0.4-1-1-1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9C20,12.4,19.6,12,19,12z M12,19.9c-3.8,0.6-7.4-2.1-7.9-5.9C3.5,10.2,6.2,6.6,10,6.1V13c0,0.6,0.4,1,1,1h6.9C17.5,17.1,15.1,19.5,12,19.9z M15,2c-0.6,0-1,0.4-1,1v6c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1C22,5.1,18.9,2,15,2z M16,8V4.1C18,4.5,19.5,6,19.9,8H16z"/></svg>
</div>
<div class="flex-grow">
<h6 class="mb-1 text-[0.75rem]">Overdue Invoices
<span class="badge bg-light text-default font-semibold ltr:float-right rtl:float-left">
1,105
</span>
</h6>
<div>
<h4 class="text-[1.125rem] font-semibold mb-2">$<span class="count-up" data-count="32.47"[countUp]="33">32.47</span>K</h4>
<p class="text-[#8c9097] dark:text-white/50 text-[.6875rem] mb-0 leading-none">
<span class="text-success me-1 font-semibFold">
<i class="ri-arrow-down-s-line me-1 align-middle"></i>0.46%
</span>
<span>this month</span>
</p>
</div>
</div>
</div>
<div class="p-6">
<p class="text-[.9375rem] font-semibold">Invoice Stats <span class="text-[#8c9097] dark:text-white/50 font-normal">(Last 6 months) :</span></p>
<div id="invoice-list-stats" class="chart-container">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[dataLabels]="chartOptions.dataLabels"
[plotOptions]="chartOptions.plotOptions"
[responsive]="chartOptions.responsive"
[xaxis]="chartOptions.xaxis"
[legend]="chartOptions.legend"
[fill]="chartOptions.fill"
[colors]="chartOptions.colors"
></apx-chart>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End::row-1 -->
Web-Manage/src/app/DPU/common/approve-borrow/approve-borrow.component.ts 0 → 100644
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgApexchartsModule } from 'ng-apexcharts';
import { CountUpModule } from 'ngx-countup';
import { SharedModule } from '../../../shared/shared.module';
const DATA=[
{
img:"./assets/images/faces/11.jpg",
name:'ชนะชัย โอดพิมพ์',
mail:'jsontaylor2416@gmail.com',
id:'#SPK12032901',
issueDate:'25,Nov 2022',
price:'$212.45',
bg:'success/10',
text:'success',
status:'Paid',
dueDate:'25,Dec 2022'
},
{
img:"./assets/images/faces/7.jpg",
name:'Suzika Stallone',
mail:'suzikastallone3214@gmail.com',
id:'#SPK12032912',
issueDate:'13,Nov 2022',
price:'$512.99',
bg:'warning/10',
text:'warning',
status:'Pending',
dueDate:'13,Dec 2022'
},
{
img:"./assets/images/faces/15.jpg",
name:'Roman Killon',
mail:'romankillon143@gmail.com',
id:'#SPK12032945',
issueDate:'30,Nov 2022',
price:'$2199.49',
bg:'danger/10',
text:'danger',
status:'Overdue',
dueDate:'30,Dec 2022'
},
{
img:"./assets/images/faces/12.jpg",
name:'Charlie Davieson',
mail:'charliedavieson@gmail.com',
id:'#SPK12032922',
issueDate:'18,Nov 2022',
price:' $1569.99',
bg:'success/10',
text:'success',
status:'Paid',
dueDate:'18,Dec 2022'
},
{
img:"./assets/images/faces/4.jpg",
name:'Selena Deoyl',
mail:'selenadeoyl114@gmail.com',
id:'#SPK12032932',
issueDate:'18,Nov 2022',
price:' $4,873.99',
bg:'primary/10',
text:'primary',
status:'Due By 1 Day',
dueDate:'18,Dec 2022'
},
{
img:"./assets/images/faces/7.jpg",
name:'Kiara Advensh',
mail:'kiaraadvensh87@gmail.com',
id:'#SPK12032978',
issueDate:'02,Nov 2022',
price:' $1923.99',
bg:'success/10',
text:'success',
status:'Paid',
dueDate:'18,Dec 2022'
},
{
img:"./assets/images/faces/9.jpg",
name:'Joseph Samurai',
mail:'josephsamurai@gmail.com',
id:'#SPK12032919',
issueDate:'15,Nov 2022',
price:'$1,623.99',
bg:'success/10',
text:'success',
status:'Paid',
dueDate:'15,Dec 2022'
},
{
img:"./assets/images/faces/13.jpg",
name:'Kevin Powell',
mail:'kevinpowell@gmail.com',
id:'#SPK12032931',
issueDate:'21,Nov 2022',
price:' $3,423.99',
bg:'warning/10',
text:'warning',
status:'Pending',
dueDate:'21,Dec 2022'
},
{
img:"./assets/images/faces/8.jpg",
name:'Darla Jung',
mail:'darlajung555&@gmail.com',
id:'#SPK12032958',
issueDate:'15,Oct 2022',
price:' $2,982.99',
bg:'success/10',
text:'success',
status:'Paid',
dueDate:'15,Nov 2022'
}
]
@Component({
selector: 'app-approve-borrow',
standalone: true,
imports: [SharedModule,NgApexchartsModule,CountUpModule,CommonModule],
templateUrl: './approve-borrow.component.html',
styleUrl: './approve-borrow.component.scss'
})
export class ApproveBorrowComponent {
click(id:string){
const data = this.invoices.filter((x: { id: string }) => {
return x.id != id;
})
this.invoices = data;
}
invoices=DATA;
chartOptions:any
constructor() {
this.chartOptions = {
series: [
{
name: 'Total',
data: [76, 85, 101, 98, 87, 105],
},
{
name: 'Paid',
data: [35, 41, 36, 26, 45, 48],
},
{
name: 'Pending',
data: [44, 55, 57, 56, 61, 58],
},
{
name: 'Overdue',
data: [13, 27, 31, 29, 35, 25],
},
],
chart: {
type: 'bar',
height: 210,
stacked: true,
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '25%',
endingShape: 'rounded',
},
},
grid: {
borderColor: '#f2f5f7',
},
dataLabels: {
enabled: false,
},
colors: ['#4b9bfa', '#28d193', '#ffbe14', '#f3f6f8'],
stroke: {
show: true,
colors: ['transparent'],
},
xaxis: {
categories: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
labels: {
show: true,
style: {
colors: '#8c9097',
fontSize: '11px',
fontWeight: 600,
cssClass: 'apexcharts-xaxis-label',
},
},
},
yaxis: {
title: {
style: {
color: '#8c9097',
},
},
labels: {
show: true,
style: {
colors: '#8c9097',
fontSize: '11px',
fontWeight: 600,
cssClass: 'apexcharts-xaxis-label',
},
},
},
fill: {
opacity: 1,
},
tooltip: {
y: {
formatter: function (val: string) {
return '$ ' + val + ' thousands';
},
},
},
};
}
}
Web-Manage/src/app/DPU/common/borrow-management/borrow-management.component.html 0 → 100644
<app-page-header [title]="'Invoice List'" [activeTitle]="'Invoice'" [title1]="'Invoice List'"></app-page-header>
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-3 col-span-12">
<div class="box">
<div class="box-body !p-0">
<div class="p-4 grid border-b border-dashed dark:border-defaultborder/10">
<a href="javascript:void(0);" class="hs-dropdown-toggle py-2 px-3 ti-btn bg-primary text-white !font-medium w-full !mb-0" data-hs-overlay="#todo-compose"><i class="ri-add-circle-line !text-[1rem]"></i>Create New Task
</a>
<div id="todo-compose" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold" id="mail-ComposeLabel">Create Task</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor" data-hs-overlay="#todo-compose">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body !overflow-visible px-4">
<div class="grid grid-cols-12 gap-2">
<div class="xl:col-span-12 col-span-12">
<label for="task-name" class="ti-form-label">Task Name</label>
<input type="text" class="form-control w-full" id="task-name" placeholder="Task Name">
</div>
<div class="xl:col-span-12 col-span-12">
<label class="ti-form-label">Assigned To</label>
<ng-select class="!rounded-s-none" name="choices-multiple-remove-button"
id="choices-multiple-remove-button" [multiple]="true">
<ng-option value="Choice 1" selected>Angelina May</ng-option>
<ng-option value="Choice 2">Kiara advain</ng-option>
<ng-option value="Choice 3">Hercules Jhon</ng-option>
<ng-option value="Choice 4">Mayor Kim</ng-option>
</ng-select>
</div>
<div class="xl:col-span-6 col-span-12">
<label class="ti-form-label">Assigned Date</label>
<div class="inline-flex w-full">
<div class="input-group-text text-[#8c9097] dark:text-white/50 !rounded-e-none border border-defaultborder"> <i class="ri-calendar-line"></i> </div>
<input type="text" class="form-control w-full !rounded-s-none" id="addignedDate" placeholder="Choose date and time" mwlFlatpickr
[enableTime]="true"
[convertModelValue]="true"
[dateFormat]="'Y-m-d H:i'">
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label class="ti-form-label">Target Date</label>
<div class="inline-flex w-full">
<div class="input-group-text text-[#8c9097] dark:text-white/50 !rounded-e-none border border-defaultborder"> <i class="ri-calendar-line"></i> </div>
<input type="text" class="form-control w-full !rounded-s-none" id="targetDate" placeholder="Choose date and time" mwlFlatpickr
[enableTime]="true"
[convertModelValue]="true"
[dateFormat]="'Y-m-d H:i'">
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<label class="ti-form-label">Priority</label>
<ng-select class="ti-form-select todo-choice" data-trigger name="choices-single-default" placeholder="Select">
<ng-option value="">Select</ng-option>
<ng-option value="Critical">Critical</ng-option>
<ng-option value="High">High</ng-option>
<ng-option value="Medium">Medium</ng-option>
<ng-option value="Low">Low</ng-option>
</ng-select>
</div>
</div>
</div>
<div class="ti-modal-footer">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
data-hs-overlay="#todo-compose">
Cancel
</button>
<button type="button" class="ti-btn bg-primary text-white !font-medium">Create</button>
</div>
</div>
</div>
</div>
</div>
<div class="p-4 border-b border-dashed dark:border-defaultborder/10">
<div class="input-group">
<input type="text" class="form-control w-full !rounded-md !bg-light border-0 !rounded-e-none" placeholder="Search Task Here" aria-describedby="button-addon2">
<button type="button" aria-label="button" class="ti-btn ti-btn-light !rounded-s-none !mb-0" id="button-addon2"><i class="ri-search-line text-[#8c9097] dark:text-white/50"></i></button>
</div>
</div>
<div class="p-4 task-navigation border-b border-dashed dark:border-defaultborder/10">
<ul class="list-none task-main-nav mb-0">
<li class="!px-0 !pt-0">
<span class="text-[.6875rem] text-[#8c9097] dark:text-white/50 opacity-[0.7] font-semibold">TASKS</span>
</li>
<li class="active">
<a href="javascript:void(0);">
<div class="flex items-center">
<span class="me-2 leading-none">
<i class="ri-task-line align-middle text-[.875rem]"></i>
</span>
<span class="flex-grow whitespace-nowrap">
All Tasks
</span>
<span class="badge bg-success/10 text-success rounded-full">167</span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="flex items-center">
<span class="me-2 leading-none">
<i class="ri-star-line align-middle text-[.875rem]"></i>
</span>
<span class="flex-grow whitespace-nowrap">
Starred
</span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="flex items-center">
<span class="me-2 leading-none">
<i class="ri-delete-bin-5-line align-middle text-[.875rem]"></i>
</span>
<span class="flex-grow whitespace-nowrap">
Trash
</span>
</div>
</a>
</li>
<li class="!px-0 !pt-2">
<span class="text-[.6875rem] text-[#8c9097] dark:text-white/50 op-7 font-semibold">CATEGORIES</span>
</li>
<li>
<a href="javascript:void(0);">
<div class="flex items-center">
<span class="me-2 leading-none">
<i class="ri-price-tag-line align-middle text-[.875rem] font-semibold text-primary"></i>
</span>
<span class="flex-grow whitespace-nowrap">
Personal
</span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="flex items-center">
<span class="me-2 leading-none">
<i class="ri-price-tag-line align-middle text-[.875rem] font-semibold text-secondary"></i>
</span>
<span class="flex-grow whitespace-nowrap">
Work
</span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="flex items-center">
<span class="me-2 leading-none">
<i class="ri-price-tag-line align-middle text-[.875rem] font-semibold text-warning"></i>
</span>
<span class="flex-grow whitespace-nowrap">
Health &amp; Fitness
</span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="flex items-center">
<span class="me-2 leading-none">
<i class="ri-price-tag-line align-middle text-[.875rem] font-semibold text-success"></i>
</span>
<span class="flex-grow whitespace-nowrap">
Daily Goals
</span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="flex items-center">
<span class="me-2 leading-none">
<i class="ri-price-tag-line align-middle text-[.875rem] font-semibold text-danger"></i>
</span>
<span class="flex-grow whitespace-nowrap">
Financial Management
</span>
</div>
</a>
</li>
</ul>
</div>
<div class="p-4 !flex items-center justify-center">
<img src="./assets/images/media/media-66.png" alt="">
</div>
</div>
</div>
</div>
<div class="xl:col-span-9 col-span-12">
<div class="grid grid-cols-12 gap-x-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-body !p-0">
<div class="md:flex px-4 py-6 items-center justify-between">
<div>
<h6 class="font-semibold mb-0 text-[1rem]">Tasks</h6>
</div>
<div class="mt-2 md:mt-0">
<nav class="-mb-0.5 sm:flex sm:space-x-6 rtl:space-x-reverse flex-wrap">
<a class="w-full flex sm:w-auto active hs-tab-active:font-semibold hs-tab-active:text-primary hs-tab-active:bg-primary/10 rounded-md py-2 px-3 text-sm" href="javascript:void(0);" id="alltasks-item" data-hs-tab="#all-tasks" aria-controls="all-tasks">
All Tasks
</a>
<a class="w-full flex sm:w-auto hs-tab-active:font-semibold hs-tab-active:text-primary hs-tab-active:bg-primary/10 rounded-md py-2 px-3 text-sm" href="javascript:void(0);" id="pending-item" data-hs-tab="#pending" aria-controls="pending">
Pending
</a>
<a class="w-full flex sm:w-auto hs-tab-active:font-semibold hs-tab-active:text-primary hs-tab-active:bg-primary/10 rounded-md py-2 px-3 text-sm" href="javascript:void(0);" id="in-progress-item" data-hs-tab="#in-progress" aria-controls="in-progress">
In Progress
</a>
<a class="w-full flex sm:w-auto hs-tab-active:font-semibold hs-tab-active:text-primary hs-tab-active:bg-primary/10 rounded-md py-2 px-3 text-sm" href="javascript:void(0);" id="completed-item" data-hs-tab="#completed" aria-controls="completed">
Completed
</a>
</nav>
</div>
<div class="mt-2 md:mt-0">
<div class="hs-dropdown ti-dropdown">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-light !mb-0" aria-expanded="false">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block" href="javascript:void(0);">Select All</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block" href="javascript:void(0);">Share All</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block" href="javascript:void(0);">Delete All</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<div class="tab-content task-tabs-container">
<div class="tab-pane show active !p-0" id="all-tasks" aria-labelledby="alltasks-item"
role="tabpanel">
<div class="grid grid-cols-12 gap-x-6" id="tasks-container">
<div class="xl:col-span-4 col-span-12 task-card">
<div class="box task-pending-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] opacity-[0.5] me-1 text-[#8c9097] dark:text-white/50"></i></a>New Project Blueprint</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">13,Nov 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">20,Nov 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/2.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/2.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/10.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-warning/10 text-warning block">High</span>
</div>
</div>
</div>
</div>
<div class="box task-inprogress-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] me-1 text-warning"></i></a>Designing New Authentication Pages</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">26,Nov 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">12,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/6.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/15.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-success/10 text-success block">Low</span>
</div>
</div>
</div>
</div>
<div class="box task-completed-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center">
<a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] opacity-[0.5] me-1 text-[#8c9097] dark:text-white/50"></i></a>Developing New Events in Plugin</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">5,Dec 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">10,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/5.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/11.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-primary/10 text-primary block">Medium</span>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 col-span-12 task-card">
<div class="box task-inprogress-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] me-1 text-warning"></i></a>Design New Landing Pages </p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">21,Nov 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">28,Nov 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/1.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/5.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/12.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-primary/10 text-primary block">Medium</span>
</div>
</div>
</div>
</div>
<div class="box task-completed-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] opacity-[0.5] me-1 text-[#8c9097] dark:text-white/50"></i></a>New Plugin Development</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">28,Oct 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">28,Nov 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/3.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/9.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-success/10 text-success block">Low</span>
</div>
</div>
</div>
</div>
<div class="box task-completed-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] opacity-[0.5] me-1 text-[#8c9097] dark:text-white/50"></i></a>Documentation For New Template</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">25,Nov 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">10,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/10.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/11.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-danger/10 text-danger block">Critical</span>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 col-span-12 task-card">
<div class="box task-pending-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center">
<a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] me-1 text-warning"></i></a>Updating Old Ui</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">30,Nov 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">05,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/14.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/13.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/21.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/16.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-warning/10 text-warning block">High</span>
</div>
</div>
</div>
</div>
<div class="box task-completed-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] opacity-[0.5] me-1 text-[#8c9097] dark:text-white/50"></i></a>Designing Of New Ecommerce Pages</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">1,Dec 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">15,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/1.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/3.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/6.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-success/10 text-success block">Low</span>
</div>
</div>
</div>
</div>
<div class="box task-inprogress-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] me-1 text-warning"></i></a>Improving Ui Of Updated Templates</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">4,Dec 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">20,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/9.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/13.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-primary/10 text-primary block">Medium</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane !p-0 hidden" id="pending" aria-labelledby="pending-item"
role="tabpanel">
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-4 col-span-12">
<div class="box task-pending-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] opacity-[0.5] me-1 text-[#8c9097] dark:text-white/50"></i></a>New Project Blueprint</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">13,Nov 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">20,Nov 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/2.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/2.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/10.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-warning/10 text-warning block">High</span>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 col-span-12">
<div class="box task-pending-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center">
<a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] me-1 text-warning"></i></a>Updating Old Ui</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">30,Nov 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">05,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/14.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/13.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/21.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/16.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-warning/10 text-warning block">High</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane !p-0 hidden" id="in-progress" aria-labelledby="inprocess-item"
role="tabpanel">
<div class="grid grid-cols-12 gap-x-6">
<div class="xl:col-span-4 col-span-12">
<div class="box task-inprogress-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] me-1 text-warning"></i></a>Design New Landing Pages </p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">21,Nov 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">28,Nov 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/1.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/5.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/12.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-primary/10 text-primary block">Medium</span>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 col-span-12">
<div class="box task-inprogress-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] me-1 text-warning"></i></a>Designing New Authentication Pages</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">26,Nov 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">12,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/6.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/15.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-success/10 text-success block">Low</span>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 col-span-12">
<div class="box task-inprogress-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] me-1 text-warning"></i></a>Improving Ui Of Updated Templates</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">4,Dec 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">20,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/9.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/13.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-primary/10 text-primary block">Medium</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane !p-0 hidden" id="completed" aria-labelledby="completed-item"
role="tabpanel">
<div class="grid grid-cols-12 gap-x-6">
<div class="xl:col-span-4 col-span-12">
<div class="box task-completed-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] opacity-[0.5] me-1 text-[#8c9097] dark:text-white/50"></i></a>New Plugin Development</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">28,Oct 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">28,Nov 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/3.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/9.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-success/10 text-success block">Low</span>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 col-span-12">
<div class="box task-completed-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] opacity-[0.5] me-1 text-[#8c9097] dark:text-white/50"></i></a>Documentation For New Template</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">25,Nov 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">10,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/10.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/11.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-danger/10 text-danger block">Critical</span>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 col-span-12">
<div class="box task-completed-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center">
<a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] opacity-[0.5] me-1 text-[#8c9097] dark:text-white/50"></i></a>Developing New Events in Plugin</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">5,Dec 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">10,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/5.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/11.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-primary/10 text-primary block">Medium</span>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 col-span-12">
<div class="box task-completed-card">
<div class="box-body">
<div class="flex justify-between flex-wrap gap-2">
<div>
<p class="font-semibold mb-4 flex items-center"><a aria-label="anchor" href="javascript:void(0);"><i class="ri-star-s-fill text-[1rem] opacity-[0.5] me-1 text-[#8c9097] dark:text-white/50"></i></a>Designing Of New Ecommerce Pages</p>
<p class="mb-4">Assigned On : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">1,Dec 2022</span></p>
<p class="mb-4">Target Date : <span class="text-[0.75rem] mb-1 text-[#8c9097] dark:text-white/50">15,Dec 2022</span></p>
<p class="mb-0">Assigned To :
<span class="avatar-list-stacked ms-1">
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/1.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/3.jpg" alt="img">
</span>
<span class="avatar avatar-sm avatar-rounded">
<img src="./assets/images/faces/6.jpg" alt="img">
</span>
</span>
</p>
</div>
<div>
<div class="btn-list">
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-primary me-[0.375rem]"><i class="ri-edit-line"></i></button>
<button type="button" aria-label="button" class="ti-btn ti-btn-sm ti-btn-danger me-0"><i class="ri-delete-bin-line"></i></button>
</div>
<span class="badge bg-success/10 text-success block">Low</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<nav aria-label="Page navigation">
<ul class="ti-pagination ltr:float-right rtl:float-left mb-4">
<li class="page-item disabled"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">Next</a></li>
</ul>
</nav>
</div>
</div>
<!--End::row-1 -->
Web-Manage/src/app/DPU/common/borrow-management/borrow-management.component.ts 0 → 100644
import { Component } from '@angular/core';
import flatpickr from 'flatpickr';
import { SharedModule } from '../../../shared/shared.module';
import { NgSelectModule } from '@ng-select/ng-select';
import { MaterialModuleModule } from '../../../material-module/material-module.module';
import { FlatpickrDefaults, FlatpickrModule } from 'angularx-flatpickr';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-borrow-management',
standalone: true,
imports: [SharedModule, NgSelectModule, MaterialModuleModule, FlatpickrModule, FormsModule, ReactiveFormsModule],
providers: [FlatpickrDefaults],
templateUrl: './borrow-management.component.html',
styleUrl: './borrow-management.component.scss'
})
export class BorrowManagementComponent {
flatpickrOptions: any = {
inline: true,
};
ngOnInit(): void {
this.flatpickrOptions = {
enableTime: true,
noCalendar: true,
dateFormat: 'H:i',
};
flatpickr('#inlinetime', this.flatpickrOptions);
this.flatpickrOptions = {
enableTime: true,
dateFormat: 'Y-m-d H:i', // Specify the format you want
defaultDate: '2023-11-07 14:30', // Set the default/preloaded time (adjust this to your desired time)
};
flatpickr('#pretime', this.flatpickrOptions);
}
}
Web-Manage/src/app/DPU/common/common.module.ts
......@@ -34,6 +34,11 @@ export const admin: Routes = [
path: 'emp/position',
loadComponent: () =>
import('./employee/position/position.component').then((m) => m.PositionComponent),
},
{
path: 'borrow-management',
loadComponent: () =>
import('./borrow-management/borrow-management.component').then((m) => m.BorrowManagementComponent),
}
]
}
......
Web-Manage/src/app/DPU/common/history-borrow/history-borrow.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'app-history-borrow',
standalone: true,
imports: [],
templateUrl: './history-borrow.component.html',
styleUrl: './history-borrow.component.scss'
})
export class HistoryBorrowComponent {
}
Web-Manage/src/app/DPU/common/return-borrow/return-borrow.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'app-return-borrow',
standalone: true,
imports: [],
templateUrl: './return-borrow.component.html',
styleUrl: './return-borrow.component.scss'
})
export class ReturnBorrowComponent {
}
Web-Manage/src/app/DPU/models/borrow-transactions.ts 0 → 100644
import { TranslateService } from "@ngx-translate/core";
import { BaseModel } from "./base.model";
export class BorrowTransactionsModel extends BaseModel {
borrow_id: string;
pe_id: string;
quantity_borrowed: number;
status: string;
returned_date?: string;
constructor(data?: Partial<BorrowTransactionsModel>, translateService?: TranslateService) {
super(data, translateService);
this.borrow_id = data?.borrow_id ?? '';
this.pe_id = data?.pe_id ?? '';
this.quantity_borrowed = data?.quantity_borrowed ?? 0;
this.status = data?.status ?? '';
this.returned_date = data?.returned_date ?? null;
}
}
Web-Manage/src/app/DPU/models/project-equipments.ts 0 → 100644
import { TranslateService } from "@ngx-translate/core";
import { BaseModel } from "./base.model";
export class ProjectEquipmentModel extends BaseModel {
pe_id: string;
project_id: string;
equipment_id?: string;
quantity_in_project: number;
created_at: string;
updated_at: string;
constructor(data?: Partial<ProjectEquipmentModel>, translateService?: TranslateService) {
super(data, translateService);
this.pe_id = data?.pe_id ?? '';
this.project_id = data?.project_id ?? '';
this.equipment_id = data?.equipment_id ?? '';
this.quantity_in_project = data?.quantity_in_project ?? 0;
this.created_at = data?.created_at ?? new Date().toISOString();
this.updated_at = data?.updated_at ?? new Date().toISOString();
}
}
Web-Manage/src/app/DPU/services/borrow-transactions.service.ts 0 → 100644
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { map, tap, switchMap, filter, reduce } from "rxjs/operators";
import { ProjectEquipmentModel } from '../models/project-equipments';
import { BorrowTransactionsModel } from '../models/borrow-transactions';
@Injectable({
providedIn: 'root'
})
export class BorrowTransactionsService {
apiBaseUrl = environment.baseUrl + "/borrow-transactions";
constructor(
private http: HttpClient
) { }
getById(id: string) {
return this.http
.get<BorrowTransactionsModel>(this.apiBaseUrl + "/" + id)
.pipe(map((e) => new BorrowTransactionsModel(e)));
}
getLists() {
return this.http
.get<BorrowTransactionsModel[]>(this.apiBaseUrl)
.pipe(
map((e) => e.map((e) => new BorrowTransactionsModel(e)))
);
}
save(body: BorrowTransactionsModel) {
return this.http.post<{
"message": string,
"user": BorrowTransactionsModel
}>(this.apiBaseUrl, new BorrowTransactionsModel(body));
}
update(body: BorrowTransactionsModel) {
return this.http.put<{
"message": string,
"user": BorrowTransactionsModel
}>(this.apiBaseUrl + "/" + body.borrow_id, new BorrowTransactionsModel(body));
}
delete(body: BorrowTransactionsModel) {
return this.http.delete<{
"message": string,
"user": BorrowTransactionsModel
}>(this.apiBaseUrl + "/" + body.borrow_id);
}
}
}
Web-Manage/src/app/DPU/services/project-equipments.service.ts 0 → 100644
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { map, tap, switchMap, filter, reduce } from "rxjs/operators";
import { ProjectEquipmentModel } from '../models/project-equipments';
@Injectable({
providedIn: 'root'
})
export class ProjectEquipmentService {
apiBaseUrl = environment.baseUrl + "/project-equipments";
constructor(
private http: HttpClient
) { }
getById(id: string) {
return this.http
.get<ProjectEquipmentModel>(this.apiBaseUrl + "/" + id)
.pipe(map((e) => new ProjectEquipmentModel(e)));
}
getLists() {
return this.http
.get<ProjectEquipmentModel[]>(this.apiBaseUrl)
.pipe(
map((e) => e.map((e) => new ProjectEquipmentModel(e)))
);
}
save(body: ProjectEquipmentModel) {
return this.http.post<{
"message": string,
"user": ProjectEquipmentModel
}>(this.apiBaseUrl, new ProjectEquipmentModel(body));
}
update(body: ProjectEquipmentModel) {
return this.http.put<{
"message": string,
"user": ProjectEquipmentModel
}>(this.apiBaseUrl + "/" + body.equipment_id, new ProjectEquipmentModel(body));
}
delete(body: ProjectEquipmentModel) {
return this.http.delete<{
"message": string,
"user": ProjectEquipmentModel
}>(this.apiBaseUrl + "/" + body.equipment_id);
}
}
Web-Manage/src/app/shared/services/nav.service.ts
......@@ -135,21 +135,22 @@ export class NavService implements OnDestroy {
},
],
}, {
path: '/admin/borrow-management',
title: 'การเบิกคืนอุปกรณ์',
type: 'sub',
type: 'link',
selected: false,
Menusub: true,
active: false,
children: [
{ path: '/admin/borrow-management', title: 'การจัดการการเบิก', type: 'link' },
{ path: '/admin/approve-borrow', title: 'อนุมัติการเบิก', type: 'link' },
{ path: '/admin/return-borrow', title: 'อนุมัติการคืน', type: 'link' },
{
path: '/admin/history-product',
title: 'ประวัติการทำรายการ',
type: 'link',
},
],
// children: [
// { path: '/admin/borrow-management', title: 'การจัดการการเบิก', type: 'link' },
// { path: '/admin/approve-borrow', title: 'อนุมัติการเบิก', type: 'link' },
// { path: '/admin/return-borrow', title: 'อนุมัติการคืน', type: 'link' },
// {
// path: '/admin/history-product',
// title: 'ประวัติการทำรายการ',
// type: 'link',
// },
// ],
}]
}
......
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