Default

  2. Dashboard
  3. Default

28C

Sunny Day

Beautiful Sunny Day Walk

Welcome Back John

Your 5 Task Is Pending

Total Revenue

96.564%

<div class="card total-revenue overflow-hidden">
  <div class="card-header">
    <div class="d-flex justify-content-between">
      <div class="flex-grow-1">
        <p class="square-after f-w-600 header-text-primary"> Total Revenue
          <i class="fa fa-circle"></i>
        </p>
        <h4> 96.564%</h4>
      </div>
      <div class="setting-list">
        <ul class="list-unstyled setting-option">
          <li><div class="setting-light"><i class="icon-layout-grid2"></i></div></li>
          <li><i class="view-html fa fa-code font-white"></i></li>
          <li><i class="icofont icofont-maximize full-card font-white"></i></li>
          <li><i class="icofont icofont-minus minimize-card font-white"></i></li>
          <li><i class="icofont icofont-refresh reload-card font-white"></i></li>
          <li><i class="icofont icofont-error close-card font-white"> </i></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="revenue-chart" id="revenue-chart">
    </div>
  </div>
</div>

Total Investment

96.564%

3.56% 75%
<div class="card total-investment">
  <div class="card-header pb-0">
    <div class="d-flex justify-content-between">
      <div class="flex-grow-1">
        <p class="square-after f-w-600 header-text-primary"> Total Investment
          <i class="fa fa-circle"></i>
        </p>
        <h4> 96.564%</h4>
      </div>
      <div class="setting-list">
        <ul class="list-unstyled setting-option">
          <li><div class="setting-light"><i class="icon-layout-grid2"></i></div></li>
          <li><i class="view-html fa fa-code font-white"></i></li>
          <li><i class="icofont icofont-maximize full-card font-white"></i></li>
          <li><i class="icofont icofont-minus minimize-card font-white"></i></li>
          <li><i class="icofont icofont-refresh reload-card font-white"></i></li>
          <li><i class="icofont icofont-error close-card font-white"> </i></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="progress sm-progress-bar">
      <div class="progress-colors" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="bg-secondary.progress-1"></div>
        <div class="bg-primary.progress-2"></div>
      </div>
    </div>
  </div>
</div>

Our Total Users

96.564%

  • Desktop

    96.564%

  • Mobile

    92.624%

  • Tablet

    46.564% 
<div class="card our-user">
  <div class="card-header pb-0">
    <div class="d-flex justify-content-between">
      <div class="flex-grow-1">
        <p class="square-after f-w-600 header-text-primary"> Our Total Users
          <i class="fa fa-circle"></i>
        </p>
        <h4> 96.564% </h4>
      </div>
      <div class="setting-list">
        <ul class="list-unstyled setting-option">
          <li><div class="setting-light"><i class="icon-layout-grid2"></i></div></li>
          <li><i class="view-html fa fa-code font-white"></i></li>
          <li><i class="icofont icofont-maximize full-card font-white"></i></li>
          <li><i class="icofont icofont-minus minimize-card font-white"></i></li>
          <li><i class="icofont icofont-refresh reload-card font-white"></i></li>
          <li><i class="icofont icofont-error close-card font-white"> </i></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="user-chart">
      <div id="user-chart"></div>
      <div class="icon-donut">
        <i class="feather feather-arrow-up-circle"></div>
      </div>
    </div>
    <ul>
      <li>
        <p class="f-w-600 font-primary f-12"> Desktop </p>
        <span class="f-w-600"> 96.564% </span>
      </li>
      <li>
        <p class="f-w-600 font-primary f-12"> Mobile </p>
        <span class="f-w-600"> 92.624% </span>
      </li>
      <li>
        <p class="f-w-600 font-primary f-12"> Tablet </p>
        <span class="f-w-600"> 46.564% </span>
      </li>
    </ul>
  </div>
</div>

Our Total Earning

96.564%

