mirror of
https://github.com/cruip/vuejs-admin-dashboard-template.git
synced 2026-02-23 14:22:25 +08:00
2.0.0
This commit is contained in:
pasqualevitiello
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div v-show="open" class="fixed bottom-0 right-0 w-full md:bottom-8 md:right-12 md:w-auto z-60">
|
||||
<div class="bg-gray-800 text-gray-50 text-sm p-3 md:rounded shadow-lg flex justify-between">
|
||||
<div class="bg-slate-800 border border-transparent dark:border-slate-700 text-slate-50 text-sm p-3 md:rounded shadow-lg flex justify-between">
|
||||
<div>👉 <a class="hover:underline" href="https://github.com/cruip/vuejs-admin-dashboard-template" target="_blank" rel="noreferrer">Download Mosaic Lite on GitHub</a></div>
|
||||
<button class="text-gray-500 hover:text-gray-400 ml-5" @click="open = false">
|
||||
<button class="text-slate-500 hover:text-slate-400 ml-5" @click="open = false">
|
||||
<span class="sr-only">Close</span>
|
||||
<svg class="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
|
||||
<path d="M12.72 3.293a1 1 0 00-1.415 0L8.012 6.586 4.72 3.293a1 1 0 00-1.414 1.414L6.598 8l-3.293 3.293a1 1 0 101.414 1.414l3.293-3.293 3.293 3.293a1 1 0 001.414-1.414L9.426 8l3.293-3.293a1 1 0 000-1.414z" />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<header class="sticky top-0 bg-white border-b border-gray-200 z-30">
|
||||
<header class="sticky top-0 bg-white dark:bg-[#182235] border-b border-slate-200 dark:border-slate-700 z-30">
|
||||
<div class="px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16 -mb-px">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="flex">
|
||||
|
||||
<!-- Hamburger button -->
|
||||
<button class="text-gray-500 hover:text-gray-600 lg:hidden" @click.stop="$emit('toggle-sidebar')" aria-controls="sidebar" :aria-expanded="sidebarOpen">
|
||||
<button class="text-slate-500 hover:text-slate-600 lg:hidden" @click.stop="$emit('toggle-sidebar')" aria-controls="sidebar" :aria-expanded="sidebarOpen">
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" y="5" width="16" height="2" />
|
||||
@@ -20,24 +20,21 @@
|
||||
|
||||
<!-- Header: Right side -->
|
||||
<div class="flex items-center space-x-3">
|
||||
|
||||
<button
|
||||
class="w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition duration-150 rounded-full ml-3"
|
||||
:class="{ 'bg-gray-200': searchModalOpen }"
|
||||
@click.stop="searchModalOpen = true"
|
||||
aria-controls="search-modal"
|
||||
>
|
||||
<span class="sr-only">Search</span>
|
||||
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="fill-current text-gray-500" d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
|
||||
<path class="fill-current text-gray-400" d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
|
||||
</svg>
|
||||
</button>
|
||||
<SearchModal id="search-modal" searchId="search" :modalOpen="searchModalOpen" @open-modal="searchModalOpen = true" @close-modal="searchModalOpen = false" />
|
||||
<div>
|
||||
<button class="w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full ml-3" :class="{ 'bg-slate-200': searchModalOpen }" @click.stop="searchModalOpen = true" aria-controls="search-modal">
|
||||
<span class="sr-only">Search</span>
|
||||
<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="fill-current text-slate-500 dark:text-slate-400" d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
|
||||
<path class="fill-current text-slate-400 dark:text-slate-500" d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
|
||||
</svg>
|
||||
</button>
|
||||
<SearchModal id="search-modal" searchId="search" :modalOpen="searchModalOpen" @open-modal="searchModalOpen = true" @close-modal="searchModalOpen = false" />
|
||||
</div>
|
||||
<Notifications align="right" />
|
||||
<Help align="right" />
|
||||
<ThemeToggle />
|
||||
<!-- Divider -->
|
||||
<hr class="w-px h-6 bg-gray-200" />
|
||||
<hr class="w-px h-6 bg-slate-200 dark:bg-slate-700 border-none" />
|
||||
<UserMenu align="right" />
|
||||
|
||||
</div>
|
||||
@@ -53,6 +50,7 @@ import { ref } from 'vue'
|
||||
import SearchModal from '../components/ModalSearch.vue'
|
||||
import Notifications from '../components/DropdownNotifications.vue'
|
||||
import Help from '../components/DropdownHelp.vue'
|
||||
import ThemeToggle from '../components/ThemeToggle.vue'
|
||||
import UserMenu from '../components/DropdownProfile.vue'
|
||||
|
||||
export default {
|
||||
@@ -62,13 +60,14 @@ export default {
|
||||
SearchModal,
|
||||
Notifications,
|
||||
Help,
|
||||
ThemeToggle,
|
||||
UserMenu,
|
||||
},
|
||||
setup() {
|
||||
const searchModalOpen = ref(false)
|
||||
return {
|
||||
searchModalOpen,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0" :class="activeCondition && 'bg-gray-900'">
|
||||
<li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0" :class="activeCondition && 'bg-slate-900'">
|
||||
<slot :handleClick="handleClick" :expanded="expanded" />
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<button class="flex justify-center items-center w-9 h-9 rounded-full bg-white border border-gray-200 hover:border-gray-300 text-indigo-500 shadow-sm transition duration-150 ml-2">
|
||||
<button class="flex justify-center items-center w-9 h-9 rounded-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600 text-indigo-500 shadow-sm transition duration-150 ml-2">
|
||||
<span class="sr-only">Add new user</span>
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 16 16">
|
||||
<path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<div class="px-5 pt-5">
|
||||
<header class="flex justify-between items-start mb-2">
|
||||
<!-- Icon -->
|
||||
<img src="../../images/icon-01.svg" width="32" height="32" alt="Icon 01" />
|
||||
<EditMenu align="right" class="relative inline-flex">
|
||||
<li>
|
||||
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 1</a>
|
||||
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 2</a>
|
||||
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium text-sm text-red-500 hover:text-red-600 flex py-1 px-3" href="#0">Remove</a>
|
||||
<a class="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" href="#0">Remove</a>
|
||||
</li>
|
||||
</EditMenu>
|
||||
</header>
|
||||
<h2 class="text-lg font-semibold text-gray-800 mb-2">Acme Plus</h2>
|
||||
<div class="text-xs font-semibold text-gray-400 uppercase mb-1">Sales</div>
|
||||
<h2 class="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">Acme Plus</h2>
|
||||
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
|
||||
<div class="flex items-start">
|
||||
<div class="text-3xl font-bold text-gray-800 mr-2">$24,780</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-green-500 rounded-full">+49%</div>
|
||||
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">$24,780</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+49%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart built with Chart.js 3 -->
|
||||
<div class="grow">
|
||||
<div class="grow max-sm:max-h-[128px] xl:max-h-[128px]">
|
||||
<!-- Change the height attribute to adjust the chart height -->
|
||||
<LineChart :data="chartData" width="389" height="128" />
|
||||
</div>
|
||||
@@ -75,6 +75,9 @@ export default {
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBorderWidth: 0,
|
||||
clip: 20,
|
||||
},
|
||||
// Gray line
|
||||
@@ -85,12 +88,15 @@ export default {
|
||||
314, 314, 314, 388, 314, 202, 202,
|
||||
202, 202, 314, 720, 642,
|
||||
],
|
||||
borderColor: tailwindConfig().theme.colors.gray[300],
|
||||
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
borderWidth: 2,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.gray[300],
|
||||
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBorderWidth: 0,
|
||||
clip: 20,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<div class="px-5 pt-5">
|
||||
<header class="flex justify-between items-start mb-2">
|
||||
<!-- Icon -->
|
||||
<img src="../../images/icon-02.svg" width="32" height="32" alt="Icon 02" />
|
||||
<EditMenu align="right" class="relative inline-flex">
|
||||
<li>
|
||||
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 1</a>
|
||||
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 2</a>
|
||||
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium text-sm text-red-500 hover:text-red-600 flex py-1 px-3" href="#0">Remove</a>
|
||||
<a class="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" href="#0">Remove</a>
|
||||
</li>
|
||||
</EditMenu>
|
||||
</header>
|
||||
<h2 class="text-lg font-semibold text-gray-800 mb-2">Acme Advanced</h2>
|
||||
<div class="text-xs font-semibold text-gray-400 uppercase mb-1">Sales</div>
|
||||
<h2 class="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">Acme Advanced</h2>
|
||||
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
|
||||
<div class="flex items-start">
|
||||
<div class="text-3xl font-bold text-gray-800 mr-2">$17,489</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-yellow-500 rounded-full">-14%</div>
|
||||
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">$17,489</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-14%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart built with Chart.js 3 -->
|
||||
<div class="grow">
|
||||
<div class="grow max-sm:max-h-[128px] xl:max-h-[128px]">
|
||||
<!-- Change the height attribute to adjust the chart height -->
|
||||
<LineChart :data="chartData" width="389" height="128" />
|
||||
</div>
|
||||
@@ -34,7 +34,6 @@
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import LineChart from '../../charts/LineChart01.vue'
|
||||
import Icon from '../../images/icon-02.svg'
|
||||
import EditMenu from '../../components/DropdownEditMenu.vue'
|
||||
|
||||
// Import utilities
|
||||
@@ -76,6 +75,9 @@ export default {
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBorderWidth: 0,
|
||||
clip: 20,
|
||||
},
|
||||
// Gray line
|
||||
@@ -86,12 +88,15 @@ export default {
|
||||
154, 273, 191, 191, 126, 263, 349,
|
||||
252, 423, 622, 470, 532,
|
||||
],
|
||||
borderColor: tailwindConfig().theme.colors.gray[300],
|
||||
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
borderWidth: 2,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.gray[300],
|
||||
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBorderWidth: 0,
|
||||
clip: 20,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<div class="px-5 pt-5">
|
||||
<header class="flex justify-between items-start mb-2">
|
||||
<!-- Icon -->
|
||||
<img src="../../images/icon-03.svg" width="32" height="32" alt="Icon 03" />
|
||||
<EditMenu align="right" class="relative inline-flex">
|
||||
<li>
|
||||
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 1</a>
|
||||
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium text-sm text-gray-600 hover:text-gray-800 flex py-1 px-3" href="#0">Option 2</a>
|
||||
<a class="font-medium text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-200 flex py-1 px-3" href="#0">Option 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium text-sm text-red-500 hover:text-red-600 flex py-1 px-3" href="#0">Remove</a>
|
||||
<a class="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" href="#0">Remove</a>
|
||||
</li>
|
||||
</EditMenu>
|
||||
</header>
|
||||
<h2 class="text-lg font-semibold text-gray-800 mb-2">Acme Professional</h2>
|
||||
<div class="text-xs font-semibold text-gray-400 uppercase mb-1">Sales</div>
|
||||
<h2 class="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">Acme Professional</h2>
|
||||
<div class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase mb-1">Sales</div>
|
||||
<div class="flex items-start">
|
||||
<div class="text-3xl font-bold text-gray-800 mr-2">$9,962</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-green-500 rounded-full">+29%</div>
|
||||
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">$9,962</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+29%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart built with Chart.js 3 -->
|
||||
<div class="grow">
|
||||
<div class="grow max-sm:max-h-[128px] xl:max-h-[128px]">
|
||||
<!-- Change the height attribute to adjust the chart height -->
|
||||
<LineChart :data="chartData" width="389" height="128" />
|
||||
</div>
|
||||
@@ -76,6 +76,9 @@ export default {
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBorderWidth: 0,
|
||||
clip: 20,
|
||||
},
|
||||
// Gray line
|
||||
@@ -86,12 +89,15 @@ export default {
|
||||
145, 145, 354, 260, 188, 188, 300,
|
||||
300, 282, 364, 660, 554,
|
||||
],
|
||||
borderColor: tailwindConfig().theme.colors.gray[300],
|
||||
borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
borderWidth: 2,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.gray[300],
|
||||
pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.slate[500])}, 0.25)`,
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBorderWidth: 0,
|
||||
clip: 20,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Direct VS Indirect</h2>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Direct VS Indirect</h2>
|
||||
</header>
|
||||
<!-- Chart built with Chart.js 3 -->
|
||||
<!-- Change the height attribute to adjust the chart height -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100 flex items-center">
|
||||
<h2 class="font-semibold text-gray-800">Real Time Value</h2>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Real Time Value</h2>
|
||||
<Tooltip class="ml-2">
|
||||
<div class="text-xs text-center whitespace-nowrap">Built with <a class="underline" href="https://www.chartjs.org/" target="_blank" rel="noreferrer">Chart.js</a></div>
|
||||
</Tooltip>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Top Countries</h2>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Top Countries</h2>
|
||||
</header>
|
||||
<!-- Chart built with Chart.js 3 -->
|
||||
<!-- Change the height attribute to adjust the chart height -->
|
||||
@@ -12,7 +12,6 @@
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import DoughnutChart from '../../charts/DoughnutChart.vue'
|
||||
import EditMenu from '../../components/DropdownEditMenu.vue'
|
||||
|
||||
// Import utilities
|
||||
import { tailwindConfig } from '../../utils/Utils'
|
||||
@@ -21,7 +20,6 @@ export default {
|
||||
name: 'DashboardCard06',
|
||||
components: {
|
||||
DoughnutChart,
|
||||
EditMenu,
|
||||
},
|
||||
setup() {
|
||||
const chartData = ref({
|
||||
@@ -42,7 +40,7 @@ export default {
|
||||
tailwindConfig().theme.colors.blue[500],
|
||||
tailwindConfig().theme.colors.indigo[900],
|
||||
],
|
||||
hoverBorderColor: tailwindConfig().theme.colors.white,
|
||||
borderWidth: 0,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="col-span-full xl:col-span-8 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Top Channels</h2>
|
||||
<div class="col-span-full xl:col-span-8 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Top Channels</h2>
|
||||
</header>
|
||||
<div class="p-3">
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table-auto w-full">
|
||||
<table class="table-auto w-full dark:text-slate-300">
|
||||
<!-- Table header -->
|
||||
<thead class="text-xs uppercase text-gray-400 bg-gray-50 rounded-sm">
|
||||
<thead class="text-xs uppercase text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-700 dark:bg-opacity-50 rounded-sm">
|
||||
<tr>
|
||||
<th class="p-2">
|
||||
<div class="font-semibold text-left">Source</div>
|
||||
@@ -29,7 +29,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- Table body -->
|
||||
<tbody class="text-sm font-medium divide-y divide-gray-100">
|
||||
<tbody class="text-sm font-medium divide-y divide-slate-100 dark:divide-slate-700">
|
||||
<!-- Row -->
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
@@ -38,14 +38,14 @@
|
||||
<circle fill="#24292E" cx="18" cy="18" r="18" />
|
||||
<path d="M18 10.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V24c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z" fill="#FFF" />
|
||||
</svg>
|
||||
<div class="text-gray-800">Github.com</div>
|
||||
<div class="text-slate-800 dark:text-slate-100">Github.com</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">2.4K</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center text-green-500">$3,877</div>
|
||||
<div class="text-center text-emerald-500">$3,877</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">267</div>
|
||||
@@ -62,14 +62,14 @@
|
||||
<circle fill="#1DA1F2" cx="18" cy="18" r="18" />
|
||||
<path d="M26 13.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H10c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z" fill="#FFF" fill-rule="nonzero" />
|
||||
</svg>
|
||||
<div class="text-gray-800">Twitter</div>
|
||||
<div class="text-slate-800 dark:text-slate-100">Twitter</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">2.2K</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center text-green-500">$3,426</div>
|
||||
<div class="text-center text-emerald-500">$3,426</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">249</div>
|
||||
@@ -86,14 +86,14 @@
|
||||
<circle fill="#EA4335" cx="18" cy="18" r="18" />
|
||||
<path d="M18 17v2.4h4.1c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C21.6 11.7 20 11 18.1 11c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H18z" fill="#FFF" fill-rule="nonzero" />
|
||||
</svg>
|
||||
<div class="text-gray-800">Google (organic)</div>
|
||||
<div class="text-slate-800 dark:text-slate-100">Google (organic)</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">2.0K</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center text-green-500">$2,444</div>
|
||||
<div class="text-center text-emerald-500">$2,444</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">224</div>
|
||||
@@ -110,14 +110,14 @@
|
||||
<circle fill="#4BC9FF" cx="18" cy="18" r="18" />
|
||||
<path d="M26 14.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C14 19.9 13.4 15 12 15c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5 1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z" fill="#FFF" fill-rule="nonzero" />
|
||||
</svg>
|
||||
<div class="text-gray-800">Vimeo.com</div>
|
||||
<div class="text-slate-800 dark:text-slate-100">Vimeo.com</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">1.9K</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center text-green-500">$2,236</div>
|
||||
<div class="text-center text-emerald-500">$2,236</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">220</div>
|
||||
@@ -134,14 +134,14 @@
|
||||
<circle fill="#0E2439" cx="18" cy="18" r="18" />
|
||||
<path d="M14.232 12.818V23H11.77V12.818h2.46zM15.772 23V12.818h2.462v4.087h4.012v-4.087h2.456V23h-2.456v-4.092h-4.012V23h-2.461z" fill="#E6ECF4" />
|
||||
</svg>
|
||||
<div class="text-gray-800">Indiehackers.com</div>
|
||||
<div class="text-slate-800 dark:text-slate-100">Indiehackers.com</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">1.7K</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center text-green-500">$2,034</div>
|
||||
<div class="text-center text-emerald-500">$2,034</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="text-center">204</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100 flex items-center">
|
||||
<h2 class="font-semibold text-gray-800">Sales Over Time (all stores)</h2>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Sales Over Time (all stores)</h2>
|
||||
</header>
|
||||
<!-- Chart built with Chart.js 3 -->
|
||||
<!-- Change the height attribute to adjust the chart height -->
|
||||
@@ -51,6 +51,10 @@ export default {
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointHoverBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBorderWidth: 0,
|
||||
clip: 20,
|
||||
},
|
||||
// Blue line
|
||||
{
|
||||
@@ -68,8 +72,9 @@ export default {
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.blue[400],
|
||||
clip: 20,
|
||||
},
|
||||
// Green line
|
||||
// emerald line
|
||||
{
|
||||
label: 'Average',
|
||||
data: [
|
||||
@@ -78,13 +83,14 @@ export default {
|
||||
223, 188, 114, 162, 200, 150, 118,
|
||||
118, 76, 122, 230, 268,
|
||||
],
|
||||
borderColor: tailwindConfig().theme.colors.green[500],
|
||||
borderColor: tailwindConfig().theme.colors.emerald[500],
|
||||
fill: false,
|
||||
borderWidth: 2,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.green[500],
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
|
||||
clip: 20,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100 flex items-center">
|
||||
<h2 class="font-semibold text-gray-800">Sales VS Refunds</h2>
|
||||
<div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Sales VS Refunds</h2>
|
||||
<Tooltip class="ml-2" size="lg">
|
||||
<div class="text-sm">Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div>
|
||||
</Tooltip>
|
||||
</header>
|
||||
<div class="px-5 py-3">
|
||||
<div class="flex items-start">
|
||||
<div class="text-3xl font-bold text-gray-800 mr-2">+$6,796</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-yellow-500 rounded-full">-34%</div>
|
||||
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">+$6,796</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-34%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart built with Chart.js 3 -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Customers</h2>
|
||||
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Customers</h2>
|
||||
</header>
|
||||
<div class="p-3">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table-auto w-full">
|
||||
<!-- Table header -->
|
||||
<thead class="text-xs font-semibold uppercase text-gray-400 bg-gray-50">
|
||||
<thead class="text-xs font-semibold uppercase dark:text-slate-500 bg-slate-50 dark:bg-slate-700 dark:bg-opacity-50">
|
||||
<tr>
|
||||
<th class="p-2 whitespace-nowrap">
|
||||
<div class="font-semibold text-left">Name</div>
|
||||
@@ -26,7 +26,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- Table body -->
|
||||
<tbody class="text-sm divide-y divide-gray-100">
|
||||
<tbody class="text-sm divide-y divide-slate-100 dark:divide-slate-700">
|
||||
<tr
|
||||
v-for="customer in customers"
|
||||
:key="customer.id"
|
||||
@@ -36,7 +36,7 @@
|
||||
<div class="w-10 h-10 shrink-0 mr-2 sm:mr-3">
|
||||
<img class="rounded-full" :src="customer.image" width="40" height="40" :alt="customer.name" />
|
||||
</div>
|
||||
<div class="font-medium text-gray-800">{{customer.name}}</div>
|
||||
<div class="font-medium text-slate-800 dark:text-slate-100">{{customer.name}}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2 whitespace-nowrap">
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Reason for Refunds</h2>
|
||||
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Reason for Refunds</h2>
|
||||
</header>
|
||||
<div class="px-5 py-3">
|
||||
<div class="flex items-start">
|
||||
<div class="text-3xl font-bold text-gray-800 mr-2">449</div>
|
||||
<div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">449</div>
|
||||
<div class="text-sm font-semibold text-white px-1.5 bg-yellow-500 rounded-full">-22%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Recent Activity</h2>
|
||||
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Recent Activity</h2>
|
||||
</header>
|
||||
<div class="p-3">
|
||||
|
||||
<!-- Card content -->
|
||||
<!-- "Today" group -->
|
||||
<div>
|
||||
<header class="text-xs uppercase text-gray-400 bg-gray-50 rounded-sm font-semibold p-2">Today</header>
|
||||
<header class="text-xs uppercase text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Today</header>
|
||||
<ul class="my-1">
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
@@ -17,43 +17,43 @@
|
||||
<path d="M18 10c-4.4 0-8 3.1-8 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L18.9 22H18c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-gray-100 text-sm py-2">
|
||||
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Nick Mark</a> mentioned <a class="font-medium text-gray-800" href="#0">Sara Smith</a> in a new post</div>
|
||||
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Nick Mark</a> mentioned <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Sara Smith</a> in a new post</div>
|
||||
<div class="shrink-0 self-end ml-2">
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -></span></a>
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400" href="#0">View<span class="hidden sm:inline"> -></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-red-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
|
||||
<path d="M25 24H11a1 1 0 01-1-1v-5h2v4h12v-4h2v5a1 1 0 01-1 1zM14 13h8v2h-8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-gray-100 text-sm py-2">
|
||||
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center">The post <a class="font-medium text-gray-800" href="#0">Post Name</a> was removed by <a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Nick Mark</a></div>
|
||||
<div class="self-center">The post <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Post Name</a> was removed by <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Nick Mark</a></div>
|
||||
<div class="shrink-0 self-end ml-2">
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -></span></a>
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400" href="#0">View<span class="hidden sm:inline"> -></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
|
||||
<path d="M15 13v-3l-5 4 5 4v-3h8a1 1 0 000-2h-8zM21 21h-8a1 1 0 000 2h8v3l5-4-5-4v3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Patrick Sullivan</a> published a new <a class="font-medium text-gray-800" href="#0">post</a></div>
|
||||
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Patrick Sullivan</a> published a new <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">post</a></div>
|
||||
<div class="shrink-0 self-end ml-2">
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -></span></a>
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400" href="#0">View<span class="hidden sm:inline"> -></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -62,7 +62,7 @@
|
||||
</div>
|
||||
<!-- "Yesterday" group -->
|
||||
<div>
|
||||
<header class="text-xs uppercase text-gray-400 bg-gray-50 rounded-sm font-semibold p-2">Yesterday</header>
|
||||
<header class="text-xs uppercase text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Yesterday</header>
|
||||
<ul class="my-1">
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
@@ -71,11 +71,11 @@
|
||||
<path d="M23 11v2.085c-2.841.401-4.41 2.462-5.8 4.315-1.449 1.932-2.7 3.6-5.2 3.6h-1v2h1c3.5 0 5.253-2.338 6.8-4.4 1.449-1.932 2.7-3.6 5.2-3.6h3l-4-4zM15.406 16.455c.066-.087.125-.162.194-.254.314-.419.656-.872 1.033-1.33C15.475 13.802 14.038 13 12 13h-1v2h1c1.471 0 2.505.586 3.406 1.455zM24 21c-1.471 0-2.505-.586-3.406-1.455-.066.087-.125.162-.194.254-.316.422-.656.873-1.028 1.328.959.878 2.108 1.573 3.628 1.788V25l4-4h-3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-gray-100 text-sm py-2">
|
||||
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">240+</a> users have subscribed to <a class="font-medium text-gray-800" href="#0">Newsletter #1</a></div>
|
||||
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">240+</a> users have subscribed to <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Newsletter #1</a></div>
|
||||
<div class="shrink-0 self-end ml-2">
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -></span></a>
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400" href="#0">View<span class="hidden sm:inline"> -></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,9 +89,9 @@
|
||||
</div>
|
||||
<div class="grow flex items-center text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center">The post <a class="font-medium text-gray-800" href="#0">Post Name</a> was suspended by <a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Nick Mark</a></div>
|
||||
<div class="self-center">The post <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Post Name</a> was suspended by <a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Nick Mark</a></div>
|
||||
<div class="shrink-0 self-end ml-2">
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -></span></a>
|
||||
<a class="font-medium text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400" href="#0">View<span class="hidden sm:inline"> -></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,107 +1,107 @@
|
||||
<template>
|
||||
<div class="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-gray-200">
|
||||
<header class="px-5 py-4 border-b border-gray-100">
|
||||
<h2 class="font-semibold text-gray-800">Income/Expenses</h2>
|
||||
<div class="col-span-full xl:col-span-6 bg-white dark:bg-slate-800 shadow-lg rounded-sm border border-slate-200 dark:border-slate-700">
|
||||
<header class="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 class="font-semibold text-slate-800 dark:text-slate-100">Income/Expenses</h2>
|
||||
</header>
|
||||
<div class="p-3">
|
||||
|
||||
<!-- Card content -->
|
||||
<!-- "Today" group -->
|
||||
<div>
|
||||
<header class="text-xs uppercase text-gray-400 bg-gray-50 rounded-sm font-semibold p-2">Today</header>
|
||||
<header class="text-xs uppercase text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Today</header>
|
||||
<ul class="my-1">
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-red-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
|
||||
<path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-gray-100 text-sm py-2">
|
||||
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Qonto</a> billing</div>
|
||||
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Qonto</a> billing</div>
|
||||
<div class="shrink-0 self-start ml-2">
|
||||
<span class="font-medium text-gray-800">-$49.88</span>
|
||||
<span class="font-medium text-slate-800 dark:text-slate-100">-$49.88</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
|
||||
<path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-gray-100 text-sm py-2">
|
||||
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Cruip.com</a> Market Ltd 70 Wilson St London</div>
|
||||
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Cruip.com</a> Market Ltd 70 Wilson St London</div>
|
||||
<div class="shrink-0 self-start ml-2">
|
||||
<span class="font-medium text-green-500">+249.88</span>
|
||||
<span class="font-medium text-emerald-500">+249.88</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
|
||||
<path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-gray-100 text-sm py-2">
|
||||
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Notion Labs Inc</a></div>
|
||||
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Notion Labs Inc</a></div>
|
||||
<div class="shrink-0 self-start ml-2">
|
||||
<span class="font-medium text-green-500">+99.99</span>
|
||||
<span class="font-medium text-emerald-500">+99.99</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
|
||||
<path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-gray-100 text-sm py-2">
|
||||
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Market Cap Ltd</a></div>
|
||||
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">Market Cap Ltd</a></div>
|
||||
<div class="shrink-0 self-start ml-2">
|
||||
<span class="font-medium text-green-500">+1,200.88</span>
|
||||
<span class="font-medium text-emerald-500">+1,200.88</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-gray-200 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-gray-400" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-slate-200 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-slate-400" viewBox="0 0 36 36">
|
||||
<path d="M21.477 22.89l-8.368-8.367a6 6 0 008.367 8.367zm1.414-1.413a6 6 0 00-8.367-8.367l8.367 8.367zM18 26a8 8 0 110-16 8 8 0 010 16z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center border-b border-gray-100 text-sm py-2">
|
||||
<div class="grow flex items-center border-b border-slate-100 dark:border-slate-700 text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
|
||||
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
|
||||
<div class="shrink-0 self-start ml-2">
|
||||
<span class="font-medium text-gray-800 line-through">+$99.99</span>
|
||||
<span class="font-medium text-slate-800 dark:text-slate-100 line-through">+$99.99</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Item -->
|
||||
<li class="flex px-2">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-red-50" viewBox="0 0 36 36">
|
||||
<div class="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
|
||||
<svg class="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
|
||||
<path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grow flex items-center text-sm py-2">
|
||||
<div class="grow flex justify-between">
|
||||
<div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
|
||||
<div class="self-center"><a class="font-medium text-slate-800 hover:text-slate-900 dark:text-slate-100 dark:hover:text-white" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
|
||||
<div class="shrink-0 self-start ml-2">
|
||||
<span class="font-medium text-gray-800">-$49.88</span>
|
||||
<span class="font-medium text-slate-800 dark:text-slate-100">-$49.88</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="relative bg-indigo-200 p-4 sm:p-6 rounded-sm overflow-hidden mb-8">
|
||||
<div class="relative bg-indigo-200 dark:bg-indigo-500 p-4 sm:p-6 rounded-sm overflow-hidden mb-8">
|
||||
|
||||
<!-- Background illustration -->
|
||||
<div class="absolute right-0 top-0 -mt-4 mr-16 pointer-events-none hidden xl:block" aria-hidden="true">
|
||||
@@ -45,8 +45,8 @@
|
||||
|
||||
<!-- Content -->
|
||||
<div class="relative">
|
||||
<h1 class="text-2xl md:text-3xl text-gray-800 font-bold mb-1">Good afternoon, Acme Inc. 👋</h1>
|
||||
<p>Here is what’s happening with your projects today:</p>
|
||||
<h1 class="text-2xl md:text-3xl text-slate-800 dark:text-slate-100 font-bold mb-1">Good afternoon, Acme Inc. 👋</h1>
|
||||
<p class="dark:text-indigo-200">Here is what’s happening with your projects today:</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user