{% extends 'shared/secure.html.twig'%}
{% block title %}Sales Overvies {% endblock %}

{% block css %}

{% endblock %}

{% block heading %}
Sales Overview
{% endblock %}


{% block breadcrumb %}
<!--begin::Item-->
<li class="breadcrumb-item">
	<span class="bullet bg-gray-300 w-5px h-2px"></span>
</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item text-muted">Sales </li>
		<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item">
	<span class="bullet bg-gray-300 w-5px h-2px"></span>
</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item text-muted">Sales Overvies</li>
		<!--end::Item-->
{% endblock %}

{% block content %}

<div class="d-flex flex-left flex-equal fw-row text-nowrap order-1 order-xxl-2 me-4 pb-5" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Enter invoice number">
	<span class="fs-2x fw-bold text-gray-800">Volume Today</span>
</div>
<!--begin::Row-->
<div class="row">


  <!--begin::Col-->
  <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
    <!--begin::Card widget 4-->
    <div class="card card-flush mb-10 pb-10">
      <!--begin::Header-->
      <div class="card-header pt-5">
        <!--begin::Title-->
        <div class="card-title d-flex flex-column">
        <!--begin::Subtitle-->
          <span class="text-gray-500 pt-1 fw-semibold fs-6">Paid Awaiting Delivery (20)</span>
          <!--end::Subtitle-->
          <!--begin::Info-->
          <div class="d-flex align-items-center">
            <!--begin::Currency-->
            <span class="fs-4 fw-semibold text-primary me-1 align-self-start">₦</span>
            <!--end::Currency-->
            <!--begin::Amount-->
            <span class="fs-2hx fw-bold text-primary me-2 lh-1 ls-n2">13,700</span>
            <!--end::Amount-->

          </div>
          <!--end::Info-->

        </div>
        <!--end::Title-->
      </div>
      <!--end::Header-->

    </div>
    <!--end::Card widget 4-->
  </div>
  <!--end::Col-->
  <!--begin::Col-->
    <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
      <!--begin::Card widget 4-->
      <div class="card card-flush mb-10 pb-10">
        <!--begin::Header-->
        <div class="card-header pt-5">
          <!--begin::Title-->
          <div class="card-title d-flex flex-column">
          <!--begin::Subtitle-->
            <span class="text-gray-500 pt-1 fw-semibold fs-6">Overdue Shipment(21)</span>
            <!--end::Subtitle-->
            <!--begin::Info-->
            <div class="d-flex align-items-center">
              <!--begin::Currency-->
              <span class="fs-4 fw-semibold text-warning me-1 align-self-start">₦</span>
              <!--end::Currency-->
              <!--begin::Amount-->
              <span class="fs-2hx fw-bold text-warning me-2 lh-1 ls-n2">8,090</span>
              <!--end::Amount-->

            </div>
            <!--end::Info-->

          </div>
          <!--end::Title-->
        </div>
        <!--end::Header-->

      </div>
      <!--end::Card widget 4-->
    </div>
    <!--end::Col-->
  <!--begin::Col-->
    <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
      <!--begin::Card widget 4-->
      <div class="card card-flush mb-10 pb-10">
        <!--begin::Header-->
        <div class="card-header pt-5">
          <!--begin::Title-->
          <div class="card-title d-flex flex-column">
          <!--begin::Subtitle-->
            <span class="text-gray-500 pt-1 fw-semibold fs-6">Awaiting Payment (1)</span>
            <!--end::Subtitle-->
            <!--begin::Info-->
            <div class="d-flex align-items-center">
              <!--begin::Currency-->
              <span class="fs-4 fw-semibold text-primary me-1 align-self-start">₦</span>
              <!--end::Currency-->
              <!--begin::Amount-->
              <span class="fs-2hx fw-bold text-primary me-2 lh-1 ls-n2">700</span>
              <!--end::Amount-->

            </div>
            <!--end::Info-->

          </div>
          <!--end::Title-->
        </div>
        <!--end::Header-->

      </div>
      <!--end::Card widget 4-->
    </div>
    <!--end::Col-->
  <!--begin::Col-->
    <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
      <!--begin::Card widget 4-->
      <div class="card card-flush mb-10 pb-10">
        <!--begin::Header-->
        <div class="card-header pt-5">
          <!--begin::Title-->
          <div class="card-title d-flex flex-column">
          <!--begin::Subtitle-->
            <span class="text-gray-500 pt-1 fw-semibold fs-6">Overdue with Courier (6)</span>
            <!--end::Subtitle-->
            <!--begin::Info-->
            <div class="d-flex align-items-center">
              <!--begin::Currency-->
              <span class="fs-4 fw-semibold text-warning me-1 align-self-start">₦</span>
              <!--end::Currency-->
              <!--begin::Amount-->
              <span class="fs-2hx fw-bold text-warning me-2 lh-1 ls-n2">8,140</span>
              <!--end::Amount-->

            </div>
            <!--end::Info-->

          </div>
          <!--end::Title-->
        </div>
        <!--end::Header-->

      </div>
      <!--end::Card widget 4-->
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->
<div class="d-flex flex-left flex-equal fw-row text-nowrap order-1 order-xxl-2 me-4 pb-5" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Enter invoice number">
	<span class="fs-2x fw-bold text-gray-800">Invoices</span>