<div class="card our-earning">
  <div class="card-header pb-0">
    <div class="d-flex justify-content-between">
      <div class="flex-grow-1">
        <p class="square-after f-w-600 header-text-primary"> Our Total Earning
          <i class="fa fa-circle"></i>
        </p>
        <h4> 96.564% </h4>
      </div>
      <div class="setting-list">
        <ul class="list-unstyled setting-option">
          <li><div class="setting-light"><i class="icon-layout-grid2"></i></div></li>
          <li><i class="view-html fa fa-code font-white"></i></li>
          <li><i class="icofont icofont-maximize full-card font-white"></i></li>
          <li><i class="icofont icofont-minus minimize-card font-white"></i></li>
          <li><i class="icofont icofont-refresh reload-card font-white"></i></li>
          <li><i class="icofont icofont-error close-card font-white"> </i></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="earning-chart">
      <div id="earning-chart"></div>
    </div>
  </div>
  <div class="card-footer">
    <ul class="d-sm-flex d-block">
      <li>
        <p class="f-w-600 font-primary f-12"> Daily Earning
        <span class="f-w-600"> 96.564% </span>
      </li>
      <li>
        <p class="f-w-600 font-primary f-12"> Monthly Earning
        <span class="f-w-600"> 96.564% </span>
      </li>
    </ul>
  </div>
</div>

  • Daily Earning

    96.564%

  • Monthly Earning

    96.564%

total appointment

12 meet

Ossim keter

1 Hour

 16 August
Venter loren

Now

 21 September
Fran loain

2 Day After

 06 March
Loften Horen

Day End

 12 February
Loie fenter

2 Day After

 06 March 
<div class="card appointment-detail">
  <div class="card-header pb-0">
    <div class="d-flex justify-content-between">
      <div class="flex-grow-1">
        <p class="square-after f-w-600 header-text-primary"> total appointment
          <i class="fa fa-circle"></i>
        </p>
        <h4> 12 meet </h4>
      </div>
      <div class="setting-list">
        <ul class="list-unstyled setting-option">
          <li><div class="setting-light"><i class="icon-layout-grid2"></i></div></li>
          <li><i class="view-html fa fa-code font-white"></i></li>
          <li><i class="icofont icofont-maximize full-card font-white"></i></li>
          <li><i class="icofont icofont-minus minimize-card font-white"></i></li>
          <li><i class="icofont icofont-refresh reload-card font-white"></i></li>
          <li><i class="icofont icofont-error close-card font-white"> </i></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="table-responsive.theme-scrollbar">
      <table class="table">
        <tbody>
          <tr>
            <td>
              <div class="d-flex">
                <img class="img-fluid align-top circle" src="../assets/images/dashboard/default/01.png" alt=""></img>
                <div class="flex-grow-1">
                  <a href="user-profile.html">
                    <span>Ossim keter</span>
                  </a>
                  <p class="mb-0"> 1 Hour </p>
                </div>
                <div class="active-status active-online"></div>
              </div>
            </td>
            <td> 16 august </td>
            <td class="text-end">
              <button class="btn btn-primary" type="button" onclick="document.location='user-cards.html'"> Pending </button>
            </td> 
          </tr>
          <tr>
            <td>
              <div class="d-flex">
                <img class="img-fluid align-top circle" src="../assets/images/dashboard/default/02.png" alt=""></img>
                <div class="flex-grow-1">
                  <a href="user-profile.html">
                    <span>Venter loren</span>
                  </a>
                  <p class="mb-0"> Now </p>
                </div>
                <div class="active-status active-busy"></div>
              </div>
            </td>
            <td> 21 September </td>
            <td class="text-end">
              <button class="btn btn-secondary" type="button" onclick="document.location='user-cards.html'"> Done 
                <i class="fa fa-check-circle">
              </button>
            </td> 
          </tr>
          <tr>
            <td>
              <div class="d-flex">
                <img class="img-fluid align-top circle" src="../assets/images/dashboard/default/03.png" alt=""></img>
                <div class="flex-grow-1">
                  <a href="user-profile.html">
                    <span>Fran loain</span>
                  </a>
                  <p class="mb-0"> 2 Day After </p>
                </div>
                <div class="active-status active-online"></div>
              </div>
            </td>
            <td> 06 March </td>
            <td class="text-end">
              <button class="btn btn-success" type="button" onclick="document.location='user-cards.html'"> Pending </button>
            </td> 
          </tr>
          <tr>
            <td>
              <div class="d-flex">
                <img class="img-fluid align-top circle" src="../assets/images/dashboard/default/04.png" alt=""></img>
                <div class="flex-grow-1">
                  <a href="user-profile.html">
                    <span>Loften Horen</span>
                  </a>
                  <p class="mb-0"> Day End </p>
                </div>
                <div class="active-status active-online"></div>
              </div>
            </td>
            <td> 12 February </td>
            <td class="text-end">
              <button class="btn btn-info" type="button" onclick="document.location='user-cards.html'"> Pending </button>
            </td> 
          </tr>
          <tr>
            <td>
              <div class="d-flex">
                <img class="img-fluid align-top circle" src="../assets/images/dashboard/default/05.png" alt=""></img>
                <div class="flex-grow-1">
                  <a href="user-profile.html">
                    <span>Loie fenter</span>
                  </a>
                  <p class="mb-0"> 2 Day After </p>
                </div>
                <div class="active-status active-offline"></div>
              </div>
            </td>
            <td> 06 March </td>
            <td class="text-end">
              <button class="btn btn-danger" type="button" onclick="document.location='user-cards.html'"> Pending </button>
            </td> 
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

