Enhance dashboard components with theme integration and UI improvements

- Updated FarmAiAssistantChat, PlantPestDetection, SmartFertilizationRecommendation, and SmartIrrigationRecommendation components to utilize theme-based styling for better consistency and visual appeal.
- Refactored background gradients, box shadows, and hover effects to align with the primary color palette.
- Improved layout classes for better responsiveness and user experience across various dashboard sections.
- Added new button styles and loading indicators to enhance interactivity and feedback during user actions.

src/views/dashboards/farm/pestDetection/PlantPestDetection.tsx

@@ -9,6 +9,13 @@ import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
 import CircularProgress from '@mui/material/CircularProgress'
 import Collapse from '@mui/material/Collapse'
+import { useTheme } from '@mui/material/styles'
+import { alpha } from '@mui/material/styles'
+import classnames from 'classnames'
+
+// Util Imports
+import { commonLayoutClasses } from '@layouts/utils/layoutClasses'
+
 import UploadBox from './components/UploadBox'
 import ResultCard from './components/ResultCard'
 import type { UploadedFile } from './components/UploadBox'
@@ -16,6 +23,8 @@ import type { PestResult } from './components/ResultCard'
 
 export default function PlantPestDetection() {
   const t = useTranslations('pestDetection')
+  const theme = useTheme()
+  const primary = theme.palette.primary
   const [file, setFile] = useState<UploadedFile | null>(null)
   const [result, setResult] = useState<PestResult | null>(null)
   const [loading, setLoading] = useState(false)
@@ -58,19 +67,17 @@ export default function PlantPestDetection() {
 
   return (
     <Box
-      className="min-bs-screen pb-24"
-      sx={{
-        minHeight: '100vh',
-      }}
+      className={classnames(commonLayoutClasses.contentHeightFixed, 'flex flex-col is-full overflow-hidden rounded')}
+      sx={{ minHeight: '100%' }}
     >
-      <Box className="max-w-2xl mx-auto px-4 py-6 sm:py-8">
+      <Box className="is-full py-6 sm:py-8 flex flex-col">
         {/* Header */}
         <Box className="mb-8">
           <Typography
             variant="h4"
             className="font-bold tracking-tight"
             sx={{
-              background: 'linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%)',
+              background: `linear-gradient(135deg, ${primary.main} 0%, ${primary.dark} 50%, ${primary.dark} 100%)`,
               backgroundClip: 'text',
               WebkitBackgroundClip: 'text',
               color: 'transparent',
@@ -90,9 +97,9 @@ export default function PlantPestDetection() {
           className="mb-6 overflow-hidden transition-all duration-300 hover:shadow-lg"
           sx={{
             borderRadius: '24px',
-            background: 'linear-gradient(145deg, #ffffff 0%, #f8fcf8 100%)',
-            boxShadow: '0 4px 24px rgba(34, 197, 94, 0.08), 0 1px 3px rgba(0,0,0,0.04)',
-            border: '1px solid rgba(34, 197, 94, 0.12)',
+            background: `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(primary.main, 0.04)} 100%)`,
+            boxShadow: `0 4px 24px ${alpha(primary.main, 0.08)}, ${theme.shadows[1]}`,
+            border: `1px solid ${alpha(primary.main, 0.12)}`,
           }}
         >
           <CardContent className="p-5 sm:p-6">
@@ -111,18 +118,18 @@ export default function PlantPestDetection() {
                 onClick={handleAnalyze}
                 startIcon={
                   loading ? (
-                    <CircularProgress size={20} color="inherit" sx={{ color: 'white' }} />
+                    <CircularProgress size={20} color="inherit" />
                   ) : (
                     <i className="tabler-scan text-xl" />
                   )
                 }
                 className="rounded-xl py-3 px-8 font-semibold shadow-md transition-all duration-300 hover:shadow-lg hover:scale-[1.02] active:scale-[0.98]"
                 sx={{
-                  background: 'linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%)',
-                  boxShadow: '0 4px 20px rgba(34, 197, 94, 0.35)',
+                  background: `linear-gradient(135deg, ${primary.main} 0%, ${primary.dark} 50%, ${primary.dark} 100%)`,
+                  boxShadow: `0 4px 20px ${alpha(primary.main, 0.35)}`,
                   '&:hover': {
-                    background: 'linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%)',
-                    boxShadow: '0 6px 24px rgba(34, 197, 94, 0.45)',
+                    background: `linear-gradient(135deg, ${primary.light} 0%, ${primary.main} 50%, ${primary.dark} 100%)`,
+                    boxShadow: `0 6px 24px ${alpha(primary.main, 0.45)}`,
                   },
                   '&:disabled': {
                     background: 'action.disabledBackground',
@@ -162,13 +169,13 @@ export default function PlantPestDetection() {
             className="mb-6"
             sx={{
               borderRadius: '24px',
-              background: 'linear-gradient(160deg, #ffffff 0%, #f0fdf4 100%)',
-              boxShadow: '0 8px 32px rgba(34, 197, 94, 0.1)',
-              border: '1px solid rgba(34, 197, 94, 0.12)',
+              background: `linear-gradient(160deg, ${theme.palette.background.paper} 0%, ${alpha(primary.main, 0.06)} 100%)`,
+              boxShadow: `0 8px 32px ${alpha(primary.main, 0.1)}`,
+              border: `1px solid ${alpha(primary.main, 0.12)}`,
             }}
           >
             <CardContent className="p-12 flex flex-col items-center gap-4">
-              <CircularProgress size={48} sx={{ color: '#22c55e' }} />
+              <CircularProgress size={48} sx={{ color: 'primary.main' }} />
               <Typography variant="body2" color="text.secondary">
                 {t('analyzing')}
               </Typography>