stadardize site slector sector selctor

frontend/src/components/common/PageHeader.tsx

@@ -0,0 +1,80 @@
+/**
+ * Standardized Page Header Component
+ * Used across all Planner and Writer module pages
+ * Includes: Page title, last updated, site/sector info, and selectors
+ */
+import { useSiteStore } from '../../store/siteStore';
+import { useSectorStore } from '../../store/sectorStore';
+import SiteAndSectorSelector from './SiteAndSectorSelector';
+
+interface PageHeaderProps {
+  title: string;
+  lastUpdated?: Date;
+  showRefresh?: boolean;
+  onRefresh?: () => void;
+  className?: string;
+}
+
+export default function PageHeader({
+  title,
+  lastUpdated,
+  showRefresh = false,
+  onRefresh,
+  className = "",
+}: PageHeaderProps) {
+  const { activeSite } = useSiteStore();
+  const { activeSector } = useSectorStore();
+
+  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 mt-1">
+          {lastUpdated && (
+            <>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Last updated: {lastUpdated.toLocaleTimeString()}
+              </p>
+            </>
+          )}
+          {activeSite && (
+            <>
+              {lastUpdated && <span className="text-sm text-gray-400 dark:text-gray-600">•</span>}
+              <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Site: <span className="text-brand-600 dark:text-brand-400">{activeSite.name}</span>
+              </p>
+            </>
+          )}
+          {activeSector && (
+            <>
+              <span className="text-sm text-gray-400 dark:text-gray-600">•</span>
+              <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Sector: <span className="text-brand-600 dark:text-brand-400">{activeSector.name}</span>
+              </p>
+            </>
+          )}
+          {!activeSector && activeSite && (
+            <>
+              <span className="text-sm text-gray-400 dark:text-gray-600">•</span>
+              <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Sector: <span className="text-brand-600 dark:text-brand-400">All Sectors</span>
+              </p>
+            </>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center gap-3">
+        <SiteAndSectorSelector />
+        {showRefresh && onRefresh && (
+          <button
+            onClick={onRefresh}
+            className="px-4 py-2 text-sm font-medium text-brand-500 hover:text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50 dark:border-brand-800 dark:hover:bg-brand-500/10 transition-colors"
+          >
+            Refresh
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+