User By Country

96.564%

<div class="card use-country">
  <div class="card-header pb-0">
    <div class="d-flex justify-content-between">
      <div class="flex-grow-1">
        <p class="square-after f-w-600 header-text-primary"> User By Country
          <i class="fa fa-circle"></i>
        </p>
        <h4> 96.564%</h4>
      </div>
      <div class="setting-list">
        <ul class="list-unstyled setting-option">
          <li><div class="setting-light"><i class="icon-layout-grid2"></i></div></li>
          <li><i class="view-html fa fa-code font-white"></i></li>
          <li><i class="icofont icofont-maximize full-card font-white"></i></li>
          <li><i class="icofont icofont-minus minimize-card font-white"></i></li>
          <li><i class="icofont icofont-refresh reload-card font-white"></i></li>
          <li><i class="icofont icofont-error close-card font-white"> </i></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="jvector-map-height" id="asia">
    </div>
  </div>
</div>

Our Total Growth

96.564%

<div class="card total-growth">
  <div class="card-header pb-0">
    <div class="d-flex justify-content-between">
      <div class="flex-grow-1">
        <p class="square-after f-w-600 header-text-primary"> Our Total Growth
          <i class="fa fa-circle"></i>
        </p>
        <h4> 96.564%</h4>
      </div>
      <div class="setting-list">
        <ul class="list-unstyled setting-option">
          <li><div class="setting-light"><i class="icon-layout-grid2"></i></div></li>
          <li><i class="view-html fa fa-code font-white"></i></li>
          <li><i class="icofont icofont-maximize full-card font-white"></i></li>
          <li><i class="icofont icofont-minus minimize-card font-white"></i></li>
          <li><i class="icofont icofont-refresh reload-card font-white"></i></li>
          <li><i class="icofont icofont-error close-card font-white"> </i></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="growth-chart">
      <div id="growth-chart"></div>
    </div>
  </div>
</div>

Recent Activity

New & Update

Updated Product

I like to be real. I don't like things to be staged or fussy.

You liked James products

If you have it, you can make anything look good.

James just like your product

I like to design everything to do with the body.

Jenna commented on your product

