ui improvements

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

@@ -1,6 +1,6 @@
 /**
- * Published Page Configuration
- * Centralized config for Published page table, filters, and actions
+ * Approved Page Configuration
+ * Centralized config for Approved page table, filters, and actions
  */
 
 import { Content } from '../../services/api';
@@ -39,23 +39,21 @@ export interface HeaderMetricConfig {
   calculate: (data: { content: Content[]; totalCount: number }) => number;
 }
 
-export interface PublishedPageConfig {
+export interface ApprovedPageConfig {
   columns: ColumnConfig[];
   filters: FilterConfig[];
   headerMetrics: HeaderMetricConfig[];
 }
 
-export function createPublishedPageConfig(params: {
+export function createApprovedPageConfig(params: {
   searchTerm: string;
   setSearchTerm: (value: string) => void;
-  statusFilter: string;
-  setStatusFilter: (value: string) => void;
   publishStatusFilter: string;
   setPublishStatusFilter: (value: string) => void;
   setCurrentPage: (page: number) => void;
   activeSector: { id: number; name: string } | null;
   onRowClick?: (row: Content) => void;
-}): PublishedPageConfig {
+}): ApprovedPageConfig {
   const showSectorColumn = !params.activeSector;
 
   const columns: ColumnConfig[] = [
@@ -92,35 +90,16 @@ export function createPublishedPageConfig(params: {
         </div>
       ),
     },
-    {
-      key: 'status',
-      label: 'Content Status',
-      sortable: true,
-      sortField: 'status',
-      width: '120px',
-      render: (value: string) => {
-        const statusConfig: Record<string, { color: 'amber' | 'success'; label: string }> = {
-          draft: { color: 'amber', label: 'Draft' },
-          published: { color: 'success', label: 'Published' },
-        };
-        const config = statusConfig[value] || { color: 'amber' as const, label: value };
-        return (
-          <Badge color={config.color} size="xs" variant="soft">
-            <span className="text-[11px] font-normal">{config.label}</span>
-          </Badge>
-        );
-      },
-    },
     {
       key: 'wordpress_status',
-      label: 'WP Status',
+      label: 'Site 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="gray" size="xs" variant="soft">
+            <Badge color="amber" size="xs" variant="soft">
               <span className="text-[11px] font-normal">Not Published</span>
             </Badge>
           );
@@ -279,25 +258,15 @@ export function createPublishedPageConfig(params: {
       key: 'search',
       label: 'Search',
       type: 'text',
-      placeholder: 'Search published content...',
-    },
-    {
-      key: 'status',
-      label: 'Content Status',
-      type: 'select',
-      options: [
-        { value: '', label: 'All Statuses' },
-        { value: 'draft', label: 'Draft' },
-        { value: 'published', label: 'Published' },
-      ],
+      placeholder: 'Search approved content...',
     },
     {
       key: 'publishStatus',
-      label: 'WordPress Status',
+      label: 'Site Status',
       type: 'select',
       options: [
         { value: '', label: 'All' },
-        { value: 'published', label: 'Published to WP' },
+        { value: 'published', label: 'Published to Site' },
         { value: 'not_published', label: 'Not Published' },
       ],
     },
@@ -305,38 +274,24 @@ export function createPublishedPageConfig(params: {
 
   const headerMetrics: HeaderMetricConfig[] = [
     {
-      label: 'Published',
+      label: 'Approved',
       accentColor: 'green',
       calculate: (data: { totalCount: number }) => data.totalCount,
-      tooltip: 'Total published content. Track your complete content library.',
+      tooltip: 'Total approved content ready for publishing.',
     },
     {
-      label: 'Synced',
+      label: 'On Site',
       accentColor: 'blue',
       calculate: (data: { content: Content[] }) => 
         data.content.filter(c => c.external_id).length,
-      tooltip: 'Content synced to WordPress. Successfully published on your website.',
+      tooltip: 'Content published to your website.',
     },
     {
-      label: 'This Month',
-      accentColor: 'purple',
-      calculate: (data: { content: Content[] }) => {
-        const now = new Date();
-        const thisMonth = now.getMonth();
-        const thisYear = now.getFullYear();
-        return data.content.filter(c => {
-          const date = new Date(c.created_at);
-          return date.getMonth() === thisMonth && date.getFullYear() === thisYear;
-        }).length;
-      },
-      tooltip: 'Content published this month. Track your monthly publishing velocity.',
-    },
-    {
-      label: 'Pending Sync',
+      label: 'Pending',
       accentColor: 'amber',
       calculate: (data: { content: Content[] }) => 
         data.content.filter(c => !c.external_id).length,
-      tooltip: 'Published content not yet synced to WordPress. Sync these to make them live.',
+      tooltip: 'Approved content not yet published to site.',
     },
   ];
 

frontend/src/config/pages/table-actions.config.tsx

@@ -295,6 +295,45 @@ const tableActionsConfigs: Record<string, TableActionsConfig> = {
       },
     ],
   },
+  '/writer/approved': {
+    rowActions: [
+      {
+        key: 'edit',
+        label: 'Edit Content',
+        icon: EditIcon,
+        variant: 'primary',
+      },
+      {
+        key: 'publish_wordpress',
+        label: 'Publish to Site',
+        icon: <ArrowRightIcon className="w-5 h-5" />,
+        variant: 'success',
+        shouldShow: (row: any) => !row.external_id, // Only show if not published
+      },
+      {
+        key: 'view_on_wordpress',
+        label: 'View on Site',
+        icon: <CheckCircleIcon className="w-5 h-5 text-blue-500" />,
+        variant: 'secondary',
+        shouldShow: (row: any) => !!row.external_id, // Only show if published
+      },
+    ],
+    bulkActions: [
+      {
+        key: 'bulk_publish_wordpress',
+        label: 'Publish to Site',
+        icon: <ArrowRightIcon className="w-4 h-4" />,
+        variant: 'success',
+      },
+      {
+        key: 'export',
+        label: 'Export Selected',
+        icon: <DownloadIcon className="w-4 h-4 text-blue-light-500" />,
+        variant: 'secondary',
+      },
+    ],
+  },
+  // Legacy route - keep for backwards compatibility
   '/writer/published': {
     rowActions: [
       {
@@ -352,19 +391,31 @@ const tableActionsConfigs: Record<string, TableActionsConfig> = {
   },
   '/writer/review': {
     rowActions: [
+      {
+        key: 'approve',
+        label: 'Approve',
+        icon: <CheckCircleIcon className="w-5 h-5" />,
+        variant: 'success',
+      },
       {
         key: 'publish_wordpress',
         label: 'Publish to WordPress',
         icon: <ArrowRightIcon className="w-5 h-5" />,
-        variant: 'success',
+        variant: 'primary',
       },
     ],
     bulkActions: [
+      {
+        key: 'bulk_approve',
+        label: 'Approve Selected',
+        icon: <CheckCircleIcon className="w-5 h-5" />,
+        variant: 'success',
+      },
       {
         key: 'bulk_publish_wordpress',
         label: 'Publish to WordPress',
         icon: <ArrowRightIcon className="w-5 h-5" />,
-        variant: 'success',
+        variant: 'primary',
       },
     ],
   },

frontend/src/config/routes.config.ts

@@ -37,7 +37,7 @@ export const routes: RouteConfig[] = [
       { path: '/writer', label: 'Dashboard', breadcrumb: 'Writer Dashboard' },
       { path: '/writer/tasks', label: 'Tasks', breadcrumb: 'Tasks' },
       { path: '/writer/content', label: 'Content', breadcrumb: 'Content' },
-      { path: '/writer/published', label: 'Published', breadcrumb: 'Published' },
+      { path: '/writer/approved', label: 'Approved', breadcrumb: 'Approved' },
     ],
   },
   {