salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
Desktop
2025-11-12 20:44:59 +05:00
parent b07d0f518a
commit 9692a5ed2e
3 changed files with 223 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/pages/Planner/Dashboard.tsx
View File

@@ -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>

13
frontend/src/pages/Writer/Dashboard.tsx
View File

@@ -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>
)}

5
frontend/vite.config.ts
View File

@@ -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',