Fashion fades, only style remain the same.

Jihan Doe just like your product

Design and style should work toward making you look good and feel good without lot of effort.

<div class="card">
  <div class="card-header pb-0">
    <div class="d-flex justify-content-between">
      <div class="flex-grow-1">
        <p class="square-after f-w-600 header-text-primary"> Recent Activity
          <i class="fa fa-circle"></i>
        </p>
        <h4> New & Update </h4>
      </div>
      <div class="setting-list">
        <ul class="list-unstyled setting-option">
          <li><div class="setting-light"><i class="icon-layout-grid2"></i></div></li>
          <li><i class="view-html fa fa-code font-white"></i></li>
          <li><i class="icofont icofont-maximize full-card font-white"></i></li>
          <li><i class="icofont icofont-minus minimize-card font-white"></i></li>
          <li><i class="icofont icofont-refresh reload-card font-white"></i></li>
          <li><i class="icofont icofont-error close-card font-white"> </i></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="activity-timeline">
      <div class="d-flex">
        <div class="activity-line"></div>
        <div class="activity-dot-primary"></div>
        <div class="flex-grow-1">
          <span class="f-w-600 d-block"> Updated Product </span >
          <p class="mb-0"> I like to be real. I don't like things to be staged or fussy.</p>
        </div>
      </div>
      <div class="d-flex">
        <div class="activity-dot-primary"></div>
        <div class="flex-grow-1">
          <span class="f-w-600 d-block"> You liked James products </span >
          <p class="mb-0"> If you have it, you can make anything look good.</p>
        </div>
      </div>
      <div class="d-flex align-items-start">
        <div class="activity-dot-secondary"></div>
        <div class="flex-grow-1">
          <span class="f-w-600 d-block"> James just like your product </span >
          <p class="mb-0"> I like to design everything to do with the body.</p>
        </div>
      </div>
      <div class="d-flex">
        <div class="activity-dot-primary"></div>
        <div class="flex-grow-1">
          <span class="f-w-600 d-block"> Jenna commented on your product </span >
          <p class="mb-0">Fashion fades, only style remain the same.</p>
        </div>
      </div>
      <div class="d-flex align-items-start">
        <div class="activity-dot-secondary"></div>
        <div class="flex-grow-1">
          <span class="f-w-600 d-block"> James just like your product </span >
          <p class="mb-0">Design and style should work toward making you look good and feel good without lot of effort.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Chat With Our Users

Chat

Hii

Good Evening, My Friend

7:28 PM

What can do for you

Can i Borrow some money

<div class="card user-chat">
  <div class="card-header pb-0">
    <div class="d-flex justify-content-between">
      <div class="flex-grow-1">
        <p class="square-after f-w-600 header-text-primary"> Chat With Our Users
          <i class="fa fa-circle"></i>
        </p>
        <h4> Chat</h4>
      </div>
      <div class="setting-list">
        <ul class="list-unstyled setting-option">
          <li><div class="setting-light"><i class="icon-layout-grid2"></i></div></li>
          <li><i class="view-html fa fa-code font-white"></i></li>
          <li><i class="icofont icofont-maximize full-card font-white"></i></li>
          <li><i class="icofont icofont-minus minimize-card font-white"></i></li>
          <li><i class="icofont icofont-refresh reload-card font-white"></i></li>
          <li><i class="icofont icofont-error close-card font-white"> </i></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body chat-box">
    <div class="d-flex left-chat">
      <div class="flex-grow-1">
        <div class="message-main"> 
          <p class="mb-0"> Hii </p>
        </div >
        <div class="sub-message message-main"> 
          <p class="mb-0"> Good Evening, My Friend </p>
        </div >
      </div>
      <p class="f-w-500 mb-0 px-0"> 7:28 PM </p>
    </div>
    <div class="d-flex right-chat">
      <div class="flex-grow-1 text-end">
        <div class="message-main pull-right"> 
          <p class="text-start mb-0"> What can do for you </p>
          <div class="clearfix"></div>
        </div >
      </div>
    </div>
    <div class="d-flex left-chat">
      <div class="flex-grow-1">
        <div class="sub-message message-main mt-0"> 
          <p class="mb-0"> Can i Borrow some money </p>
        </div >
      </div>
    </div>
    <div class="input-group">
      <input id="mail" class="form-control" type="text" placeholder="Type Your Message" name="text"/>
      <div class="send-msg">
        <i class="feather feather-send"></i>
      </div>
    </div>
  </div>
