mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 15:25:46 +00:00
fix(FE): refactor UI Dashboard pixel perfect figma
This commit is contained in:
randy-ar
@@ -3,94 +3,104 @@ import { DashboardMeta } from '@/types/api/dashboard/dashboard';
|
||||
|
||||
const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
|
||||
return (
|
||||
<div className='w-full bg-white rounded-lg shadow-sm border border-gray-200 p-6 relative'>
|
||||
<div className='w-full bg-white rounded-[12px] border border-[#18181B]/10 p-[16px] relative'>
|
||||
{/* Header with title skeleton */}
|
||||
<div className='text-lg font-semibold'>
|
||||
<div className='text-[16px] font-semibold'>
|
||||
Performance{' '}
|
||||
<Icon
|
||||
icon='heroicons:information-circle'
|
||||
width={20}
|
||||
height={20}
|
||||
className='inline text-neutral-500'
|
||||
className='inline text-[#18181B]/50'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Chart area with axes skeleton */}
|
||||
<div className='relative mt-6'>
|
||||
{/* Main chart container */}
|
||||
<div className='flex gap-4'>
|
||||
{/* Y-axis skeleton (left side) */}
|
||||
<div className='flex flex-col justify-between py-4 space-y-4'>
|
||||
{[1, 2, 3, 4, 5, 6].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className='h-4 w-12 bg-gray-100 rounded animate-pulse'
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Chart content area */}
|
||||
<div className='flex-1 relative'>
|
||||
{/* Empty state centered in chart area */}
|
||||
<div className='absolute inset-0 flex flex-col items-center justify-center pb-12'>
|
||||
{!meta?.filters && (
|
||||
<>
|
||||
{/* Filter icon */}
|
||||
<div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
|
||||
<Icon
|
||||
icon='heroicons:funnel'
|
||||
className='text-white'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<div className='relative mt-6 '>
|
||||
{/* Chart content area */}
|
||||
<div className='flex-1 relative'>
|
||||
{/* Empty state centered in chart area */}
|
||||
<div className='absolute inset-0 flex flex-col items-center justify-center pb-10'>
|
||||
{!meta?.filters && (
|
||||
<>
|
||||
{/* Filter icon */}
|
||||
<div className='mb-[9px]'>
|
||||
<div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
|
||||
<div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
|
||||
<Icon
|
||||
icon='heroicons:funnel'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Empty state text */}
|
||||
<h3 className='text-gray-900 font-semibold text-base mb-2'>
|
||||
No Filters Selected
|
||||
</h3>
|
||||
<p className='text-gray-500 text-sm text-center max-w-xs'>
|
||||
Please choose filters to narrow down your results and make
|
||||
your search easier.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{meta?.filters && (
|
||||
<>
|
||||
{/* Filter icon */}
|
||||
<div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
|
||||
{/* Empty state text */}
|
||||
<h3 className='text-[#18181B]/50 font-semibold text-[14px] mb-[4px]'>
|
||||
No Filters Selected
|
||||
</h3>
|
||||
<p className='text-[#18181B]/50 text-[12px] text-center max-w-xs'>
|
||||
Please choose filters to narrow down your results and make
|
||||
your search easier.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{meta?.filters && (
|
||||
<>
|
||||
{/* Filter icon */}
|
||||
<div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-4'>
|
||||
<div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
className='text-white'
|
||||
width={24}
|
||||
height={24}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Empty state text */}
|
||||
<h3 className='text-gray-900 font-semibold text-base mb-2'>
|
||||
Data Not Yet Available
|
||||
</h3>
|
||||
<p className='text-gray-500 text-sm text-center max-w-xs'>
|
||||
Please change your filters to get the data.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{/* Empty state text */}
|
||||
<h3 className='text-gray-900 font-semibold text-base mb-2'>
|
||||
Data Not Yet Available
|
||||
</h3>
|
||||
<p className='text-gray-500 text-sm text-center max-w-xs'>
|
||||
Please change your filters to get the data.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex flex-row w-full items-center gap-[16px]'>
|
||||
<div className='flex-1 h-full min-w-[16px]'>
|
||||
<div className='h-[114px] w-[16x] bg-[#18181B]/4 rounded-[4px]'></div>
|
||||
</div>
|
||||
|
||||
{/* Placeholder for chart height */}
|
||||
<div className='h-64'></div>
|
||||
|
||||
{/* X-axis skeleton (bottom) */}
|
||||
<div className='flex justify-between pt-4 border-t border-gray-100'>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
|
||||
<div className='w-full grid grid-cols-1 gap-y-[53px] mb-[8px]'>
|
||||
{[1, 2, 3, 4].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className='h-4 w-8 bg-gray-100 rounded animate-pulse'
|
||||
></div>
|
||||
className='flex items-center w-full h-[16px] gap-[16px]'
|
||||
>
|
||||
<div className='h-[16px] w-[24px] bg-[#18181B]/4 rounded-[4px]'></div>
|
||||
<div className='h-[1px] w-full bg-[#18181B]/4 rounded-[4px]'></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* X-axis skeleton (bottom) */}
|
||||
<div className='grid grid-cols-10 gap-[60px] mt-[16px] ps-[52px] sm:ps-[104px] overflow-x-hidden'>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className='h-[16px] w-[37px] bg-[#18181B]/4 rounded-[4px]'
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
<div className='flex justify-center pt-[16px] ps-[52px] sm:ps-[104px]'>
|
||||
<div className='h-[16px] w-[114px] bg-[#18181B]/4 rounded-[4px]'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user