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

header footer metrics update and credits by site fixes

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-12 05:28:36 +00:00
parent 95d8ade942
commit 368601f68c
12 changed files with 339 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/pages/Writer/Approved.tsx
View File

@@ -22,6 +22,7 @@ import { FileIcon, CheckCircleIcon, BoltIcon } from '../../icons';
import { RocketLaunchIcon } from '@heroicons/react/24/outline';
import { createApprovedPageConfig } from '../../config/pages/approved.config';
import { useSectorStore } from '../../store/sectorStore';
import { useSiteStore } from '../../store/siteStore';
import { usePageSizeStore } from '../../store/pageSizeStore';
import PageHeader from '../../components/common/PageHeader';
import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
@@ -30,6 +31,7 @@ export default function Approved() {
const toast = useToast();
const navigate = useNavigate();
const { activeSector } = useSectorStore();
const { activeSite } = useSiteStore();
const { pageSize } = usePageSizeStore();
// Data state
@@ -37,8 +39,11 @@ export default function Approved() {
const [loading, setLoading] = useState(true);
// Total counts for footer widget and header metrics (not page-filtered)
const [totalOnSite, setTotalOnSite] = useState(0);
const [totalPendingPublish, setTotalPendingPublish] = useState(0);
const [totalContent, setTotalContent] = useState(0);
const [totalDraft, setTotalDraft] = useState(0);
const [totalReview, setTotalReview] = useState(0);
const [totalApproved, setTotalApproved] = useState(0);
const [totalPublished, setTotalPublished] = useState(0);
const [totalImagesCount, setTotalImagesCount] = useState(0);
// Filter state - default to approved status
@@ -59,27 +64,26 @@ export default function Approved() {
// Load total metrics for footer widget and header metrics (not affected by pagination)
const loadTotalMetrics = useCallback(async () => {
try {
// Fetch all approved+published content to calculate totals
const data = await fetchContent({
status__in: 'approved,published', // Both approved and published content
page_size: 1000, // Fetch enough to count
});
const allContent = data.results || [];
// Count by external_id presence
const onSite = allContent.filter(c => c.external_id).length;
const pending = allContent.filter(c => !c.external_id).length;
setTotalOnSite(onSite);
setTotalPendingPublish(pending);
// Get actual total images count
const imagesRes = await fetchImages({ page_size: 1 });
// Fetch counts in parallel for performance
const [allRes, draftRes, reviewRes, approvedRes, publishedRes, imagesRes] = await Promise.all([
fetchContent({ page_size: 1, site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'draft', site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'review', site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'approved', site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'published', site_id: activeSite?.id }),
fetchImages({ page_size: 1, site_id: activeSite?.id }),
]);
setTotalContent(allRes.count || 0);
setTotalDraft(draftRes.count || 0);
setTotalReview(reviewRes.count || 0);
setTotalApproved(approvedRes.count || 0);
setTotalPublished(publishedRes.count || 0);
setTotalImagesCount(imagesRes.count || 0);
} catch (error) {
console.error('Error loading total metrics:', error);
}
}, []);
}, [activeSite]);
// Load total metrics on mount
useEffect(() => {
@@ -342,16 +346,23 @@ export default function Approved() {
let value: number;
switch (metric.label) {
case 'Content':
value = totalContent || 0;
break;
case 'Draft':
value = totalDraft;
break;
case 'In Review':
value = totalReview;
break;
case 'Approved':
value = totalCount || 0;
value = totalApproved;
break;
case 'On Site':
// Use totalOnSite from loadTotalMetrics()
value = totalOnSite;
case 'Published':
value = totalPublished;
break;
case 'Pending':
// Use totalPendingPublish from loadTotalMetrics()
value = totalPendingPublish;
case 'Total Images':
value = totalImagesCount;
break;
default:
value = metric.calculate({ content, totalCount });
@@ -361,9 +372,10 @@ export default function Approved() {
label: metric.label,
value,
accentColor: metric.accentColor,
tooltip: (metric as any).tooltip,
};
});
}, [pageConfig?.headerMetrics, content, totalCount, totalOnSite, totalPendingPublish]);
}, [pageConfig?.headerMetrics, content, totalCount, totalContent, totalDraft, totalReview, totalApproved, totalPublished, totalImagesCount]);
return (
<>

32
frontend/src/pages/Writer/Content.tsx
View File

@@ -39,8 +39,10 @@ export default function Content() {
const [loading, setLoading] = useState(true);
// Total counts for footer widget and header metrics (not page-filtered)
const [totalContent, setTotalContent] = useState(0);
const [totalDraft, setTotalDraft] = useState(0);
const [totalReview, setTotalReview] = useState(0);
const [totalApproved, setTotalApproved] = useState(0);
const [totalPublished, setTotalPublished] = useState(0);
const [totalImagesCount, setTotalImagesCount] = useState(0);
@@ -68,7 +70,7 @@ export default function Content() {
const loadTotalMetrics = useCallback(async () => {
try {
// Batch all API calls in parallel for better performance
const [allRes, draftRes, reviewRes, publishedRes, imagesRes] = await Promise.all([
const [allRes, draftRes, reviewRes, approvedRes, publishedRes, imagesRes] = await Promise.all([
// Get all content (site-wide)
fetchContent({
page_size: 1,
@@ -86,19 +88,26 @@ export default function Content() {
site_id: activeSite?.id,
status: 'review',
}),
// Get content with status='approved' or 'published' (ready for publishing or on site)
// Get content with status='approved'
fetchContent({
page_size: 1,
site_id: activeSite?.id,
status__in: 'approved,published',
status: 'approved',
}),
// Get content with status='published'
fetchContent({
page_size: 1,
site_id: activeSite?.id,
status: 'published',
}),
// Get actual total images count
fetchImages({ page_size: 1 }),
fetchImages({ page_size: 1, site_id: activeSite?.id }),
]);
setTotalCount(allRes.count || 0);
setTotalContent(allRes.count || 0);
setTotalDraft(draftRes.count || 0);
setTotalReview(reviewRes.count || 0);
setTotalApproved(approvedRes.count || 0);
setTotalPublished(publishedRes.count || 0);
setTotalImagesCount(imagesRes.count || 0);
} catch (error) {
@@ -226,20 +235,23 @@ export default function Content() {
switch (metric.label) {
case 'Content':
value = totalCount || 0;
value = totalContent || 0;
break;
case 'Draft':
// Use totalDraft from loadTotalMetrics()
value = totalDraft;
break;
case 'In Review':
// Use totalReview from loadTotalMetrics()
value = totalReview;
break;
case 'Approved':
value = totalApproved;
break;
case 'Published':
// Use totalPublished from loadTotalMetrics()
value = totalPublished;
break;
case 'Total Images':
value = totalImagesCount;
break;
default:
value = metric.calculate({ content, totalCount });
}
@@ -251,7 +263,7 @@ export default function Content() {
tooltip: (metric as any).tooltip,
};
});
}, [pageConfig?.headerMetrics, content, totalCount, totalDraft, totalReview, totalPublished]);
}, [pageConfig?.headerMetrics, content, totalContent, totalDraft, totalReview, totalApproved, totalPublished, totalImagesCount]);
const handleRowAction = useCallback(async (action: string, row: ContentType) => {
if (action === 'view_on_wordpress') {

93
frontend/src/pages/Writer/Images.tsx
View File

@@ -9,6 +9,7 @@ import TablePageTemplate from '../../templates/TablePageTemplate';
import {
fetchContentImages,
fetchImages,
fetchContent,
ContentImagesGroup,
ContentImagesResponse,
fetchImageGenerationSettings,
@@ -28,19 +29,28 @@ import SingleRecordStatusUpdateModal from '../../components/common/SingleRecordS
import PageHeader from '../../components/common/PageHeader';
import { Modal } from '../../components/ui/modal';
import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
import { useSiteStore } from '../../store/siteStore';
export default function Images() {
const toast = useToast();
const { activeSite } = useSiteStore();
// Data state
const [images, setImages] = useState<ContentImagesGroup[]>([]);
const [loading, setLoading] = useState(true);
// Total counts for footer widget and header metrics (not page-filtered)
const [totalContent, setTotalContent] = useState(0);
const [totalDraft, setTotalDraft] = useState(0);
const [totalReview, setTotalReview] = useState(0);
const [totalApproved, setTotalApproved] = useState(0);
const [totalPublished, setTotalPublished] = useState(0);
const [totalImagesCount, setTotalImagesCount] = useState(0);
// Footer widget specific counts (image-based)
const [totalComplete, setTotalComplete] = useState(0);
const [totalPartial, setTotalPartial] = useState(0);
const [totalPending, setTotalPending] = useState(0);
const [totalImagesCount, setTotalImagesCount] = useState(0); // Actual images count
// Filter state
const [searchTerm, setSearchTerm] = useState('');
@@ -79,40 +89,26 @@ export default function Images() {
// Load total metrics for footer widget and header metrics (not affected by pagination)
const loadTotalMetrics = useCallback(async () => {
try {
// Fetch content-grouped images for status counts
const data: ContentImagesResponse = await fetchContentImages({});
const allImages = data.results || [];
// Count by overall_status (content-level status)
let complete = 0;
let partial = 0;
let pending = 0;
allImages.forEach(img => {
switch (img.overall_status) {
case 'complete':
complete++;
break;
case 'partial':
partial++;
break;
case 'pending':
pending++;
break;
}
});
setTotalComplete(complete);
setTotalPartial(partial);
setTotalPending(pending);
// Fetch ACTUAL total images count from the images endpoint
const imagesData = await fetchImages({ page_size: 1 });
setTotalImagesCount(imagesData.count || 0);
// Fetch counts in parallel for performance
const [allRes, draftRes, reviewRes, approvedRes, publishedRes, imagesRes] = await Promise.all([
fetchContent({ page_size: 1, site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'draft', site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'review', site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'approved', site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'published', site_id: activeSite?.id }),
fetchImages({ page_size: 1, site_id: activeSite?.id }),
]);
setTotalContent(allRes.count || 0);
setTotalDraft(draftRes.count || 0);
setTotalReview(reviewRes.count || 0);
setTotalApproved(approvedRes.count || 0);
setTotalPublished(publishedRes.count || 0);
setTotalImagesCount(imagesRes.count || 0);
} catch (error) {
console.error('Error loading total metrics:', error);
}
}, []);
}, [activeSite]);
// Load total metrics on mount
useEffect(() => {
@@ -502,19 +498,22 @@ export default function Images() {
switch (metric.label) {
case 'Content':
value = totalCount || 0;
value = totalContent || 0;
break;
case 'Complete':
// Use totalComplete from loadTotalMetrics()
value = totalComplete;
case 'Draft':
value = totalDraft;
break;
case 'Partial':
// Use totalPartial from loadTotalMetrics()
value = totalPartial;
case 'In Review':
value = totalReview;
break;
case 'Pending':
// Use totalPending from loadTotalMetrics()
value = totalPending;
case 'Approved':
value = totalApproved;
break;
case 'Published':
value = totalPublished;
break;
case 'Total Images':
value = totalImagesCount;
break;
default:
value = metric.calculate({ images, totalCount });
@@ -528,16 +527,8 @@ export default function Images() {
};
});
// Add total images count metric
baseMetrics.push({
label: 'Total Images',
value: totalImagesCount,
accentColor: 'purple' as const,
tooltip: 'Total number of images across all content',
});
return baseMetrics;
}, [pageConfig?.headerMetrics, images, totalCount, totalComplete, totalPartial, totalPending, totalImagesCount]);
}, [pageConfig?.headerMetrics, images, totalCount, totalContent, totalDraft, totalReview, totalApproved, totalPublished, totalImagesCount]);
return (
<>

71
frontend/src/pages/Writer/Review.tsx
View File

@@ -19,6 +19,7 @@ import { CheckCircleIcon } from '../../icons';
import { ClipboardDocumentCheckIcon } from '@heroicons/react/24/outline';
import { createReviewPageConfig } from '../../config/pages/review.config';
import { useSectorStore } from '../../store/sectorStore';
import { useSiteStore } from '../../store/siteStore';
import { usePageSizeStore } from '../../store/pageSizeStore';
import PageHeader from '../../components/common/PageHeader';
import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
@@ -27,17 +28,20 @@ export default function Review() {
const toast = useToast();
const navigate = useNavigate();
const { activeSector } = useSectorStore();
const { activeSite } = useSiteStore();
const { pageSize } = usePageSizeStore();
// Data state
const [content, setContent] = useState<Content[]>([]);
const [loading, setLoading] = useState(true);
const [totalImagesCount, setTotalImagesCount] = useState(0);
// Total metrics for footer widget (not page-filtered)
const [totalDrafts, setTotalDrafts] = useState(0);
// Total metrics for footer widget and header metrics (not page-filtered)
const [totalContent, setTotalContent] = useState(0);
const [totalDraft, setTotalDraft] = useState(0);
const [totalReview, setTotalReview] = useState(0);
const [totalApproved, setTotalApproved] = useState(0);
const [totalTasks, setTotalTasks] = useState(0);
const [totalPublished, setTotalPublished] = useState(0);
const [totalImagesCount, setTotalImagesCount] = useState(0);
// Filter state - default to review status
const [searchTerm, setSearchTerm] = useState('');
@@ -94,21 +98,25 @@ export default function Review() {
const loadTotalMetrics = useCallback(async () => {
try {
// Fetch counts in parallel for performance
const [imagesRes, draftsRes, approvedRes, tasksRes] = await Promise.all([
fetchImages({ page_size: 1 }),
fetchContent({ page_size: 1, status: 'draft' }),
fetchContent({ page_size: 1, status: 'approved' }),
fetchAPI<{ count: number }>('/writer/tasks/?page_size=1'),
const [allRes, draftRes, reviewRes, approvedRes, publishedRes, imagesRes] = await Promise.all([
fetchContent({ page_size: 1, site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'draft', site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'review', site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'approved', site_id: activeSite?.id }),
fetchContent({ page_size: 1, status: 'published', site_id: activeSite?.id }),
fetchImages({ page_size: 1, site_id: activeSite?.id }),
]);
setTotalImagesCount(imagesRes.count || 0);
setTotalDrafts(draftsRes.count || 0);
setTotalContent(allRes.count || 0);
setTotalDraft(draftRes.count || 0);
setTotalReview(reviewRes.count || 0);
setTotalApproved(approvedRes.count || 0);
setTotalTasks(tasksRes.count || 0);
setTotalPublished(publishedRes.count || 0);
setTotalImagesCount(imagesRes.count || 0);
} catch (error) {
console.error('Error loading metrics:', error);
}
}, []);
}, [activeSite]);
useEffect(() => {
loadTotalMetrics();
@@ -161,12 +169,37 @@ export default function Review() {
// Header metrics (calculated from loaded data)
const headerMetrics = useMemo(() =>
pageConfig.headerMetrics.map(metric => ({
...metric,
value: metric.calculate({ content, totalCount }),
tooltip: (metric as any).tooltip,
})),
[pageConfig.headerMetrics, content, totalCount]
pageConfig.headerMetrics.map(metric => {
let value: number;
switch (metric.label) {
case 'Content':
value = totalContent || 0;
break;
case 'Draft':
value = totalDraft;
break;
case 'In Review':
value = totalReview;
break;
case 'Approved':
value = totalApproved;
break;
case 'Published':
value = totalPublished;
break;
case 'Total Images':
value = totalImagesCount;
break;
default:
value = metric.calculate({ content, totalCount });
}
return {
...metric,
value,
tooltip: (metric as any).tooltip,
};
}),
[pageConfig.headerMetrics, content, totalCount, totalContent, totalDraft, totalReview, totalApproved, totalPublished, totalImagesCount]
);
// Export handler

82
frontend/src/pages/Writer/Tasks.tsx
View File

@@ -9,6 +9,7 @@ import TablePageTemplate from '../../templates/TablePageTemplate';
import {
fetchTasks,
fetchImages,
fetchContent,
createTask,
updateTask,
deleteTask,
@@ -47,11 +48,17 @@ export default function Tasks() {
const [loading, setLoading] = useState(true);
// Total counts for footer widget and header metrics (not page-filtered)
const [totalContent, setTotalContent] = useState(0);
const [totalDraft, setTotalDraft] = useState(0);
const [totalReview, setTotalReview] = useState(0);
const [totalApproved, setTotalApproved] = useState(0);
const [totalPublished, setTotalPublished] = useState(0);
const [totalImagesCount, setTotalImagesCount] = useState(0);
// Footer widget specific counts (task-based)
const [totalQueued, setTotalQueued] = useState(0);
const [totalProcessing, setTotalProcessing] = useState(0);
const [totalCompleted, setTotalCompleted] = useState(0);
const [totalFailed, setTotalFailed] = useState(0);
const [totalImagesCount, setTotalImagesCount] = useState(0);
// Filter state
const [searchTerm, setSearchTerm] = useState('');
@@ -111,45 +118,45 @@ export default function Tasks() {
const loadTotalMetrics = useCallback(async () => {
try {
// Batch all API calls in parallel for better performance
const [allRes, queuedRes, processingRes, completedRes, failedRes, imagesRes] = await Promise.all([
// Get all tasks (site-wide)
fetchTasks({
const [allRes, draftRes, reviewRes, approvedRes, publishedRes, imagesRes] = await Promise.all([
// Get all content (site-wide)
fetchContent({
page_size: 1,
site_id: activeSite?.id,
}),
// Get tasks with status='queued'
fetchTasks({
// Get content with status='draft'
fetchContent({
page_size: 1,
site_id: activeSite?.id,
status: 'queued',
status: 'draft',
}),
// Get tasks with status='in_progress'
fetchTasks({
// Get content with status='review'
fetchContent({
page_size: 1,
site_id: activeSite?.id,
status: 'in_progress',
status: 'review',
}),
// Get tasks with status='completed'
fetchTasks({
// Get content with status='approved'
fetchContent({
page_size: 1,
site_id: activeSite?.id,
status: 'completed',
status: 'approved',
}),
// Get tasks with status='failed'
fetchTasks({
// Get content with status='published'
fetchContent({
page_size: 1,
site_id: activeSite?.id,
status: 'failed',
status: 'published',
}),
// Get actual total images count
fetchImages({ page_size: 1 }),
fetchImages({ page_size: 1, site_id: activeSite?.id }),
]);
setTotalCount(allRes.count || 0);
setTotalQueued(queuedRes.count || 0);
setTotalProcessing(processingRes.count || 0);
setTotalCompleted(completedRes.count || 0);
setTotalFailed(failedRes.count || 0);
setTotalContent(allRes.count || 0);
setTotalDraft(draftRes.count || 0);
setTotalReview(reviewRes.count || 0);
setTotalApproved(approvedRes.count || 0);
setTotalPublished(publishedRes.count || 0);
setTotalImagesCount(imagesRes.count || 0);
} catch (error) {
console.error('Error loading total metrics:', error);
@@ -384,24 +391,23 @@ export default function Tasks() {
let value: number;
switch (metric.label) {
case 'Tasks':
value = totalCount || 0;
case 'Content':
value = totalContent || 0;
break;
case 'In Queue':
// Use totalQueued from loadTotalMetrics()
value = totalQueued;
case 'Draft':
value = totalDraft;
break;
case 'Processing':
// Use totalProcessing from loadTotalMetrics()
value = totalProcessing;
case 'In Review':
value = totalReview;
break;
case 'Completed':
// Use totalCompleted from loadTotalMetrics()
value = totalCompleted;
case 'Approved':
value = totalApproved;
break;
case 'Failed':
// Use totalFailed from loadTotalMetrics()
value = totalFailed;
case 'Published':
value = totalPublished;
break;
case 'Total Images':
value = totalImagesCount;
break;
default:
value = metric.calculate({ tasks, totalCount });
@@ -414,7 +420,7 @@ export default function Tasks() {
tooltip: (metric as any).tooltip,
};
});
}, [pageConfig?.headerMetrics, tasks, totalCount, totalQueued, totalProcessing, totalCompleted, totalFailed]);
}, [pageConfig?.headerMetrics, tasks, totalContent, totalDraft, totalReview, totalApproved, totalPublished, totalImagesCount]);
const resetForm = useCallback(() => {
setFormData({