Skip to content

B
BookingMyHrManagement
Commit 5e6ea45f by DESKTOP-E0VCCBD\zedan
Options

update

parent 3f575b1c
Showing with 2389 additions and 966 deletions
Web-Manage/src/app/DPU/common/home-common/home-common.component.html
<app-page-header [title]="'Analytics'" [activeTitle]="'Dashboards'" [title1]="'Analytics'"></app-page-header> <app-page-header
[title]="'Dashboards'"
[activeTitle]="'Dashboards'"
[title1]="'Dashboards'"
></app-page-header>
<div class="grid grid-cols-12 gap-x-6"> <div class="grid grid-cols-12 gap-x-6">
<div class="xl:col-span-7 col-span-12"> <div class="xxxl:col-span-6 col-span-12">
<div class="grid grid-cols-12 gap-x-6"> <div class="grid grid-cols-12 gap-x-6">
<div class="xl:col-span-4 lg:col-span-4 md:col-span-4 sm:col-span-6 col-span-12"> <div class="xxl:col-span-4 md:col-span-6 col-span-12">
<div class="box"> <div class="box">
<div class="box-body"> <div class="box-body !pb-[0.9rem]">
<div class="flex flex-wrap items-center justify-between"> <div class="flex items-start">
<div> <div class="me-4 gap-0">
<h6 class="font-semibold mb-3 text-[1rem]">Total Users</h6> <span class="avatar avatar-md p-2 bg-primary">
<span class="text-[1.5625rem] font-semibold">9,789</span> <svg
<span class="block text-success text-[0.75rem]">+0.892 <i class="ti ti-trending-up ms-1"></i></span> class="svg-white"
</div> xmlns="http://www.w3.org/2000/svg"
<div id="analytics-users"> height="24px"
<apx-chart [series]="chartOptions1.series" [chart]="chartOptions1.chart" viewBox="0 0 24 24"
[xaxis]="chartOptions1.xaxis" [dataLabels]="chartOptions1.dataLabels" width="24px"
[colors]="chartOptions1.colors" [fill]="chartOptions1.fill" fill="#000000"
[markers]="chartOptions1.markers" [stroke]="chartOptions1.stroke"></apx-chart> >
</div> <path d="M0 0h24v24H0V0z" fill="none" />
</div> <path
d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
/>
</svg>
</span>
</div>
<div class="flex-grow">
<div class="flex mb-1 items-start justify-between">
<h5 class="font-semibold mb-0 leading-none text-[1.25rem]">
256
</h5>
<div class="text-danger font-semibold">
<i class="ri-arrow-down-s-fill me-1 align-middle"></i>-1.05%
</div>
</div> </div>
<p
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
จำนวนพนักงานทั้งหมด
</p>
</div>
</div> </div>
</div>
</div> </div>
<div class="xl:col-span-4 lg:col-span-4 md:col-span-4 sm:col-span-6 col-span-12"> </div>
<div class="box"> <div class="xxl:col-span-4 md:col-span-6 col-span-12">
<div class="box-body"> <div class="box">
<div class="flex items-center justify-between"> <div class="box-body !pb-[0.9rem]">
<div> <div class="flex items-start">
<h6 class="font-semibold mb-3 text-[1rem]">Live Visitors</h6> <div class="me-4">
<span class="text-[1.5625rem] font-semibold">12,240</span> <span class="avatar avatar-md p-2 bg-secondary">
<span class="block text-danger text-[0.75rem]">+0.59<i class="ti ti-trending-down ms-1 inline-flex"></i></span> <svg
</div> class="svg-white"
<div> xmlns="http://www.w3.org/2000/svg"
<span class="avatar avatar-md bg-secondary text-white"> enable-background="new 0 0 24 24"
<i class="ri-user-3-line"></i> height="24px"
</span> viewBox="0 0 24 24"
</div> width="24px"
</div> fill="#000000"
>
<rect fill="none" height="24" width="24" />
<g>
<path
d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"
/>
</g>
</svg>
</span>
</div>
<div class="flex-grow">
<div class="flex mb-1 items-start justify-between">
<h5 class="font-semibold mb-0 leading-none text-[1.25rem]">
4,026
</h5>
<div class="text-success font-semibold">
<i class="ri-arrow-up-s-fill me-1 align-middle"></i>+0.40%
</div>
</div> </div>
<p
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
จำนวนโปรเจคทั้งหมด
</p>
</div>
</div> </div>
</div>
</div> </div>
<div class="xl:col-span-4 lg:col-span-4 md:col-span-4 sm:col-span-6 col-span-12"> </div>
<div class="box overflow-hidden"> <div class="xxl:col-span-4 md:col-span-6 col-span-12">
<div class="box-body mb-3"> <div class="box">
<div class="flex items-center justify-between"> <div class="box-body !pb-[0.9rem]">
<div> <div class="flex items-start">
<h6 class="font-semibold text-primary mb-4 text-[1rem]">Bounce Rate</h6> <div class="me-3">
<span class="text-[1.5625rem] flex items-center">77.3% <span class=" text-[0.75rem] text-warning opacity-[0.7] ms-2">+0.59<i class="ti ti-arrow-big-up-line ms-1 inline-flex"></i></span></span> <span class="avatar avatar-md p-2 bg-warning">
</div> <svg
</div> class="svg-white"
</div> xmlns="http://www.w3.org/2000/svg"
<div id="analytics-bouncerate" class="mt-1 w-full"> height="24px"
<apx-chart [series]="chartOptions2.series" [chart]="chartOptions2.chart" viewBox="0 0 24 24"
[xaxis]="chartOptions2.xaxis" [dataLabels]="chartOptions2.dataLabels" width="24px"
[colors]="chartOptions2.colors" [fill]="chartOptions2.fill" fill="#000000"
[markers]="chartOptions2.markers" [stroke]="chartOptions2.stroke"></apx-chart> >
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M9.5,7h7C16.776123,7,17,6.776123,17,6.5S16.776123,6,16.5,6h-7C9.223877,6,9,6.223877,9,6.5S9.223877,7,9.5,7z M7.5,11h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,10,16.5,10h-9C7.223877,10,7,10.223877,7,10.5S7.223877,11,7.5,11z M20.5,2H3.4993896C3.2234497,2.0001831,2.9998169,2.223999,3,2.5v19c-0.000061,0.1124268,0.0378418,0.2216187,0.1074829,0.3098755c0.1710205,0.2167358,0.4853516,0.2537231,0.7020874,0.0827026l2.8652344-2.2617188l2.3583984,1.7695312c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0L12,19.625l2.3671875,1.7753906c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0l2.3583984-1.7695312l2.8652344,2.2617188C20.2785034,21.9623413,20.3876343,22.0002441,20.5,22h0.0006104C20.7766113,21.9998169,21.0001831,21.7759399,21,21.5V2.4993896C20.9998169,2.2234497,20.776001,1.9998169,20.5,2z M20,20.46875l-2.3574219-1.8613281c-0.0882568-0.069519-0.1972656-0.1072998-0.3095703-0.1074219c-0.1080933-0.000061-0.2132568,0.0349121-0.2998047,0.0996094L14.6669922,20.375l-2.3671875-1.7753906c-0.1777954-0.1328125-0.421814-0.1328125-0.5996094,0L9.3330078,20.375l-2.3662109-1.7753906c-0.1817017-0.1348877-0.4311523-0.1317139-0.609375,0.0078125L4,20.46875V3h16V20.46875z M7.5,15h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,14,16.5,14h-9C7.223877,14,7,14.223877,7,14.5S7.223877,15,7.5,15z"
/>
</svg>
</span>
</div>
<div class="flex-grow">
<div class="flex mb-1 items-start justify-between">
<h5 class="font-semibold mb-0 leading-none text-[1.25rem]">
48
</h5>
<div class="text-success font-semibold">
<i class="ri-arrow-up-s-fill me-1 align-middle"></i>+0.82%
</div>
</div> </div>
<p
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
จำนวนรายการอุปการ์ทั้งหมด
</p>
</div>
</div> </div>
</div>
</div> </div>
<div class="xl:col-span-12 col-span-12"> </div>
<div class="box">
<div class="box-header justify-between"> <div class="col-span-12">
<div class="box-title"> <div class="box overflow-hidden">
Audience Report <div class="box-header justify-between items-center flex-wrap gap-4">
</div> <div class="box-title">จำนวนการยืมอุปกรณ์</div>
<div> <div class="flex gap-4 flex-wrap">
<button type="button" class="ti-btn ti-btn-primary ti-btn-wave !font-medium"><i class="ri-share-forward-line me-1 align-middle inline-block"></i>Export</button>
</div> <!-- Select: เดือน -->
</div> <select>
<div class="box-body"> <option value="">ALL</option>
<div id="audienceReport"> <option value="">มกราคม</option>
<apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart" <option value="">กุมภาพันธ์</option>
[yaxis]="chartOptions.yaxis" [xaxis]="chartOptions.xaxis" <option value="">มีนาคม</option>
[labels]="chartOptions.labels" [stroke]="chartOptions.stroke" <option value="">เมษายน</option>
[plotOptions]="chartOptions.plotOptions" [markers]="chartOptions.markers" </select>
[fill]="chartOptions.fill" [tooltip]="chartOptions.tooltip" [legend]="chartOptions.legend" [colors]="chartOptions.colors"></apx-chart>
</div> <!-- Select: โปรเจค -->
</div> <select>
<option value="">โปรเจคทั้งหมด</option>
<option value="">DPU001</option>
<option value="">DPU002</option>
<option value="">DPU003</option>
<option value="">DPU004</option>
</select>
<div class="inline-flex rounded-md shadow-sm" role="group" aria-label="Basic example">
<button type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">1M</button>
<button type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">3M</button>
<button type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">6M</button>
<button type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary-full !rounded-s-none !text-white">1Y</button>
</div>
</div> </div>
</div> </div>
<div class="xxl:col-span-6 xl:col-span-12 col-span-12">
<div class="xl:col-span-12 col-span-12">
<div class="box"> <div class="box">
<div class="box-header justify-between"> <div class="box-body">
<div class="box-title"> <div id="audienceReport">
Top Countries Sessions vs Bounce Rate <apx-chart
</div> [series]="chartOptions.series"
<div class="hs-dropdown ti-dropdown"> [chart]="chartOptions.chart"
<a href="javascript:void(0);" class="px-2 font-normal text-[0.75rem] text-[#8c9097] dark:text-white/50" [yaxis]="chartOptions.yaxis"
aria-expanded="false"> [xaxis]="chartOptions.xaxis"
View All<i class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i> [labels]="chartOptions.labels"
</a> [stroke]="chartOptions.stroke"
<ul class="hs-dropdown-menu ti-dropdown-menu hidden" role="menu"> [plotOptions]="chartOptions.plotOptions"
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block" [markers]="chartOptions.markers"
href="javascript:void(0);">Today</a></li> [fill]="chartOptions.fill"
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block" [tooltip]="chartOptions.tooltip"
href="javascript:void(0);">This Week</a></li> [legend]="chartOptions.legend"
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block" [colors]="chartOptions.colors"
href="javascript:void(0);">Last Week</a></li> ></apx-chart>
</ul>
</div>
</div>
<div class="box-body">
<div id="country-sessions">
<apx-chart [series]="chartOptions3.series" [chart]="chartOptions3.chart"
[yaxis]="chartOptions3.yaxis" [xaxis]="chartOptions3.xaxis"
[labels]="chartOptions3.labels" [stroke]="chartOptions3.stroke"
[plotOptions]="chartOptions3.plotOptions" [markers]="chartOptions3.markers"
[fill]="chartOptions3.fill" [tooltip]="chartOptions3.tooltip" [legend]="chartOptions3.legend" [colors]="chartOptions3.colors"></apx-chart>
</div>
</div>
</div>
</div>
<div class="xxl:col-span-6 xl:col-span-12 col-span-12">
<div class="box overflow-hidden">
<div class="box-header justify-between">
<div class="box-title">
Traffic Sources
</div>
<div class="hs-dropdown ti-dropdown">
<a href="javascript:void(0);" class="px-2 font-normal text-[0.75rem] text-[#8c9097] dark:text-white/50"
aria-expanded="false">
View All<i class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</a>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden" role="menu">
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Today</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">This Week</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Last Week</a></li>
</ul>
</div>
</div>
<div class="box-body !p-0">
<div class="table-responsive">
<table class="table table-hover whitespace-nowrap min-w-full">
<thead>
<tr>
<th scope="col" class="text-start">Browser</th>
<th scope="col" class="text-start">Sessions</th>
<th scope="col" class="text-start">Traffic</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-google-fill text-[1.125rem] text-primary"></i>
</span>
<div class="font-semibold">Google</div>
</div>
</td>
<td>
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>23,379</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[78%]" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-safari-line text-[1.125rem] text-secondary"></i>
</span>
<div class="font-semibold">Safari</div>
</div>
</td>
<td>
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>78,973</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[32%]" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-opera-fill text-[1.125rem] text-success"></i>
</span>
<div class="font-semibold">Opera</div>
</div>
</td>
<td>
<span><i class="ri-arrow-down-s-fill me-1 text-danger align-middle text-[1.125rem]"></i>12,457</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[21%]" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-edge-fill text-[1.125rem] text-info"></i>
</span>
<div class="font-semibold">Edge</div>
</div>
</td>
<td>
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>8,570</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-1/4" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-firefox-fill text-[1.125rem] text-warning"></i>
</span>
<div class="font-semibold">Firefox</div>
</div>
</td>
<td>
<span><i class="ri-arrow-down-s-fill me-1 text-danger align-middle text-[1.125rem]"></i>6,135</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[35%]" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td class="border-bottom-0">
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-ubuntu-fill text-[1.125rem] text-danger"></i>
</span>
<div class="font-semibold">Ubuntu</div>
</div>
</td>
<td class="border-bottom-0">
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>4,789</span>
</td>
<td class="border-bottom-0">
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[12%]" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="xl:col-span-5 col-span-12"> </div>
<div class="grid grid-cols-12 gap-x-6"> </div>
<div class="xxl:col-span-5 cxl:ol-span-12 col-span-12"> <div class="grid grid-cols-12 gap-x-6">
<div class="box custom-card upgrade-card text-white"> <!-- Candidates (Left Half) -->
<div class="box-body text-white"> <div class="xxl:col-span-6 col-span-12">
<span class="avatar avatar-xxl !border-0"> <div class="box overflow-hidden">
<img src="./assets/images/media/media-84.png" alt=""> <div class="box-header justify-between">
</span> <div class="box-title">อุปกรณ์ที่ยืม</div>
<div class="upgrade-card-content"> <div>
<span class="opacity-[0.7] font-normal mb-1 !text-white">Plan is expiring !</span> <div class="flex gap-4 flex-wrap">
<span class="text-[0.9375rem] font-semibold block mb-[3rem] upgrade-text !text-white">Upgrade to premium</span> <select>
<button type="button" class="ti-btn !py-1 !px-2 bg-light text-defaulttextcolor !text-[0.75rem] font-medium ti-btn-wave">Upgrade Now</button> <option value="">ALL</option>
</div> <option value="">จอบ</option>
</div> <option value="">เสียม</option>
</div> <option value="">ตะปู</option>
<div class="box"> <option value="">เครื่องขุด</option>
<div class="box-body !p-1"> </select>
<div class="flex items-center flex-wrap"> </div>
<div id="analytics-followers"> </div>
<apx-chart [series]="optionsCircle2.series" [chart]="optionsCircle2.chart" </div>
[xaxis]="optionsCircle2.xaxis" [colors]="optionsCircle2.colors" <div class="box-body !p-0">
[labels]="optionsCircle2.labels" [legend]="optionsCircle2.legend" <div class="p-3">
[stroke]="optionsCircle2.stroke" [tooltip]="optionsCircle2.tooltip" <apx-chart
[plotOptions]="optionsCircle2.plotOptions" [series]="optionsCircle1.series"
[dataLabels]="optionsCircle2.dataLabels"></apx-chart> [chart]="optionsCircle1.chart"
</div> [xaxis]="optionsCircle1.xaxis"
<div class="ms-1"> [colors]="optionsCircle1.colors"
<p class="mb-1 text-[#8c9097] dark:text-white/50">Impressions</p> [labels]="optionsCircle1.labels"
<h5 class="font-semibold mb-0 text-[1.25rem]">9,903</h5> [legend]="optionsCircle1.legend"
</div> [stroke]="optionsCircle1.stroke"
</div> [tooltip]="optionsCircle1.tooltip"
</div> [plotOptions]="optionsCircle1.plotOptions"
</div> [dataLabels]="optionsCircle1.dataLabels"
<div class="box"> ></apx-chart>
<div class="box-body !p-1"> </div>
<div class="flex items-center flex-wrap"> <div
<div id="analytics-views"> class="grid grid-cols-2 border-t border-dashed dark:border-defaultborder/10"
<apx-chart [series]="optionsCircle3.series" [chart]="optionsCircle3.chart" >
[xaxis]="optionsCircle3.xaxis" [colors]="optionsCircle3.colors" <div
[labels]="optionsCircle3.labels" [legend]="optionsCircle3.legend" class="col p-4 border-e border-dashed dark:border-defaultborder/10 text-center"
[stroke]="optionsCircle3.stroke" [tooltip]="optionsCircle3.tooltip" >
[plotOptions]="optionsCircle3.plotOptions" <div class="text-[#8c9097] dark:text-white/50 text-[0.75rem] mb-1">
[dataLabels]="optionsCircle3.dataLabels"></apx-chart> การยืมทั้งหมด
</div>
<div class="ms-1">
<p class="mb-1 text-[#8c9097] dark:text-white/50">Clicks</p>
<h5 class="font-semibold mb-0 text-[1.25rem]">16,789</h5>
</div>
</div>
</div>
</div>
</div> </div>
<div class="xxl:col-span-7 xl:col-span-12 col-span-12"> <div class="flex justify-center items-center">
<div class="box"> <span class="me-3 text-[1.625rem] font-semibold">1,234</span>
<div class="box-header justify-between"> <span class="text-success font-semibold"
<div class="box-title"> ><i class="ri-arrow-up-s-fill me-1"></i>0.23%</span
Sessions By Device >
</div>
<div>
<button type="button" class="ti-btn ti-btn-primary 1 !text-[0.85rem] !m-0 !font-medium">View All</button>
</div>
</div>
<div class="box-body !my-2 !py-6 !px-2">
<div id="sessions">
<apx-chart [series]="optionsCircle1.series" [chart]="optionsCircle1.chart"
[xaxis]="optionsCircle1.xaxis"
[labels]="optionsCircle1.labels" [legend]="optionsCircle1.legend"
[stroke]="optionsCircle1.stroke" [tooltip]="optionsCircle1.tooltip"
[plotOptions]="optionsCircle1.plotOptions"
[dataLabels]="optionsCircle1.dataLabels"[colors]="optionsCircle1.colors"></apx-chart>
</div>
</div>
<div class="box-footer !p-0">
<div class="grid grid-cols-12 justify-center">
<div class="col-span-3 pe-0 text-center">
<div class="sm:p-4 p-2 ">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Mobile</span>
<span class="block text-[1rem] font-semibold">68.3%</span>
</div>
</div>
<div class="col-span-3 px-0 text-center">
<div class="sm:p-4 p-2">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Tablet</span>
<span class="block text-[1rem] font-semibold">17.68%</span>
</div>
</div>
<div class="col-span-3 px-0 text-center">
<div class="sm:p-4 p-2 ">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Desktop</span>
<span class="block text-[1rem] font-semibold">10.5%</span>
</div>
</div>
<div class="col-span-3 px-0 text-center">
<div class="sm:p-4 p-2">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Others</span>
<span class="block text-[1rem] font-semibold">5.16%</span>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="xl:col-span-12 col-span-12"> </div>
<div class="box"> <div class="col p-4 text-center">
<div class="box-header justify-between"> <div class="text-[#8c9097] dark:text-white/50 text-[0.75rem] mb-1">
<div class="box-title">Sessions Duration By New Users</div> การคืนทั้งหมด
<div class="hs-dropdown ti-dropdown">
<a href="javascript:void(0);" class="px-2 font-normal text-[0.75rem] text-[#8c9097] dark:text-white/50"
aria-expanded="false">
View All<i class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</a>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden" role="menu">
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Today</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">This Week</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Last Week</a></li>
</ul>
</div>
</div>
<div class="box-body">
<div id="session-users">
<apx-chart [series]="chartOptions4.series" [chart]="chartOptions4.chart"
[yaxis]="chartOptions4.yaxis" [xaxis]="chartOptions4.xaxis"
[labels]="chartOptions4.labels" [stroke]="chartOptions4.stroke"
[plotOptions]="chartOptions4.plotOptions" [markers]="chartOptions4.markers"
[fill]="chartOptions4.fill" [tooltip]="chartOptions4.tooltip" [colors]="chartOptions4.colors" [legend]="chartOptions4.legend"></apx-chart>
</div>
</div>
</div>
</div> </div>
<div class="flex justify-center items-center">
<span class="me-3 text-[1.625rem] font-semibold">1,754</span>
<span class="text-danger font-semibold"
><i class="ri-arrow-down-s-fill me-1"></i>0.11%</span
>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Line Chart (Right Half) -->
<div class="xxl:col-span-6 col-span-12">
<div class="box custom-box">
<div class="box-header">
<div class="box-title">แนวโน้มการยืม-คืนอุปกรณ์รายเดือน</div>
</div>
<div class="box-body">
<div id="line-chart-datalabels" class="chart-container">
<apx-chart
[series]="chartOptions9.series"
[chart]="chartOptions9.chart"
[xaxis]="chartOptions9.xaxis"
[stroke]="chartOptions9.stroke"
[colors]="chartOptions9.colors"
[dataLabels]="chartOptions9.dataLabels"
[legend]="chartOptions9.legend"
[markers]="chartOptions9.markers"
[grid]="chartOptions9.grid"
[yaxis]="chartOptions9.yaxis"
[title]="chartOptions9.title"
></apx-chart>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
Web-Manage/src/app/DPU/common/home-common/home-common.component.ts
...@@ -3,360 +3,449 @@ import { RouterModule } from '@angular/router'; ...@@ -3,360 +3,449 @@ import { RouterModule } from '@angular/router';
import ApexCharts from 'apexcharts' import ApexCharts from 'apexcharts'
import { SharedModule } from '../../../shared/shared.module'; import { SharedModule } from '../../../shared/shared.module';
import { NgApexchartsModule } from 'ng-apexcharts'; import { NgApexchartsModule } from 'ng-apexcharts';
import { SimplebarAngularModule } from 'simplebar-angular';
@Component({ @Component({
selector: 'app-home-common', selector: 'app-home-common',
imports: [RouterModule,SharedModule,NgApexchartsModule],
standalone: true, standalone: true,
imports: [RouterModule, SharedModule, NgApexchartsModule, SimplebarAngularModule],
templateUrl: './home-common.component.html', templateUrl: './home-common.component.html',
styleUrls: ['./home-common.component.css'] styleUrls: ['./home-common.component.css']
}) })
export class HomeCommonComponent { export class HomeCommonComponent {
chartOptions1:any;
chartOptions2:any; chartOptions: any;
chartOptions3:any chartOptions1: any;
chartOptions:any; chartOptions2: any;
optionsCircle1:any; chartOptions3: any;
chartOptions4:any; chartOptions4: any;
optionsCircle2:any; chartOptions5: any;
optionsCircle3:any chartOptions6: any;
constructor(private el: ElementRef, private renderer: Renderer2,private cdr: ChangeDetectorRef){ chartOptions7: any;
this.chartOptions1={ chartOptions8: any;
chart: { chartOptions9: any
type: 'line', optionsCircle1: any;
height: 40, optionsCircle2: any;
width: 120, optionsCircle3: any;
sparkline: { chartOptions10: any
enabled: true chartOptions11: any
chart3options: any
chart2options: any
chart1options: any
public series: ApexAxisChartSeries = [];
public chart!: ApexChart;
public dataLabels!: ApexDataLabels;
public markers!: ApexMarkers;
public title!: ApexTitleSubtitle;
public fill!: ApexFill;
public yaxis!: ApexYAxis;
public xaxis!: ApexXAxis;
public tooltip!: ApexTooltip;
public colors!: any;
public commonOptions1: any = {
dataLabels: {
enabled: false,
},
stroke: {
curve: 'straight',
},
toolbar: {
tools: {
selection: false,
}, },
dropShadow: { },
markers: {
size: 6,
hover: {
size: 10,
},
},
tooltip: {
followCursor: false,
theme: 'dark',
x: {
show: false,
},
marker: {
show: false,
},
y: {
title: {
formatter: function () {
return '';
},
},
},
},
grid: {
clipMarkers: false,
},
xaxis: {
type: 'datetime',
},
};
constructor(private el: ElementRef, private renderer: Renderer2, private cdr: ChangeDetectorRef) {
this.chartOptions9 = {
series: [
{
name: 'จำนวนการยืม',
data: [40, 55, 60, 80, 70, 65, 90]
},
{
name: 'จำนวนการคืน',
data: [30, 50, 58, 75, 68, 63, 85]
}
],
chart: {
height: 320,
type: 'line',
dropShadow: {
enabled: true, enabled: true,
top: 0,
left: 0,
blur: 3,
color: '#000', color: '#000',
opacity: 0.1 top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
},
events: {
mounted: (chart: any) => {
chart.windowResizeHandler();
}
},
},
colors: ['#845adf', '#23b7e5'],
dataLabels: {
enabled: true
},
stroke: {
curve: 'smooth'
},
title: {
text: '',
align: 'left',
style: {
fontSize: '13px',
fontWeight: 'bold',
color: '#8c9097'
},
},
grid: {
borderColor: '#f2f5f7',
},
markers: {
size: 3
}, },
},
grid: {
show: false,
xaxis: { xaxis: {
lines: { categories: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.'],
show: false title: {
text: 'เดือน',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
},
labels: {
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600
} }
},
}, },
yaxis: { yaxis: {
lines: { title: {
show: false text: 'จำนวนครั้ง',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
} }
},
labels: {
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600
}
},
min: 0,
max: 100
}, },
}, legend: {
stroke: { position: 'top',
show: true, horizontalAlign: 'right',
curve: 'straight', floating: true,
lineCap: 'butt', offsetY: -25,
width: 1.5, offsetX: -5
dashArray: 0,
},
fill: {
gradient: {
enabled: false
} }
}, };
series: [{
name: 'Value',
data: [0, 21, 54, 38, 56, 24, 65] this.chartOptions2 = {
}], series: [
yaxis: { {
min: 0, name: 'Projects',
show: false type: 'column',
}, data: [1.8, 2.5, 2.5, 1.5, 2.5, 2.8, 3.8],
xaxis: { },
show: false, {
axisTicks: { name: 'Tasks',
type: 'column',
data: [1.1, 2.2, 3.1, 4, 4.1, 4.9, 6.5],
},
{
name: 'Revenue',
type: 'line',
data: [20, 29, 37, 35, 44, 43, 50],
},
],
chart: {
toolbar: {
show: false, show: false,
axisBorder: {
show: false
}, },
height: 320,
type: 'line',
stacked: false,
fontFamily: 'Poppins, Arial, sans-serif',
}, },
axisBorder: { grid: {
show: false borderColor: '#f5f4f4',
} strokeDashArray: 3,
},
colors: ['#23b7e5'],
}
this.chartOptions2={
chart: {
type: 'line',
height: 45,
sparkline: {
enabled: true
}, },
dropShadow: { dataLabels: {
enabled: true, enabled: false,
top: 0,
left: 0,
blur: 1,
color: '#fff',
opacity: 0.05
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 2,
dashArray: 0,
},
fill: {
gradient: {
enabled: false
}
},
series: [{
name: 'Value',
data: [54, 38, 56, 35, 65, 43, 53, 45, 62, 80, 35, 48]
}],
yaxis: {
min: 0,
show: false,
axisBorder: {
show: false
},
},
xaxis: {
axisBorder: {
show: false
}, },
},
colors: ["rgba(132, 90, 223, 0.1)"],
tooltip: {
enabled: false,
}
}
this.optionsCircle1 = {
series: [1754, 1234, 878, 270],
labels: ["Mobile", "Tablet", "Desktop", "Others"],
chart: {
height: 250,
type: 'donut',
}, xaxis: {
dataLabels: { categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
enabled: false, },
}, yaxis: [
{
show: true,
legend: {
show: false,
}, },
stroke: { {
seriesName: 'Projects',
opposite: true,
axisTicks: {
show: true, show: true,
curve: 'smooth', },
lineCap: 'round', axisBorder: {
colors: ["#fff"], show: false,
width: 0, },
dashArray: 0, labels: {
}, style: {
plotOptions: { colors: '#00E396',
pie: {
expandOnClick: false,
donut: {
size: '80%',
background: 'transparent',
labels: {
show: true,
name: {
show: true,
fontSize: '20px',
color: '#495057',
offsetY: -4
},
value: {
show: true,
fontSize: '18px',
offsetY: 8,
formatter: function (val: string) {
return val + "%";
}
},
total: {
show: true,
showAlways: true,
label: 'Total',
fontSize: '22px',
fontWeight: 600,
color: '#495057',
}
}
}, },
}, },
}, },
colors: ["rgba(132, 90, 223, 1)", "rgba(35, 183, 229, 1)", "rgba(38, 191, 148, 1)", "rgba(245, 184, 73, 1)",], {
}; seriesName: 'Revenue',
this.chartOptions = { opposite: true,
series: [ axisTicks: {
{ show: true,
name: 'Views', },
type: 'column', axisBorder: {
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 45, 35], show: false,
}, },
{ labels: {
name: 'Followers', show: false,
type: 'line', },
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43, 27],
},
],
tooltip: {
enabled: true,
}, },
], legend: {
chart: { show: true,
toolbar: { position: 'top'
show: false,
}, },
type: 'line', stroke: {
height: 250, width: [0, 0, 1.5],
curve: 'straight',
}, dashArray: [0, 0, 0],
grid: {
borderColor: '#f1f1f1',
strokeDashArray: 3,
},
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
dataLabels: {
enabled: false,
},
stroke: {
width: [1, 1.1],
curve: ['straight', 'smooth'],
},
legend: {
show: true,
position: 'top',
},
xaxis: {
axisBorder: {
color: '#e9e9e9',
}, },
}, plotOptions: {
plotOptions: { bar: {
bar: { columnWidth: '35%',
columnWidth: '20%', borderRadius: 3,
borderRadius: 2, },
}, },
}, colors: ["rgb(132, 90, 223)", "#ededed", "#23b7e5"]
colors: ["rgba(132, 90, 223, 1)", '#23b7e5'],
}; };
this.chartOptions3 = {
series: [
{ this.chartOptions1 = {
name: 'Session', chart: {
data: [24, 23, 20, 25, 27, 26, 24, 23, 23, 25, 23, 23],
type: 'line', type: 'line',
height: 40,
width: 120,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.1
},
}, },
{
name: 'Bounce Rate',
data: [20, 23, 26, 22, 20, 26, 28, 26, 22, 27, 25, 26],
type: 'bar',
},
],
chart: {
height: 328, grid: {
zoom: { show: false,
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
},
},
stroke: {
show: true,
curve: 'straight',
lineCap: 'butt',
width: 1.5,
dashArray: 0,
},
fill: {
gradient: {
enabled: false enabled: false
}
}, },
series: [{
}, name: 'Value',
dataLabels: { data: [0, 21, 54, 38, 56, 24, 65]
enabled: false, }],
}, yaxis: {
grid: { min: 0,
borderColor: '#f1f1f1', show: false
strokeDashArray: 3 },
}, xaxis: {
legend: { show: false,
show: true, axisTicks: {
position: 'top', show: false,
}, axisBorder: {
plotOptions: { show: false
bar: {
borderRadius: 5,
columnWidth: "40%",
dataLabels: {
position: 'top', // top, center, bottom
}, },
} },
}, axisBorder: {
colors: ["rgb(132, 90, 223)", "#ededed"], show: false
stroke: { }
curve: ['smooth', 'stepline'],
width: [2, 0],
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: {
color: '#e9e9e9',
}, },
} colors: ['#23b7e5'],
};
this.chartOptions4 = { }
series: [ this.optionsCircle1 = {
{ series: [1754, 1234, 878, 270],
name: 'New Users', labels: ["Mobile", "Tablet", "Desktop", "Others"],
data: [32, 15, 63, 51, 36, 62, 99, 42, 78, 76, 32, 120], chart: {
}, height: 250,
{ type: 'donut',
name: 'Sessions',
data: [56, 58, 38, 50, 64, 45, 55, 32, 15, 63, 51, 136], },
}, dataLabels: {
{ enabled: false,
name: 'Avg Session Duration', },
data: [48, 29, 50, 69, 20, 59, 52, 12, 48, 28, 17, 98],
}, legend: {
],
chart: {
height: 425,
type: 'line',
toolbar: {
show: false, show: false,
}, },
background: 'none', stroke: {
fill: '#fff', show: true,
curve: 'smooth',
lineCap: 'round',
colors: ["#fff"],
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
expandOnClick: false,
donut: {
size: '80%',
background: 'transparent',
labels: {
show: true,
name: {
show: true,
fontSize: '20px',
color: '#495057',
offsetY: -4
},
value: {
show: true,
fontSize: '18px',
offsetY: 8,
formatter: function (val: string) {
return val + "%";
}
},
total: {
show: true,
showAlways: true,
label: 'Total',
fontSize: '22px',
fontWeight: 600,
color: '#495057',
}
}, }
grid: {
borderColor: '#f2f6f7',
},
colors: ['rgb(132, 90, 223)', '#23b7e5', '#f5b849'],
background: 'transparent',
dataLabels: {
enabled: false,
},
stroke: {
curve: 'straight',
width: 3,
},
legend: { },
show: true, },
position: 'top', },
}, colors: ["rgba(132, 90, 223, 1)", "rgba(35, 183, 229, 1)", "rgba(38, 191, 148, 1)", "rgba(245, 184, 73, 1)",],
xaxis: { };
categories: [ this.chartOptions = {
series: [
{
name: 'จำนวนการยืม',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 45, 35],
},
{
name: 'จำนวนการยืม1',
type: 'column',
data: [10, 11, 30, 3, 55, 6, 7, 44, 33, 22, 44, 35],
},
{
name: 'จำนวนการยืม2',
type: 'column',
data: [3, 44, 30, 11, 23, 98, 92, 29, 39, 40, 11, 9],
},
],
chart: {
toolbar: {
show: false,
},
type: 'line',
height: 250,
},
grid: {
borderColor: '#f1f1f1',
strokeDashArray: 3,
},
labels: [
'Jan', 'Jan',
'Feb', 'Feb',
'Mar', 'Mar',
...@@ -370,141 +459,253 @@ constructor(private el: ElementRef, private renderer: Renderer2,private cdr: Cha ...@@ -370,141 +459,253 @@ constructor(private el: ElementRef, private renderer: Renderer2,private cdr: Cha
'Nov', 'Nov',
'Dec', 'Dec',
], ],
show: false, dataLabels: {
axisBorder: { enabled: false,
show: false,
color: 'rgba(119, 119, 142, 0.05)',
offsetX: 0,
offsetY: 0,
}, },
axisTicks: { stroke: {
show: false, width: [1, 1.1],
borderType: 'solid', curve: ['straight', 'smooth'],
color: 'rgba(119, 119, 142, 0.05)',
width: 6,
offsetX: 0,
offsetY: 0,
}, },
labels: { legend: {
rotate: -90, show: true,
position: 'top',
}, },
}, xaxis: {
yaxis: { axisBorder: {
show: false, color: '#e9e9e9',
axisBorder: { },
},
plotOptions: {
bar: {
columnWidth: '20%',
borderRadius: 2,
},
},
colors: ["rgba(132, 90, 223, 1)", '#23b7e5', '#00E396'],
};
this.chartOptions3 = {
series: [
{
name: 'Session',
data: [24, 23, 20, 25, 27, 26, 24, 23, 23, 25, 23, 23],
type: 'line',
},
{
name: 'Bounce Rate',
data: [20, 23, 26, 22, 20, 26, 28, 26, 22, 27, 25, 26],
type: 'bar',
},
],
chart: {
height: 328,
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false,
},
grid: {
borderColor: '#f1f1f1',
strokeDashArray: 3
},
legend: {
show: true,
position: 'top',
},
plotOptions: {
bar: {
borderRadius: 5,
columnWidth: "40%",
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
colors: ["rgb(132, 90, 223)", "#ededed"],
stroke: {
curve: ['smooth', 'stepline'],
width: [2, 0],
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: {
color: '#e9e9e9',
},
}
};
this.chartOptions4 = {
series: [
{
name: 'New Users',
data: [32, 15, 63, 51, 36, 62, 99, 42, 78, 76, 32, 120],
},
{
name: 'Sessions',
data: [56, 58, 38, 50, 64, 45, 55, 32, 15, 63, 51, 136],
},
{
name: 'Avg Session Duration',
data: [48, 29, 50, 69, 20, 59, 52, 12, 48, 28, 17, 98],
},
],
chart: {
height: 425,
type: 'line',
toolbar: {
show: false,
},
background: 'none',
fill: '#fff',
},
grid: {
borderColor: '#f2f6f7',
},
colors: ['rgb(132, 90, 223)', '#23b7e5', '#f5b849'],
background: 'transparent',
dataLabels: {
enabled: false,
},
stroke: {
curve: 'straight',
width: 3,
},
legend: {
show: true,
position: 'top',
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
show: false, show: false,
axisBorder: {
show: false,
color: 'rgba(119, 119, 142, 0.05)',
offsetX: 0,
offsetY: 0,
},
axisTicks: {
show: false,
borderType: 'solid',
color: 'rgba(119, 119, 142, 0.05)',
width: 6,
offsetX: 0,
offsetY: 0,
},
labels: {
rotate: -90,
},
}, },
axisTicks: { yaxis: {
show: false, show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
}, },
}, tooltip: {
tooltip: { x: {
x: { format: 'dd/MM/yy HH:mm',
format: 'dd/MM/yy HH:mm', },
}, },
}, };
}; this.optionsCircle2 = {
this.optionsCircle2={ chart: {
chart: { height: 120,
height: 120, width: 100,
width: 100, type: "radialBar",
type: "radialBar", },
},
series: [48],
series: [48], colors: ["#23b7e5"],
colors: ["#23b7e5"], plotOptions: {
plotOptions: { radialBar: {
radialBar: {
hollow: { hollow: {
margin: 0, margin: 0,
size: "50%", size: "50%",
background: "#fff" background: "#fff"
}, },
dataLabels: { dataLabels: {
name: { name: {
offsetY: -10, offsetY: -10,
color: "#4b9bfa", color: "#4b9bfa",
fontSize: "10px", fontSize: "10px",
show: false show: false
}, },
value: { value: {
offsetY: 5, offsetY: 5,
color: "#4b9bfa", color: "#4b9bfa",
fontSize: "12px", fontSize: "12px",
show: true, show: true,
fontWeight: 800 fontWeight: 800
} }
} }
} }
}, },
stroke: { stroke: {
lineCap: "round" lineCap: "round"
}, },
labels: ["Followers"] labels: ["Followers"]
} }
this.optionsCircle3={ this.optionsCircle3 = {
chart: { chart: {
height: 120, height: 120,
width: 100, width: 100,
type: "radialBar", type: "radialBar",
}, },
series: [65], series: [65],
colors: ["#ffc107"], colors: ["#ffc107"],
plotOptions: { plotOptions: {
radialBar: { radialBar: {
hollow: { hollow: {
margin: 0, margin: 0,
size: "50%", size: "50%",
background: "#fff" background: "#fff"
}, },
dataLabels: { dataLabels: {
name: { name: {
offsetY: -10, offsetY: -10,
color: "#4b9bfa", color: "#4b9bfa",
fontSize: "10px", fontSize: "10px",
show: false show: false
}, },
value: { value: {
offsetY: 5, offsetY: 5,
color: "#4b9bfa", color: "#4b9bfa",
fontSize: "12px", fontSize: "12px",
show: true, show: true,
fontWeight: 800 fontWeight: 800
}, },
} }
} }
}, },
stroke: { stroke: {
lineCap: "round" lineCap: "round"
}, },
labels: ["Views"] labels: ["Views"]
}
} }
} }
// ngAfterViewInit(): void {
// this.setChartWidth();
// this.cdr.detectChanges();
// }
// private setChartWidth(): void {
// const chartContainer = this.el.nativeElement.querySelector('.chart-container');
// const chartContainer1 = this.el.nativeElement.querySelector('.chart-container1');
// const chartContainer2 = this.el.nativeElement.querySelector('.chart-container2');
// const chartContainer3 = this.el.nativeElement.querySelector('.chart-container3');
// const chart = new ApexCharts(chartContainer1, this.chartOptions);
// const chart1 = new ApexCharts(chartContainer, this.optionsCircle1);
// const chart2 = new ApexCharts(chartContainer2, this.chartOptions3);
// const chart3 = new ApexCharts(chartContainer3, this.chartOptions4);
// chart.render();
// chart2.render();
// chart1.render();
// chart3.render();
// }
}
Web-Manage/src/app/DPU/company-management/company-management.module.ts
...@@ -81,6 +81,12 @@ export const companyRoutes: Routes = [ ...@@ -81,6 +81,12 @@ export const companyRoutes: Routes = [
loadComponent: () => loadComponent: () =>
import('./emp-borrow-manage/emp-borrow-manage.component').then((m) => m.EmpBorrowManageComponent) import('./emp-borrow-manage/emp-borrow-manage.component').then((m) => m.EmpBorrowManageComponent)
}, },
{
path:'company/emp-borrowrepair',
loadComponent: () =>
import('./emp-borrow-repair/emp-borrow-repair.component').then((m) => m.EmpBorrowRepairComponent)
},
{ {
path:'company/emp-transaction', path:'company/emp-transaction',
loadComponent: () => loadComponent: () =>
......
Web-Manage/src/app/DPU/company-management/emp-borrow-repair/emp-borrow-repair.component.html
<app-page-header <app-page-header
[title]="'อนุมัติการคืนอุปกรณ์'" [title]="'จัดการอุปการณ์ ซ่อม-ชำรุด'"
[activeTitle]="'ผู้ดูแลระบบ'" [activeTitle]="'ผู้ดูแลระบบ'"
[title1]="'อนุมัติการคืนอุปกรณ์'" [title1]="'จัดการอุปการณ์ ซ่อม-ชำรุด'"
></app-page-header> ></app-page-header>
<div class="grid grid-cols-12 gap-x-6"> <div class="grid grid-cols-12 gap-x-6">
...@@ -17,49 +17,6 @@ ...@@ -17,49 +17,6 @@
</div> </div>
<!-- แท็บสถานะ --> <!-- แท็บสถานะ -->
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<!-- สถานะทั้งหมด -->
<div>
<button
class="px-4 py-2 rounded-full border text-sm font-medium bg-blue-100 text-blue-800 border-blue-200"
(click)="selectedStatus = '!requested,!rejected'; applyFilter()"
>
ทั้งหมด
</button>
</div>
<div>
<button
class="px-4 py-2 rounded-full border text-sm font-medium bg-warning/10 text-warning border-warning/20"
(click)="selectedStatus = 'approved'; applyFilter()"
>
รอคืนอุปกรณื
</button>
</div>
<!-- <div>
<button
class="px-4 py-2 rounded-full border text-sm font-medium bg-success/10 text-success border-success/20"
(click)="filterByStatus('approved')"
>
อนุมัติแล้ว
</button>
</div> -->
<div>
<button
class="px-4 py-2 rounded-full border text-sm font-medium bg-info/10 text-info border-info/20"
(click)="selectedStatus = 'returned'; applyFilter()"
>
คืนแล้ว
</button>
</div>
<!-- <div>
<button
class="px-4 py-2 rounded-full border text-sm font-medium bg-danger/10 text-danger border-danger/20"
(click)="filterByStatus('rejected')"
>
ไม่อนุมัติ
</button>
</div> -->
</div>
<div class="flex flex-wrap gap-2">
<div> <div>
<input <input
[(ngModel)]="searchTerm" [(ngModel)]="searchTerm"
...@@ -81,8 +38,7 @@ ...@@ -81,8 +38,7 @@
<th scope="col" class="text-start">อุปกรณ์ที่ยืม</th> <th scope="col" class="text-start">อุปกรณ์ที่ยืม</th>
<th scope="col" class="text-start">พนักงาน</th> <th scope="col" class="text-start">พนักงาน</th>
<th scope="col" class="text-start">จำนวน</th> <th scope="col" class="text-start">จำนวน</th>
<th scope="col" class="text-start">วันที่ยืม</th> <th scope="col" class="text-start">วันที่ส่งซ่อม</th>
<th scope="col" class="text-start">วันที่คืน</th>
<th scope="col" class="text-start">สถานะ</th> <th scope="col" class="text-start">สถานะ</th>
<th scope="col" class="text-start">ผู้อนุมัติ</th> <th scope="col" class="text-start">ผู้อนุมัติ</th>
<th scope="col" class="text-start">การดำเนินการ</th> <th scope="col" class="text-start">การดำเนินการ</th>
...@@ -105,21 +61,18 @@ ...@@ -105,21 +61,18 @@
</td> </td>
<td>{{ product.quantity_borrowed }}</td> <td>{{ product.quantity_borrowed }}</td>
<td>{{ product.created_at | date : "dd/MM/yyyy HH:mm" }}</td> <td>{{ product.created_at | date : "dd/MM/yyyy HH:mm" }}</td>
<td>
@if(product.returned_date) {
{{ product.returned_date | date : "dd/MM/yyyy HH:mm" }}
}
</td>
<td> <td>
<span <span
class="badge" class="badge"
[ngClass]="{ [ngClass]="{
'bg-warning/10 text-warning': 'bg-warning/10 text-warning':
product.status === 'approved', product.status === 'repair',
'bg-danger/10 text-danger': 'bg-danger/10 text-danger':
product.status === 'rejected', product.status === 'rejected',
'bg-info/10 text-info': 'bg-info/10 text-info':
product.status === 'returned', product.status === 'returned',
}" }"
> >
{{ getStatusText(product.status) }} {{ getStatusText(product.status) }}
...@@ -131,7 +84,7 @@ ...@@ -131,7 +84,7 @@
<div class="flex gap-1"> <div class="flex gap-1">
<!-- ปุ่มอนุมัติการคืน --> <!-- ปุ่มอนุมัติการคืน -->
@if(product.project_equipment?.equipment?.is_returnable && @if(product.project_equipment?.equipment?.is_returnable &&
product.status === 'approved' && !product.returned_date) { product.status === 'repair' && !product.returned_date) {
<button <button
aria-label="อนุมัติการคืน" aria-label="อนุมัติการคืน"
(click)="view(product)" (click)="view(product)"
...@@ -141,29 +94,6 @@ ...@@ -141,29 +94,6 @@
<i class="ri-check-line"></i> <i class="ri-check-line"></i>
</button> </button>
} }
<!-- ปุ่มแจ้งซ่อม -->
@if(product.project_equipment?.equipment?.is_returnable &&
(product.status === 'returned' || product.status ===
'returned')) {
<button
aria-label="แจ้งซ่อม"
(click)="reportRepair(product)"
class="ti-btn ti-btn-sm ti-btn-warning"
>
<i class="ri-tools-line"></i>
</button>
} @if(product.status === 'approved' || product.status ===
'returned'){
<button
aria-label="รายละเอียด"
(click)="view(product)"
class="ti-btn ti-btn-sm ti-btn-light me-[0.375rem]"
data-hs-overlay="#detail-borrow"
>
<i class="fe fe-eye"></i>
</button>
}
</div> </div>
</td> </td>
</tr> </tr>
......
Web-Manage/src/app/DPU/company-management/emp-borrow-repair/emp-borrow-repair.component.ts
...@@ -28,13 +28,327 @@ import { UserProfileModel } from '../../models/user.model'; ...@@ -28,13 +28,327 @@ import { UserProfileModel } from '../../models/user.model';
@Component({ @Component({
selector: 'app-emp-borrow-repair', selector: 'app-emp-borrow-repair',
templateUrl: './emp-borrow-repair.component.html', templateUrl: './emp-borrow-repair.component.html',
styleUrls: ['./emp-borrow-repair.component.css'] standalone: true,
imports: [
CommonModule,
SharedModule,
TranslateModule,
NgSelectModule,
FormsModule
],
styleUrls: ['./emp-borrow-repair.component.scss']
}) })
export class EmpBorrowRepairComponent implements OnInit { export class EmpBorrowRepairComponent {
@ViewChild('closeModal') public childModal?: ElementRef;
@ViewChild('closeModalStock') public closeModalStock?: ElementRef;
@ViewChild('modalDetail') public modalDetail?: ElementRef;
returnList: BorrowTransactionsModel[] = [];
memberList: UserModel;
Projecteqlist: ProjectEquipmentModel;
projecteMember: ProjectMemberModel;
selectedBorrowItem: BorrowTransactionsModel;
projectList: ProjectModel;
allSelected = false;
someSelected = false;
uploadErrorMsg: string = "";
itemsList: ProjectEquipmentModel[] = [];
filterList: ProjectEquipmentModel[] = [];
itemsListAll: EquipmentModel[] = [];
filterListAll: EquipmentModel[] = [];
selectModel: ProjectEquipmentModel = new ProjectEquipmentModel()
selectStock: EquipmentStockModel
selectedItems = new Map<string, boolean>();
borrowSelect: BorrowTransactionsModel = new BorrowTransactionsModel()
filteredList: any[] = [];
pageIndex = 0;
member: UserProfileModel;
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(val: string) {
this.pageIndex = 0;
this.allSelected = false
this._searchTerm = val;
if (val != '') {
this.filterList = this.filter(val);
} else {
this.updatePagedItems()
}
}
projectId = ""
_searchTerm = "";
isEdit = false;
empList: ProjectMemberModel[] = []
hisList: BorrowTransactionsModel[] = [];
selectedStatus: string = '!requested,!rejected,!remove,!approved,!returned';
isProcessing = false;
constructor(
private http: HttpClient,
private cdr: ChangeDetectorRef,
private eqService: EquipmentService,
public translate: TranslateService,
private tokenService: TokenService,
private projectEquipmentService: ProjectEquipmentService,
private borrowTransactionsService: BorrowTransactionsService,
private projectMemberService: ProjectMemberService) {
this.projectId = this.tokenService.getSelectCompany().projectId!;
}
@ViewChild('video') video: ElementRef;
@ViewChild('canvas') canvas: ElementRef;
capturedImage: string | null = null;
uploadStatus: string = '';
checkMatch = false;
memberId = ""
isFaceDetected = false; // Flag to determine if a face is detected
ngOnInit(): void {
this.loadReturnList();
}
loadReturnList(): void {
this.borrowTransactionsService.getLists().subscribe({
next: (result) => {
// เก็บข้อมูลทั้งหมด
this.hisList = result.filter(e => e.project_equipment.projectId == this.projectId);
// เรียงลำดับจากวันที่ล่าสุด
this.hisList.sort((a, b) =>
new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
);
// กรองเฉพาะรายการที่ต้องคืน (is_returnable === true)
this.hisList = this.hisList.filter(item =>
item.project_equipment?.equipment?.is_returnable === true
);
// ใช้ applyFilter เพื่อกรองตามเงื่อนไขอื่นๆ
this.applyFilter();
},
error: (err) => {
console.error('Error loading return list:', err);
// สามารถเพิ่มการแจ้งเตือนผู้ใช้ที่นี่
}
});
}
filterByStatus(status: string): void {
this.selectedStatus = status;
this.applyFilter();
}
applyFilter(): void {
let filtered = [...this.hisList];
// แยกค่าสถานะเป็น Array
const statusConditions = this.selectedStatus.split(',');
// กรองตามเงื่อนไขสถานะ
filtered = filtered.filter(item => {
if (!item.status) return false;
// ตรวจสอบแต่ละเงื่อนไข
for (const condition of statusConditions) {
if (condition.startsWith('!')) {
// กรณีเงื่อนไขแบบยกเว้น (!status)
const excludedStatus = condition.substring(1);
if (item.status === excludedStatus) {
return false;
}
} else {
// กรณีเงื่อนไขแบบบังคับ (status)
if (item.status !== condition) {
return false;
}
}
}
return true;
});
// กรองตามคำค้นหา
if (this.searchTerm) {
const term = this.searchTerm.toLowerCase();
filtered = filtered.filter(item =>
(item.project_equipment?.equipment?.equipmentName?.toLowerCase().includes(term)) ||
(item.member?.getFullname()?.toLowerCase().includes(term)) ||
(item.quantity_borrowed?.toString().includes(term))
);
}
this.filteredList = filtered;
}
getUserProject() {
this.projectMemberService.getLists(this.projectId).subscribe(result => {
this.empList = result
})
}
getCompanyEquirment() {
this.eqService.getLists().subscribe(result => {
this.itemsListAll = result.filter(e => e.quantity > 0)
this.updatePagedItemsAll()
})
}
getProjectEquirment() {
this.projectEquipmentService.getLists(this.projectId).subscribe(result => {
this.itemsList = result
this.updatePagedItems()
})
}
filter(v: string) {
this.pageIndex = 0;
return this.itemsList?.filter(
(x) =>
x.equipment.equipmentName.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.equipment.description?.toLowerCase().indexOf(v.toLowerCase()) !== -1
);
}
constructor() { }
ngOnInit() { getfilteredItems() {
return this.returnList.filter(item =>
item.project_equipment?.equipment?.equipmentName.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
item.member?.getFullname().toLowerCase().includes(this.searchTerm.toLowerCase())
);
} }
getStatusText(status: string): string {
switch (status) {
case 'requested': return 'รออนุมัติ';
case 'approved': return 'รอคืนอุปกรณ์';
case 'rejected': return 'ไม่อนุมัติ';
case 'returned': return 'คืนแล้ว';
case 'repair': return 'กำลังซ่อม';
default: return status;
}
}
viewStock(item: ProjectEquipmentModel) {
this.selectModel = new ProjectEquipmentModel(item)
this.borrowSelect = new BorrowTransactionsModel()
// this.selectStock = new EquipmentStockModel()
// this.selectStock.equipmentId = this.selectModel.equipmentId
// this.selectStock.created_by = this.tokenService.getUser().member.memberId
// this.selectStock.action = "INBOUND"
}
viewHisStock(item: ProjectEquipmentModel) {
this.borrowTransactionsService.search({ "peId": item.peId, "member_id": this.tokenService.getUser().member.memberId }).subscribe(result => {
this.hisList = result
})
}
view(item: BorrowTransactionsModel) {
console.log('รายการที่เลือก:', item);
this.isEdit = true;
this.selectedBorrowItem = item;
}
openBorrowDetail(item: any) {
this.selectedBorrowItem = item;
setTimeout(() => {
const detailModal = document.querySelector('#detail-borrow') as any;
if (detailModal) {
(window as any).HSOverlay.open(detailModal);
}
});
}
approve(item: BorrowTransactionsModel) {
swal({
title: "Are you sure?",
text: "คุณต้องการบันทึกหรือไม่",
icon: "warning",
dangerMode: false,
buttons: ["Cancel", "Confirm"],
})
.then((willDelete: any) => {
if (willDelete) {
// เตรียมข้อมูลที่จะส่งไป API
let body = {
quantity_borrowed: item.quantity_borrowed, // อาจจะอัพเดทจำนวนยืมที่เหลือ
memberId: item.memberId,
status: "returned", // เปลี่ยนสถานะเป็น "returned"
approved_by: this.tokenService.getUser().member.memberId // ค่าผู้ที่อนุมัติ
};
// ทำการอัพเดทข้อมูลใน API
this.borrowTransactionsService.update(item.borrowId, body).subscribe(
(result) => {
// เมื่อบันทึกสำเร็จ
swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
// อัพเดทข้อมูลในตัว item ด้วยค่าใหม่ที่ได้รับจาก API (ถ้ามี)
item.status = "returned"; // อัพเดทสถานะ
item.quantity_borrowed = 0; // อัพเดทจำนวนยืม
// เรียก ngOnInit หรือการโหลดข้อมูลใหม่หลังการบันทึก
this.ngOnInit();
},
(error: any) => {
// เมื่อเกิดข้อผิดพลาด
swal("Fail!!", error.error.detail, "info");
}
);
}
});
}
reject(item: BorrowTransactionsModel) {
swal({
title: "ยืนยันการไม่อนุมัติ",
text: "คุณต้องการไม่อนุมัติการยืมนี้หรือไม่?",
icon: "warning",
dangerMode: true,
buttons: ["ยกเลิก", "ไม่อนุมัติ"],
}).then((willReject) => {
if (willReject) {
let body = {
"quantity_borrowed": item.quantity_borrowed,
"memberId": item.memberId,
"status": "rejected",
"approved_by": this.tokenService.getUser().member.memberId
}
this.borrowTransactionsService.update(item.borrowId, body).subscribe
(result => {
swal("ไม่อนุมัติสำเร็จ", "การยืมอุปกรณ์ถูกปฏิเสธแล้ว", "success");
this.loadReturnList();
},
(error) => {
swal("เกิดข้อผิดพลาด", error.error.detail, "error");
}
);
}
});
}
updatePagedItems() {
const startIndex = this.pageIndex * 10;
const endIndex = startIndex + 10;
const source = this.searchTerm
? this.itemsList.filter(x => x.equipment?.equipmentName?.includes(this.searchTerm))
: this.itemsList;
this.filterList = source.slice(startIndex, endIndex);
}
updatePagedItemsAll() {
const startIndex = this.pageIndex * 10;
const endIndex = startIndex + 10;
// this.filterList = this.itemsList.slice(startIndex, endIndex);
this.filterListAll = this.itemsListAll
}
} }
Web-Manage/src/app/DPU/company-management/emp-borrow-return-status/emp-borrow-return-status.component.html
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div> <div>
<button <button
class="px-4 py-2 rounded-full border text-sm font-medium bg-blue-100 text-blue-800 border-blue-200" class="px-4 py-2 rounded-full border text-sm font-medium bg-blue-100 text-blue-800 border-blue-200"
(click)="selectedStatus = '!requested,!rejected'; applyFilter()" (click)="selectedStatus = '!requested,!rejected,!remove,!repair'; applyFilter()"
> >
ทั้งหมด ทั้งหมด
</button> </button>
...@@ -143,17 +143,19 @@ ...@@ -143,17 +143,19 @@
} }
<!-- ปุ่มแจ้งซ่อม --> <!-- ปุ่มแจ้งซ่อม -->
@if(product.project_equipment?.equipment?.is_returnable && <!-- @if(product.project_equipment?.equipment?.is_returnable &&
(product.status === 'returned' || product.status === (product.status === 'returned' || product.status ===
'returned')) { 'returned')) {
<button <button
aria-label="แจ้งซ่อม" aria-label="แจ้งซ่อม"
(click)="reportRepair(product)" data-hs-overlay="#modal-repair"
(click)="view(product)"
class="ti-btn ti-btn-sm ti-btn-warning" class="ti-btn ti-btn-sm ti-btn-warning"
> >
<i class="ri-tools-line"></i> <i class="ri-tools-line"></i>
</button> </button>
} @if(product.status === 'approved' || product.status === } -->
@if(product.status === 'approved' || product.status ===
'returned'){ 'returned'){
<button <button
aria-label="รายละเอียด" aria-label="รายละเอียด"
...@@ -288,6 +290,100 @@ ...@@ -288,6 +290,100 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Start:: New Deal -->
<div id="modal-repair" class="hs-overlay hidden ti-modal" *ngIf="selectModel">
<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 text-defaulttextcolor"
id="mail-ComposeLabel"
>
ซ่อม/ซำรุด
</h6>
<button
type="button"
class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
data-hs-overlay="#modal-repair"
>
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
<div class="xl:col-span-12 col-span-12">
<img
[src]="selectModel.equipment.getPicture()"
class="!rounded-t-md"
alt="..."
style="width: 100%; height: auto; object-fit: cover"
/>
</div>
<div class="grid grid-cols-12 gap-4">
<div class="xl:col-span-12 col-span-12">
<label for="deal-name" class="form-label">ชื่ออุปกรณ์</label>
<input
readonly
type="text"
class="form-control"
id="deal-name"
placeholder="ชื่ออุปกรณ์"
[(ngModel)]="selectedBorrowItem.project_equipment.equipment.equipmentName"
/>
</div>
<div class="xl:col-span-12 col-span-12">
<label for="input-label" class="form-label">{{
"สถานะ" | translate
}}</label>
<!-- <ng-select [items]="customerList" bindLabel="companyThName" [(ngModel)]="projectModel.customer">
</ng-select> -->
<select class="mb-4 sm:mb-0 form-select !py-3" id="inlineFormSelectPref"
[(ngModel)]="borrowSelect.status">
<option ngValue="repair" selected>ส่งซ่อม</option>
<option ngValue="remove" selected>นำอุปกรณ์ออก</option>
</select>
<!-- <select class="mb-4 sm:mb-0 form-select !py-3" id="inlineFormSelectPref"
[(ngModel)]="projectModel.customer">
<option [ngValue]="null" selected>-</option>
<option *ngFor="let item of customerList" [ngValue]="item">{{item.getCompanyName()}}</option>
</select> -->
</div>
<div class="xl:col-span-12 col-span-12">
<label for="deal-name" class="form-label">จำนวน</label>
<input
type="number"
class="form-control"
id="deal-name"
placeholder="จำนวนที่ชำรุด"
[(ngModel)]="selectedBorrowItem.quantity_borrowed"
/>
</div>
</div>
</div>
<div class="ti-modal-footer">
<button
#closeModalStock
type="button"
class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
data-hs-overlay="#modal-repair"
>
ยกเลิก
</button>
<button
type="button"
class="ti-btn bg-primary text-white !font-medium"
(click)="saveRepair()"
>
บันทึก
</button>
</div>
</div>
</div>
</div>
<div <div
id="detail-borrow" id="detail-borrow"
class="hs-overlay hidden ti-modal" class="hs-overlay hidden ti-modal"
......
Web-Manage/src/app/DPU/company-management/emp-borrow-return-status/emp-borrow-return-status.component.ts
...@@ -62,6 +62,8 @@ export class EmpBorrowReturnStatusComponent { ...@@ -62,6 +62,8 @@ export class EmpBorrowReturnStatusComponent {
borrowSelect: BorrowTransactionsModel = new BorrowTransactionsModel() borrowSelect: BorrowTransactionsModel = new BorrowTransactionsModel()
filteredList: any[] = []; filteredList: any[] = [];
pageIndex = 0; pageIndex = 0;
damagedQuantity: number = 0;
quantityExceeded: boolean = false;
member: UserProfileModel; member: UserProfileModel;
get searchTerm(): string { get searchTerm(): string {
return this._searchTerm; return this._searchTerm;
...@@ -81,7 +83,7 @@ export class EmpBorrowReturnStatusComponent { ...@@ -81,7 +83,7 @@ export class EmpBorrowReturnStatusComponent {
isEdit = false; isEdit = false;
empList: ProjectMemberModel[] = [] empList: ProjectMemberModel[] = []
hisList: BorrowTransactionsModel[] = []; hisList: BorrowTransactionsModel[] = [];
selectedStatus: string = '!requested,!rejected'; selectedStatus: string = '!requested,!rejected,!remove,!repair';
isProcessing = false; isProcessing = false;
constructor( constructor(
private http: HttpClient, private http: HttpClient,
...@@ -330,67 +332,38 @@ export class EmpBorrowReturnStatusComponent { ...@@ -330,67 +332,38 @@ export class EmpBorrowReturnStatusComponent {
} }
}); });
} }
reportRepair(item: BorrowTransactionsModel): void {
swal({
title: "แจ้งซ่อมอุปกรณ์",
text: `คุณต้องการแจ้งซ่อมอุปกรณ์ ${item.project_equipment?.equipment?.equipmentName} หรือไม่?`,
content: {
element: this.createRepairForm(item.quantity_borrowed) // << ส่งจำนวนยืมเข้าไป
},
icon: "warning",
buttons: ["ยกเลิก", "แจ้งซ่อม"],
}).then((confirmed) => {
if (confirmed) {
const description = (document.getElementById("repairDescription") as HTMLInputElement).value;
const quantity = +(document.getElementById("repairQuantity") as HTMLInputElement).value;
if (!description || quantity <= 0) {
swal("กรุณากรอกข้อมูลให้ครบถ้วน", "", "error");
return;
}
const repairData = {
borrowTransactionId: item.borrowId,
equipmentId: item.project_equipment?.equipment?.equipmentId,
reportedBy: this.tokenService.getUser().member.memberId,
description: `${description} (จำนวน ${quantity})`,
status: 'pending'
};
const updateBorrowData = {
status: 'repairing'
};
// เรียก service เพื่อบันทึกการแจ้งซ่อม...
}
});
}
private createRepairForm(defaultQuantity: number): HTMLElement { saveRepair() {
const wrapper = document.createElement("div"); // console.log(this.selectStock)
swal({
title: "Are you sure?",
const qtyInput = document.createElement("input"); text: "คุณต้องการบันทึกหรือไม่",
qtyInput.id = "repairQuantity"; icon: "warning",
qtyInput.placeholder = "จำนวนที่แจ้งซ่อม"; dangerMode: false,
qtyInput.type = "number"; buttons: ["Cancel", "Confirm"],
qtyInput.min = "1"; })
qtyInput.className = "swal-content__input"; .then((willDelete: any) => {
qtyInput.style.marginTop = "10px"; if (willDelete) {
qtyInput.value = defaultQuantity?.toString() || '1'; this.borrowTransactionsService.save({
"peId": this.selectModel.peId,
const descInput = document.createElement("input"); "quantity_borrowed": this.borrowSelect.quantity_borrowed,
descInput.id = "repairDescription"; "status": this.borrowSelect.status,
descInput.placeholder = "ระบุอาการเสีย/ปัญหาที่พบ"; "memberId": this.tokenService.getUser().member.memberId,
descInput.type = "text"; "approved_by": this.tokenService.getUser().member.memberId
descInput.className = "swal-content__input"; }).subscribe(result => {
swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
this.ngOnInit()
this.closeModalStock?.nativeElement.click()
}, (error: any) => {
swal("Fail!!", error.error.detail, "info");
})
}
});
wrapper.appendChild(descInput);
wrapper.appendChild(qtyInput);
return wrapper; }
}
updatePagedItems() { updatePagedItems() {
const startIndex = this.pageIndex * 10; const startIndex = this.pageIndex * 10;
......
Web-Manage/src/app/DPU/company-management/emp-borrow-status/emp-borrow-status.component.html
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div> <div>
<button <button
class="px-4 py-2 rounded-full border text-sm font-medium bg-blue-100 text-blue-800 border-blue-200" class="px-4 py-2 rounded-full border text-sm font-medium bg-blue-100 text-blue-800 border-blue-200"
(click)="selectedStatus = '!returned'; applyFilter()" (click)="selectedStatus = '!returned,!remove,!repair'; applyFilter()"
> >
ทั้งหมด ทั้งหมด
</button> </button>
......
Web-Manage/src/app/DPU/company-management/emp-borrow-status/emp-borrow-status.component.ts
...@@ -68,7 +68,7 @@ export class EmpBorrowStatusComponent { ...@@ -68,7 +68,7 @@ export class EmpBorrowStatusComponent {
isEdit = false; isEdit = false;
empList: ProjectMemberModel[] = [] empList: ProjectMemberModel[] = []
hisList: BorrowTransactionsModel [] = []; hisList: BorrowTransactionsModel [] = [];
selectedStatus: string = '!returned'; selectedStatus: string = '!returned,!remove,!repair';
constructor( constructor(
private http: HttpClient, private http: HttpClient,
private eqService: EquipmentService, private eqService: EquipmentService,
......
Web-Manage/src/app/DPU/company-management/home-installer/home-installer.component.html
<app-page-header
[title]="'Dashboards'"
[activeTitle]="'Dashboards'"
[title1]="'Dashboards'"
></app-page-header>
<div class="grid grid-cols-12 gap-x-6">
<div class="xxxl:col-span-6 col-span-12">
<div class="grid grid-cols-12 gap-x-6">
<div class="xxl:col-span-4 md:col-span-6 col-span-12">
<div class="box">
<div class="box-body !pb-[0.9rem]">
<div class="flex items-start">
<div class="me-4 gap-0">
<span class="avatar avatar-md p-2 bg-primary">
<svg
class="svg-white"
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
/>
</svg>
</span>
</div>
<div class="flex-grow">
<div class="flex mb-1 items-start justify-between">
<h5 class="font-semibold mb-0 leading-none text-[1.25rem]">
256
</h5>
<div class="text-danger font-semibold">
<i class="ri-arrow-down-s-fill me-1 align-middle"></i>-1.05%
</div>
</div>
<p
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
จำนวนพนักงานทั้งหมด
</p>
</div>
</div>
</div>
</div>
</div>
<div class="xxl:col-span-4 md:col-span-6 col-span-12">
<div class="box">
<div class="box-body !pb-[0.9rem]">
<div class="flex items-start">
<div class="me-4">
<span class="avatar avatar-md p-2 bg-secondary">
<svg
class="svg-white"
xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<rect fill="none" height="24" width="24" />
<g>
<path
d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"
/>
</g>
</svg>
</span>
</div>
<div class="flex-grow">
<div class="flex mb-1 items-start justify-between">
<h5 class="font-semibold mb-0 leading-none text-[1.25rem]">
4,026
</h5>
<div class="text-success font-semibold">
<i class="ri-arrow-up-s-fill me-1 align-middle"></i>+0.40%
</div>
</div>
<p
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
จำนวนพนักงานที่ยืม
</p>
</div>
</div>
</div>
</div>
</div>
<div class="xxl:col-span-4 md:col-span-6 col-span-12">
<div class="box">
<div class="box-body !pb-[0.9rem]">
<div class="flex items-start">
<div class="me-3">
<span class="avatar avatar-md p-2 bg-warning">
<svg
class="svg-white"
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M9.5,7h7C16.776123,7,17,6.776123,17,6.5S16.776123,6,16.5,6h-7C9.223877,6,9,6.223877,9,6.5S9.223877,7,9.5,7z M7.5,11h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,10,16.5,10h-9C7.223877,10,7,10.223877,7,10.5S7.223877,11,7.5,11z M20.5,2H3.4993896C3.2234497,2.0001831,2.9998169,2.223999,3,2.5v19c-0.000061,0.1124268,0.0378418,0.2216187,0.1074829,0.3098755c0.1710205,0.2167358,0.4853516,0.2537231,0.7020874,0.0827026l2.8652344-2.2617188l2.3583984,1.7695312c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0L12,19.625l2.3671875,1.7753906c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0l2.3583984-1.7695312l2.8652344,2.2617188C20.2785034,21.9623413,20.3876343,22.0002441,20.5,22h0.0006104C20.7766113,21.9998169,21.0001831,21.7759399,21,21.5V2.4993896C20.9998169,2.2234497,20.776001,1.9998169,20.5,2z M20,20.46875l-2.3574219-1.8613281c-0.0882568-0.069519-0.1972656-0.1072998-0.3095703-0.1074219c-0.1080933-0.000061-0.2132568,0.0349121-0.2998047,0.0996094L14.6669922,20.375l-2.3671875-1.7753906c-0.1777954-0.1328125-0.421814-0.1328125-0.5996094,0L9.3330078,20.375l-2.3662109-1.7753906c-0.1817017-0.1348877-0.4311523-0.1317139-0.609375,0.0078125L4,20.46875V3h16V20.46875z M7.5,15h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,14,16.5,14h-9C7.223877,14,7,14.223877,7,14.5S7.223877,15,7.5,15z"
/>
</svg>
</span>
</div>
<div class="flex-grow">
<div class="flex mb-1 items-start justify-between">
<h5 class="font-semibold mb-0 leading-none text-[1.25rem]">
48
</h5>
<div class="text-success font-semibold">
<i class="ri-arrow-up-s-fill me-1 align-middle"></i>+0.82%
</div>
</div>
<p
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
จำนวนรายการอุปการ์ทั้งหมด
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12">
<div class="box overflow-hidden">
<div class="box-header justify-between items-center flex-wrap gap-4">
<div class="box-title">จำนวนการยืมอุปกรณ์</div>
<div class="flex gap-4 flex-wrap">
<select>
<option value="">ALL</option>
<option value="">มกราคม</option>
<option value="">กุมภาพันธ์</option>
<option value="">มีนาคม</option>
<option value="">เมษายน</option>
</select>
<div class="inline-flex rounded-md shadow-sm" role="group" aria-label="Basic example">
<button type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">1M</button>
<button type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">3M</button>
<button type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">6M</button>
<button type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary-full !rounded-s-none !text-white">1Y</button>
</div>
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-body">
<div id="audienceReport">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[yaxis]="chartOptions.yaxis"
[xaxis]="chartOptions.xaxis"
[labels]="chartOptions.labels"
[stroke]="chartOptions.stroke"
[plotOptions]="chartOptions.plotOptions"
[markers]="chartOptions.markers"
[fill]="chartOptions.fill"
[tooltip]="chartOptions.tooltip"
[legend]="chartOptions.legend"
[colors]="chartOptions.colors"
></apx-chart>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-12 gap-x-6">
<!-- Candidates (Left Half) -->
<div class="xxl:col-span-6 col-span-12">
<div class="box overflow-hidden">
<div class="box-header justify-between">
<div class="box-title">อุปกรณ์ที่ยืม</div>
<div>
<div class="flex gap-4 flex-wrap">
<select>
<option value="">ALL</option>
<option value="">จอบ</option>
<option value="">เสียม</option>
<option value="">ตะปู</option>
<option value="">เครื่องขุด</option>
</select>
</div>
</div>
</div>
<div class="box-body !p-0">
<div class="p-3">
<apx-chart
[series]="optionsCircle1.series"
[chart]="optionsCircle1.chart"
[xaxis]="optionsCircle1.xaxis"
[colors]="optionsCircle1.colors"
[labels]="optionsCircle1.labels"
[legend]="optionsCircle1.legend"
[stroke]="optionsCircle1.stroke"
[tooltip]="optionsCircle1.tooltip"
[plotOptions]="optionsCircle1.plotOptions"
[dataLabels]="optionsCircle1.dataLabels"
></apx-chart>
</div>
<div
class="grid grid-cols-2 border-t border-dashed dark:border-defaultborder/10"
>
<div
class="col p-4 border-e border-dashed dark:border-defaultborder/10 text-center"
>
<div class="text-[#8c9097] dark:text-white/50 text-[0.75rem] mb-1">
การยืมทั้งหมด
</div>
<div class="flex justify-center items-center">
<span class="me-3 text-[1.625rem] font-semibold">1,234</span>
<span class="text-success font-semibold"
><i class="ri-arrow-up-s-fill me-1"></i>0.23%</span
>
</div>
</div>
<div class="col p-4 text-center">
<div class="text-[#8c9097] dark:text-white/50 text-[0.75rem] mb-1">
การคืนทั้งหมด
</div>
<div class="flex justify-center items-center">
<span class="me-3 text-[1.625rem] font-semibold">1,754</span>
<span class="text-danger font-semibold"
><i class="ri-arrow-down-s-fill me-1"></i>0.11%</span
>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Line Chart (Right Half) -->
<div class="xxl:col-span-6 col-span-12">
<div class="box custom-box">
<div class="box-header">
<div class="box-title">แนวโน้มการยืม-คืนอุปกรณ์รายเดือน</div>
</div>
<div class="box-body">
<div id="line-chart-datalabels" class="chart-container">
<apx-chart
[series]="chartOptions9.series"
[chart]="chartOptions9.chart"
[xaxis]="chartOptions9.xaxis"
[stroke]="chartOptions9.stroke"
[colors]="chartOptions9.colors"
[dataLabels]="chartOptions9.dataLabels"
[legend]="chartOptions9.legend"
[markers]="chartOptions9.markers"
[grid]="chartOptions9.grid"
[yaxis]="chartOptions9.yaxis"
[title]="chartOptions9.title"
></apx-chart>
</div>
</div>
</div>
</div>
</div>
Web-Manage/src/app/DPU/company-management/home-installer/home-installer.component.ts
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core'; import { ChangeDetectorRef, Component, OnInit, Renderer2, ElementRef } from '@angular/core';
import { NgApexchartsModule } from 'ng-apexcharts'; import { NgApexchartsModule } from 'ng-apexcharts';
import { SharedModule } from '../../../shared/shared.module'; import { SharedModule } from '../../../shared/shared.module';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
...@@ -15,19 +15,745 @@ import { ProjectService } from '../../services/project.service'; ...@@ -15,19 +15,745 @@ import { ProjectService } from '../../services/project.service';
imports: [CommonModule, SharedModule, NgApexchartsModule, TranslateModule], imports: [CommonModule, SharedModule, NgApexchartsModule, TranslateModule],
styleUrls: ['./home-installer.component.css'] styleUrls: ['./home-installer.component.css']
}) })
export class HomeInstallerComponent implements OnInit { export class HomeInstallerComponent {
projectId = "" chartOptions1:any;
constructor(private router: Router, private route: ActivatedRoute, private projectService: ProjectService, private tokenService: TokenService) { chartOptions2:any;
this.projectId = this.route.snapshot.paramMap.get('projectId')!; chartOptions3:any
this.projectService.getById(this.projectId).subscribe(result => { chartOptions:any;
console.log("SAVEEE") optionsCircle1:any;
this.tokenService.saveSelectCompany(result); chartOptions4:any;
// this.router.navigate(["/company"]); optionsCircle2:any;
}) optionsCircle3:any
}
ngOnInit() { chartOptions5:any;
chartOptions6:any;
chartOptions7:any;
chartOptions8:any;
chartOptions9:any
} chartOptions10:any
chartOptions11:any
chart3options:any
chart2options:any
chart1options:any
public series: ApexAxisChartSeries = [];
public chart!: ApexChart;
public dataLabels!: ApexDataLabels;
public markers!: ApexMarkers;
public title!: ApexTitleSubtitle;
public fill!: ApexFill;
public yaxis!: ApexYAxis;
public xaxis!: ApexXAxis;
public tooltip!: ApexTooltip;
public colors!:any;
public commonOptions1: any = {
dataLabels: {
enabled: false,
},
stroke: {
curve: 'straight',
},
toolbar: {
tools: {
selection: false,
},
},
markers: {
size: 6,
hover: {
size: 10,
},
},
tooltip: {
followCursor: false,
theme: 'dark',
x: {
show: false,
},
marker: {
show: false,
},
y: {
title: {
formatter: function () {
return '';
},
},
},
},
grid: {
clipMarkers: false,
},
xaxis: {
type: 'datetime',
},
};
constructor(private el: ElementRef, private renderer: Renderer2,private cdr: ChangeDetectorRef) {
this.chartOptions9 = {
series: [
{
name: 'จำนวนการยืม',
data: [40, 55, 60, 80, 70, 65, 90]
},
{
name: 'จำนวนการคืน',
data: [30, 50, 58, 75, 68, 63, 85]
}
],
chart: {
height: 320,
type: 'line',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
},
events: {
mounted: (chart: any) => {
chart.windowResizeHandler();
}
},
},
colors: ['#845adf', '#23b7e5'],
dataLabels: {
enabled: true
},
stroke: {
curve: 'smooth'
},
title: {
text: '',
align: 'left',
style: {
fontSize: '13px',
fontWeight: 'bold',
color: '#8c9097'
},
},
grid: {
borderColor: '#f2f5f7',
},
markers: {
size: 3
},
xaxis: {
categories: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.'],
title: {
text: 'เดือน',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
},
labels: {
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600
}
},
},
yaxis: {
title: {
text: 'จำนวนครั้ง',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
},
labels: {
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600
}
},
min: 0,
max: 100
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
}
};
this.chartOptions2={
series: [
{
name: "High - 2013",
data: [28, 29, 33, 36, 32, 32, 33]
},
{
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}
],
chart: {
height: 320,
type: 'line',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
},
events: {
mounted: (chart:any) => {
chart.windowResizeHandler();
}
},
},
colors: ['#845adf', '#23b7e5'],
dataLabels: {
enabled: true,
},
stroke: {
curve: 'smooth'
},
title: {
text: 'Average High & Low Temperature',
align: 'left',
style: {
fontSize: '13px',
fontWeight: 'bold',
color: '#8c9097'
},
},
grid: {
borderColor: '#f2f5f7',
},
markers: {
size: 1
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
title: {
text: 'Month',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
},
labels: {
show: true,
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600,
cssClass: 'apexcharts-xaxis-label',
},
},
},
yaxis: {
title: {
text: 'Temperature',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
},
labels: {
show: true,
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600,
cssClass: 'apexcharts-yaxis-label',
},
},
min: 5,
max: 40
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
}
}
this.chartOptions1={
chart: {
type: 'line',
height: 40,
width: 120,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.1
},
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
},
},
stroke: {
show: true,
curve: 'straight',
lineCap: 'butt',
width: 1.5,
dashArray: 0,
},
fill: {
gradient: {
enabled: false
}
},
series: [{
name: 'Value',
data: [0, 21, 54, 38, 56, 24, 65]
}],
yaxis: {
min: 0,
show: false
},
xaxis: {
show: false,
axisTicks: {
show: false,
axisBorder: {
show: false
},
},
axisBorder: {
show: false
}
},
colors: ['#23b7e5'],
}
this.chartOptions2={
chart: {
type: 'line',
height: 45,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 1,
color: '#fff',
opacity: 0.05
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 2,
dashArray: 0,
},
fill: {
gradient: {
enabled: false
}
},
series: [{
name: 'Value',
data: [54, 38, 56, 35, 65, 43, 53, 45, 62, 80, 35, 48]
}],
yaxis: {
min: 0,
show: false,
axisBorder: {
show: false
},
},
xaxis: {
axisBorder: {
show: false
},
},
colors: ["rgba(132, 90, 223, 0.1)"],
tooltip: {
enabled: false,
}
}
this.optionsCircle1 = {
series: [1754, 1234, 878, 270],
labels: ["Mobile", "Tablet", "Desktop", "Others"],
chart: {
height: 250,
type: 'donut',
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'round',
colors: ["#fff"],
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
expandOnClick: false,
donut: {
size: '80%',
background: 'transparent',
labels: {
show: true,
name: {
show: true,
fontSize: '20px',
color: '#495057',
offsetY: -4
},
value: {
show: true,
fontSize: '18px',
offsetY: 8,
formatter: function (val: string) {
return val + "%";
}
},
total: {
show: true,
showAlways: true,
label: 'Total',
fontSize: '22px',
fontWeight: 600,
color: '#495057',
}
}
},
},
},
colors: ["rgba(132, 90, 223, 1)", "rgba(35, 183, 229, 1)", "rgba(38, 191, 148, 1)", "rgba(245, 184, 73, 1)",],
};
this.chartOptions = {
series: [
{
name: 'จำนวนการยืม',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 45, 35],
},
],
chart: {
toolbar: {
show: false,
},
type: 'line',
height: 250,
},
grid: {
borderColor: '#f1f1f1',
strokeDashArray: 3,
},
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
dataLabels: {
enabled: false,
},
stroke: {
width: [1, 1.1],
curve: ['straight', 'smooth'],
},
legend: {
show: true,
position: 'top',
},
xaxis: {
axisBorder: {
color: '#e9e9e9',
},
},
plotOptions: {
bar: {
columnWidth: '20%',
borderRadius: 2,
},
},
colors: ["rgba(132, 90, 223, 1)", '#23b7e5'],
};
this.chartOptions3 = {
series: [
{
name: 'Session',
data: [24, 23, 20, 25, 27, 26, 24, 23, 23, 25, 23, 23],
type: 'line',
},
{
name: 'Bounce Rate',
data: [20, 23, 26, 22, 20, 26, 28, 26, 22, 27, 25, 26],
type: 'bar',
},
],
chart: {
height: 328,
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false,
},
grid: {
borderColor: '#f1f1f1',
strokeDashArray: 3
},
legend: {
show: true,
position: 'top',
},
plotOptions: {
bar: {
borderRadius: 5,
columnWidth: "40%",
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
colors: ["rgb(132, 90, 223)", "#ededed"],
stroke: {
curve: ['smooth', 'stepline'],
width: [2, 0],
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: {
color: '#e9e9e9',
},
}
};
this.chartOptions4 = {
series: [
{
name: 'New Users',
data: [32, 15, 63, 51, 36, 62, 99, 42, 78, 76, 32, 120],
},
{
name: 'Sessions',
data: [56, 58, 38, 50, 64, 45, 55, 32, 15, 63, 51, 136],
},
{
name: 'Avg Session Duration',
data: [48, 29, 50, 69, 20, 59, 52, 12, 48, 28, 17, 98],
},
],
chart: {
height: 425,
type: 'line',
toolbar: {
show: false,
},
background: 'none',
fill: '#fff',
},
grid: {
borderColor: '#f2f6f7',
},
colors: ['rgb(132, 90, 223)', '#23b7e5', '#f5b849'],
background: 'transparent',
dataLabels: {
enabled: false,
},
stroke: {
curve: 'straight',
width: 3,
},
legend: {
show: true,
position: 'top',
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
show: false,
axisBorder: {
show: false,
color: 'rgba(119, 119, 142, 0.05)',
offsetX: 0,
offsetY: 0,
},
axisTicks: {
show: false,
borderType: 'solid',
color: 'rgba(119, 119, 142, 0.05)',
width: 6,
offsetX: 0,
offsetY: 0,
},
labels: {
rotate: -90,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm',
},
},
};
this.optionsCircle2={
chart: {
height: 120,
width: 100,
type: "radialBar",
},
series: [48],
colors: ["#23b7e5"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "50%",
background: "#fff"
},
dataLabels: {
name: {
offsetY: -10,
color: "#4b9bfa",
fontSize: "10px",
show: false
},
value: {
offsetY: 5,
color: "#4b9bfa",
fontSize: "12px",
show: true,
fontWeight: 800
}
}
}
},
stroke: {
lineCap: "round"
},
labels: ["Followers"]
}
this.optionsCircle3={
chart: {
height: 120,
width: 100,
type: "radialBar",
},
series: [65],
colors: ["#ffc107"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "50%",
background: "#fff"
},
dataLabels: {
name: {
offsetY: -10,
color: "#4b9bfa",
fontSize: "10px",
show: false
},
value: {
offsetY: 5,
color: "#4b9bfa",
fontSize: "12px",
show: true,
fontWeight: 800
},
}
}
},
stroke: {
lineCap: "round"
},
labels: ["Views"]
}
}
} }
Web-Manage/src/app/shared/components/header/header.component.html
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<!--Header Notifictaion --> <!--Header Notifictaion -->
<!-- <div <div
class="header-element py-[1rem] md:px-[0.65rem] px-2 notifications-dropdown header-notification hs-dropdown ti-dropdown !hidden md:!block [--placement:bottom-left]"> class="header-element py-[1rem] md:px-[0.65rem] px-2 notifications-dropdown header-notification hs-dropdown ti-dropdown !hidden md:!block [--placement:bottom-left]">
<button id="dropdown-notification" type="button" <button id="dropdown-notification" type="button"
class="hs-dropdown-toggle relative ti-dropdown-toggle !p-0 !border-0 flex-shrink-0 !rounded-full !shadow-none align-middle text-xs"> class="hs-dropdown-toggle relative ti-dropdown-toggle !p-0 !border-0 flex-shrink-0 !rounded-full !shadow-none align-middle text-xs">
...@@ -72,10 +72,10 @@ ...@@ -72,10 +72,10 @@
<div class="ti-dropdown-header !m-0 !p-4 !bg-transparent flex justify-between items-center"> <div class="ti-dropdown-header !m-0 !p-4 !bg-transparent flex justify-between items-center">
<p <p
class="mb-0 text-[1.0625rem] text-defaulttextcolor font-semibold dark:text-[#8c9097] dark:text-white/50"> class="mb-0 text-[1.0625rem] text-defaulttextcolor font-semibold dark:text-[#8c9097] dark:text-white/50">
Notifications</p> แจ้งเตือน</p>
<span <span
class="text-[0.75em] py-[0.25rem/2] px-[0.45rem] font-[600] rounded-sm bg-secondary/10 text-secondary" class="text-[0.75em] py-[0.25rem/2] px-[0.45rem] font-[600] rounded-sm bg-secondary/10 text-secondary"
id="notifiation-data">{{ notificationCount }} Unread</span> id="notifiation-data">{{ notificationCount }} รายการ</span>
</div> </div>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<ul class="list-none !m-0 !p-0 end-0" id="header-notification-scroll" (click)="handleCardClick($event)"> <ul class="list-none !m-0 !p-0 end-0" id="header-notification-scroll" (click)="handleCardClick($event)">
...@@ -225,7 +225,7 @@ ...@@ -225,7 +225,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> --> </div>
<!--End Header Notifictaion --> <!--End Header Notifictaion -->
<!-- Related Apps --> <!-- Related Apps -->
......
Web-Manage/src/app/shared/services/nav.service.ts
...@@ -152,7 +152,7 @@ export class NavService implements OnDestroy { ...@@ -152,7 +152,7 @@ export class NavService implements OnDestroy {
{ headTitle: 'จัดการโครงการ' }, { headTitle: 'จัดการโครงการ' },
{ {
icon: 'home', icon: 'home',
path: '/company/home', path: '/company/home/:projectId',
title: 'หน้าแรก', title: 'หน้าแรก',
type: 'link', type: 'link',
selected: false, selected: false,
...@@ -192,7 +192,7 @@ export class NavService implements OnDestroy { ...@@ -192,7 +192,7 @@ export class NavService implements OnDestroy {
active: false, active: false,
Menusub: true, Menusub: true,
children: [ children: [
{ path: '/company/emp-borrow-status', title: 'อุปกรณ์ที่ซ่อม/ชำรุด', type: 'link' }, { path: '/company/emp-borrowrepair', title: 'อุปกรณ์ที่ซ่อม/ชำรุด', type: 'link' },
], ],
}, },
]; ];
...@@ -204,6 +204,15 @@ export class NavService implements OnDestroy { ...@@ -204,6 +204,15 @@ export class NavService implements OnDestroy {
{ headTitle: 'จัดการบริษัท' }, { headTitle: 'จัดการบริษัท' },
// { headTitle: 'User Management' } // { headTitle: 'User Management' }
{ {
icon: 'home',
path: '/company/home/:projectId',
title: 'หน้าแรก',
type: 'link',
selected: false,
Menusub: true,
active: false,
},
{
title: 'หน้าทำรายการ', title: 'หน้าทำรายการ',
icon: 'time', icon: 'time',
type: 'sub', type: 'sub',
......
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