gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-24 15:25:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(FE): refactor UI Dashboard pixel perfect figma

Browse Source
This commit is contained in:
randy-ar
2026-01-28 17:54:55 +07:00
parent b19340536a
commit 34f93f8dcc
13 changed files with 716 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/dashboard/chart/DashboardStats.tsx
+35 -22
View File
@@ -48,7 +48,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
icon: isPositive
? 'heroicons:arrow-trending-up'
: 'heroicons:arrow-trending-down',
color: isPositive ? 'text-success' : 'text-error',
color: isPositive ? 'text-[#008000]' : 'text-[#FF3A3A]',
value: Math.abs(percent),
};
};
@@ -60,14 +60,16 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
{prefix}
{formatNumber(value)}
{suffix && (
<span className='text-sm font-normal text-neutral-500'>{suffix}</span>
<span className='text-[14px] font-normal text-[#18181B]/50'>
{suffix}
</span>
)}
</>
);
};
return (
<div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-6'>
<div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-[12px]'>
{CARD_CONFIG.map((config) => {
// Find matching data from API
const cardData = data.find((item) => item.label === config.key);
@@ -78,35 +80,42 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
<Card
key={config.key}
className={{
wrapper: 'w-full rounded-lg',
wrapper:
'w-full rounded-[12px] border-[1px] border-[#18181B]/10',
body: 'p-0',
wrapperContent:
'h-full flex flex-col items-between justify-between',
footer: '!mt-0',
}}
variant='bordered'
footer={
<div className='flex flex-row justify-between px-4 pb-4'>
<div className='text-neutral-400 font-semibold text-sm'>
<div className='flex flex-row justify-between px-[16px] pb-[16px] max-h-[48px]'>
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
From last month
</div>
<div className='text-neutral-400 font-semibold text-sm'>
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
Filter Required
</div>
</div>
}
>
<div className='flex flex-row items-center gap-4 px-4 pt-4'>
<Alert variant='soft' className='rounded-lg p-3 bg-neutral-100'>
<div className='flex flex-row items-center gap-4 px-4 py-4'>
<Alert
variant='soft'
className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
>
<Icon
icon={config.icon}
width={32}
height={32}
className='text-neutral-400'
width={24}
height={24}
className='text-[#18181B]/50'
/>
</Alert>
<div>
<h3 className='text-neutral-400 font-semibold text-sm'>
<h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
{config.key}
</h3>
<p className='text-2xl font-semibold text-neutral-400'>
<p className='text-[20px] font-semibold text-[#18181B]/50'>
********
</p>
</div>
@@ -121,17 +130,21 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
<Card
key={config.key}
className={{
wrapper: 'w-full rounded-lg',
wrapper:
'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/10',
body: 'p-0',
wrapperContent:
'h-full flex flex-col items-between justify-between',
footer: '!mt-0',
}}
variant='bordered'
footer={
<div className='flex flex-row justify-between px-4 pb-4'>
<div className='text-neutral-500 font-semibold text-sm'>
<div className='flex flex-row justify-between px-[16px] pb-[16px]'>
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
From last month
</div>
<div
className={`${trend.color} font-semibold flex flex-row items-center gap-1 text-sm`}
className={`${trend.color} font-semibold flex flex-row items-center gap-[8px] text-[12px]`}
>
<Icon icon={trend.icon} width={16} height={16} />
{trend.value}%
@@ -143,15 +156,15 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
<Alert
variant='soft'
color={config.alertColor}
className='rounded-lg p-3'
className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
>
<Icon icon={config.icon} width={32} height={32} />
<Icon icon={config.icon} width={24} height={24} />
</Alert>
<div>
<h3 className='text-neutral-500 font-semibold text-sm'>
<h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
{cardData.label}
</h3>
<p className='text-2xl font-semibold'>
<p className='text-[20px] font-semibold'>
{formatValue(cardData.value, config.prefix, config.suffix)}
</p>
</div>