</div>

Our To-Do List

Todo List

20-04-2022 Today

New Order $2340

Update New Product Pdf And Delivery Product

20-04-2022 TodayNew

James just like your product

20-04-2022 Today

Jihan Doe just like your product

Design and style should work making you look good and feel good without lot of effort.

20-04-2022 Today

Take Our Client Metting

Hosting an effective client meeting.

<div class="card our-todolist">
  <div class="card-header pb-0">
    <div class="d-flex justify-content-between">
      <div class="flex-grow-1">
        <p class="square-after f-w-600 header-text-primary"> Our To-Do List
          <i class="fa fa-circle"></i>
        </p>
        <h4> Todo List </h4>
      </div>
      <div class="setting-list">
        <ul class="list-unstyled setting-option">
          <li><div class="setting-light"><i class="icon-layout-grid2"></i></div></li>
          <li><i class="view-html fa fa-code font-white"></i></li>
          <li><i class="icofont icofont-maximize full-card font-white"></i></li>
          <li><i class="icofont icofont-minus minimize-card font-white"></i></li>
          <li><i class="icofont icofont-refresh reload-card font-white"></i></li>
          <li><i class="icofont icofont-error close-card font-white"> </i></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="activity-timeline">
      <div class="d-flex">
        <div class="activity-line"></div>
        <div class="activity-dot-primary"></div>
        <div class="flex-grow-1">
          <p class="todo-font mt-0">
            <span class="font-primary"> 20-04-2022 </span>
            Today
          </p >
          <div class="d-flex mt-0">
            <img class="img-fluid img-30" src="../assets/images/dashboard/default/todo.png" alt=""/>
            <div class="flex-grow-1">
              <span class="f-w-600"> New Order $2340
                New Order $2340
                <i class="fa fa-circle circle-dot-primary pull-right">
              </span>
              <p class="mb-0"> Update New Product Pdf And Delivery Product </p>
            </div>
          </div>
        </div>
      </div>
      <div class="d-flex">
        <div class="activity-dot-secondary"></div>
        <div class="flex-grow-1">
          <p class="todo-font mt-0">
            <span class="font-primary"> 20-04-2022 </span>
            Today
            <span class="badge badge-primary ms-2"> New </span>
          </p >
          <span class="f-w-600"> James just like your product
            <i class="fa fa-circle circle-dot-secondary pull-right"></i>
          </span>
        </div>
      </div>
      <div class="d-flex">
        <div class="activity-dot-primary"></div>
        <div class="flex-grow-1">
          <p class="mt-0 todo-font">
            <span class="font-primary"> 20-04-2022 </span>
            Today
          </p >
          <span class="f-w-600"> Jihan Doe just like your product
          </span>
          <p class="mb-0"> Design and style should work making you look good and feel good without lot of effort. </p>
        </div>
      </div>
      <div class="d-flex">
        <div class="activity-dot-primary"></div>
        <div class="flex-grow-1">
          <p class="todo-font mt-0">
            <span class="font-primary"> 20-04-2022 </span>
            Today
          </p >
          <span class="f-w-600"> Take Our Client Metting
            <i class="fa fa-circle circle-dot-primary pull-right"></i>
          </span>
          <p class="mb-0"> Hosting an effective client meeting. </p>
        </div>
      </div>
    </div>
  </div>
</div>