fix(erp): enable erp pages and menu items

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+export interface BulkAction {
+    label: string;
+    icon?: React.ReactNode;
+    onClick: () => void;
+    variant?: 'danger' | 'primary' | 'secondary';
+}
+
+interface BulkActionBarProps {
+    selectedCount: number;
+    actions: BulkAction[];
+    onClearSelection: () => void;
+}
+
+/**
+ * BulkActionBar Component
+ * A floating bar that appears when items are selected in a list/table.
+ * Supports light/dark modes and custom actions.
+ */
+export default function BulkActionBar({ selectedCount, actions, onClearSelection }: BulkActionBarProps) {
+    if (selectedCount === 0) return null;
+
+    return (
+        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 animate-in slide-in-from-bottom-10 duration-300">
+            <div className="bg-white dark:bg-black border border-zinc-200 dark:border-zinc-900 text-zinc-900 dark:text-white rounded-[32px] px-8 py-4 shadow-[0_20px_50px_rgba(0,0,0,0.1)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.5)] flex items-center gap-8 backdrop-blur-xl">
+                <div className="flex items-center gap-3 pr-8 border-r border-zinc-200 dark:border-zinc-900">
+                    <span className="flex items-center justify-center w-8 h-8 bg-brand-500 rounded-full text-xs font-black text-white">
+                        {selectedCount}
+                    </span>
+                    <span className="text-sm font-bold text-zinc-500 dark:text-zinc-400">Selecionados</span>
+                </div>
+
+                <div className="flex items-center gap-4">
+                    {actions.map((action, idx) => (
+                        <button
+                            key={idx}
+                            onClick={action.onClick}
+                            className={`flex items-center gap-2 px-4 py-2 rounded-xl transition-all text-sm font-bold 
+                                ${action.variant === 'danger'
+                                    ? 'text-rose-500 hover:bg-rose-500/10'
+                                    : action.variant === 'primary'
+                                        ? 'text-brand-600 dark:text-brand-400 hover:bg-brand-500/10'
+                                        : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800'
+                                }`}
+                        >
+                            {action.icon}
+                            {action.label}
+                        </button>
+                    ))}
+                </div>
+
+                <button
+                    onClick={onClearSelection}
+                    className="ml-4 p-2 text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors"
+                    title="Limpar seleção"
+                >
+                    <XMarkIcon className="w-5 h-5" />
+                </button>
+            </div>
+        </div>
+    );
+}