chore: initial project setup with backend, frontend, CI/CD, and documentation

Add complete NexaFabric project structure including:
- FastAPI backend with SQLAlchemy models, JWT auth, RBAC, audit logging, and provider interfaces
- React + TypeScript frontend with Vite, Tailwind CSS, TanStack Query, and Zustand
- Docker Compose configuration for PostgreSQL, Redis, API, worker, frontend, and nginx
- GitHub Actions and GitLab CI workflows for testing, linting, building, and security scanning
- Environment

frontend/src/pages/FirewallPreview.tsx

@@ -0,0 +1,33 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Play } from "lucide-react";
+
+import { api, Policy } from "../api/client";
+import { PageHeader } from "../components/PageHeader";
+
+export function FirewallPreview() {
+  const policies = useQuery({ queryKey: ["policies"], queryFn: () => api<Policy[]>("/policies") });
+  const preview = useMutation({
+    mutationFn: (policyId: string) => api<Record<string, unknown>>(`/firewall/preview/${policyId}`, { method: "POST" }),
+  });
+  const firstPolicy = policies.data?.[0];
+
+  return (
+    <>
+      <PageHeader title="Firewall Preview" subtitle="Compile policies into provider-specific rules before any apply operation." />
+      <div className="rounded-md border border-border bg-panel p-4">
+        <button
+          className="inline-flex h-10 items-center gap-2 rounded-md bg-accent px-4 text-sm text-white disabled:opacity-50"
+          disabled={!firstPolicy}
+          onClick={() => firstPolicy && preview.mutate(firstPolicy.id)}
+        >
+          <Play size={18} />
+          Generate Preview
+        </button>
+        <pre className="mt-4 max-h-[520px] overflow-auto rounded-md border border-border bg-canvas p-4 text-xs">
+          {preview.data ? JSON.stringify(preview.data, null, 2) : "No preview generated yet."}
+        </pre>
+      </div>
+    </>
+  );
+}
+