</div>
<!--begin::Row-->
<div class="row">


  <!--begin::Col-->
  <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
    <!--begin::Card widget 4-->
    <div class="card card-flush mb-10 pb-10">
      <!--begin::Header-->
      <div class="card-header pt-5">
        <!--begin::Title-->
        <div class="card-title d-flex flex-column">
        <!--begin::Subtitle-->
          <span class="text-gray-500 pt-1 fw-semibold fs-6">Draft (2)</span>
          <!--end::Subtitle-->
          <!--begin::Info-->
          <div class="d-flex align-items-center">
            <!--begin::Currency-->
            <span class="fs-4 fw-semibold text-primary me-1 align-self-start">₦</span>
            <!--end::Currency-->
            <!--begin::Amount-->
            <span class="fs-2hx fw-bold text-primary me-2 lh-1 ls-n2">3,700</span>
            <!--end::Amount-->

          </div>
          <!--end::Info-->

        </div>
        <!--end::Title-->
      </div>
      <!--end::Header-->

    </div>
    <!--end::Card widget 4-->
  </div>
  <!--end::Col-->
  <!--begin::Col-->
    <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
      <!--begin::Card widget 4-->
      <div class="card card-flush mb-10 pb-10">
        <!--begin::Header-->
        <div class="card-header pt-5">
          <!--begin::Title-->
          <div class="card-title d-flex flex-column">
          <!--begin::Subtitle-->
            <span class="text-gray-500 pt-1 fw-semibold fs-6">Awaiting Approval</span>
            <!--end::Subtitle-->
            <!--begin::Info-->
            <div class="d-flex align-items-center">
              <!--begin::Currency-->
              <span class="fs-4 fw-semibold text-gray-500 me-1 align-self-start">₦</span>
              <!--end::Currency-->
              <!--begin::Amount-->
              <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">0</span>
              <!--end::Amount-->

            </div>
            <!--end::Info-->

          </div>
          <!--end::Title-->
        </div>
        <!--end::Header-->

      </div>
      <!--end::Card widget 4-->
    </div>
    <!--end::Col-->
  <!--begin::Col-->
    <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
      <!--begin::Card widget 4-->
      <div class="card card-flush mb-10 pb-10">
        <!--begin::Header-->
        <div class="card-header pt-5">
          <!--begin::Title-->
          <div class="card-title d-flex flex-column">
          <!--begin::Subtitle-->
            <span class="text-gray-500 pt-1 fw-semibold fs-6">Awaiting Payment (10)</span>
            <!--end::Subtitle-->
            <!--begin::Info-->
            <div class="d-flex align-items-center">
              <!--begin::Currency-->
              <span class="fs-4 fw-semibold text-primary me-1 align-self-start">₦</span>
              <!--end::Currency-->
              <!--begin::Amount-->
              <span class="fs-2hx fw-bold text-primary me-2 lh-1 ls-n2">19,700</span>
              <!--end::Amount-->

            </div>
            <!--end::Info-->

          </div>
          <!--end::Title-->
        </div>
        <!--end::Header-->

      </div>
      <!--end::Card widget 4-->
    </div>
    <!--end::Col-->
  <!--begin::Col-->
    <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
      <!--begin::Card widget 4-->
      <div class="card card-flush mb-10 pb-10">
        <!--begin::Header-->
        <div class="card-header pt-5">
          <!--begin::Title-->
          <div class="card-title d-flex flex-column">
          <!--begin::Subtitle-->
            <span class="text-gray-500 pt-1 fw-semibold fs-6">Overdue (6)</span>
            <!--end::Subtitle-->
            <!--begin::Info-->
            <div class="d-flex align-items-center">
              <!--begin::Currency-->
              <span class="fs-4 fw-semibold text-danger me-1 align-self-start">₦</span>
              <!--end::Currency-->
              <!--begin::Amount-->
              <span class="fs-2hx fw-bold text-danger me-2 lh-1 ls-n2">8,140</span>
              <!--end::Amount-->

            </div>
            <!--end::Info-->

          </div>
          <!--end::Title-->
        </div>
        <!--end::Header-->

      </div>
      <!--end::Card widget 4-->
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->

