fix(erp): enable erp pages and menu items

front-end-agency/components/ui/PageHeader.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ReactNode } from "react";
+import Button from "./Button";
+
+interface PageHeaderProps {
+    title: string;
+    description?: string;
+    primaryAction?: {
+        label: string;
+        onClick?: () => void;
+        icon?: ReactNode;
+        isLoading?: boolean;
+    };
+    secondaryAction?: {
+        label: string;
+        onClick?: () => void;
+        icon?: ReactNode;
+    };
+    children?: ReactNode;
+}
+
+export default function PageHeader({
+    title,
+    description,
+    primaryAction,
+    secondaryAction,
+    children
+}: PageHeaderProps) {
+    return (
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+            <div className="flex-1 min-w-0">
+                <h1 className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight truncate">
+                    {title}
+                </h1>
+                {description && (
+                    <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+                        {description}
+                    </p>
+                )}
+            </div>
+
+            <div className="flex items-center gap-3">
+                {secondaryAction && (
+                    <Button
+                        variant="outline"
+                        onClick={secondaryAction.onClick}
+                        className="bg-white dark:bg-zinc-900"
+                    >
+                        {secondaryAction.icon && (
+                            <span className="mr-2">{secondaryAction.icon}</span>
+                        )}
+                        {secondaryAction.label}
+                    </Button>
+                )}
+
+                {primaryAction && (
+                    <Button
+                        variant="primary"
+                        onClick={primaryAction.onClick}
+                        isLoading={primaryAction.isLoading}
+                        className="shadow-lg shadow-brand-500/20"
+                        style={{ background: 'var(--gradient)' }}
+                    >
+                        {primaryAction.icon && !primaryAction.isLoading && (
+                            <span className="mr-2">{primaryAction.icon}</span>
+                        )}
+                        {primaryAction.label}
+                    </Button>
+                )}
+
+                {children}
+            </div>
+        </div>
+    );
+}