JSON WORKS HERE TAG

frontend/src/pages/Firewall.tsx

@@ -1,11 +1,62 @@
+// src/pages/Firewall.tsx
+import { Alert, Col, Row, Spin } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import { fetchRuleset } from '../api/apiClient';
 import RuleBuilder from '../components/FirewallRuleBuilder';
 import RulesView from '../components/FirewallRulesetViewer';
+import { TableOut } from '../types/firewall';
+
+const EMPTY_TABLES: TableOut[] = [];
 
 export const Firewall: React.FC = () => {
-  return (
+  const [tables, setTables] = useState<TableOut[]>(EMPTY_TABLES);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetchRuleset();
+      if (!res || res.ruleset == null || typeof res.ruleset === 'string') {
+        setTables(EMPTY_TABLES);
+      } else {
+        setTables(res.ruleset.tables ?? EMPTY_TABLES);
+      }
+    } catch (err: any) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setTables(EMPTY_TABLES);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // fetch once on mount
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  // refresh() can be passed down to children to trigger a re-fetch
+  const refreshRules = useCallback(async () => {
+    await load();
+  }, [load]);
+
+  return loading ? (
+    <Spin tip="Loading firewall rules..." />
+  ) : (
     <div className="firewall-page">
-      <RulesView />
-      <RuleBuilder />
+      <Row gutter={16}>
+        <Col xs={24}>
+          {error && <Alert type="error" message="Could not load ruleset" description={String(error)} showIcon />}
+        </Col>
+        <Col xs={24}>
+          <RulesView tables={tables} error={error} refreshRules={refreshRules} />
+        </Col>
+
+        <Col xs={24} style={{ marginTop: 16 }}>
+          <RuleBuilder tables={tables} refreshRules={refreshRules} />
+        </Col>
+      </Row>
     </div>
   );
 };