<!--begin::Row-->
<div class="row g-5 g-xl-10 mb-5 mb-xl-10">
  <!--begin::Chart Accounting-->
  <div class="col-xl-8">
    <!--begin::Chart Widget 1-->
    <div class="card card-flush h-md-100  h-lg-100">
      <!--begin::Header-->
      <div class="card-header pt-5">
        <!--begin::Title-->
        <h3 class="card-title align-items-start flex-column">
          <span class="card-label fw-bold text-gray-900">Sales Revenue</span>
            <span class="text-gray-500 pt-1 fw-semibold fs-6">Highlights of total sales revenue</span>

        </h3>
        <!--end::Title-->
        <!--begin::Toolbar-->
        <div class="card-toolbar">
          <!--begin::Menu-->
          <button class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end" >
            <i class="ki-duotone ki-dots-square fs-1 text-gray-500 me-n1">
              <span class="path1"></span>
              <span class="path2"></span>
              <span class="path3"></span>
              <span class="path4"></span>
            </i>
          </button>
          <!--begin::Menu 2-->

          <!--end::Menu 2-->
          <!--end::Menu-->
        </div>
        <!--end::Toolbar-->
      </div>
      <!--end::Header-->
      <!--begin::Body-->
      <div class="card-body pt-0 px-0">
        <!--begin::Chart-->
        <div id="kt_charts_sales_overview" class="min-h-auto ps-4 pe-6 mb-3" style="height: 350px"></div>
        <!--end::Chart-->
        <!--begin::Info-->
        <div class="d-flex align-items-center px-9">
          <!--begin::Item-->
          <div class="d-flex align-items-center me-6">
            <!--begin::Bullet-->
            <span class="rounded-1 bg-primary me-2 h-10px w-10px"></span>
            <!--end::Bullet-->
            <!--begin::Label-->
            <span class="fw-semibold fs-6 text-gray-600">Revenue</span>
            <!--end::Label-->
          </div>
          <!--ed::Item-->

        </div>
        <!--ed::Info-->
      </div>
      <!--end::Body-->
    </div>
    <!--end::Chart Widget 1-->
  </div>
  <!--end::Chart Accounting-->
    <!--begin::Col-->
  <div class="col-xl-4">
    <!--begin::List widget 12-->
    <div class="card card-flush h-xl-100">
      <!--begin::Header-->
      <div class="card-header pt-7">
        <!--begin::Title-->
        <h3 class="card-title align-items-start flex-column">
          <span class="card-label fw-bold text-gray-800">Customers with most debt</span>
          <span class="text-gray-500 pt-1 fw-semibold fs-6">Customers owing you the most</span>

        </h3>
        <!--end::Title-->

        <!--begin::Toolbar-->
        <div class="card-toolbar">
          <!--begin::Menu-->
          <button class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end" >
            <i class="ki-duotone ki-dots-square fs-1 text-gray-500 me-n1">
              <span class="path1"></span>
              <span class="path2"></span>
              <span class="path3"></span>
              <span class="path4"></span>
            </i>
          </button>

          <!--end::Menu-->
        </div>
        <!--end::Toolbar-->

      </div>
      <!--end::Header-->
      <!--begin::Body-->
      <div class="card-body d-flex">
        <!--begin::Wrapper-->
        <div class="w-100">
          <!--begin::Item-->
          <div class="d-flex align-items-center">

            <!--begin::Container-->
            <div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
              <!--begin::Content-->
              <div class="me-5">
                <!--begin::Title-->
                <a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Ridgeway University</a>
                <!--end::Title-->

              </div>
              <!--end::Content-->
              <!--begin::Wrapper-->
              <div class="d-flex align-items-right">
                <!--begin::Number-->
                <span class="text-gray-800 fw-bold fs-4 me-3">34,067</span>
                <!--end::Number-->

              </div>
              <!--end::Wrapper-->
            </div>
            <!--end::Container-->
          </div>
          <!--end::Item-->
          <!--begin::Separator-->
          <div class="separator separator-dashed my-3"></div>
          <!--end::Separator-->
          <!--begin::Item-->
          <div class="d-flex align-items-center">

            <!--begin::Container-->
            <div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
              <!--begin::Content-->
              <div class="me-5">
                <!--begin::Title-->
                <a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Henry Construction</a>
                <!--end::Title-->
                <!--begin::Desc-->
                <!--end::Desc-->
              </div>
              <!--end::Content-->
              <!--begin::Wrapper-->
              <div class="d-flex align-items-center">
                <!--begin::Number-->
                <span class="text-gray-800 fw-bold fs-4 me-3">24,588</span>
                <!--end::Number-->

              </div>
              <!--end::Wrapper-->
            </div>
            <!--end::Container-->
          </div>
          <!--end::Item-->
          <!--begin::Separator-->
          <div class="separator separator-dashed my-3"></div>
          <!--end::Separator-->
          <!--begin::Item-->
          <div class="d-flex align-items-center">

            <!--begin::Container-->
            <div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
              <!--begin::Content-->
              <div class="me-5">
                <!--begin::Title-->
                <a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">City Limousine</a>
                <!--end::Title-->
                <!--begin::Desc-->
                <!--end::Desc-->
              </div>
              <!--end::Content-->
              <!--begin::Wrapper-->
              <div class="d-flex align-items-center">
                <!--begin::Number-->
                <span class="text-gray-800 fw-bold fs-4 me-3">2,794</span>
                <!--end::Number-->

              </div>
              <!--end::Wrapper-->
            </div>
            <!--end::Container-->
          </div>
          <!--end::Item-->
          <!--begin::Separator-->
          <div class="separator separator-dashed my-3"></div>
          <!--end::Separator-->
          <!--begin::Item-->
          <div class="d-flex align-items-center">
            <!--begin::Container-->
            <div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
              <!--begin::Content-->
              <div class="me-5">
                <!--begin::Title-->
                <a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Basket Case</a>
                <!--end::Title-->
                <!--begin::Desc-->
                <!--end::Desc-->
              </div>
              <!--end::Content-->
              <!--begin::Wrapper-->
              <div class="d-flex align-items-center">
                <!--begin::Number-->
                <span class="text-gray-800 fw-bold fs-4 me-3">6,578</span>
                <!--end::Number-->
              </div>
              <!--end::Wrapper-->
            </div>
            <!--end::Container-->
          </div>
          <!--end::Item-->
          <!--begin::Separator-->
          <div class="separator separator-dashed my-3"></div>
          <!--end::Separator-->
          <!--begin::Item-->
          <div class="d-flex align-items-center">

            <!--begin::Container-->
            <div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
              <!--begin::Content-->
              <div class="me-5">
                <!--begin::Title-->
                <a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Marine System</a>
                <!--end::Title-->
                <!--begin::Desc-->
                <!--end::Desc-->
              </div>
              <!--end::Content-->
              <!--begin::Wrapper-->
              <div class="d-flex align-items-center">
                <!--begin::Number-->
                <span class="text-gray-800 fw-bold fs-4 me-3">79,458</span>
                <!--end::Number-->

              </div>
              <!--end::Wrapper-->
            </div>
            <!--end::Container-->
          </div>
          <!--end::Item-->

        </div>
        <!--end::Wrapper-->
      </div>
      <!--end::Body-->
    </div>
    <!--end::List widget 12-->
  </div>
  <!--end::Col-->
