syscom-master-admin-ui/src/app/components/dashboards/crm/crm.html

<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>