From dce913815e485e83121d126b0c65329023294e76 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 29 Jan 2026 10:23:58 +0700
Subject: [PATCH] chore: adjust styling in Dashboard related components

---
 .../pages/dashboard/DashboardProduction.tsx     | 13 +++++--------
 .../pages/dashboard/chart/DashboardStats.tsx    | 17 ++++++++---------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index c3cfaf52..7339e831 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -441,10 +441,6 @@ const DashboardProduction = () => {
                   value={formik.values.startDate}
                   errorMessage={formik.errors.startDate}
                   onChange={formik.handleChange}
-                  className={{
-                    inputWrapper:
-                      'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
-                  }}
                   isError={
                     Boolean(formik.errors.startDate) &&
                     Boolean(formik.touched.startDate)
@@ -568,7 +564,6 @@ const DashboardProduction = () => {
                     Boolean(formik.touched.location)
                   }
                   className={{
-                    label: 'mb-[8px] text-xs font-semibold',
                     select: 'rounded-[8px] text-sm border-[#18181B]/10',
                   }}
                 />
@@ -742,9 +737,11 @@ const DashboardProduction = () => {
               </div>
             )}
 
-            <div className='w-full p-4'>
-              <AlertErrorList formErrorList={formErrorList} onClose={close} />
-            </div>
+            {formErrorList.length > 0 && (
+              <div className='w-full p-4'>
+                <AlertErrorList formErrorList={formErrorList} onClose={close} />
+              </div>
+            )}
 
             {/* Action Buttons */}
             <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-[#F9FAFB]'>
diff --git a/src/components/pages/dashboard/chart/DashboardStats.tsx b/src/components/pages/dashboard/chart/DashboardStats.tsx
index 13167ba3..f17e18b0 100644
--- a/src/components/pages/dashboard/chart/DashboardStats.tsx
+++ b/src/components/pages/dashboard/chart/DashboardStats.tsx
@@ -130,8 +130,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
           <Card
             key={config.key}
             className={{
-              wrapper:
-                'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/10',
+              wrapper: 'w-full rounded-xl border border-base-content/10',
               body: 'p-0',
               wrapperContent:
                 'h-full flex flex-col items-between justify-between',
@@ -139,12 +138,12 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
             }}
             variant='bordered'
             footer={
-              <div className='flex flex-row justify-between px-[16px] pb-[16px]'>
-                <div className='text-[#18181B]/50 font-semibold text-[12px]'>
+              <div className='flex flex-row justify-between px-4 pb-4'>
+                <div className='text-base-content/50 font-semibold text-xs'>
                   From last month
                 </div>
                 <div
-                  className={`${trend.color} font-semibold flex flex-row items-center gap-[8px] text-[12px]`}
+                  className={`${trend.color} font-semibold flex flex-row items-center gap-2 text-xs`}
                 >
                   <Icon icon={trend.icon} width={16} height={16} />
                   {trend.value}%
@@ -156,15 +155,15 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
               <Alert
                 variant='soft'
                 color={config.alertColor}
-                className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
+                className={`rounded-lg p-3 bg-[${config.alertColor}]/12 flex items-center justify-center`}
               >
                 <Icon icon={config.icon} width={24} height={24} />
               </Alert>
-              <div>
-                <h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
+              <div className='space-y-1'>
+                <h3 className='text-base-content/50 font-semibold text-sm'>
                   {cardData.label}
                 </h3>
-                <p className='text-[20px] font-semibold'>
+                <p className='text-xl font-semibold'>
                   {formatValue(cardData.value, config.prefix, config.suffix)}
                 </p>
               </div>