</div>
<!--end::Row-->

<div class="d-flex flex-left flex-equal fw-row text-nowrap order-1 order-xxl-2 me-4 pb-5" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Enter invoice number">
	<span class="fs-2x fw-bold text-gray-800">Quotes</span>
</div>

<!--begin::Row-->
<div class="row">


  <!--begin::Col-->
  <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
    <!--begin::Card widget 4-->
    <div class="card card-flush mb-10 pb-10">
      <!--begin::Header-->
      <div class="card-header pt-5">
        <!--begin::Title-->
        <div class="card-title d-flex flex-column">
        <!--begin::Subtitle-->
          <span class="text-gray-500 pt-1 fw-semibold fs-6">Draft (2)</span>
          <!--end::Subtitle-->
          <!--begin::Info-->
          <div class="d-flex align-items-center">
            <!--begin::Currency-->
            <span class="fs-4 fw-semibold text-primary me-1 align-self-start">₦</span>
            <!--end::Currency-->
            <!--begin::Amount-->
            <span class="fs-2hx fw-bold text-primary me-2 lh-1 ls-n2">3,700</span>
            <!--end::Amount-->

          </div>
          <!--end::Info-->

        </div>
        <!--end::Title-->
      </div>
      <!--end::Header-->

    </div>
    <!--end::Card widget 4-->
  </div>
  <!--end::Col-->
  <!--begin::Col-->
    <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
      <!--begin::Card widget 4-->
      <div class="card card-flush mb-10 pb-10">
        <!--begin::Header-->
        <div class="card-header pt-5">
          <!--begin::Title-->
          <div class="card-title d-flex flex-column">
          <!--begin::Subtitle-->
            <span class="text-gray-500 pt-1 fw-semibold fs-6">Sent (1)</span>
            <!--end::Subtitle-->
            <!--begin::Info-->
            <div class="d-flex align-items-center">
              <!--begin::Currency-->
              <span class="fs-4 fw-semibold text-primary me-1 align-self-start">₦</span>
              <!--end::Currency-->
              <!--begin::Amount-->
              <span class="fs-2hx fw-bold text-primary me-2 lh-1 ls-n2">4,500</span>
              <!--end::Amount-->

            </div>
            <!--end::Info-->

          </div>
          <!--end::Title-->
        </div>
        <!--end::Header-->

      </div>
      <!--end::Card widget 4-->
    </div>
    <!--end::Col-->
  <!--begin::Col-->
    <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
      <!--begin::Card widget 4-->
      <div class="card card-flush mb-10 pb-10">
        <!--begin::Header-->
        <div class="card-header pt-5">
          <!--begin::Title-->
          <div class="card-title d-flex flex-column">
          <!--begin::Subtitle-->
            <span class="text-gray-500 pt-1 fw-semibold fs-6">Accepted (1)</span>
            <!--end::Subtitle-->
            <!--begin::Info-->
            <div class="d-flex align-items-center">
              <!--begin::Currency-->
              <span class="fs-4 fw-semibold text-success me-1 align-self-start">₦</span>
              <!--end::Currency-->
              <!--begin::Amount-->
              <span class="fs-2hx fw-bold text-success me-2 lh-1 ls-n2">5,910</span>
              <!--end::Amount-->

            </div>
            <!--end::Info-->

          </div>
          <!--end::Title-->
        </div>
        <!--end::Header-->

      </div>
      <!--end::Card widget 4-->
    </div>
    <!--end::Col-->
  <!--begin::Col-->
    <div class="col-md-6 col-lg-3 col-xl-3 col-xxl-3">
      <!--begin::Card widget 4-->
      <div class="card card-flush mb-10 pb-10">
        <!--begin::Header-->
        <div class="card-header pt-5">
          <!--begin::Title-->
          <div class="card-title d-flex flex-column">
          <!--begin::Subtitle-->
            <span class="text-gray-500 pt-1 fw-semibold fs-6">Expired </span>
            <!--end::Subtitle-->
            <!--begin::Info-->
            <div class="d-flex align-items-center">
              <!--begin::Currency-->
              <span class="fs-4 fw-semibold text-gray-900 me-1 align-self-start">₦</span>
              <!--end::Currency-->
              <!--begin::Amount-->
              <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">0</span>
              <!--end::Amount-->

            </div>
            <!--end::Info-->

          </div>
          <!--end::Title-->
        </div>
        <!--end::Header-->

      </div>
      <!--end::Card widget 4-->
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->

{% endblock %}

{% block Javascript %}
<script src="{{secure_assets}}/js/widgets.bundle.js"></script>
<script src="{{secure_assets}}/js/charts/dashboard-sales-overview.js"></script>

{% endblock %}