zhanghuiqing
/
official_revision
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
方诺官网改正版
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
6 Commits
2 Branches
27 MiB
 
 
 
Tree: 1a5502bc5d
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '1a5502bc5d'
${ noResults }
official_revision/src/views/Dashboard.vue

1014 lines
41 KiB
Raw Blame History 

  1. <template>

  2.   <div class="grid grid-cols-12 gap-6">

  3.     <div class="col-span-12 xxl:col-span-9 grid grid-cols-12 gap-6">

  4.       <!-- BEGIN: General Report -->

  5.       <div class="col-span-12 mt-8">

  6.         <div class="intro-y flex items-center h-10">

  7.           <h2 class="text-lg font-medium truncate mr-5">General Report</h2>

  8.           <a href="" class="ml-auto flex text-theme-1 dark:text-theme-10">

  9.             <RefreshCcwIcon class="w-4 h-4 mr-3" /> Reload Data

  10.           </a>

  11.         </div>

  12.         <div class="grid grid-cols-12 gap-6 mt-5">

  13.           <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">

  14.             <div class="report-box zoom-in">

  15.               <div class="box p-5">

  16.                 <div class="flex">

  17.                   <ShoppingCartIcon class="report-box__icon text-theme-10" />

  18.                   <div class="ml-auto">

  19.                     <Tippy

  20.                       tag="div"

  21.                       class="report-box__indicator bg-theme-9 cursor-pointer"

  22.                       content="33% Higher than last month"

  23.                     >

  24.                       33% <ChevronUpIcon class="w-4 h-4" />

  25.                     </Tippy>

  26.                   </div>

  27.                 </div>

  28.                 <div class="text-3xl font-bold leading-8 mt-6">4.510</div>

  29.                 <div class="text-base text-gray-600 mt-1">Item Sales</div>

  30.               </div>

  31.             </div>

  32.           </div>

  33.           <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">

  34.             <div class="report-box zoom-in">

  35.               <div class="box p-5">

  36.                 <div class="flex">

  37.                   <CreditCardIcon class="report-box__icon text-theme-11" />

  38.                   <div class="ml-auto">

  39.                     <Tippy

  40.                       tag="div"

  41.                       class="report-box__indicator bg-theme-6 cursor-pointer"

  42.                       content="2% Lower than last month"

  43.                     >

  44.                       2% <ChevronDownIcon class="w-4 h-4" />

  45.                     </Tippy>

  46.                   </div>

  47.                 </div>

  48.                 <div class="text-3xl font-bold leading-8 mt-6">3.521</div>

  49.                 <div class="text-base text-gray-600 mt-1">New Orders</div>

  50.               </div>

  51.             </div>

  52.           </div>

  53.           <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">

  54.             <div class="report-box zoom-in">

  55.               <div class="box p-5">

  56.                 <div class="flex">

  57.                   <MonitorIcon class="report-box__icon text-theme-12" />

  58.                   <div class="ml-auto">

  59.                     <Tippy

  60.                       tag="div"

  61.                       class="report-box__indicator bg-theme-9 cursor-pointer"

  62.                       content="12% Higher than last month"

  63.                     >

  64.                       12% <ChevronUpIcon class="w-4 h-4" />

  65.                     </Tippy>

  66.                   </div>

  67.                 </div>

  68.                 <div class="text-3xl font-bold leading-8 mt-6">2.145</div>

  69.                 <div class="text-base text-gray-600 mt-1">Total Products</div>

  70.               </div>

  71.             </div>

  72.           </div>

  73.           <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">

  74.             <div class="report-box zoom-in">

  75.               <div class="box p-5">

  76.                 <div class="flex">

  77.                   <UserIcon class="report-box__icon text-theme-9" />

  78.                   <div class="ml-auto">

  79.                     <Tippy

  80.                       tag="div"

  81.                       class="report-box__indicator bg-theme-9 cursor-pointer"

  82.                       content="22% Higher than last month"

  83.                     >

  84.                       22% <ChevronUpIcon class="w-4 h-4" />

  85.                     </Tippy>

  86.                   </div>

  87.                 </div>

  88.                 <div class="text-3xl font-bold leading-8 mt-6">152.000</div>

  89.                 <div class="text-base text-gray-600 mt-1">Unique Visitor</div>

  90.               </div>

  91.             </div>

  92.           </div>

  93.         </div>

  94.       </div>

  95.       <!-- END: General Report -->

  96.       <!-- BEGIN: Sales Report -->

  97.       <div class="col-span-12 lg:col-span-6 mt-8">

  98.         <div class="intro-y block sm:flex items-center h-10">

  99.           <h2 class="text-lg font-medium truncate mr-5">

  100.             Sales Report

  101.           </h2>

  102.           <div

  103.             class="sm:ml-auto mt-3 sm:mt-0 relative text-gray-700 dark:text-gray-300"

  104.           >

  105.             <CalendarIcon

  106.               class="w-4 h-4 z-10 absolute my-auto inset-y-0 ml-3 left-0"

  107.             />

  108.             <LitePicker

  109.               v-model="salesReportFilter"

  110.               :options="{

  111.                 autoApply: false,

  112.                 singleMode: false,

  113.                 numberOfColumns: 2,

  114.                 numberOfMonths: 2,

  115.                 showWeekNumbers: true,

  116.                 dropdowns: {

  117.                   minYear: 1990,

  118.                   maxYear: null,

  119.                   months: true,

  120.                   years: true

  121.                 }

  122.               }"

  123.               class="input w-full sm:w-56 box pl-10"

  124.             />

  125.           </div>

  126.         </div>

  127.         <div class="intro-y box p-5 mt-12 sm:mt-5">

  128.           <div class="flex flex-col xl:flex-row xl:items-center">

  129.             <div class="flex">

  130.               <div>

  131.                 <div

  132.                   class="text-theme-20 dark:text-gray-300 text-lg xl:text-xl font-bold"

  133.                 >

  134.                   $15,000

  135.                 </div>

  136.                 <div class="text-gray-600 dark:text-gray-600">This Month</div>

  137.               </div>

  138.               <div

  139.                 class="w-px h-12 border border-r border-dashed border-gray-300 dark:border-dark-5 mx-4 xl:mx-6"

  140.               ></div>

  141.               <div>

  142.                 <div

  143.                   class="text-gray-600 dark:text-gray-600 text-lg xl:text-xl font-medium"

  144.                 >

  145.                   $10,000

  146.                 </div>

  147.                 <div class="text-gray-600 dark:text-gray-600">Last Month</div>

  148.               </div>

  149.             </div>

  150.             <div class="dropdown xl:ml-auto mt-5 xl:mt-0">

  151.               <button

  152.                 class="dropdown-toggle button font-normal border dark:border-dark-5 text-white dark:text-gray-300 relative flex items-center text-gray-700"

  153.               >

  154.                 Filter by Category

  155.                 <ChevronDownIcon class="w-4 h-4 ml-2" />

  156.               </button>

  157.               <div class="dropdown-box w-40">

  158.                 <div

  159.                   class="dropdown-box__content box dark:bg-dark-1 p-2 overflow-y-auto h-32"

  160.                 >

  161.                   <a

  162.                     href=""

  163.                     class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"

  164.                     >PC & Laptop</a

  165.                   >

  166.                   <a

  167.                     href=""

  168.                     class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"

  169.                     >Smartphone</a

  170.                   >

  171.                   <a

  172.                     href=""

  173.                     class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"

  174.                     >Electronic</a

  175.                   >

  176.                   <a

  177.                     href=""

  178.                     class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"

  179.                     >Photography</a

  180.                   >

  181.                   <a

  182.                     href=""

  183.                     class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"

  184.                     >Sport</a

  185.                   >

  186.                 </div>

  187.               </div>

  188.             </div>

  189.           </div>

  190.           <div class="report-chart">

  191.           </div>

  192.         </div>

  193.       </div>

  194.       <!-- END: Sales Report -->

  195.       <!-- BEGIN: Weekly Top Seller -->

  196.       <div class="col-span-12 sm:col-span-6 lg:col-span-3 mt-8">

  197.         <div class="intro-y flex items-center h-10">

  198.           <h2 class="text-lg font-medium truncate mr-5">Weekly Top Seller</h2>

  199.           <a href="" class="ml-auto text-theme-1 dark:text-theme-10 truncate"

  200.             >See all</a

  201.           >

  202.         </div>

  203.         <div class="intro-y box p-5 mt-5">

  204.           <div class="mt-8">

  205.             <div class="flex items-center">

  206.               <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>

  207.               <span class="truncate">17 - 30 Years old</span>

  208.               <div

  209.                 class="h-px flex-1 border border-r border-dashed border-gray-300 mx-3 xl:hidden"

  210.               ></div>

  211.               <span class="font-medium xl:ml-auto">62%</span>

  212.             </div>

  213.             <div class="flex items-center mt-4">

  214.               <div class="w-2 h-2 bg-theme-1 rounded-full mr-3"></div>

  215.               <span class="truncate">31 - 50 Years old</span>

  216.               <div

  217.                 class="h-px flex-1 border border-r border-dashed border-gray-300 mx-3 xl:hidden"

  218.               ></div>

  219.               <span class="font-medium xl:ml-auto">33%</span>

  220.             </div>

  221.             <div class="flex items-center mt-4">

  222.               <div class="w-2 h-2 bg-theme-12 rounded-full mr-3"></div>

  223.               <span class="truncate">>= 50 Years old</span>

  224.               <div

  225.                 class="h-px flex-1 border border-r border-dashed border-gray-300 mx-3 xl:hidden"

  226.               ></div>

  227.               <span class="font-medium xl:ml-auto">10%</span>

  228.             </div>

  229.           </div>

  230.         </div>

  231.       </div>

  232.       <!-- END: Weekly Top Seller -->

  233.       <!-- BEGIN: Sales Report -->

  234.       <div class="col-span-12 sm:col-span-6 lg:col-span-3 mt-8">

  235.         <div class="intro-y flex items-center h-10">

  236.           <h2 class="text-lg font-medium truncate mr-5">Sales Report</h2>

  237.           <a href="" class="ml-auto text-theme-1 dark:text-theme-10 truncate"

  238.             >See all</a

  239.           >

  240.         </div>

  241.         <div class="intro-y box p-5 mt-5">

  242.           <div class="mt-8">

  243.             <div class="flex items-center">

  244.               <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>

  245.               <span class="truncate">17 - 30 Years old</span>

  246.               <div

  247.                 class="h-px flex-1 border border-r border-dashed border-gray-300 mx-3 xl:hidden"

  248.               ></div>

  249.               <span class="font-medium xl:ml-auto">62%</span>

  250.             </div>

  251.             <div class="flex items-center mt-4">

  252.               <div class="w-2 h-2 bg-theme-1 rounded-full mr-3"></div>

  253.               <span class="truncate">31 - 50 Years old</span>

  254.               <div

  255.                 class="h-px flex-1 border border-r border-dashed border-gray-300 mx-3 xl:hidden"

  256.               ></div>

  257.               <span class="font-medium xl:ml-auto">33%</span>

  258.             </div>

  259.             <div class="flex items-center mt-4">

  260.               <div class="w-2 h-2 bg-theme-12 rounded-full mr-3"></div>

  261.               <span class="truncate">>= 50 Years old</span>

  262.               <div

  263.                 class="h-px flex-1 border border-r border-dashed border-gray-300 mx-3 xl:hidden"

  264.               ></div>

  265.               <span class="font-medium xl:ml-auto">10%</span>

  266.             </div>

  267.           </div>

  268.         </div>

  269.       </div>

  270.       <!-- END: Sales Report -->

  271.       <!-- BEGIN: Official Store -->

  272.       <div class="col-span-12 xl:col-span-8 mt-6">

  273.         <div class="intro-y block sm:flex items-center h-10">

  274.           <h2 class="text-lg font-medium truncate mr-5">Official Store</h2>

  275.           <div

  276.             class="sm:ml-auto mt-3 sm:mt-0 relative text-gray-700 dark:text-gray-300"

  277.           >

  278.             <MapPinIcon

  279.               class="w-4 h-4 z-10 absolute my-auto inset-y-0 ml-3 left-0"

  280.             />

  281.             <input

  282.               type="text"

  283.               class="input w-full sm:w-40 box pl-10"

  284.               placeholder="Filter by city"

  285.             />

  286.           </div>

  287.         </div>

  288.         <div class="intro-y box p-5 mt-12 sm:mt-5">

  289.           <div>

  290.             250 Official stores in 21 countries, click the marker to see

  291.             location details.

  292.           </div>

  293.         </div>

  294.       </div>

  295.       <!-- END: Official Store -->

  296.       <!-- BEGIN: Weekly Best Sellers -->

  297.       <div class="col-span-12 xl:col-span-4 mt-6">

  298.         <div class="intro-y flex items-center h-10">

  299.           <h2 class="text-lg font-medium truncate mr-5">Weekly Best Sellers</h2>

  300.         </div>

  301.         <div class="mt-5">

  302.           <div

  303.             v-for="(faker, fakerKey) in $_.take($f(), 4)"

  304.             :key="fakerKey"

  305.             class="intro-y"

  306.           >

  307.             <div class="box px-4 py-4 mb-3 flex items-center zoom-in">

  308.               <div

  309.                 class="w-10 h-10 flex-none image-fit rounded-md overflow-hidden"

  310.               >

  311.                 <img

  312.                   alt="Midone Tailwind HTML Admin Template"

  313.                   :src="require(`@/assets/images/${faker.photos[0]}`)"

  314.                 />

  315.               </div>

  316.               <div class="ml-4 mr-auto">

  317.                 <div class="font-medium">{{ faker.users[0].name }}</div>

  318.                 <div class="text-gray-600 text-xs">

  319.                   {{ faker.dates[0] }}

  320.                 </div>

  321.               </div>

  322.               <div

  323.                 class="py-1 px-2 rounded-full text-xs bg-theme-9 text-white cursor-pointer font-medium"

  324.               >

  325.                 137 Sales

  326.               </div>

  327.             </div>

  328.           </div>

  329.           <a

  330.             href=""

  331.             class="intro-y w-full block text-center rounded-md py-4 border border-dotted border-theme-15 dark:border-dark-5 text-theme-16 dark:text-gray-600"

  332.             >View More</a

  333.           >

  334.         </div>

  335.       </div>

  336.       <!-- END: Weekly Best Sellers -->

  337.       <!-- BEGIN: General Report -->

  338.       <div class="col-span-12 grid grid-cols-12 gap-6 mt-8">

  339.         <div class="col-span-12 sm:col-span-6 xxl:col-span-3 intro-y">

  340.           <div class="mini-report-chart box p-5 zoom-in">

  341.             <div class="flex items-center">

  342.               <div class="w-2/4 flex-none">

  343.                 <div class="text-lg font-medium truncate">Target Sales</div>

  344.                 <div class="text-gray-600 mt-1">300 Sales</div>

  345.               </div>

  346.               <div class="flex-none ml-auto relative">

  347.                 <div

  348.                   class="font-medium absolute w-full h-full flex items-center justify-center top-0 left-0"

  349.                 >

  350.                   20%

  351.                 </div>

  352.               </div>

  353.             </div>

  354.           </div>

  355.         </div>

  356.         <div class="col-span-12 sm:col-span-6 xxl:col-span-3 intro-y">

  357.           <div class="mini-report-chart box p-5 zoom-in">

  358.             <div class="flex">

  359.               <div class="text-lg font-medium truncate mr-3">Social Media</div>

  360.               <div

  361.                 class="py-1 px-2 rounded-full text-xs bg-gray-200 dark:bg-dark-5 text-gray-600 dark:text-gray-300 cursor-pointer ml-auto truncate"

  362.               >

  363.                 320 Followers

  364.               </div>

  365.             </div>

  366.             <div class="mt-4">

  367.             </div>

  368.           </div>

  369.         </div>

  370.         <div class="col-span-12 sm:col-span-6 xxl:col-span-3 intro-y">

  371.           <div class="mini-report-chart box p-5 zoom-in">

  372.             <div class="flex items-center">

  373.               <div class="w-2/4 flex-none">

  374.                 <div class="text-lg font-medium truncate">New Products</div>

  375.                 <div class="text-gray-600 mt-1">1450 Products</div>

  376.               </div>

  377.               <div class="flex-none ml-auto relative">

  378.                 <div

  379.                   class="font-medium absolute w-full h-full flex items-center justify-center top-0 left-0"

  380.                 >

  381.                   45%

  382.                 </div>

  383.               </div>

  384.             </div>

  385.           </div>

  386.         </div>

  387.         <div class="col-span-12 sm:col-span-6 xxl:col-span-3 intro-y">

  388.           <div class="mini-report-chart box p-5 zoom-in">

  389.             <div class="flex">

  390.               <div class="text-lg font-medium truncate mr-3">Posted Ads</div>

  391.               <div

  392.                 class="py-1 px-2 rounded-full text-xs bg-gray-200 dark:bg-dark-5 text-gray-600 dark:text-gray-300 cursor-pointer ml-auto truncate"

  393.               >

  394.                 180 Campaign

  395.               </div>

  396.             </div>

  397.             <div class="mt-4">

  398.             </div>

  399.           </div>

  400.         </div>

  401.       </div>

  402.       <!-- END: General Report -->

  403.       <!-- BEGIN: Weekly Top Products -->

  404.       <div class="col-span-12 mt-6">

  405.         <div class="intro-y block sm:flex items-center h-10">

  406.           <h2 class="text-lg font-medium truncate mr-5">Weekly Top Products</h2>

  407.           <div class="flex items-center sm:ml-auto mt-3 sm:mt-0">

  408.             <button

  409.               class="button box flex items-center text-gray-700 dark:text-gray-300"

  410.             >

  411.               <FileTextIcon class="hidden sm:block w-4 h-4 mr-2" />

  412.               Export to Excel

  413.             </button>

  414.             <button

  415.               class="ml-3 button box flex items-center text-gray-700 dark:text-gray-300"

  416.             >

  417.               <FileTextIcon class="hidden sm:block w-4 h-4 mr-2" />

  418.               Export to PDF

  419.             </button>

  420.           </div>

  421.         </div>

  422.         <div class="intro-y overflow-auto lg:overflow-visible mt-8 sm:mt-0">

  423.           <table class="table table-report sm:mt-2">

  424.             <thead>

  425.               <tr>

  426.                 <th class="whitespace-no-wrap">IMAGES</th>

  427.                 <th class="whitespace-no-wrap">PRODUCT NAME</th>

  428.                 <th class="text-center whitespace-no-wrap">STOCK</th>

  429.                 <th class="text-center whitespace-no-wrap">STATUS</th>

  430.                 <th class="text-center whitespace-no-wrap">ACTIONS</th>

  431.               </tr>

  432.             </thead>

  433.             <tbody>

  434.               <tr

  435.                 v-for="(faker, fakerKey) in $_.take($f(), 4)"

  436.                 :key="fakerKey"

  437.                 class="intro-x"

  438.               >

  439.                 <td class="w-40">

  440.                   <div class="flex">

  441.                     <div class="w-10 h-10 image-fit zoom-in">

  442.                       <Tippy

  443.                         tag="img"

  444.                         alt="Midone Tailwind HTML Admin Template"

  445.                         class="rounded-full"

  446.                         :src="require(`@/assets/images/${faker.images[0]}`)"

  447.                         :content="`Uploaded at ${faker.dates[0]}`"

  448.                       />

  449.                     </div>

  450.                     <div class="w-10 h-10 image-fit zoom-in -ml-5">

  451.                       <Tippy

  452.                         tag="img"

  453.                         alt="Midone Tailwind HTML Admin Template"

  454.                         class="rounded-full"

  455.                         :src="require(`@/assets/images/${faker.images[1]}`)"

  456.                         :content="`Uploaded at ${faker.dates[1]}`"

  457.                       />

  458.                     </div>

  459.                     <div class="w-10 h-10 image-fit zoom-in -ml-5">

  460.                       <Tippy

  461.                         tag="img"

  462.                         alt="Midone Tailwind HTML Admin Template"

  463.                         class="rounded-full"

  464.                         :src="require(`@/assets/images/${faker.images[2]}`)"

  465.                         :content="`Uploaded at ${faker.dates[2]}`"

  466.                       />

  467.                     </div>

  468.                   </div>

  469.                 </td>

  470.                 <td>

  471.                   <a href="" class="font-medium whitespace-no-wrap">{{

  472.                     faker.products[0].name

  473.                   }}</a>

  474.                   <div class="text-gray-600 text-xs whitespace-no-wrap">

  475.                     {{ faker.products[0].category }}

  476.                   </div>

  477.                 </td>

  478.                 <td class="text-center">{{ faker.stocks[0] }}</td>

  479.                 <td class="w-40">

  480.                   <div

  481.                     class="flex items-center justify-center"

  482.                     :class="{

  483.                       'text-theme-9': faker.true_false[0],

  484.                       'text-theme-6': !faker.true_false[0]

  485.                     }"

  486.                   >

  487.                     <CheckSquareIcon class="w-4 h-4 mr-2" />

  488.                     {{ faker.true_false[0] ? "Active" : "Inactive" }}

  489.                   </div>

  490.                 </td>

  491.                 <td class="table-report__action w-56">

  492.                   <div class="flex justify-center items-center">

  493.                     <a class="flex items-center mr-3" href="">

  494.                       <CheckSquareIcon class="w-4 h-4 mr-1" />

  495.                       Edit

  496.                     </a>

  497.                     <a class="flex items-center text-theme-6" href="">

  498.                       <Trash2Icon class="w-4 h-4 mr-1" /> Delete

  499.                     </a>

  500.                   </div>

  501.                 </td>

  502.               </tr>

  503.             </tbody>

  504.           </table>

  505.         </div>

  506.         <div

  507.           class="intro-y flex flex-wrap sm:flex-row sm:flex-no-wrap items-center mt-3"

  508.         >

  509.           <ul class="pagination">

  510.             <li>

  511.               <a class="pagination__link" href="">

  512.                 <ChevronsLeftIcon class="w-4 h-4" />

  513.               </a>

  514.             </li>

  515.             <li>

  516.               <a class="pagination__link" href="">

  517.                 <ChevronLeftIcon class="w-4 h-4" />

  518.               </a>

  519.             </li>

  520.             <li>

  521.               <a class="pagination__link" href="">...</a>

  522.             </li>

  523.             <li>

  524.               <a class="pagination__link" href="">1</a>

  525.             </li>

  526.             <li>

  527.               <a class="pagination__link pagination__link--active" href="">2</a>

  528.             </li>

  529.             <li>

  530.               <a class="pagination__link" href="">3</a>

  531.             </li>

  532.             <li>

  533.               <a class="pagination__link" href="">...</a>

  534.             </li>

  535.             <li>

  536.               <a class="pagination__link" href="">

  537.                 <ChevronRightIcon class="w-4 h-4" />

  538.               </a>

  539.             </li>

  540.             <li>

  541.               <a class="pagination__link" href="">

  542.                 <ChevronsRightIcon class="w-4 h-4" />

  543.               </a>

  544.             </li>

  545.           </ul>

  546.           <select class="w-20 input box mt-3 sm:mt-0">

  547.             <option>10</option>

  548.             <option>25</option>

  549.             <option>35</option>

  550.             <option>50</option>

  551.           </select>

  552.         </div>

  553.       </div>

  554.       <!-- END: Weekly Top Products -->

  555.     </div>

  556.     <div

  557.       class="col-span-12 xxl:col-span-3 xxl:border-l border-theme-5 -mb-10 pb-10"

  558.     >

  559.       <div class="xxl:pl-6 grid grid-cols-12 gap-6">

  560.         <!-- BEGIN: Transactions -->

  561.         <div

  562.           class="col-span-12 md:col-span-6 xl:col-span-4 xxl:col-span-12 mt-3 xxl:mt-8"

  563.         >

  564.           <div class="intro-x flex items-center h-10">

  565.             <h2 class="text-lg font-medium truncate mr-5">Transactions</h2>

  566.           </div>

  567.           <div class="mt-5">

  568.             <div

  569.               v-for="(faker, fakerKey) in $_.take($f(), 5)"

  570.               :key="fakerKey"

  571.               class="intro-x"

  572.             >

  573.               <div class="box px-5 py-3 mb-3 flex items-center zoom-in">

  574.                 <div

  575.                   class="w-10 h-10 flex-none image-fit rounded-full overflow-hidden"

  576.                 >

  577.                   <img

  578.                     alt="Midone Tailwind HTML Admin Template"

  579.                     :src="require(`@/assets/images/${faker.photos[0]}`)"

  580.                   />

  581.                 </div>

  582.                 <div class="ml-4 mr-auto">

  583.                   <div class="font-medium">

  584.                     {{ faker.users[0].name }}

  585.                   </div>

  586.                   <div class="text-gray-600 text-xs">

  587.                     {{ faker.dates[0] }}

  588.                   </div>

  589.                 </div>

  590.                 <div

  591.                   :class="{

  592.                     'text-theme-9': faker.true_false[0],

  593.                     'text-theme-6': !faker.true_false[0]

  594.                   }"

  595.                 >

  596.                   {{ faker.true_false[0] ? "+" : "-" }}${{ faker.totals[0] }}

  597.                 </div>

  598.               </div>

  599.             </div>

  600.             <a

  601.               href=""

  602.               class="intro-x w-full block text-center rounded-md py-3 border border-dotted border-theme-15 dark:border-dark-5 text-theme-16 dark:text-gray-600"

  603.               >View More</a

  604.             >

  605.           </div>

  606.         </div>

  607.         <!-- END: Transactions -->

  608.         <!-- BEGIN: Recent Activities -->

  609.         <div

  610.           class="col-span-12 md:col-span-6 xl:col-span-4 xxl:col-span-12 mt-3"

  611.         >

  612.           <div class="intro-x flex items-center h-10">

  613.             <h2 class="text-lg font-medium truncate mr-5">Recent Activities</h2>

  614.             <a href="" class="ml-auto text-theme-1 dark:text-theme-10 truncate"

  615.               >See all</a

  616.             >

  617.           </div>

  618.           <div class="report-timeline mt-5 relative">

  619.             <div class="intro-x relative flex items-center mb-3">

  620.               <div class="report-timeline__image">

  621.                 <div

  622.                   class="w-10 h-10 flex-none image-fit rounded-full overflow-hidden"

  623.                 >

  624.                   <img

  625.                     alt="Midone Tailwind HTML Admin Template"

  626.                     :src="require(`@/assets/images/${$f()[9].photos[0]}`)"

  627.                   />

  628.                 </div>

  629.               </div>

  630.               <div class="box px-5 py-3 ml-4 flex-1 zoom-in">

  631.                 <div class="flex items-center">

  632.                   <div class="font-medium">

  633.                     {{ $f()[9].users[0].name }}

  634.                   </div>

  635.                   <div class="text-xs text-gray-500 ml-auto">07:00 PM</div>

  636.                 </div>

  637.                 <div class="text-gray-600 mt-1">Has joined the team</div>

  638.               </div>

  639.             </div>

  640.             <div class="intro-x relative flex items-center mb-3">

  641.               <div class="report-timeline__image">

  642.                 <div

  643.                   class="w-10 h-10 flex-none image-fit rounded-full overflow-hidden"

  644.                 >

  645.                   <img

  646.                     alt="Midone Tailwind HTML Admin Template"

  647.                     :src="require(`@/assets/images/${$f()[8].photos[0]}`)"

  648.                   />

  649.                 </div>

  650.               </div>

  651.               <div class="box px-5 py-3 ml-4 flex-1 zoom-in">

  652.                 <div class="flex items-center">

  653.                   <div class="font-medium">

  654.                     {{ $f()[8].users[0].name }}

  655.                   </div>

  656.                   <div class="text-xs text-gray-500 ml-auto">07:00 PM</div>

  657.                 </div>

  658.                 <div class="text-gray-600">

  659.                   <div class="mt-1">Added 3 new photos</div>

  660.                   <div class="flex mt-2">

  661.                     <Tippy

  662.                       tag="div"

  663.                       class="w-8 h-8 image-fit mr-1 zoom-in"

  664.                       :content="$f()[0].products[0].name"

  665.                     >

  666.                       <img

  667.                         alt="Midone Tailwind HTML Admin Template"

  668.                         class="rounded-md border border-white"

  669.                         :src="require(`@/assets/images/${$f()[8].images[0]}`)"

  670.                       />

  671.                     </Tippy>

  672.                     <Tippy

  673.                       tag="div"

  674.                       class="w-8 h-8 image-fit mr-1 zoom-in"

  675.                       :content="$f()[1].products[0].name"

  676.                     >

  677.                       <img

  678.                         alt="Midone Tailwind HTML Admin Template"

  679.                         class="rounded-md border border-white"

  680.                         :src="require(`@/assets/images/${$f()[8].images[1]}`)"

  681.                       />

  682.                     </Tippy>

  683.                     <Tippy

  684.                       tag="div"

  685.                       class="w-8 h-8 image-fit mr-1 zoom-in"

  686.                       :content="$f()[2].products[0].name"

  687.                     >

  688.                       <img

  689.                         alt="Midone Tailwind HTML Admin Template"

  690.                         class="rounded-md border border-white"

  691.                         :src="require(`@/assets/images/${$f()[8].images[2]}`)"

  692.                       />

  693.                     </Tippy>

  694.                   </div>

  695.                 </div>

  696.               </div>

  697.             </div>

  698.             <div class="intro-x text-gray-500 text-xs text-center my-4">

  699.               12 November

  700.             </div>

  701.             <div class="intro-x relative flex items-center mb-3">

  702.               <div class="report-timeline__image">

  703.                 <div

  704.                   class="w-10 h-10 flex-none image-fit rounded-full overflow-hidden"

  705.                 >

  706.                   <img

  707.                     alt="Midone Tailwind HTML Admin Template"

  708.                     :src="require(`@/assets/images/${$f()[7].photos[0]}`)"

  709.                   />

  710.                 </div>

  711.               </div>

  712.               <div class="box px-5 py-3 ml-4 flex-1 zoom-in">

  713.                 <div class="flex items-center">

  714.                   <div class="font-medium">

  715.                     {{ $f()[7].users[0].name }}

  716.                   </div>

  717.                   <div class="text-xs text-gray-500 ml-auto">07:00 PM</div>

  718.                 </div>

  719.                 <div class="text-gray-600 mt-1">

  720.                   Has changed

  721.                   <a class="text-theme-1 dark:text-theme-10" href="">{{

  722.                     $f()[7].products[0].name

  723.                   }}</a>

  724.                   price and description

  725.                 </div>

  726.               </div>

  727.             </div>

  728.             <div class="intro-x relative flex items-center mb-3">

  729.               <div class="report-timeline__image">

  730.                 <div

  731.                   class="w-10 h-10 flex-none image-fit rounded-full overflow-hidden"

  732.                 >

  733.                   <img

  734.                     alt="Midone Tailwind HTML Admin Template"

  735.                     :src="require(`@/assets/images/${$f()[6].photos[0]}`)"

  736.                   />

  737.                 </div>

  738.               </div>

  739.               <div class="box px-5 py-3 ml-4 flex-1 zoom-in">

  740.                 <div class="flex items-center">

  741.                   <div class="font-medium">

  742.                     {{ $f()[6].users[0].name }}

  743.                   </div>

  744.                   <div class="text-xs text-gray-500 ml-auto">07:00 PM</div>

  745.                 </div>

  746.                 <div class="text-gray-600 mt-1">

  747.                   Has changed

  748.                   <a class="text-theme-1 dark:text-theme-10" href="">{{

  749.                     $f()[6].products[0].name

  750.                   }}</a>

  751.                   description

  752.                 </div>

  753.               </div>

  754.             </div>

  755.           </div>

  756.         </div>

  757.         <!-- END: Recent Activities -->

  758.         <!-- BEGIN: Important Notes -->

  759.         <div

  760.           class="col-span-12 md:col-span-6 xl:col-span-12 xxl:col-span-12 xl:col-start-1 xl:row-start-1 xxl:col-start-auto xxl:row-start-auto mt-3"

  761.         >

  762.           <div class="intro-x flex items-center h-10">

  763.             <h2 class="text-lg font-medium truncate mr-auto">

  764.               Important Notes

  765.             </h2>

  766.             <button

  767.               class="slick-navigator button px-2 border border-gray-400 dark:border-dark-5 flex items-center text-gray-700 dark:text-gray-600 mr-2"

  768.               @click="prevImportantNotes"

  769.             >

  770.               <ChevronLeftIcon class="w-4 h-4" />

  771.             </button>

  772.             <button

  773.               class="slick-navigator button px-2 border border-gray-400 dark:border-dark-5 flex items-center text-gray-700 dark:text-gray-600"

  774.               @click="nextImportantNotes"

  775.             >

  776.               <ChevronRightIcon class="w-4 h-4" />

  777.             </button>

  778.           </div>

  779.           <div class="mt-5 intro-x">

  780.             <div class="box zoom-in">

  781.               <VueSlickCarousel

  782.                 ref="important-notes"

  783.                 :arrows="false"

  784.                 :dots="false"

  785.               >

  786.                 <div class="p-5">

  787.                   <div class="text-base font-medium truncate">

  788.                     Lorem Ipsum is simply dummy text

  789.                   </div>

  790.                   <div class="text-gray-500 mt-1">20 Hours ago</div>

  791.                   <div class="text-gray-600 text-justify mt-1">

  792.                     Lorem Ipsum is simply dummy text of the printing and

  793.                     typesetting industry. Lorem Ipsum has been the industry's

  794.                     standard dummy text ever since the 1500s.

  795.                   </div>

  796.                   <div class="font-medium flex mt-5">

  797.                     <button

  798.                       type="button"

  799.                       class="button button--sm bg-gray-200 dark:bg-dark-5 text-gray-600 dark:text-gray-300"

  800.                     >

  801.                       View Notes

  802.                     </button>

  803.                     <button

  804.                       type="button"

  805.                       class="button button--sm border border-gray-300 dark:border-dark-5 text-gray-600 ml-auto"

  806.                     >

  807.                       Dismiss

  808.                     </button>

  809.                   </div>

  810.                 </div>

  811.                 <div class="p-5">

  812.                   <div class="font-medium truncate">

  813.                     Lorem Ipsum is simply dummy text

  814.                   </div>

  815.                   <div class="text-gray-500 mt-1">20 Hours ago</div>

  816.                   <div class="text-gray-600 text-justify mt-1">

  817.                     Lorem Ipsum is simply dummy text of the printing and

  818.                     typesetting industry. Lorem Ipsum has been the industry's

  819.                     standard dummy text ever since the 1500s.

  820.                   </div>

  821.                   <div class="font-medium flex mt-5">

  822.                     <button

  823.                       type="button"

  824.                       class="button button--sm bg-gray-200 dark:bg-dark-5 text-gray-600 dark:text-gray-300"

  825.                     >

  826.                       View Notes

  827.                     </button>

  828.                     <button

  829.                       type="button"

  830.                       class="button button--sm border border-gray-300 dark:border-dark-5 text-gray-600 ml-auto"

  831.                     >

  832.                       Dismiss

  833.                     </button>

  834.                   </div>

  835.                 </div>

  836.                 <div class="p-5">

  837.                   <div class="font-medium truncate">

  838.                     Lorem Ipsum is simply dummy text

  839.                   </div>

  840.                   <div class="text-gray-500 mt-1">20 Hours ago</div>

  841.                   <div class="text-gray-600 text-justify mt-1">

  842.                     Lorem Ipsum is simply dummy text of the printing and

  843.                     typesetting industry. Lorem Ipsum has been the industry's

  844.                     standard dummy text ever since the 1500s.

  845.                   </div>

  846.                   <div class="font-medium flex mt-5">

  847.                     <button

  848.                       type="button"

  849.                       class="button button--sm bg-gray-200 dark:bg-dark-5 text-gray-600 dark:text-gray-300"

  850.                     >

  851.                       View Notes

  852.                     </button>

  853.                     <button

  854.                       type="button"

  855.                       class="button button--sm border border-gray-300 dark:border-dark-5 text-gray-600 ml-auto"

  856.                     >

  857.                       Dismiss

  858.                     </button>

  859.                   </div>

  860.                 </div>

  861.               </VueSlickCarousel>

  862.             </div>

  863.           </div>

  864.         </div>

  865.         <!-- END: Important Notes -->

  866.         <!-- BEGIN: Schedules -->

  867.         <div

  868.           class="col-span-12 md:col-span-6 xl:col-span-4 xxl:col-span-12 xl:col-start-1 xl:row-start-2 xxl:col-start-auto xxl:row-start-auto mt-3"

  869.         >

  870.           <div class="intro-x flex items-center h-10">

  871.             <h2 class="text-lg font-medium truncate mr-5">Schedules</h2>

  872.             <a

  873.               href=""

  874.               class="ml-auto text-theme-1 dark:text-theme-10 truncate flex items-center"

  875.             >

  876.               <PlusIcon class="w-4 h-4 mr-1" /> Add New Schedules

  877.             </a>

  878.           </div>

  879.           <div class="mt-5">

  880.             <div class="intro-x box">

  881.               <div class="p-5">

  882.                 <div class="flex">

  883.                   <ChevronLeftIcon class="w-5 h-5 text-gray-600" />

  884.                   <div class="font-medium mx-auto">April</div>

  885.                   <ChevronRightIcon class="w-5 h-5 text-gray-600" />

  886.                 </div>

  887.                 <div class="grid grid-cols-7 gap-4 mt-5 text-center">

  888.                   <div class="font-medium">Su</div>

  889.                   <div class="font-medium">Mo</div>

  890.                   <div class="font-medium">Tu</div>

  891.                   <div class="font-medium">We</div>

  892.                   <div class="font-medium">Th</div>

  893.                   <div class="font-medium">Fr</div>

  894.                   <div class="font-medium">Sa</div>

  895.                   <div class="py-1 rounded relative text-gray-600">29</div>

  896.                   <div class="py-1 rounded relative text-gray-600">30</div>

  897.                   <div class="py-1 rounded relative text-gray-600">31</div>

  898.                   <div class="py-1 rounded relative">1</div>

  899.                   <div class="py-1 rounded relative">2</div>

  900.                   <div class="py-1 rounded relative">3</div>

  901.                   <div class="py-1 rounded relative">4</div>

  902.                   <div class="py-1 rounded relative">5</div>

  903.                   <div

  904.                     class="py-1 bg-theme-18 dark:bg-theme-9 rounded relative"

  905.                   >

  906.                     6

  907.                   </div>

  908.                   <div class="py-1 rounded relative">7</div>

  909.                   <div

  910.                     class="py-1 bg-theme-1 dark:bg-theme-1 text-white rounded relative"

  911.                   >

  912.                     8

  913.                   </div>

  914.                   <div class="py-1 rounded relative">9</div>

  915.                   <div class="py-1 rounded relative">10</div>

  916.                   <div class="py-1 rounded relative">11</div>

  917.                   <div class="py-1 rounded relative">12</div>

  918.                   <div class="py-1 rounded relative">13</div>

  919.                   <div class="py-1 rounded relative">14</div>

  920.                   <div class="py-1 rounded relative">15</div>

  921.                   <div class="py-1 rounded relative">16</div>

  922.                   <div class="py-1 rounded relative">17</div>

  923.                   <div class="py-1 rounded relative">18</div>

  924.                   <div class="py-1 rounded relative">19</div>

  925.                   <div class="py-1 rounded relative">20</div>

  926.                   <div class="py-1 rounded relative">21</div>

  927.                   <div class="py-1 rounded relative">22</div>

  928.                   <div

  929.                     class="py-1 bg-theme-17 dark:bg-theme-11 rounded relative"

  930.                   >

  931.                     23

  932.                   </div>

  933.                   <div class="py-1 rounded relative">24</div>

  934.                   <div class="py-1 rounded relative">25</div>

  935.                   <div class="py-1 rounded relative">26</div>

  936.                   <div

  937.                     class="py-1 bg-theme-14 dark:bg-theme-12 rounded relative"

  938.                   >

  939.                     27

  940.                   </div>

  941.                   <div class="py-1 rounded relative">28</div>

  942.                   <div class="py-1 rounded relative">29</div>

  943.                   <div class="py-1 rounded relative">30</div>

  944.                   <div class="py-1 rounded relative text-gray-600">1</div>

  945.                   <div class="py-1 rounded relative text-gray-600">2</div>

  946.                   <div class="py-1 rounded relative text-gray-600">3</div>

  947.                   <div class="py-1 rounded relative text-gray-600">4</div>

  948.                   <div class="py-1 rounded relative text-gray-600">5</div>

  949.                   <div class="py-1 rounded relative text-gray-600">6</div>

  950.                   <div class="py-1 rounded relative text-gray-600">7</div>

  951.                   <div class="py-1 rounded relative text-gray-600">8</div>

  952.                   <div class="py-1 rounded relative text-gray-600">9</div>

  953.                 </div>

  954.               </div>

  955.               <div class="border-t border-gray-200 p-5">

  956.                 <div class="flex items-center">

  957.                   <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>

  958.                   <span class="truncate">UI/UX Workshop</span>

  959.                   <div

  960.                     class="h-px flex-1 border border-r border-dashed border-gray-300 mx-3 xl:hidden"

  961.                   ></div>

  962.                   <span class="font-medium xl:ml-auto">23th</span>

  963.                 </div>

  964.                 <div class="flex items-center mt-4">

  965.                   <div

  966.                     class="w-2 h-2 bg-theme-1 dark:bg-theme-10 rounded-full mr-3"

  967.                   ></div>

  968.                   <span class="truncate">VueJs Frontend Development</span>

  969.                   <div

  970.                     class="h-px flex-1 border border-r border-dashed border-gray-300 mx-3 xl:hidden"

  971.                   ></div>

  972.                   <span class="font-medium xl:ml-auto">10th</span>

  973.                 </div>

  974.                 <div class="flex items-center mt-4">

  975.                   <div class="w-2 h-2 bg-theme-12 rounded-full mr-3"></div>

  976.                   <span class="truncate">Laravel Rest API</span>

  977.                   <div

  978.                     class="h-px flex-1 border border-r border-dashed border-gray-300 mx-3 xl:hidden"

  979.                   ></div>

  980.                   <span class="font-medium xl:ml-auto">31th</span>

  981.                 </div>

  982.               </div>

  983.             </div>

  984.           </div>

  985.         </div>

  986.         <!-- END: Schedules -->

  987.       </div>

  988.     </div>

  989.   </div>

  990. </template>

  991. 

  992. <script>

  993. import VueSlickCarousel from "vue-slick-carousel";

  994. 

  995. export default {

  996.   components: {

  997.     VueSlickCarousel

  998.   },

  999.   data() {

  1000.     return {

  1001.       salesReportFilter: ""

  1002.     };

  1003.   },

  1004.   methods: {

  1005.     prevImportantNotes() {

  1006.       this.$refs["important-notes"].prev();

  1007.     },

  1008.     nextImportantNotes() {

  1009.       this.$refs["important-notes"].next();

  1010.     }

  1011.   }

  1012. };

  1013. </script>