fixing issues of integration with wordpress plugin

frontend/src/config/pages/approved.config.tsx

@@ -7,7 +7,7 @@ import { Content } from '../../services/api';
 import Badge from '../../components/ui/badge/Badge';
 import { formatRelativeDate } from '../../utils/date';
 import { CheckCircleIcon, ArrowRightIcon } from '../../icons';
-import { STRUCTURE_LABELS, TYPE_LABELS } from '../structureMapping';
+import { STRUCTURE_LABELS, TYPE_LABELS, CONTENT_TYPE_OPTIONS, ALL_CONTENT_STRUCTURES } from '../structureMapping';
 
 export interface ColumnConfig {
   key: string;
@@ -48,8 +48,10 @@ export interface ApprovedPageConfig {
 export function createApprovedPageConfig(params: {
   searchTerm: string;
   setSearchTerm: (value: string) => void;
-  publishStatusFilter: string;
-  setPublishStatusFilter: (value: string) => void;
+  statusFilter: string;
+  setStatusFilter: (value: string) => void;
+  siteStatusFilter: string;
+  setSiteStatusFilter: (value: string) => void;
   setCurrentPage: (page: number) => void;
   activeSector: { id: number; name: string } | null;
   onRowClick?: (row: Content) => void;
@@ -97,10 +99,12 @@ export function createApprovedPageConfig(params: {
       sortable: true,
       sortField: 'status',
       render: (value: string, row: Content) => {
-        // Map internal status to user-friendly labels
+        // Map internal status to standard labels
         const statusConfig: Record<string, { color: 'success' | 'blue' | 'amber' | 'gray'; label: string }> = {
-          'approved': { color: 'blue', label: 'Ready to Publish' },
-          'published': { color: 'success', label: row.external_id ? 'On Site' : 'Approved' },
+          'draft': { color: 'gray', label: 'Draft' },
+          'review': { color: 'amber', label: 'Review' },
+          'approved': { color: 'blue', label: 'Approved' },
+          'published': { color: 'success', label: 'Published' },
         };
         const config = statusConfig[value] || { color: 'gray' as const, label: value || '-' };
         
@@ -112,31 +116,21 @@ export function createApprovedPageConfig(params: {
       },
     },
     {
-      key: 'wordpress_status',
-      label: 'Site Content Status',
-      sortable: false,
-      width: '120px',
-      render: (_value: any, row: Content) => {
-        // Check if content has been published to WordPress
-        if (!row.external_id) {
-          return (
-            <Badge color="amber" size="xs" variant="soft">
-              <span className="text-[11px] font-normal">Not Published</span>
-            </Badge>
-          );
-        }
-        
-        // WordPress status badge - use external_status if available, otherwise show 'Published'
-        const wpStatus = (row as any).wordpress_status || 'publish';
+      key: 'site_status',
+      label: 'Site Status',
+      sortable: true,
+      sortField: 'site_status',
+      width: '130px',
+      render: (value: string, row: Content) => {
+        // Show actual site_status field
         const statusConfig: Record<string, { color: 'success' | 'amber' | 'blue' | 'gray' | 'red'; label: string }> = {
-          publish: { color: 'success', label: 'Published' },
-          draft: { color: 'gray', label: 'Draft' },
-          pending: { color: 'amber', label: 'Pending' },
-          future: { color: 'blue', label: 'Scheduled' },
-          private: { color: 'amber', label: 'Private' },
-          trash: { color: 'red', label: 'Trashed' },
+          'not_published': { color: 'gray', label: 'Not Published' },
+          'scheduled': { color: 'amber', label: 'Scheduled' },
+          'publishing': { color: 'amber', label: 'Publishing' },
+          'published': { color: 'success', label: 'Published' },
+          'failed': { color: 'red', label: 'Failed' },
         };
-        const config = statusConfig[wpStatus] || { color: 'success' as const, label: 'Published' };
+        const config = statusConfig[value] || { color: 'gray' as const, label: value || 'Not Published' };
         
         return (
           <Badge color={config.color} size="xs" variant="soft">
@@ -145,6 +139,28 @@ export function createApprovedPageConfig(params: {
         );
       },
     },
+    {
+      key: 'scheduled_publish_at',
+      label: 'Publish Date',
+      sortable: true,
+      sortField: 'scheduled_publish_at',
+      date: true,
+      width: '150px',
+      render: (value: string, row: Content) => {
+        if (!value) {
+          return <span className="text-gray-400 dark:text-gray-500 text-[11px]">Not scheduled</span>;
+        }
+        const publishDate = new Date(value);
+        const now = new Date();
+        const isFuture = publishDate > now;
+        
+        return (
+          <span className={isFuture ? "text-blue-600 dark:text-blue-400 font-medium" : "text-amber-600 dark:text-amber-400 font-medium"}>
+            {formatRelativeDate(value)}
+          </span>
+        );
+      },
+    },
 
     {
       key: 'content_type',
@@ -283,13 +299,46 @@ export function createApprovedPageConfig(params: {
       placeholder: 'Search approved content...',
     },
     {
-      key: 'publishStatus',
+      key: 'status',
+      label: 'Status',
+      type: 'select',
+      options: [
+        { value: '', label: 'All' },
+        { value: 'draft', label: 'Draft' },
+        { value: 'review', label: 'Review' },
+        { value: 'approved', label: 'Approved' },
+        { value: 'published', label: 'Published' },
+      ],
+    },
+    {
+      key: 'site_status',
       label: 'Site Status',
       type: 'select',
       options: [
         { value: '', label: 'All' },
-        { value: 'published', label: 'Published to Site' },
         { value: 'not_published', label: 'Not Published' },
+        { value: 'scheduled', label: 'Scheduled' },
+        { value: 'publishing', label: 'Publishing' },
+        { value: 'published', label: 'Published' },
+        { value: 'failed', label: 'Failed' },
+      ],
+    },
+    {
+      key: 'content_type',
+      label: 'Type',
+      type: 'select',
+      options: [
+        { value: '', label: 'All Types' },
+        ...CONTENT_TYPE_OPTIONS,
+      ],
+    },
+    {
+      key: 'content_structure',
+      label: 'Structure',
+      type: 'select',
+      options: [
+        { value: '', label: 'All Structures' },
+        ...ALL_CONTENT_STRUCTURES,
       ],
     },
   ];