feat: add Master Admin application functionality
This commit is contained in:
Gagan7900
@@ -0,0 +1,529 @@
|
||||
<div class="md:flex block items-center justify-between my-[1.5rem] page-header-breadcrumb">
|
||||
<div>
|
||||
<p class="font-semibold text-[1.125rem] text-defaulttextcolor dark:text-defaulttextcolor/70 !mb-0 ">Welcome back,
|
||||
Json Taylor !</p>
|
||||
<p class="font-normal text-[#8c9097] dark:text-white/50 text-[0.813rem]">Track your sales activity, leads and deals
|
||||
here.</p>
|
||||
</div>
|
||||
<div class="btn-list md:mt-0 mt-2">
|
||||
<button type="button"
|
||||
class="ti-btn bg-primary text-white btn-wave !font-medium !me-[0.375rem] !ms-0 !text-[0.85rem] !rounded-[0.35rem] !py-[0.51rem] !px-[0.86rem] shadow-none">
|
||||
<i class="ri-filter-3-fill inline-block"></i>Filters
|
||||
</button>
|
||||
<button type="button"
|
||||
class="ti-btn ti-btn-outline-secondary btn-wave !font-medium !me-[0.375rem] !ms-0 !text-[0.85rem] !rounded-[0.35rem] !py-[0.51rem] !px-[0.86rem] shadow-none">
|
||||
<i class="ri-upload-cloud-line inline-block"></i>Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-x-6">
|
||||
<div class="2xl:col-span-9 xl:col-span-12 col-span-12">
|
||||
<div class="grid grid-cols-12 gap-x-6">
|
||||
<div class="2xl:col-span-4 xl:col-span-4 col-span-12">
|
||||
<div class="2xl:col-span-12 xl:col-span-12 col-span-12">
|
||||
<div class="box crm-highlight-card">
|
||||
<div class="box-body">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="font-semibold text-[1.125rem] text-white mb-2">Your target is incomplete</div>
|
||||
<span class="block text-[0.75rem] text-white"><span class="opacity-[0.7]">You have
|
||||
completed</span>
|
||||
<span class="font-semibold text-warning"> 48%</span> <span class="opacity-[0.7]"> of the given
|
||||
target, you can also check your status</span>.</span>
|
||||
<span class="block font-semibold mt-[0.125rem]"><a class="text-white text-[0.813rem]"
|
||||
href="javascript:void(0);"><u>Click
|
||||
here</u></a></span>
|
||||
</div>
|
||||
<div>
|
||||
<spk-apexcharts id="crm-main" [chartOptions]="YourtargetisincompleteChart" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="2xl:col-span-12 xl:col-span-12 col-span-12">
|
||||
<div class="box">
|
||||
<div class="box-header flex justify-between">
|
||||
<div class="box-title">
|
||||
Top Deals
|
||||
</div>
|
||||
<div class="hs-dropdown ti-dropdown">
|
||||
<a aria-label="anchor" href="javascript:void(0);"
|
||||
class="flex items-center justify-center w-[1.75rem] h-[1.75rem] !text-[0.8rem] !py-1 !px-2 rounded-sm bg-light border-light shadow-none !font-medium"
|
||||
aria-expanded="false">
|
||||
<i class="fe fe-more-vertical text-[0.8rem]"></i>
|
||||
</a>
|
||||
<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);">Week</a></li>
|
||||
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
|
||||
href="javascript:void(0);">Month</a></li>
|
||||
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
|
||||
href="javascript:void(0);">Year</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<ul class="list-none crm-top-deals mb-0">
|
||||
@for (deal of topDeals; track $index) {
|
||||
<li [class]="!$last ?'mb-[0.9rem]':''">
|
||||
<div class="flex items-start flex-wrap">
|
||||
|
||||
<div class="me-2">
|
||||
<span class="inline-flex items-center justify-center">
|
||||
@if (deal.avatarImg) {
|
||||
<img [src]="deal.avatarImg" [alt]="deal.name"
|
||||
class="w-[1.75rem] h-[1.75rem] leading-[1.75rem] rounded-full">
|
||||
} @else {
|
||||
<span
|
||||
[class]="`inline-flex items-center justify-center !w-[1.75rem] !h-[1.75rem] leading-[1.75rem] text-[0.65rem] rounded-full font-semibold bg-${deal.color}/10 text-${deal.color}`">
|
||||
{{ deal.initials }}
|
||||
</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow">
|
||||
<p class="font-semibold mb-[1.4px] text-[0.813rem]">
|
||||
{{ deal.name }}
|
||||
</p>
|
||||
<p class="text-[#8c9097] dark:text-white/50 text-[0.75rem]">
|
||||
{{ deal.email }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="font-semibold text-[0.9375rem]">
|
||||
{{ deal.amount }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="2xl:col-span-12 xl:col-span-12 col-span-12">
|
||||
<div class="box">
|
||||
<div class="box-header justify-between">
|
||||
<div class="box-title">Profit Earned</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 !py-0 !ps-0">
|
||||
<spk-apexcharts [chartOptions]="profitEarnedChart" id="crm-profits-earned" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="2xl:col-span-8 xl:col-span-8 col-span-12">
|
||||
<div class="grid grid-cols-12 gap-x-6">
|
||||
@for (item of crmCards; track $index) {
|
||||
<div class="2xl:col-span-6 xl:col-span-6 col-span-12">
|
||||
<div class="box overflow-hidden">
|
||||
<div class="box-body">
|
||||
<div class="flex items-top justify-between">
|
||||
<div>
|
||||
<span
|
||||
[class]="`!text-[0.8rem] !w-[2.5rem] !h-[2.5rem] !leading-[2.5rem] !rounded-full inline-flex items-center justify-center bg-${item.color}`">
|
||||
<i [class]="`${item.icon} text-[1rem] text-white`"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-grow ms-4">
|
||||
<div class="flex items-center justify-between flex-wrap">
|
||||
<div>
|
||||
<p class="text-[#8c9097] dark:text-white/50 text-[0.813rem] mb-0">{{item.title}}</p>
|
||||
<h4 class="font-semibold text-[1.5rem] !mb-2 ">{{item.number}}</h4>
|
||||
</div>
|
||||
<spk-apexcharts [id]="item.chartId" [chartOptions]="item.chartoptions" />
|
||||
</div>
|
||||
<div class="flex items-center justify-between !mt-1">
|
||||
<div>
|
||||
<a [class]="`text-${item.color} text-[0.813rem]`" href="javascript:void(0);">View All<i
|
||||
class="ti ti-arrow-narrow-right ms-2 font-semibold inline-block"></i></a>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<p [class]="`mb-0 ${item.percentageColor} text-[0.813rem] font-semibold`">{{item.percentage}}
|
||||
</p>
|
||||
<p class="text-[#8c9097] dark:text-white/50 opacity-[0.7] text-[0.6875rem]">this month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="2xl:col-span-12 xl:col-span-12 col-span-12">
|
||||
<div class="box">
|
||||
<div class="box-header !gap-0 !m-0 justify-between">
|
||||
<div class="box-title">
|
||||
Revenue Analytics
|
||||
</div>
|
||||
<div class="hs-dropdown ti-dropdown">
|
||||
<a href="javascript:void(0);"
|
||||
class="text-[0.75rem] px-2 font-normal 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 !py-5">
|
||||
<spk-apexcharts [id]="'crm-revenue-analytics'" [chartOptions]="RevenueAnalytics" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="2xl:col-span-12 xl:col-span-12 col-span-12">
|
||||
<div class="box custom-card">
|
||||
<div class="box-header justify-between">
|
||||
<div class="box-title">
|
||||
Deals Statistics
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div>
|
||||
<input class="ti-form-control form-control-sm" type="text" placeholder="Search Here"
|
||||
aria-label=".form-control-sm example">
|
||||
</div>
|
||||
<div class="hs-dropdown ti-dropdown">
|
||||
<a href="javascript:void(0);"
|
||||
class="ti-btn ti-btn-primary !bg-primary !text-white !py-1 !px-2 !text-[0.75rem] !m-0 !gap-0 !font-medium"
|
||||
aria-expanded="false">
|
||||
Sort By<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);">New</a></li>
|
||||
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
|
||||
href="javascript:void(0);">Popular</a></li>
|
||||
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
|
||||
href="javascript:void(0);">Relevant</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="table-responsive">
|
||||
<spk-reusable-tables [columns]="SalesRepData.columns" [showCheckbox]="true"
|
||||
tableClass="table min-w-full whitespace-nowrap table-hover border table-bordered">
|
||||
|
||||
@for (row of SalesRepData.rows; track row.id) {
|
||||
<tr class="border !border-defaultborder border-solid hover:bg-gray-100 dark:!border-defaultborder/10 dark:hover:!bg-light">
|
||||
|
||||
<td scope="row" class="">
|
||||
<input class="form-check-input" type="checkbox" [checked]="row.checked" aria-label="...">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="flex items-center font-semibold">
|
||||
<span class="!me-2 inline-flex justify-center items-center">
|
||||
<img [src]="row.img" alt="img" class="w-[1.75rem] h-[1.75rem] rounded-full">
|
||||
</span>
|
||||
{{ row.name }}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>{{ row.category }}</td>
|
||||
|
||||
<td>{{ row.mail }}</td>
|
||||
|
||||
<td>
|
||||
<span
|
||||
[class]="'inline-flex text-' + row.locationClass + ' !py-[0.15rem] !px-[0.45rem] rounded-sm !font-semibold !text-[0.75em] bg-' + row.locationClass + '/10'">
|
||||
{{ row.location }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>{{ row.date }}</td>
|
||||
|
||||
<td>
|
||||
<div class="flex flex-row items-center !gap-2 text-[0.9375rem]">
|
||||
<a aria-label="anchor" href="javascript:void(0);"
|
||||
class="ti-btn ti-btn-icon ti-btn-wave !gap-0 !m-0 !h-[1.75rem] !w-[1.75rem] text-[0.8rem] bg-success/10 text-success hover:bg-success hover:!text-white hover:!border-success">
|
||||
<i class="ri-download-2-line"></i>
|
||||
</a>
|
||||
<a aria-label="anchor" href="javascript:void(0);"
|
||||
class="ti-btn ti-btn-icon ti-btn-wave !gap-0 !m-0 !h-[1.75rem] !w-[1.75rem] text-[0.8rem] bg-primary/10 text-primary hover:bg-primary hover:!text-white hover:!border-primary">
|
||||
<i class="ri-edit-line"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
}
|
||||
</spk-reusable-tables>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<div class="sm:flex items-center">
|
||||
<div class="text-defaulttextcolor dark:text-defaulttextcolor/70">
|
||||
Showing 5 Entries <i class="bi bi-arrow-right ms-2 font-semibold"></i>
|
||||
</div>
|
||||
<div class="ms-auto">
|
||||
<nav aria-label="Page navigation" class="pagination-style-4">
|
||||
<ul class="ti-pagination mb-0">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="javascript:void(0);">
|
||||
Prev
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link active" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link !text-primary" href="javascript:void(0);">
|
||||
next
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="2xl:col-span-3 xl:col-span-12 col-span-12">
|
||||
<div class="grid grid-cols-12 gap-x-6">
|
||||
<div class="2xl:col-span-12 xl:col-span-12 col-span-12">
|
||||
<div class="box">
|
||||
<div class="box-header justify-between">
|
||||
<div class="box-title">
|
||||
Leads By Source
|
||||
</div>
|
||||
<div class="hs-dropdown ti-dropdown">
|
||||
<a aria-label="anchor" href="javascript:void(0);"
|
||||
class="flex items-center justify-center w-[1.75rem] h-[1.75rem] ! !text-[0.8rem] !py-1 !px-2 rounded-sm bg-light border-light shadow-none !font-medium"
|
||||
aria-expanded="false">
|
||||
<i class="fe fe-more-vertical text-[0.8rem]"></i>
|
||||
</a>
|
||||
<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);">Week</a></li>
|
||||
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
|
||||
href="javascript:void(0);">Month</a></li>
|
||||
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
|
||||
href="javascript:void(0);">Year</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-body !p-6 mt-4">
|
||||
|
||||
<div class="leads-source-chart flex items-center justify-center">
|
||||
|
||||
<spk-chartjs [id]="'leads-source'" [class]="'chartjs-chart w-full'" [height]="250" [chartjs]="LeadsBySourceChart" />
|
||||
|
||||
<div class="lead-source-value ">
|
||||
<span class="block text-[0.875rem] ">Total</span>
|
||||
<span class="block text-[1.5625rem] font-bold">4,145</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 mt-4 border-t border-dashed border-defaultborder dark:border-defaultborder/10">
|
||||
|
||||
@for (item of deviceLeads; track item.label) {
|
||||
<div class="col !p-0">
|
||||
<div [class]="item.containerClass">
|
||||
|
||||
<span class="text-[#8c9097] dark:text-white/50 text-[0.75rem] mb-1 crm-lead-legend inline-block"
|
||||
[class]="item.legendClass">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<span class="text-[1rem] font-semibold">{{ item.value }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="2xl:col-span-12 xl:col-span-6 col-span-12">
|
||||
<div class="box">
|
||||
<div class="box-header justify-between">
|
||||
<div class="box-title">
|
||||
Deals Status
|
||||
</div>
|
||||
<div class="hs-dropdown ti-dropdown">
|
||||
<a href="javascript:void(0);" class="text-[0.75rem] px-2 font-normal 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 class="flex items-center mb-[0.8rem]">
|
||||
<h4 class="font-bold mb-0 text-[1.5rem] ">4,289</h4>
|
||||
<div class="ms-2">
|
||||
<span
|
||||
class="py-[0.18rem] px-[0.45rem] rounded-sm text-success !font-medium !text-[0.75em] bg-success/10">1.02<i
|
||||
class="ri-arrow-up-s-fill align-mmiddle ms-1"></i></span>
|
||||
<span class="text-[#8c9097] dark:text-white/50 text-[0.813rem] ms-1">compared to last week</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full h-[0.3125rem] mb-6 rounded-full overflow-hidden">
|
||||
<div class="flex flex-col justify-center rounded-s-[0.625rem] overflow-hidden bg-primary w-[21%]"
|
||||
aria-valuenow="21" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
<div class="flex flex-col justify-center rounded-none overflow-hidden bg-info w-[26%]" aria-valuenow="26"
|
||||
aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
<div class="flex flex-col justify-center rounded-none overflow-hidden bg-warning w-[35%]"
|
||||
aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
<div class="flex flex-col justify-center rounded-e-[0.625rem] overflow-hidden bg-success w-[18%]"
|
||||
aria-valuenow="18" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-none mb-0 pt-2 crm-deals-status">
|
||||
|
||||
@for (deal of dealStats; track deal.title) {
|
||||
<li [class]="deal.liClass">
|
||||
<div class="flex items-center text-[0.813rem] justify-between">
|
||||
<div>{{ deal.title }}</div>
|
||||
|
||||
<div class="text-[0.75rem] text-[#8c9097] dark:text-white/50">
|
||||
{{ deal.count }}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="2xl:col-span-12 xl:col-span-6 col-span-12">
|
||||
<div class="box">
|
||||
<div class="box-header justify-between">
|
||||
<div class="box-title">
|
||||
Recent Activity
|
||||
</div>
|
||||
<div class="hs-dropdown ti-dropdown">
|
||||
<a href="javascript:void(0);" class="text-[0.75rem] px-2 font-normal 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>
|
||||
<ul class="list-none mb-0 crm-recent-activity">
|
||||
@for (item of recentActivity; track $index) {
|
||||
<li class="crm-recent-activity-content text-defaultsize">
|
||||
<div class="flex items-start">
|
||||
|
||||
<div class="me-4">
|
||||
<span
|
||||
class="w-[1.25rem] h-[1.25rem] inline-flex items-center justify-center font-medium leading-[1.25rem] text-[0.65rem] rounded-full"
|
||||
[class]="item.statusClass">
|
||||
<i class="bi bi-circle-fill text-[0.5rem]"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="crm-timeline-content">
|
||||
<span [class.font-semibold]="item.boldMain">{{ item.mainText }}</span>
|
||||
|
||||
@if (item.linkText) {
|
||||
<a href="javascript:void(0);" [class]="item.linkClass">{{ item.linkText }}</a>
|
||||
}
|
||||
|
||||
@if (item.boldText) {
|
||||
<span class="font-semibold">{{ item.boldText }}</span>
|
||||
}
|
||||
|
||||
@if (item.highlightText) {
|
||||
<span [class]="item.highlightClass">{{ item.highlightText }}</span>
|
||||
}
|
||||
|
||||
@if (item.tagText) {
|
||||
<span [class]="item.tagClass">{{ item.tagText }}</span>
|
||||
}
|
||||
|
||||
@if (item.afterText) {
|
||||
<span>{{ item.afterText }}</span>
|
||||
}
|
||||
|
||||
@if (item.showAddIcon) {
|
||||
<span
|
||||
class="w-[1.25rem] h-[1.25rem] leading-[1.25rem] text-[0.65rem] inline-flex items-center justify-center font-medium bg-purple/10 rounded-full ms-1">
|
||||
<i class="ri-add-fill text-purple text-[0.75rem]"></i>
|
||||
</span>
|
||||
}
|
||||
|
||||
@if (item.showCheckIcon) {
|
||||
<i class="ri-checkbox-circle-line text-success text-[1rem] align-middle ms-1"></i>
|
||||
}
|
||||
|
||||
@if (item.subText) {
|
||||
<span class="block text-[0.75rem] text-[#8c9097] dark:text-white/50">
|
||||
{{ item.subText }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="flex-grow text-end">
|
||||
<span class="block text-[#8c9097] dark:text-white/50 text-[0.6875rem] opacity-[0.7]">
|
||||
{{ item.time }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,618 @@
|
||||
import { Chart, ChartConfiguration, Plugin } from 'chart.js';
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { SpkApexcharts } from "../../../@spk/charts/charts/spk-apexcharts/spk-apexcharts";
|
||||
import { ApexOptions } from 'ng-apexcharts';
|
||||
import { SpkReusableTables } from "../../../@spk/tables/spk-reusable-tables/spk-reusable-tables";
|
||||
import { SpkChartjs } from "../../../@spk/charts/charts/spk-chartjs/spk-chartjs";
|
||||
@Component({
|
||||
selector: 'app-crm',
|
||||
standalone: true,
|
||||
imports: [RouterModule, SpkApexcharts, SpkReusableTables, SpkChartjs],
|
||||
templateUrl: './crm.html',
|
||||
styleUrl: './crm.scss'
|
||||
})
|
||||
export class Crm {
|
||||
YourtargetisincompleteChart: ApexOptions = {
|
||||
chart: {
|
||||
height: 127,
|
||||
width: 100,
|
||||
type: 'radialBar',
|
||||
},
|
||||
|
||||
series: [48],
|
||||
// colors: ['#fff'],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
margin: 0,
|
||||
size: '55%',
|
||||
background: '#fff',
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: -10,
|
||||
color: '#4b9bfa',
|
||||
fontSize: '.625rem',
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
offsetY: 5,
|
||||
color: '#4b9bfa',
|
||||
fontSize: '.875rem',
|
||||
show: true,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round',
|
||||
},
|
||||
labels: ['Status'],
|
||||
colors: ['#fff']
|
||||
}
|
||||
|
||||
topDeals = [
|
||||
{
|
||||
name: 'Michael Jordan',
|
||||
email: 'michael.jordan@example.com',
|
||||
amount: '$2,893',
|
||||
avatarImg: './assets/images/faces/10.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Emigo Kiaren',
|
||||
email: 'emigo.kiaren@gmail.com',
|
||||
amount: '$4,289',
|
||||
initials: 'EK',
|
||||
color: 'warning', // Used for text-warning and bg-warning/10
|
||||
},
|
||||
{
|
||||
name: 'Randy Origoan',
|
||||
email: 'randy.origoan@gmail.com',
|
||||
amount: '$6,347',
|
||||
avatarImg: './assets/images/faces/12.jpg'
|
||||
},
|
||||
{
|
||||
name: 'George Pieterson',
|
||||
email: 'george.pieterson@gmail.com',
|
||||
amount: '$3,894',
|
||||
initials: 'GP',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
name: 'Kiara Advain',
|
||||
email: 'kiaraadvain214@gmail.com',
|
||||
amount: '$2,679',
|
||||
initials: 'KA',
|
||||
color: 'primary',
|
||||
}
|
||||
];
|
||||
|
||||
profitEarnedChart: ApexOptions = {
|
||||
series: [
|
||||
{
|
||||
name: 'Profit Earned',
|
||||
data: [44, 42, 57, 86, 58, 55, 70],
|
||||
},
|
||||
{
|
||||
name: 'Total Sales',
|
||||
data: [34, 22, 37, 56, 21, 35, 60],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 180,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
strokeDashArray: 3,
|
||||
},
|
||||
colors: ['rgb(132, 90, 223)', '#e4e7ed'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
colors: {
|
||||
ranges: [
|
||||
{
|
||||
from: -100,
|
||||
to: -46,
|
||||
color: '#ebeff5',
|
||||
},
|
||||
{
|
||||
from: -45,
|
||||
to: 0,
|
||||
color: '#ebeff5',
|
||||
},
|
||||
],
|
||||
},
|
||||
columnWidth: '60%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: undefined,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
position: 'top',
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
style: {
|
||||
color: '#adb5be',
|
||||
fontSize: '13px',
|
||||
fontFamily: 'poppins, sans-serif',
|
||||
fontWeight: 600,
|
||||
cssClass: 'apexcharts-yaxis-label',
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
formatter: function (y: number) {
|
||||
return y.toFixed(0) + '';
|
||||
},
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
categories: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: 'rgba(119, 119, 142, 0.05)',
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
},
|
||||
axisTicks: {
|
||||
show: true,
|
||||
borderType: 'solid',
|
||||
color: 'rgba(119, 119, 142, 0.05)',
|
||||
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
},
|
||||
labels: {
|
||||
rotate: -90,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
|
||||
crmCardsChartOptions({ series, colors }: { colors: string[], series: { data: number[], name: string }[] }): ApexOptions {
|
||||
return {
|
||||
chart: {
|
||||
type: 'line',
|
||||
height: 40,
|
||||
width: 100,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
stroke: {
|
||||
show: true,
|
||||
curve: 'smooth',
|
||||
lineCap: 'butt',
|
||||
colors: undefined,
|
||||
width: 1.5,
|
||||
dashArray: 0,
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityFrom: 0.9,
|
||||
opacityTo: 0.9,
|
||||
stops: [0, 98],
|
||||
}
|
||||
},
|
||||
series: series,
|
||||
yaxis: {
|
||||
min: 0,
|
||||
show: false,
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
colors: colors,
|
||||
}
|
||||
}
|
||||
|
||||
crmCards = [
|
||||
{
|
||||
color: 'primary',
|
||||
icon: 'ti ti-users',
|
||||
title: 'Total Customers',
|
||||
number: '1,02,890',
|
||||
chartId: 'crm-total-customers',
|
||||
chartoptions: this.crmCardsChartOptions({
|
||||
series: [{
|
||||
name: 'Value',
|
||||
data: [20, 14, 19, 10, 23, 20, 22, 9, 12]
|
||||
}], colors: ["rgb(132, 90, 223)"],
|
||||
}),
|
||||
viewallTextColor: 'text-primary',
|
||||
percentage: '+40%',
|
||||
percentageColor: 'text-success',
|
||||
},
|
||||
{
|
||||
color: 'secondary',
|
||||
icon: 'ti ti-wallet',
|
||||
title: 'Total Revenue',
|
||||
number: '$56,562',
|
||||
chartId: 'crm-total-revenue',
|
||||
chartoptions: this.crmCardsChartOptions({
|
||||
series: [
|
||||
{
|
||||
name: 'Value',
|
||||
data: [20, 14, 20, 22, 9, 12, 19, 10, 25],
|
||||
},
|
||||
], colors: ['rgb(35, 183, 229)'],
|
||||
}),
|
||||
viewallTextColor: 'text-secondary',
|
||||
percentage: '+25%',
|
||||
percentageColor: 'text-success',
|
||||
},
|
||||
{
|
||||
color: 'success',
|
||||
icon: 'ti ti-wave-square',
|
||||
title: 'Conversion Ratio',
|
||||
number: '12.08%',
|
||||
chartId: 'crm-conversion-ratio',
|
||||
chartoptions: this.crmCardsChartOptions({
|
||||
series: [
|
||||
{
|
||||
name: 'Value',
|
||||
data: [20, 20, 22, 9, 14, 19, 10, 25, 12],
|
||||
},
|
||||
], colors: ['rgb(38, 191, 148)'],
|
||||
}),
|
||||
viewallTextColor: 'text-success',
|
||||
percentage: '-12%',
|
||||
percentageColor: 'text-danger',
|
||||
},
|
||||
{
|
||||
color: 'warning',
|
||||
icon: 'ti ti-briefcase',
|
||||
title: 'Total Deals',
|
||||
number: '2,543',
|
||||
chartId: 'crm-total-deals',
|
||||
chartoptions: this.crmCardsChartOptions({
|
||||
series: [
|
||||
{
|
||||
name: 'Value',
|
||||
data: [20, 20, 22, 9, 12, 14, 19, 10, 25],
|
||||
},
|
||||
], colors: ['rgb(245, 184, 73)'],
|
||||
}),
|
||||
viewallTextColor: 'text-warning',
|
||||
percentage: '+19%',
|
||||
percentageColor: 'text-success',
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
RevenueAnalytics: ApexOptions = {
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
name: 'Profit',
|
||||
data: [
|
||||
{ x: 'Jan', y: 100 },
|
||||
{ x: 'Feb', y: 210 },
|
||||
{ x: 'Mar', y: 180 },
|
||||
{ x: 'Apr', y: 454 },
|
||||
{ x: 'May', y: 230 },
|
||||
{ x: 'Jun', y: 320 },
|
||||
{ x: 'Jul', y: 656 },
|
||||
{ x: 'Aug', y: 830 },
|
||||
{ x: 'Sep', y: 350 },
|
||||
{ x: 'Oct', y: 350 },
|
||||
{ x: 'Nov', y: 210 },
|
||||
{ x: 'Dec', y: 410 },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'Revenue',
|
||||
data: [
|
||||
{ x: 'Jan', y: 180 },
|
||||
{ x: 'Feb', y: 620 },
|
||||
{ x: 'Mar', y: 476 },
|
||||
{ x: 'Apr', y: 220 },
|
||||
{ x: 'May', y: 520 },
|
||||
{ x: 'Jun', y: 780 },
|
||||
{ x: 'Jul', y: 435 },
|
||||
{ x: 'Aug', y: 515 },
|
||||
{ x: 'Sep', y: 738 },
|
||||
{ x: 'Oct', y: 454 },
|
||||
{ x: 'Nov', y: 525 },
|
||||
{ x: 'Dec', y: 230 },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'area',
|
||||
name: 'Sales',
|
||||
data: [
|
||||
{ x: 'Jan', y: 200 },
|
||||
{ x: 'Feb', y: 530 },
|
||||
{ x: 'Mar', y: 110 },
|
||||
{ x: 'Apr', y: 130 },
|
||||
{ x: 'May', y: 480 },
|
||||
{ x: 'Jun', y: 520 },
|
||||
{ x: 'Jul', y: 780 },
|
||||
{ x: 'Aug', y: 435 },
|
||||
{ x: 'Sep', y: 475 },
|
||||
{ x: 'Oct', y: 738 },
|
||||
{ x: 'Nov', y: 454 },
|
||||
{ x: 'Dec', y: 480 },
|
||||
],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
type: 'line',
|
||||
height: 350,
|
||||
animations: {
|
||||
speed: 500,
|
||||
},
|
||||
toolbar: {
|
||||
show: true
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
enabledOnSeries: undefined,
|
||||
top: 8,
|
||||
left: 0,
|
||||
blur: 3,
|
||||
color: '#000',
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
colors: ["rgb(132, 90, 223)", "rgba(35, 183, 229, 0.85)", "rgba(119, 119, 142, 0.05)"],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
grid: {
|
||||
padding:{
|
||||
left:0,
|
||||
right:0,
|
||||
top:0,
|
||||
bottom:0
|
||||
},
|
||||
borderColor: '#f1f1f1',
|
||||
strokeDashArray: 3,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: [2, 2, 0],
|
||||
dashArray: [0, 5, 0],
|
||||
},
|
||||
xaxis: {
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
|
||||
labels: {
|
||||
formatter: (value: number) => `$${value}`,
|
||||
},
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
y: [
|
||||
{
|
||||
formatter: (value: number) => `$${value}`,
|
||||
},
|
||||
{
|
||||
formatter: (value: number) => `$${value.toFixed(0)}`,
|
||||
},
|
||||
{
|
||||
formatter: (value: number) => `$${value.toFixed(0)}`,
|
||||
},
|
||||
],
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
offsetY: 15,
|
||||
customLegendItems: ['Profit', 'Revenue', 'Sales'],
|
||||
inverseOrder: true,
|
||||
markers: {
|
||||
size: 5
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Revenue Analytics with sales & profit (USD)',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontSize: '.8125rem',
|
||||
fontWeight: 'semibold',
|
||||
color: '#8c9097',
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
hover: {
|
||||
sizeOffset: 5,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
SalesRepData = {
|
||||
columns: [
|
||||
{ header: 'Sales Rep', tableHeadColumn: '!text-start !text-[0.85rem] min-w-[200px]' },
|
||||
{ header: 'Category', tableHeadColumn: '!text-start !text-[0.85rem]' },
|
||||
{ header: 'Mail', tableHeadColumn: '!text-start !text-[0.85rem]' },
|
||||
{ header: 'Location', tableHeadColumn: '!text-start !text-[0.85rem]' },
|
||||
{ header: 'Date', tableHeadColumn: '!text-start !text-[0.85rem]' },
|
||||
{ header: 'Action', tableHeadColumn: '!text-start !text-[0.85rem]' }
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, name: 'Mayor Kelly', img: './assets/images/faces/4.jpg', category: 'Manufacture', mail: 'mayorkelly@gmail.com', location: 'Germany', locationClass: 'info', date: 'Sep 15 - Oct 12, 2023', checked: false },
|
||||
{ id: 2, name: 'Andrew Garfield', img: './assets/images/faces/15.jpg', category: 'Development', mail: 'andrewgarfield@gmail.com', location: 'Canada', locationClass: 'primary', date: 'Apr 10 - Dec 12, 2023', checked: true },
|
||||
{ id: 3, name: 'Simon Cowel', img: './assets/images/faces/11.jpg', category: 'Service', mail: 'simoncowel234@gmail.com', location: 'Europe', locationClass: 'danger', date: 'Sep 15 - Oct 12, 2023', checked: false },
|
||||
{ id: 4, name: 'Mirinda Hers', img: './assets/images/faces/8.jpg', category: 'Marketing', mail: 'mirindahers@gmail.com', location: 'USA', locationClass: 'warning', date: 'Apr 14 - Dec 14, 2023', checked: true },
|
||||
{ id: 5, name: 'Jacob Smith', img: './assets/images/faces/9.jpg', category: 'Social Plataform', mail: 'jacobsmith@gmail.com', location: 'Singapore', locationClass: 'success', date: 'Feb 25 - Nov 25, 2023', checked: true }
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
LeadsBySourceChart: ChartConfiguration<'doughnut'> = {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [32, 27, 25, 16],
|
||||
backgroundColor: [
|
||||
'rgb(132, 90, 223)', // Purple
|
||||
'rgb(35, 183, 229)', // Blue
|
||||
'rgb(245, 184, 73)', // Orange
|
||||
'rgb(38, 191, 148)', // Green
|
||||
],
|
||||
// 1. INCREASE SPACING: This creates the clear gap between segments
|
||||
spacing: -20,
|
||||
// 2. ROUNDED BORDER: 10-20 is usually the sweet spot for this thinness
|
||||
borderRadius: 20,
|
||||
borderWidth: 0,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
// 3. THINNESS: Ensure this is high enough (80% to 90%)
|
||||
cutout: '86%',
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: { enabled: true }
|
||||
}
|
||||
}
|
||||
};
|
||||
recentActivity = [
|
||||
{
|
||||
statusClass: 'text-primary bg-primary/10',
|
||||
time: '4:45PM',
|
||||
mainText: 'Update of calendar events & ',
|
||||
boldMain: true,
|
||||
linkText: 'Added new events in next week.',
|
||||
linkClass: 'text-primary font-semibold'
|
||||
},
|
||||
{
|
||||
statusClass: 'text-secondary bg-secondary/10',
|
||||
time: '3 hrs',
|
||||
mainText: 'New theme for ',
|
||||
boldText: 'Spruko Website',
|
||||
afterText: ' completed',
|
||||
subText: 'Lorem ipsum, dolor sit amet.'
|
||||
},
|
||||
{
|
||||
statusClass: 'text-success bg-success/10',
|
||||
time: '22 hrs',
|
||||
mainText: 'Created a ',
|
||||
highlightText: 'New Task',
|
||||
highlightClass: 'text-success font-semibold',
|
||||
afterText: ' today',
|
||||
showAddIcon: true
|
||||
},
|
||||
{
|
||||
statusClass: 'text-pink bg-pink/10',
|
||||
time: 'Today',
|
||||
mainText: 'New member ',
|
||||
tagText: '@andreas gurrero',
|
||||
tagClass: 'py-[0.2rem] px-[0.45rem] font-semibold rounded-sm text-pink text-[0.75em] bg-pink/10',
|
||||
afterText: ' added today to AI Summit.'
|
||||
},
|
||||
{
|
||||
statusClass: 'text-warning bg-warning/10',
|
||||
time: '22 hrs',
|
||||
mainText: '32 New people joined summit.'
|
||||
},
|
||||
{
|
||||
statusClass: 'text-info bg-info/10',
|
||||
time: '12 hrs',
|
||||
mainText: 'Neon Tarly added ',
|
||||
highlightText: 'Robert Bright',
|
||||
highlightClass: 'text-info font-semibold',
|
||||
afterText: ' to AI summit project.'
|
||||
},
|
||||
{
|
||||
statusClass: 'text-[#232323] dark:text-white bg-[#232323]/10 dark:bg-white/20',
|
||||
time: '4 hrs',
|
||||
mainText: 'Replied to new support request ',
|
||||
showCheckIcon: true
|
||||
},
|
||||
{
|
||||
statusClass: 'text-purple bg-purple/10',
|
||||
time: '4 hrs',
|
||||
mainText: 'Completed documentation of ',
|
||||
linkText: 'AI Summit.',
|
||||
linkClass: 'text-purple underline font-semibold'
|
||||
}
|
||||
];
|
||||
|
||||
deviceLeads = [
|
||||
{
|
||||
label: 'Mobile',
|
||||
value: '1,624',
|
||||
legendClass: 'mobile',
|
||||
containerClass: '!ps-4 p-[0.95rem] text-center border-e border-dashed border-defaultborder dark:border-defaultborder/10'
|
||||
},
|
||||
{
|
||||
label: 'Desktop',
|
||||
value: '1,267',
|
||||
legendClass: 'desktop',
|
||||
containerClass: 'p-[0.95rem] text-center border-e border-dashed border-defaultborder dark:border-defaultborder/10'
|
||||
},
|
||||
{
|
||||
label: 'Laptop',
|
||||
value: '1,153',
|
||||
legendClass: 'laptop',
|
||||
containerClass: 'p-[0.95rem] text-center border-e border-dashed border-defaultborder dark:border-defaultborder/10'
|
||||
},
|
||||
{
|
||||
label: 'Tablet',
|
||||
value: '679',
|
||||
legendClass: 'tablet',
|
||||
containerClass: '!pe-4 p-[0.95rem] text-center'
|
||||
}
|
||||
];
|
||||
|
||||
dealStats = [
|
||||
{ title: 'Successful Deals', count: '987 deals', liClass: 'primary' },
|
||||
{ title: 'Pending Deals', count: '1,073 deals', liClass: 'info' },
|
||||
{ title: 'Rejected Deals', count: '1,674 deals', liClass: 'warning' },
|
||||
{ title: 'Upcoming Deals', count: '921 deals', liClass: 'success' }
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
export const dashboardRoutingModule: Routes = [
|
||||
|
||||
{
|
||||
path: 'crm',
|
||||
loadComponent: () => import('./crm/crm').then((m) => m.Crm),
|
||||
title: 'YNEX - Crm',
|
||||
},
|
||||
|
||||
|
||||
];
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
export const errorRoutingModule: Routes = [
|
||||
{
|
||||
path: 'error', children: [
|
||||
{
|
||||
path: 'error404',
|
||||
loadComponent: () => import('./error404/error404').then( (m) => m.Error404 ),
|
||||
title: 'YNEX - Error 404'
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="page error-bg dark:!bg-bodybg" id="particles-js">
|
||||
<!-- Start::error-page -->
|
||||
<spk-particles id="tsparticles" [options]="particlesOptions" />
|
||||
|
||||
<div class="error-page">
|
||||
<div class="container text-defaulttextcolo dark:text-defaulttextcolor/70r text-defaultsize">
|
||||
<div class="text-center p-5 my-auto">
|
||||
<div class="flex items-center justify-center h-full !text-defaulttextcolor">
|
||||
<div class="xl:col-span-3"></div>
|
||||
<div class="xl:col-span-6 col-span-12">
|
||||
<p class="error-text sm:mb-0 mb-2">404</p>
|
||||
<p class="text-[1.125rem] font-semibold mb-4">Oops 😭,The page you are looking for is not available.</p>
|
||||
<div class="flex justify-center items-center mb-[3rem]">
|
||||
<div class="xl:col-span-6 w-[50%]">
|
||||
<p class="mb-0 opacity-[0.7]">We are sorry for the inconvenience,The page you are trying to access has
|
||||
been removed or never been existed.</p>
|
||||
</div>
|
||||
</div>
|
||||
<a routerLink="/dashboards/crm" class="ti-btn bg-primary text-white font-semibold"><i
|
||||
class="ri-arrow-left-line align-middle inline-block"></i>BACK TO HOME</a>
|
||||
</div>
|
||||
<div class="xl:col-span-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {RouterModule} from'@angular/router';
|
||||
import { SpkParticles } from "../../../@spk/plugins&reusable/spk-particles/spk-particles";
|
||||
import {particlesOptions} from "../particleoptions"
|
||||
@Component({
|
||||
selector: 'app-error404',
|
||||
standalone: true,
|
||||
imports: [RouterModule, SpkParticles],
|
||||
templateUrl: './error404.html',
|
||||
styleUrls: ['./error404.scss']
|
||||
})
|
||||
export class Error404 {
|
||||
particlesOptions=particlesOptions
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
export const particlesOptions = {
|
||||
fpsLimit: 60, // 200 is excessive; 60 is smooth and efficient
|
||||
interactivity: {
|
||||
events: {
|
||||
onClick: { enable: true },
|
||||
onHover: { enable: true },
|
||||
resize: { enable: true }
|
||||
},
|
||||
modes: {
|
||||
push: { quantity: 4 },
|
||||
repulse: { distance: 200, duration: 0.4 }
|
||||
}
|
||||
},
|
||||
particles: {
|
||||
number: {
|
||||
value: 80,
|
||||
density: { enable: true, value_area: 800 }
|
||||
},
|
||||
color: { value: "#845adf" },
|
||||
shape: { type: "circle" },
|
||||
opacity: { value: 0.5 },
|
||||
size: { value: 2, random: true },
|
||||
line_linked: {
|
||||
enable: true,
|
||||
distance: 150,
|
||||
color: "#d1d9e0",
|
||||
opacity: 0.4,
|
||||
width: 1
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 2,
|
||||
out_mode: "out"
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user