---
// Port of preview/pages/widgets.html (layout: default).
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import StatCard from '@shared/components/cards/StatCard.astro';
import ProjectProgress from '@shared/components/cards/ProjectProgress.astro';
import UserCard from '@shared/components/cards/UserCard.astro';
import UserCardBig from '@shared/components/cards/UserCardBig.astro';
import UserCardBg from '@shared/components/cards/UserCardBg.astro';
import Subscribe from '@shared/components/cards/Subscribe.astro';
import SmallStats from '@shared/components/cards/SmallStats.astro';
import Code from '@shared/components/cards/Code.astro';
import ProjectSummary from '@shared/components/cards/ProjectSummary.astro';
import ProjectKanban from '@shared/components/cards/ProjectKanban.astro';
import UserInfo from '@shared/components/cards/UserInfo.astro';
import Configuration from '@shared/components/cards/Configuration.astro';
---

<DefaultLayout title="Widgets" pageHeader="Widgets" pageMenu="extra.widgets" pageLibs={['apexcharts']}>
	<div class="row row-cards">
		<div class="col-12 col-md-6 col-xxl-3 mb-4 mb-xxl-0">
			<StatCard title="Earned" value="$2,847" icon="credit-card" />
		</div>
		<div class="col-12 col-md-6 col-xxl-3 mb-4 mb-xxl-0">
			<StatCard title="Hours logged" value="42.7 hrs" icon="clock" />
		</div>
		<div class="col-12 col-md-6 col-xxl-3 mb-4 mb-md-0">
			<StatCard title="Avg. time" value="3:28 hrs" icon="slideshow" />
		</div>
		<div class="col-12 col-md-6 col-xxl-3">
			<StatCard title="Weekly growth" value="18.4%" icon="discount" />
		</div>

		<div class="col-lg-6">
			<ProjectProgress />
		</div>
		<div class="col-lg-6">
			<ProjectProgress projectId={2} progress={76} daysAgo={7} />
		</div>

		<div class="col-md-6 col-xl-3"><UserCard personId={5} /></div>
		<div class="col-md-6 col-xl-3"><UserCard personId={6} /></div>
		<div class="col-md-6 col-xl-3"><UserCard personId={7} right /></div>
		<div class="col-md-6 col-xl-3"><UserCard personId={8} right /></div>

		<div class="col-md-6 col-xl-3"><UserCardBig personId={15} /></div>
		<div class="col-md-6 col-xl-3"><UserCardBig personId={16} /></div>
		<div class="col-md-6 col-xl-3"><UserCardBig personId={17} /></div>
		<div class="col-md-6 col-xl-3"><UserCardBig personId={18} /></div>

		<div class="col-md-6 col-xl-3"><UserCardBg personId={25} /></div>
		<div class="col-md-6 col-xl-3"><UserCardBg personId={26} /></div>
		<div class="col-md-6 col-xl-3"><UserCardBg personId={27} blurred /></div>
		<div class="col-md-6 col-xl-3"><UserCardBg personId={28} blurred /></div>


		<div class="col-md-6">
			<Subscribe personId={0} />
		</div>
		<div class="col-md-6">
			<Subscribe personId={2} />
		</div>

		<div class="col-md-6 col-xl-3">
			<SmallStats id="currency" icon="currency-dollar" color="primary" title="132 Sales" description="12 waiting payments" />
		</div>
		<div class="col-md-6 col-xl-3">
			<SmallStats id="shopping-cart" icon="shopping-cart" color="green" title="78 Orders" description="32 shipped" />
		</div>
		<div class="col-md-6 col-xl-3">
			<SmallStats id="user" icon="user" color="red" title="1352 Members" description="163 registered today" />
		</div>
		<div class="col-md-6 col-xl-3">
			<SmallStats id="message" icon="message" color="yellow" title="132 Comments" description="16 waitings" />
		</div>

		<div class="col-md-6 col-xl-3">
			<SmallStats id="sales" chartPosition="left" chartType="donut" chartData="56" color="primary" title="132 Sales" description="12 waiting payments" />
		</div>
		<div class="col-md-6 col-xl-3">
			<SmallStats id="orders" chartPosition="left" chartType="donut" chartData="56" color="green" title="78 Orders" description="32 shipped" />
		</div>
		<div class="col-md-6 col-xl-3">
			<SmallStats id="members" chartPosition="left" chartType="donut" chartData="56" color="red" title="1352 Members" description="163 registered today" />
		</div>
		<div class="col-md-6 col-xl-3">
			<SmallStats id="comments" chartPosition="left" chartType="donut" chartData="56" color="yellow" title="132 Comments" description="16 waitings" />
		</div>

		<div class="col-md-6 col-xl-3">
			<SmallStats id="sales" icon="arrow-up" color="green" lt title="$5,256.99" description="Revenue last 30 days" descriptionValue="+4%" />
		</div>
		<div class="col-md-6 col-xl-3">
			<SmallStats id="orders" icon="arrow-down" color="red" lt title="342" description="Sales last 30 days" descriptionValue="-4.3%" descriptionValueColor="red" />
		</div>
		<div class="col-md-6 col-xl-3">
			<SmallStats id="members" icon="arrow-up" color="green" lt title="132" description="Customers last 30 days" descriptionValue="+6.8%" />
		</div>
		<div class="col-md-6 col-xl-3">
			<SmallStats id="comments" icon="arrow-down" color="red" lt title="78" description="Members registered today" descriptionValue="-2%" descriptionValueColor="red" />
		</div>

		<div class="col-md-6 col-lg-4">
			<div class="row row-cards">
				<div class="col-12"><SmallStats chartType="line" chartData="20,0,40,30,40,30,80,60" /></div>
				<div class="col-12"><SmallStats chartType="bar" chartData="20,40,30,10,40,60,80,70" color="red" icon="heart" /></div>
				<div class="col-12"><SmallStats chartType="bar" chartData="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand-github" /></div>
				<div class="col-12"><SmallStats chartType="donut" chartData="12" personId={10} /></div>
				<div class="col-12"><SmallStats chartType="donut" chartData="12" personId={11} /></div>
				<div class="col-12"><SmallStats chartType="donut" chartData="56" personId={1} /></div>
				<div class="col-12"><SmallStats color="green" personId={4} /></div>
				<div class="col-12"><SmallStats smallIcon="trending-down" color="red" personId={3} /></div>
				<div class="col-12"><Code /></div>
			</div>
		</div>
		<div class="col-md-6 col-lg-4">
			<div class="row row-cards">
				<div class="col-12"><ProjectSummary stageColor="red" /></div>
			</div>
		</div>
		<div class="col-md-6 col-lg-4">
			<div class="row row-cards">
				<div class="col-12"><ProjectKanban title="Tabler UI" badge="v1.0" value={30} percentageColor="red" limit={4} offset={0} due="72 days" /></div>
				<div class="col-12"><ProjectKanban title="Tabler React" value={80} offset={20} /></div>
				<div class="col-12"><UserInfo /></div>
				<div class="col-12"><Configuration /></div>
			</div>
		</div>
	</div>
</DefaultLayout>