Filters and badges

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

@@ -7,7 +7,9 @@ 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, CONTENT_TYPE_OPTIONS, ALL_CONTENT_STRUCTURES } from '../structureMapping';
+import { TYPE_LABELS, CONTENT_TYPE_OPTIONS, ALL_CONTENT_STRUCTURES } from '../structureMapping';
+import { getSectorBadgeColor, getStructureBadgeColor, getStructureLabel } from '../../utils/badgeColors';
+import type { Sector } from '../../store/sectorStore';
 
 export interface ColumnConfig {
   key: string;
@@ -54,7 +56,12 @@ export function createApprovedPageConfig(params: {
   setSiteStatusFilter: (value: string) => void;
   setCurrentPage: (page: number) => void;
   activeSector: { id: number; name: string } | null;
+  sectors?: Sector[];
   onRowClick?: (row: Content) => void;
+  statusOptions?: Array<{ value: string; label: string }>;
+  siteStatusOptions?: Array<{ value: string; label: string }>;
+  contentTypeOptions?: Array<{ value: string; label: string }>;
+  contentStructureOptions?: Array<{ value: string; label: string }>;
 }): ApprovedPageConfig {
   const showSectorColumn = !params.activeSector;
 
@@ -230,12 +237,12 @@ export function createApprovedPageConfig(params: {
       sortField: 'content_structure',
       width: '130px',
       render: (value: string) => {
-        const label = STRUCTURE_LABELS[value] || value || '-';
-        const properCase = label.split(/[_\s]+/).map(word => 
-          word.charAt(0).toUpperCase() + word.slice(1)
-        ).join(' ');
+        const properCase = getStructureLabel(value)
+          .split(/[_\s]+/)
+          .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(' ');
         return (
-          <Badge color="purple" size="xs" variant="soft">
+          <Badge color={getStructureBadgeColor(value)} size="xs" variant="soft">
             <span className="text-[11px] font-normal">{properCase}</span>
           </Badge>
         );
@@ -336,6 +343,23 @@ export function createApprovedPageConfig(params: {
     },
   ];
 
+  if (showSectorColumn) {
+    columns.splice(2, 0, {
+      key: 'sector_name',
+      label: 'Sector',
+      sortable: false,
+      width: '120px',
+      render: (value: string, row: Content) => {
+        const color = getSectorBadgeColor(row.sector_id, row.sector_name, params.sectors);
+        return (
+          <Badge color={color} size="xs" variant="soft">
+            <span className="text-[11px] font-normal">{row.sector_name || '-'}</span>
+          </Badge>
+        );
+      },
+    });
+  }
+
   const filters: FilterConfig[] = [
     {
       key: 'search',
@@ -347,7 +371,7 @@ export function createApprovedPageConfig(params: {
       key: 'status',
       label: 'Status',
       type: 'select',
-      options: [
+      options: params.statusOptions || [
         { value: '', label: 'All' },
         { value: 'draft', label: 'Draft' },
         { value: 'review', label: 'Review' },
@@ -359,7 +383,7 @@ export function createApprovedPageConfig(params: {
       key: 'site_status',
       label: 'Site Status',
       type: 'select',
-      options: [
+      options: params.siteStatusOptions || [
         { value: '', label: 'All' },
         { value: 'not_published', label: 'Not Published' },
         { value: 'scheduled', label: 'Scheduled' },
@@ -372,7 +396,7 @@ export function createApprovedPageConfig(params: {
       key: 'content_type',
       label: 'Type',
       type: 'select',
-      options: [
+      options: params.contentTypeOptions || [
         { value: '', label: 'All Types' },
         ...CONTENT_TYPE_OPTIONS,
       ],
@@ -381,7 +405,7 @@ export function createApprovedPageConfig(params: {
       key: 'content_structure',
       label: 'Structure',
       type: 'select',
-      options: [
+      options: params.contentStructureOptions || [
         { value: '', label: 'All Structures' },
         ...ALL_CONTENT_STRUCTURES,
       ],