fixes

frontend/src/pages/Planner/Dashboard.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useMemo, lazy, Suspense } from "react";
 import { Link, useNavigate } from "react-router";
 import PageMeta from "../../components/common/PageMeta";
 import ComponentCard from "../../components/common/ComponentCard";
 import { ProgressBar } from "../../components/ui/progress";
-import Chart from "react-apexcharts";
 import { ApexOptions } from "apexcharts";
+
+const Chart = lazy(() => import("react-apexcharts").then((mod) => ({ default: mod.default })));
 import { 
   ListIcon, 
   GroupIcon, 
@@ -655,12 +656,14 @@ export default function PlannerDashboard() {
           {/* Top 5 Clusters */}
           <ComponentCard title="Top 5 Clusters by Volume" desc="Highest volume keyword clusters" className="lg:col-span-2">
             {topClustersChart ? (
+              <Suspense fallback={<div className="flex items-center justify-center h-[300px]"><div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-500 border-t-transparent"></div></div>}>
                 <Chart 
                   options={topClustersChart.options} 
                   series={topClustersChart.series} 
                   type="bar" 
                   height={300} 
                 />
+              </Suspense>
             ) : (
               <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                 No clusters data available
@@ -673,24 +676,28 @@ export default function PlannerDashboard() {
           {/* Keywords by Status */}
           {keywordsStatusChart && (
             <ComponentCard title="Keywords by Status" desc="Distribution of keywords across statuses">
+              <Suspense fallback={<div className="flex items-center justify-center h-[300px]"><div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-500 border-t-transparent"></div></div>}>
                 <Chart 
                   options={keywordsStatusChart.options} 
                   series={keywordsStatusChart.series} 
                   type="donut" 
                   height={300} 
                 />
+              </Suspense>
             </ComponentCard>
           )}
 
           {/* Ideas by Status */}
           {ideasStatusChart && (
             <ComponentCard title="Ideas by Status" desc="Content ideas workflow status">
+              <Suspense fallback={<div className="flex items-center justify-center h-[300px]"><div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-500 border-t-transparent"></div></div>}>
                 <Chart 
                   options={ideasStatusChart.options} 
                   series={ideasStatusChart.series} 
                   type="bar" 
                   height={300} 
                 />
+              </Suspense>
             </ComponentCard>
           )}
       </div>

frontend/src/pages/Writer/Dashboard.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useMemo, lazy, Suspense } from "react";
 import { Link, useNavigate } from "react-router";
 import PageMeta from "../../components/common/PageMeta";
 import ComponentCard from "../../components/common/ComponentCard";
 import { ProgressBar } from "../../components/ui/progress";
-import Chart from "react-apexcharts";
 import { ApexOptions } from "apexcharts";
+
+const Chart = lazy(() => import("react-apexcharts").then((mod) => ({ default: mod.default })));
 import { 
   FileTextIcon,
   BoxIcon,
@@ -748,12 +749,14 @@ export default function WriterDashboard() {
           {/* Content Status Chart */}
           {contentStatusChart && (
             <ComponentCard title="Content by Status" desc="Distribution across workflow stages" className="lg:col-span-2">
+              <Suspense fallback={<div className="flex items-center justify-center h-[300px]"><div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-500 border-t-transparent"></div></div>}>
                 <Chart 
                   options={contentStatusChart.options} 
                   series={contentStatusChart.series} 
                   type="bar" 
                   height={300} 
                 />
+              </Suspense>
             </ComponentCard>
           )}
         </div>
@@ -762,24 +765,28 @@ export default function WriterDashboard() {
           {/* Tasks by Status */}
           {tasksStatusChart && (
             <ComponentCard title="Tasks by Status" desc="Task distribution across statuses">
+              <Suspense fallback={<div className="flex items-center justify-center h-[300px]"><div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-500 border-t-transparent"></div></div>}>
                 <Chart 
                   options={tasksStatusChart.options} 
                   series={tasksStatusChart.series} 
                   type="donut" 
                   height={300} 
                 />
+              </Suspense>
             </ComponentCard>
           )}
 
           {/* Images by Type */}
           {imagesTypeChart ? (
             <ComponentCard title="Images by Type" desc="Image generation breakdown">
+              <Suspense fallback={<div className="flex items-center justify-center h-[300px]"><div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-500 border-t-transparent"></div></div>}>
                 <Chart 
                   options={imagesTypeChart.options} 
                   series={imagesTypeChart.series} 
                   type="bar" 
                   height={300} 
                 />
+              </Suspense>
             </ComponentCard>
           ) : (
             <ComponentCard title="Images Overview" desc="Image generation status">
@@ -804,12 +811,14 @@ export default function WriterDashboard() {
         {/* Productivity Chart */}
         {productivityChart && (
           <ComponentCard title="Content Creation Trend" desc="Content created this week and month">
+            <Suspense fallback={<div className="flex items-center justify-center h-[200px]"><div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-500 border-t-transparent"></div></div>}>
               <Chart 
                 options={productivityChart.options} 
                 series={productivityChart.series} 
                 type="area" 
                 height={200} 
               />
+            </Suspense>
           </ComponentCard>
         )}
 

frontend/vite.config.ts

@@ -25,6 +25,9 @@ export default defineConfig(({ mode }) => {
         'clsx',
         'tailwind-merge',
         'zustand',
+        // Include apexcharts for proper module resolution
+        'apexcharts',
+        'react-apexcharts',
       ],
       // Exclude heavy dependencies that are only used in specific pages
       // They will be lazy-loaded when needed
@@ -35,8 +38,6 @@ export default defineConfig(({ mode }) => {
         '@fullcalendar/list',
         '@fullcalendar/react',
         '@fullcalendar/timegrid',
-        'apexcharts',
-        'react-apexcharts',
         '@react-jvectormap/core',
         '@react-jvectormap/world',
         'react-dnd',