udpdates

frontend/src/components/common/PageHeader.tsx

@@ -3,6 +3,7 @@
  * Used across all Planner and Writer module pages
  * Includes: Page title, last updated, site/sector info, and selectors
  */
+import React, { ReactNode } from 'react';
 import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
 import SiteAndSectorSelector from './SiteAndSectorSelector';
@@ -13,6 +14,10 @@ interface PageHeaderProps {
   showRefresh?: boolean;
   onRefresh?: () => void;
   className?: string;
+  badge?: {
+    icon: ReactNode;
+    color: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'indigo';
+  };
 }
 
 export default function PageHeader({
@@ -21,14 +26,33 @@ export default function PageHeader({
   showRefresh = false,
   onRefresh,
   className = "",
+  badge,
 }: PageHeaderProps) {
   const { activeSite } = useSiteStore();
   const { activeSector } = useSectorStore();
 
+  const badgeColors = {
+    blue: 'bg-blue-600 dark:bg-blue-500',
+    green: 'bg-green-600 dark:bg-green-500',
+    purple: 'bg-purple-600 dark:bg-purple-500',
+    orange: 'bg-orange-600 dark:bg-orange-500',
+    red: 'bg-red-600 dark:bg-red-500',
+    indigo: 'bg-indigo-600 dark:bg-indigo-500',
+  };
+
   return (
     <div className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 ${className}`}>
       <div className="flex-1">
-        <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">{title}</h2>
+        <div className="flex items-center gap-3">
+          {badge && (
+            <div className={`flex items-center justify-center w-10 h-10 rounded-xl ${badgeColors[badge.color]} flex-shrink-0`}>
+              {badge.icon && typeof badge.icon === 'object' && 'type' in badge.icon
+                ? React.cloneElement(badge.icon as React.ReactElement, { className: 'text-white size-5' })
+                : badge.icon}
+            </div>
+          )}
+          <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">{title}</h2>
+        </div>
         <div className="flex items-center gap-3 mt-1">
           {lastUpdated && (
             <>