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

61
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">
<Chart
options={contentStatusChart.options}
series={contentStatusChart.series}
type="bar"
height={300}
/>
<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">
<Chart
options={tasksStatusChart.options}
series={tasksStatusChart.series}
type="donut"
height={300}
/>
<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">
<Chart
options={imagesTypeChart.options}
series={imagesTypeChart.series}
type="bar"
height={300}
/>
<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">
<Chart
options={productivityChart.options}
series={productivityChart.series}
type="area"
height={200}
/>
<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>
)}