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

fix(FE): adding skeleton state data on null or unfiltered

Browse Source
This commit is contained in:
randy-ar
2026-01-30 11:02:18 +07:00
parent e980320d00
commit ba1d462a0a
10 changed files with 222 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/dashboard/DashboardProduction.tsx
-1
View File
@@ -463,7 +463,6 @@ const DashboardProduction = () => {
Boolean(formik.errors.endDate) &&
Boolean(formik.touched.endDate)
}
isRange
/>
</div>
</div>
src/components/pages/dashboard/chart/DashboardLineChart.tsx
+7 -12
View File
@@ -1,6 +1,7 @@
import Button from '@/components/Button';
import Card from '@/components/Card';
import Dropdown from '@/components/Dropdown';
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
import { OptionType } from '@/components/input/SelectInput';
import Menu from '@/components/menu/Menu';
import MenuItem from '@/components/menu/MenuItem';
@@ -721,24 +722,18 @@ const DashboardLineChart = ({
return (
<div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
{/* Chart icon */}
<div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
<div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
<DataStateSkeleton
icon={
<Icon
icon='heroicons:chart-bar'
className='text-white'
width={20}
height={20}
/>
</div>
</div>
{/* Empty state text */}
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
Data Not Yet Available
</h3>
<p className='text-base-content/50 text-xs text-center max-w-xs'>
Please change your filters to get the data.
</p>
}
title='Data Not Yet Available'
description='Please change your filters to get the data.'
/>
</div>
);
}
src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
+19 -33
View File
@@ -1,5 +1,6 @@
import { Icon } from '@iconify/react';
import { DashboardMeta } from '@/types/api/dashboard/dashboard';
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
return (
@@ -24,50 +25,35 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
{!meta?.filters && (
<>
{/* Filter icon */}
<div className='mb-2'>
<div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
<div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary 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-base-content/50 font-semibold text-sm mb-1'>
No Filters Selected
</h3>
<p className='text-base-content/50 text-xs text-center max-w-xs'>
Please choose filters to narrow down your results and make
your search easier.
</p>
<DataStateSkeleton
icon={
<Icon
icon='heroicons:funnel'
className='text-white'
width={20}
height={20}
/>
}
title='No Filters Selected'
description='Please choose filters to narrow down your results and make your search easier.'
/>
</>
)}
{meta?.filters && (
<>
{/* Filter icon */}
<div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
<div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
<DataStateSkeleton
icon={
<Icon
icon='heroicons:chart-bar'
className='text-white'
width={20}
height={20}
/>
</div>
</div>
{/* Empty state text */}
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
Data Not Yet Available
</h3>
<p className='text-base-content/50 text-xs text-center max-w-xs'>
Please change your filters to get the data.
</p>
}
title='Data Not Yet Available'
description='Please change your filters to get the data.'
/>
</>
)}
</div>