React

frontend/src/pages/Access/Empty.tsx

@@ -0,0 +1,20 @@
+import type { Table as ReactTable } from "@tanstack/react-table";
+import { Button } from "src/components";
+import { intl } from "src/locale";
+
+interface Props {
+	tableInstance: ReactTable<any>;
+}
+export default function Empty({ tableInstance }: Props) {
+	return (
+		<tr>
+			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
+				<div className="text-center my-4">
+					<h2>{intl.formatMessage({ id: "access.empty" })}</h2>
+					<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
+					<Button className="btn-cyan my-3">{intl.formatMessage({ id: "access.add" })}</Button>
+				</div>
+			</td>
+		</tr>
+	);
+}

frontend/src/pages/Access/Table.tsx

@@ -0,0 +1,123 @@
+import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useMemo } from "react";
+import type { AccessList } from "src/api/backend";
+import { GravatarFormatter, ValueWithDateFormatter } from "src/components";
+import { TableLayout } from "src/components/Table/TableLayout";
+import { intl } from "src/locale";
+import Empty from "./Empty";
+
+interface Props {
+	data: AccessList[];
+	isFetching?: boolean;
+}
+export default function Table({ data, isFetching }: Props) {
+	const columnHelper = createColumnHelper<AccessList>();
+	const columns = useMemo(
+		() => [
+			columnHelper.accessor((row: any) => row.owner, {
+				id: "owner",
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <GravatarFormatter url={value.avatar} name={value.name} />;
+				},
+				meta: {
+					className: "w-1",
+				},
+			}),
+			columnHelper.accessor((row: any) => row, {
+				id: "name",
+				header: intl.formatMessage({ id: "column.name" }),
+				cell: (info: any) => {
+					const value = info.getValue();
+					// Bit of a hack to reuse the DomainsFormatter component
+					return <ValueWithDateFormatter value={value.name} createdOn={value.createdOn} />;
+				},
+			}),
+			columnHelper.accessor((row: any) => row.items, {
+				id: "items",
+				header: intl.formatMessage({ id: "column.authorization" }),
+				cell: (info: any) => {
+					const value = info.getValue();
+					return intl.formatMessage({ id: "access.auth-count" }, { count: value.length });
+				},
+			}),
+			columnHelper.accessor((row: any) => row.clients, {
+				id: "clients",
+				header: intl.formatMessage({ id: "column.access" }),
+				cell: (info: any) => {
+					const value = info.getValue();
+					return intl.formatMessage({ id: "access.access-count" }, { count: value.length });
+				},
+			}),
+			columnHelper.accessor((row: any) => row.satisfyAny, {
+				id: "satisfyAny",
+				header: intl.formatMessage({ id: "column.satisfy" }),
+				cell: (info: any) => {
+					const t = info.getValue() ? "access.satisfy-any" : "access.satisfy-all";
+					return intl.formatMessage({ id: t });
+				},
+			}),
+			columnHelper.accessor((row: any) => row.proxyHostCount, {
+				id: "proxyHostCount",
+				header: intl.formatMessage({ id: "proxy-hosts.title" }),
+				cell: (info: any) => {
+					return intl.formatMessage({ id: "proxy-hosts.count" }, { count: info.getValue() });
+				},
+			}),
+			columnHelper.display({
+				id: "id", // todo: not needed for a display?
+				cell: (info: any) => {
+					return (
+						<span className="dropdown">
+							<button
+								type="button"
+								className="btn dropdown-toggle btn-action btn-sm px-1"
+								data-bs-boundary="viewport"
+								data-bs-toggle="dropdown"
+							>
+								<IconDotsVertical />
+							</button>
+							<div className="dropdown-menu dropdown-menu-end">
+								<span className="dropdown-header">
+									{intl.formatMessage(
+										{
+											id: "access.actions-title",
+										},
+										{ id: info.row.original.id },
+									)}
+								</span>
+								<a className="dropdown-item" href="#">
+									<IconEdit size={16} />
+									{intl.formatMessage({ id: "action.edit" })}
+								</a>
+								<div className="dropdown-divider" />
+								<a className="dropdown-item" href="#">
+									<IconTrash size={16} />
+									{intl.formatMessage({ id: "action.delete" })}
+								</a>
+							</div>
+						</span>
+					);
+				},
+				meta: {
+					className: "text-end w-1",
+				},
+			}),
+		],
+		[columnHelper],
+	);
+
+	const tableInstance = useReactTable<AccessList>({
+		columns,
+		data,
+		getCoreRowModel: getCoreRowModel(),
+		rowCount: data.length,
+		meta: {
+			isFetching,
+		},
+		enableSortingRemoval: false,
+	});
+
+	return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
+}

frontend/src/pages/Access/TableWrapper.tsx

@@ -0,0 +1,52 @@
+import { IconSearch } from "@tabler/icons-react";
+import Alert from "react-bootstrap/Alert";
+import { Button, LoadingPage } from "src/components";
+import { useAccessLists } from "src/hooks";
+import { intl } from "src/locale";
+import Table from "./Table";
+
+export default function TableWrapper() {
+	const { isFetching, isLoading, isError, error, data } = useAccessLists(["owner", "items", "clients"]);
+
+	if (isLoading) {
+		return <LoadingPage />;
+	}
+
+	if (isError) {
+		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
+	}
+
+	return (
+		<div className="card mt-4">
+			<div className="card-status-top bg-cyan" />
+			<div className="card-table">
+				<div className="card-header">
+					<div className="row w-full">
+						<div className="col">
+							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "access.title" })}</h2>
+						</div>
+						<div className="col-md-auto col-sm-12">
+							<div className="ms-auto d-flex flex-wrap btn-list">
+								<div className="input-group input-group-flat w-auto">
+									<span className="input-group-text input-group-text-sm">
+										<IconSearch size={16} />
+									</span>
+									<input
+										id="advanced-table-search"
+										type="text"
+										className="form-control form-control-sm"
+										autoComplete="off"
+									/>
+								</div>
+								<Button size="sm" className="btn-cyan">
+									{intl.formatMessage({ id: "access.add" })}
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<Table data={data ?? []} isFetching={isFetching} />
+			</div>
+		</div>
+	);
+}

frontend/src/pages/Access/index.tsx

@@ -0,0 +1,12 @@
+import { HasPermission } from "src/components";
+import TableWrapper from "./TableWrapper";
+
+const Access = () => {
+	return (
+		<HasPermission permission="accessLists" type="view">
+			<TableWrapper />
+		</HasPermission>
+	);
+};
+
+export default Access;

frontend/src/pages/AuditLog/AuditTable.tsx

@@ -0,0 +1,128 @@
+import { IconDotsVertical, IconEdit, IconPower, IconSearch, IconTrash } from "@tabler/icons-react";
+import { intl } from "src/locale";
+
+export default function AuditTable() {
+	return (
+		<div className="card mt-4">
+			<div className="card-status-top bg-purple" />
+			<div className="card-table">
+				<div className="card-header">
+					<div className="row w-full">
+						<div className="col">
+							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "auditlog.title" })}</h2>
+						</div>
+						<div className="col-md-auto col-sm-12">
+							<div className="ms-auto d-flex flex-wrap btn-list">
+								<div className="input-group input-group-flat w-auto">
+									<span className="input-group-text input-group-text-sm">
+										<IconSearch size={16} />
+									</span>
+									<input
+										id="advanced-table-search"
+										type="text"
+										className="form-control form-control-sm"
+										autoComplete="off"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div id="advanced-table">
+					<div className="table-responsive">
+						<table className="table table-vcenter table-selectable">
+							<thead>
+								<tr>
+									<th className="w-1" />
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Source
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Destination
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											SSL
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Access
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Status
+										</button>
+									</th>
+									<th className="w-1" />
+								</tr>
+							</thead>
+							<tbody className="table-tbody">
+								<tr>
+									<td data-label="Owner">
+										<div className="d-flex py-1 align-items-center">
+											<span
+												className="avatar avatar-2 me-2"
+												style={{
+													backgroundImage:
+														"url(//www.gravatar.com/avatar/6193176330f8d38747f038c170ddb193?default=mm)",
+												}}
+											/>
+										</div>
+									</td>
+									<td data-label="Destination">
+										<div className="flex-fill">
+											<div className="font-weight-medium">
+												<span className="badge badge-lg domain-name">blog.jc21.com</span>
+											</div>
+											<div className="text-secondary mt-1">Created: 20th September 2024</div>
+										</div>
+									</td>
+									<td data-label="Source">http://172.17.0.1:3001</td>
+									<td data-label="SSL">Let's Encrypt</td>
+									<td data-label="Access">Public</td>
+									<td data-label="Status">
+										<span className="badge bg-lime-lt">Online</span>
+									</td>
+									<td data-label="Status" className="text-end">
+										<span className="dropdown">
+											<button
+												type="button"
+												className="btn dropdown-toggle btn-action btn-sm px-1"
+												data-bs-boundary="viewport"
+												data-bs-toggle="dropdown"
+											>
+												<IconDotsVertical />
+											</button>
+											<div className="dropdown-menu dropdown-menu-end">
+												<span className="dropdown-header">Proxy Host #2</span>
+												<a className="dropdown-item" href="#">
+													<IconEdit size={16} />
+													Edit
+												</a>
+												<a className="dropdown-item" href="#">
+													<IconPower size={16} />
+													Disable
+												</a>
+												<div className="dropdown-divider" />
+												<a className="dropdown-item" href="#">
+													<IconTrash size={16} />
+													Delete
+												</a>
+											</div>
+										</span>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/pages/AuditLog/index.tsx

@@ -0,0 +1,12 @@
+import { HasPermission } from "src/components";
+import AuditTable from "./AuditTable";
+
+const AuditLog = () => {
+	return (
+		<HasPermission permission="admin" type="manage">
+			<AuditTable />
+		</HasPermission>
+	);
+};
+
+export default AuditLog;

frontend/src/pages/Certificates/CertificateTable.tsx

@@ -0,0 +1,132 @@
+import { IconDotsVertical, IconEdit, IconPower, IconSearch, IconTrash } from "@tabler/icons-react";
+import { Button } from "src/components";
+import { intl } from "src/locale";
+
+export default function CertificateTable() {
+	return (
+		<div className="card mt-4">
+			<div className="card-status-top bg-pink" />
+			<div className="card-table">
+				<div className="card-header">
+					<div className="row w-full">
+						<div className="col">
+							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "certificates.title" })}</h2>
+						</div>
+						<div className="col-md-auto col-sm-12">
+							<div className="ms-auto d-flex flex-wrap btn-list">
+								<div className="input-group input-group-flat w-auto">
+									<span className="input-group-text input-group-text-sm">
+										<IconSearch size={16} />
+									</span>
+									<input
+										id="advanced-table-search"
+										type="text"
+										className="form-control form-control-sm"
+										autoComplete="off"
+									/>
+								</div>
+								<Button size="sm" className="btn-pink">
+									Add Certificate (dropdown)
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div id="advanced-table">
+					<div className="table-responsive">
+						<table className="table table-vcenter table-selectable">
+							<thead>
+								<tr>
+									<th className="w-1" />
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Source
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Destination
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											SSL
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Access
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Status
+										</button>
+									</th>
+									<th className="w-1" />
+								</tr>
+							</thead>
+							<tbody className="table-tbody">
+								<tr>
+									<td data-label="Owner">
+										<div className="d-flex py-1 align-items-center">
+											<span
+												className="avatar avatar-2 me-2"
+												style={{
+													backgroundImage:
+														"url(//www.gravatar.com/avatar/6193176330f8d38747f038c170ddb193?default=mm)",
+												}}
+											/>
+										</div>
+									</td>
+									<td data-label="Destination">
+										<div className="flex-fill">
+											<div className="font-weight-medium">
+												<span className="badge badge-lg domain-name">blog.jc21.com</span>
+											</div>
+											<div className="text-secondary mt-1">Created: 20th September 2024</div>
+										</div>
+									</td>
+									<td data-label="Source">http://172.17.0.1:3001</td>
+									<td data-label="SSL">Let's Encrypt</td>
+									<td data-label="Access">Public</td>
+									<td data-label="Status">
+										<span className="badge bg-lime-lt">Online</span>
+									</td>
+									<td data-label="Status" className="text-end">
+										<span className="dropdown">
+											<button
+												type="button"
+												className="btn dropdown-toggle btn-action btn-sm px-1"
+												data-bs-boundary="viewport"
+												data-bs-toggle="dropdown"
+											>
+												<IconDotsVertical />
+											</button>
+											<div className="dropdown-menu dropdown-menu-end">
+												<span className="dropdown-header">Proxy Host #2</span>
+												<a className="dropdown-item" href="#">
+													<IconEdit size={16} />
+													Edit
+												</a>
+												<a className="dropdown-item" href="#">
+													<IconPower size={16} />
+													Disable
+												</a>
+												<div className="dropdown-divider" />
+												<a className="dropdown-item" href="#">
+													<IconTrash size={16} />
+													Delete
+												</a>
+											</div>
+										</span>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/pages/Certificates/index.tsx

@@ -0,0 +1,12 @@
+import { HasPermission } from "src/components";
+import CertificateTable from "./CertificateTable";
+
+const Certificates = () => {
+	return (
+		<HasPermission permission="certificates" type="view">
+			<CertificateTable />
+		</HasPermission>
+	);
+};
+
+export default Certificates;

frontend/src/pages/Dashboard/index.tsx

@@ -0,0 +1,145 @@
+import { IconArrowsCross, IconBolt, IconBoltOff, IconDisc } from "@tabler/icons-react";
+import { useNavigate } from "react-router-dom";
+import { useHostReport } from "src/hooks";
+import { intl } from "src/locale";
+
+const Dashboard = () => {
+	const { data: hostReport } = useHostReport();
+	const navigate = useNavigate();
+
+	return (
+		<div>
+			<h2>{intl.formatMessage({ id: "dashboard.title" })}</h2>
+			<div className="row row-deck row-cards">
+				<div className="col-12 my-4">
+					<div className="row row-cards">
+						<div className="col-sm-6 col-lg-3">
+							<a
+								href="/nginx/proxy"
+								className="card card-sm card-link card-link-pop"
+								onClick={(e) => {
+									e.preventDefault();
+									navigate("/nginx/proxy");
+								}}
+							>
+								<div className="card-body">
+									<div className="row align-items-center">
+										<div className="col-auto">
+											<span className="bg-green text-white avatar">
+												<IconBolt />
+											</span>
+										</div>
+										<div className="col">
+											<div className="font-weight-medium">
+												{intl.formatMessage(
+													{ id: "proxy-hosts.count" },
+													{ count: hostReport?.proxy },
+												)}
+											</div>
+										</div>
+									</div>
+								</div>
+							</a>
+						</div>
+						<div className="col-sm-6 col-lg-3">
+							<a
+								href="/nginx/redirection"
+								className="card card-sm card-link card-link-pop"
+								onClick={(e) => {
+									e.preventDefault();
+									navigate("/nginx/redirection");
+								}}
+							>
+								<div className="card-body">
+									<div className="row align-items-center">
+										<div className="col-auto">
+											<span className="bg-yellow text-white avatar">
+												<IconArrowsCross />
+											</span>
+										</div>
+										<div className="col">
+											{intl.formatMessage(
+												{ id: "redirection-hosts.count" },
+												{ count: hostReport?.redirection },
+											)}
+										</div>
+									</div>
+								</div>
+							</a>
+						</div>
+						<div className="col-sm-6 col-lg-3">
+							<a
+								href="/nginx/stream"
+								className="card card-sm card-link card-link-pop"
+								onClick={(e) => {
+									e.preventDefault();
+									navigate("/nginx/stream");
+								}}
+							>
+								<div className="card-body">
+									<div className="row align-items-center">
+										<div className="col-auto">
+											<span className="bg-blue text-white avatar">
+												<IconDisc />
+											</span>
+										</div>
+										<div className="col">
+											{intl.formatMessage({ id: "streams.count" }, { count: hostReport?.stream })}
+										</div>
+									</div>
+								</div>
+							</a>
+						</div>
+						<div className="col-sm-6 col-lg-3">
+							<a
+								href="/nginx/404"
+								className="card card-sm card-link card-link-pop"
+								onClick={(e) => {
+									e.preventDefault();
+									navigate("/nginx/404");
+								}}
+							>
+								<div className="card-body">
+									<div className="row align-items-center">
+										<div className="col-auto">
+											<span className="bg-red text-white avatar">
+												<IconBoltOff />
+											</span>
+										</div>
+										<div className="col">
+											{intl.formatMessage(
+												{ id: "dead-hosts.count" },
+												{ count: hostReport?.dead },
+											)}
+										</div>
+									</div>
+								</div>
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			<pre>
+				<code>{`Todo:
+
+- modal dialgs for everything
+- Tables
+- check mobile
+- fix bad jwt not refreshing entire page
+- add help docs for host types
+- show user as disabled on user table
+
+More for api, then implement here:
+- Properly implement refresh tokens
+- don't create default user, instead use the is_setup from v3
+  - also remove the initial user/pass env vars
+  - update docs for this
+- Add error message_18n for all backend errors
+- minor: certificates expand with hosts needs to omit 'is_deleted'
+`}</code>
+			</pre>
+		</div>
+	);
+};
+
+export default Dashboard;

frontend/src/pages/Login/index.module.css

@@ -0,0 +1,10 @@
+.logo {
+	width: 200px;
+}
+
+.helperBtns {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	z-index: 1000;
+}

frontend/src/pages/Login/index.tsx

@@ -0,0 +1,126 @@
+import cn from "classnames";
+import { Field, Form, Formik } from "formik";
+import { useEffect, useRef, useState } from "react";
+import Alert from "react-bootstrap/Alert";
+import { Button, LocalePicker, Page, ThemeSwitcher } from "src/components";
+import { useAuthState } from "src/context";
+import { useHealth } from "src/hooks";
+import { intl } from "src/locale";
+import { validateEmail, validateString } from "src/modules/Validations";
+import styles from "./index.module.css";
+
+export default function Login() {
+	const emailRef = useRef(null);
+	const [formErr, setFormErr] = useState("");
+	const { login } = useAuthState();
+
+	const onSubmit = async (values: any, { setSubmitting }: any) => {
+		setFormErr("");
+		try {
+			await login(values.email, values.password);
+		} catch (err) {
+			if (err instanceof Error) {
+				setFormErr(err.message);
+			}
+		}
+		setSubmitting(false);
+	};
+
+	useEffect(() => {
+		// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+		emailRef.current.focus();
+	}, []);
+
+	const health = useHealth();
+
+	const getVersion = () => {
+		if (!health.data) {
+			return "";
+		}
+		const v = health.data.version;
+		return `v${v.major}.${v.minor}.${v.revision}`;
+	};
+
+	return (
+		<Page className="page page-center">
+			<div className={cn("d-none", "d-md-flex", styles.helperBtns)}>
+				<LocalePicker />
+				<ThemeSwitcher />
+			</div>
+			<div className="container container-tight py-4">
+				<div className="text-center mb-4">
+					<img
+						className={styles.logo}
+						src="/images/logo-text-horizontal-grey.png"
+						alt="Nginx Proxy Manager"
+					/>
+				</div>
+				<div className="card card-md">
+					<div className="card-body">
+						<h2 className="h2 text-center mb-4">{intl.formatMessage({ id: "login.title" })}</h2>
+						{formErr !== "" && <Alert variant="danger">{formErr}</Alert>}
+						<Formik
+							initialValues={
+								{
+									email: "",
+									password: "",
+								} as any
+							}
+							onSubmit={onSubmit}
+						>
+							{({ isSubmitting }) => (
+								<Form>
+									<div className="mb-3">
+										<Field name="email" validate={validateEmail()}>
+											{({ field, form }: any) => (
+												<label className="form-label">
+													{intl.formatMessage({ id: "email-address" })}
+													<input
+														{...field}
+														ref={emailRef}
+														type="email"
+														required
+														className={`form-control ${form.errors.email && form.touched.email ? " is-invalid" : ""}`}
+														placeholder={intl.formatMessage({ id: "email-address" })}
+													/>
+													<div className="invalid-feedback">{form.errors.email}</div>
+												</label>
+											)}
+										</Field>
+									</div>
+									<div className="mb-2">
+										<Field name="password" validate={validateString(8, 255)}>
+											{({ field, form }: any) => (
+												<>
+													<label className="form-label">
+														{intl.formatMessage({ id: "password" })}
+														<input
+															{...field}
+															type="password"
+															required
+															maxLength={255}
+															className={`form-control ${form.errors.password && form.touched.password ? " is-invalid" : ""}`}
+															placeholder="Password"
+															autoComplete="off"
+														/>
+														<div className="invalid-feedback">{form.errors.password}</div>
+													</label>
+												</>
+											)}
+										</Field>
+									</div>
+									<div className="form-footer">
+										<Button type="submit" fullWidth color="azure" isLoading={isSubmitting}>
+											{intl.formatMessage({ id: "sign-in" })}
+										</Button>
+									</div>
+								</Form>
+							)}
+						</Formik>
+					</div>
+				</div>
+				<div className="text-center text-secondary mt-3">{getVersion()}</div>
+			</div>
+		</Page>
+	);
+}

frontend/src/pages/Nginx/DeadHosts/Empty.tsx

@@ -0,0 +1,20 @@
+import type { Table as ReactTable } from "@tanstack/react-table";
+import { Button } from "src/components";
+import { intl } from "src/locale";
+
+interface Props {
+	tableInstance: ReactTable<any>;
+}
+export default function Empty({ tableInstance }: Props) {
+	return (
+		<tr>
+			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
+				<div className="text-center my-4">
+					<h2>{intl.formatMessage({ id: "dead-hosts.empty" })}</h2>
+					<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
+					<Button className="btn-red my-3">{intl.formatMessage({ id: "dead-hosts.add" })}</Button>
+				</div>
+			</td>
+		</tr>
+	);
+}

frontend/src/pages/Nginx/DeadHosts/Table.tsx

@@ -0,0 +1,109 @@
+import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useMemo } from "react";
+import type { DeadHost } from "src/api/backend";
+import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
+import { TableLayout } from "src/components/Table/TableLayout";
+import { intl } from "src/locale";
+import Empty from "./Empty";
+
+interface Props {
+	data: DeadHost[];
+	isFetching?: boolean;
+}
+export default function Table({ data, isFetching }: Props) {
+	const columnHelper = createColumnHelper<DeadHost>();
+	const columns = useMemo(
+		() => [
+			columnHelper.accessor((row: any) => row.owner, {
+				id: "owner",
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <GravatarFormatter url={value.avatar} name={value.name} />;
+				},
+				meta: {
+					className: "w-1",
+				},
+			}),
+			columnHelper.accessor((row: any) => row, {
+				id: "domainNames",
+				header: intl.formatMessage({ id: "column.source" }),
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <DomainsFormatter domains={value.domainNames} createdOn={value.createdOn} />;
+				},
+			}),
+			columnHelper.accessor((row: any) => row.certificate, {
+				id: "certificate",
+				header: intl.formatMessage({ id: "column.ssl" }),
+				cell: (info: any) => {
+					return <CertificateFormatter certificate={info.getValue()} />;
+				},
+			}),
+			columnHelper.accessor((row: any) => row.enabled, {
+				id: "enabled",
+				header: intl.formatMessage({ id: "column.status" }),
+				cell: (info: any) => {
+					return <StatusFormatter enabled={info.getValue()} />;
+				},
+			}),
+			columnHelper.display({
+				id: "id", // todo: not needed for a display?
+				cell: (info: any) => {
+					return (
+						<span className="dropdown">
+							<button
+								type="button"
+								className="btn dropdown-toggle btn-action btn-sm px-1"
+								data-bs-boundary="viewport"
+								data-bs-toggle="dropdown"
+							>
+								<IconDotsVertical />
+							</button>
+							<div className="dropdown-menu dropdown-menu-end">
+								<span className="dropdown-header">
+									{intl.formatMessage(
+										{
+											id: "dead-hosts.actions-title",
+										},
+										{ id: info.row.original.id },
+									)}
+								</span>
+								<a className="dropdown-item" href="#">
+									<IconEdit size={16} />
+									{intl.formatMessage({ id: "action.edit" })}
+								</a>
+								<a className="dropdown-item" href="#">
+									<IconPower size={16} />
+									{intl.formatMessage({ id: "action.disable" })}
+								</a>
+								<div className="dropdown-divider" />
+								<a className="dropdown-item" href="#">
+									<IconTrash size={16} />
+									{intl.formatMessage({ id: "action.delete" })}
+								</a>
+							</div>
+						</span>
+					);
+				},
+				meta: {
+					className: "text-end w-1",
+				},
+			}),
+		],
+		[columnHelper],
+	);
+
+	const tableInstance = useReactTable<DeadHost>({
+		columns,
+		data,
+		getCoreRowModel: getCoreRowModel(),
+		rowCount: data.length,
+		meta: {
+			isFetching,
+		},
+		enableSortingRemoval: false,
+	});
+
+	return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
+}

frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx

@@ -0,0 +1,52 @@
+import { IconSearch } from "@tabler/icons-react";
+import Alert from "react-bootstrap/Alert";
+import { Button, LoadingPage } from "src/components";
+import { useDeadHosts } from "src/hooks";
+import { intl } from "src/locale";
+import Table from "./Table";
+
+export default function TableWrapper() {
+	const { isFetching, isLoading, isError, error, data } = useDeadHosts(["owner", "certificate"]);
+
+	if (isLoading) {
+		return <LoadingPage />;
+	}
+
+	if (isError) {
+		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
+	}
+
+	return (
+		<div className="card mt-4">
+			<div className="card-status-top bg-red" />
+			<div className="card-table">
+				<div className="card-header">
+					<div className="row w-full">
+						<div className="col">
+							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "dead-hosts.title" })}</h2>
+						</div>
+						<div className="col-md-auto col-sm-12">
+							<div className="ms-auto d-flex flex-wrap btn-list">
+								<div className="input-group input-group-flat w-auto">
+									<span className="input-group-text input-group-text-sm">
+										<IconSearch size={16} />
+									</span>
+									<input
+										id="advanced-table-search"
+										type="text"
+										className="form-control form-control-sm"
+										autoComplete="off"
+									/>
+								</div>
+								<Button size="sm" className="btn-red">
+									{intl.formatMessage({ id: "dead-hosts.add" })}
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<Table data={data ?? []} isFetching={isFetching} />
+			</div>
+		</div>
+	);
+}

frontend/src/pages/Nginx/DeadHosts/index.tsx

@@ -0,0 +1,12 @@
+import { HasPermission } from "src/components";
+import TableWrapper from "./TableWrapper";
+
+const DeadHosts = () => {
+	return (
+		<HasPermission permission="deadHosts" type="view">
+			<TableWrapper />
+		</HasPermission>
+	);
+};
+
+export default DeadHosts;

frontend/src/pages/Nginx/ProxyHosts/Empty.tsx

@@ -0,0 +1,25 @@
+import type { Table as ReactTable } from "@tanstack/react-table";
+import { Button } from "src/components";
+import { intl } from "src/locale";
+
+/**
+ * This component should never render as there should always be 1 user minimum,
+ * but I'm keeping it for consistency.
+ */
+
+interface Props {
+	tableInstance: ReactTable<any>;
+}
+export default function Empty({ tableInstance }: Props) {
+	return (
+		<tr>
+			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
+				<div className="text-center my-4">
+					<h2>{intl.formatMessage({ id: "proxy-hosts.empty" })}</h2>
+					<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
+					<Button className="btn-lime my-3">{intl.formatMessage({ id: "proxy-hosts.add" })}</Button>
+				</div>
+			</td>
+		</tr>
+	);
+}

frontend/src/pages/Nginx/ProxyHosts/Table.tsx

@@ -0,0 +1,125 @@
+import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useMemo } from "react";
+import type { ProxyHost } from "src/api/backend";
+import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
+import { TableLayout } from "src/components/Table/TableLayout";
+import { intl } from "src/locale";
+import Empty from "./Empty";
+
+interface Props {
+	data: ProxyHost[];
+	isFetching?: boolean;
+}
+export default function Table({ data, isFetching }: Props) {
+	const columnHelper = createColumnHelper<ProxyHost>();
+	const columns = useMemo(
+		() => [
+			columnHelper.accessor((row: any) => row.owner, {
+				id: "owner",
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <GravatarFormatter url={value.avatar} name={value.name} />;
+				},
+				meta: {
+					className: "w-1",
+				},
+			}),
+			columnHelper.accessor((row: any) => row, {
+				id: "domainNames",
+				header: intl.formatMessage({ id: "column.source" }),
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <DomainsFormatter domains={value.domainNames} createdOn={value.createdOn} />;
+				},
+			}),
+			columnHelper.accessor((row: any) => row, {
+				id: "forwardHost",
+				header: intl.formatMessage({ id: "column.destination" }),
+				cell: (info: any) => {
+					const value = info.getValue();
+					return `${value.forwardHost}:${value.forwardPort}`;
+				},
+			}),
+			columnHelper.accessor((row: any) => row.certificate, {
+				id: "certificate",
+				header: intl.formatMessage({ id: "column.ssl" }),
+				cell: (info: any) => {
+					return <CertificateFormatter certificate={info.getValue()} />;
+				},
+			}),
+			// TODO: formatter for access list
+			columnHelper.accessor((row: any) => row.access, {
+				id: "accessList",
+				header: intl.formatMessage({ id: "column.access" }),
+				cell: (info: any) => {
+					return info.getValue();
+				},
+			}),
+			columnHelper.accessor((row: any) => row.enabled, {
+				id: "enabled",
+				header: intl.formatMessage({ id: "column.status" }),
+				cell: (info: any) => {
+					return <StatusFormatter enabled={info.getValue()} />;
+				},
+			}),
+			columnHelper.display({
+				id: "id", // todo: not needed for a display?
+				cell: (info: any) => {
+					return (
+						<span className="dropdown">
+							<button
+								type="button"
+								className="btn dropdown-toggle btn-action btn-sm px-1"
+								data-bs-boundary="viewport"
+								data-bs-toggle="dropdown"
+							>
+								<IconDotsVertical />
+							</button>
+							<div className="dropdown-menu dropdown-menu-end">
+								<span className="dropdown-header">
+									{intl.formatMessage(
+										{
+											id: "proxy-hosts.actions-title",
+										},
+										{ id: info.row.original.id },
+									)}
+								</span>
+								<a className="dropdown-item" href="#">
+									<IconEdit size={16} />
+									{intl.formatMessage({ id: "action.edit" })}
+								</a>
+								<a className="dropdown-item" href="#">
+									<IconPower size={16} />
+									{intl.formatMessage({ id: "action.disable" })}
+								</a>
+								<div className="dropdown-divider" />
+								<a className="dropdown-item" href="#">
+									<IconTrash size={16} />
+									{intl.formatMessage({ id: "action.delete" })}
+								</a>
+							</div>
+						</span>
+					);
+				},
+				meta: {
+					className: "text-end w-1",
+				},
+			}),
+		],
+		[columnHelper],
+	);
+
+	const tableInstance = useReactTable<ProxyHost>({
+		columns,
+		data,
+		getCoreRowModel: getCoreRowModel(),
+		rowCount: data.length,
+		meta: {
+			isFetching,
+		},
+		enableSortingRemoval: false,
+	});
+
+	return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
+}

frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx

@@ -0,0 +1,52 @@
+import { IconSearch } from "@tabler/icons-react";
+import Alert from "react-bootstrap/Alert";
+import { Button, LoadingPage } from "src/components";
+import { useProxyHosts } from "src/hooks";
+import { intl } from "src/locale";
+import Table from "./Table";
+
+export default function TableWrapper() {
+	const { isFetching, isLoading, isError, error, data } = useProxyHosts(["owner", "access_list", "certificate"]);
+
+	if (isLoading) {
+		return <LoadingPage />;
+	}
+
+	if (isError) {
+		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
+	}
+
+	return (
+		<div className="card mt-4">
+			<div className="card-status-top bg-lime" />
+			<div className="card-table">
+				<div className="card-header">
+					<div className="row w-full">
+						<div className="col">
+							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "proxy-hosts.title" })}</h2>
+						</div>
+						<div className="col-md-auto col-sm-12">
+							<div className="ms-auto d-flex flex-wrap btn-list">
+								<div className="input-group input-group-flat w-auto">
+									<span className="input-group-text input-group-text-sm">
+										<IconSearch size={16} />
+									</span>
+									<input
+										id="advanced-table-search"
+										type="text"
+										className="form-control form-control-sm"
+										autoComplete="off"
+									/>
+								</div>
+								<Button size="sm" className="btn-lime">
+									{intl.formatMessage({ id: "proxy-hosts.add" })}
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<Table data={data ?? []} isFetching={isFetching} />
+			</div>
+		</div>
+	);
+}

frontend/src/pages/Nginx/ProxyHosts/index.tsx

@@ -0,0 +1,12 @@
+import { HasPermission } from "src/components";
+import TableWrapper from "./TableWrapper";
+
+const ProxyHosts = () => {
+	return (
+		<HasPermission permission="proxyHosts" type="view">
+			<TableWrapper />
+		</HasPermission>
+	);
+};
+
+export default ProxyHosts;

frontend/src/pages/Nginx/RedirectionHosts/Empty.tsx

@@ -0,0 +1,20 @@
+import type { Table as ReactTable } from "@tanstack/react-table";
+import { Button } from "src/components";
+import { intl } from "src/locale";
+
+interface Props {
+	tableInstance: ReactTable<any>;
+}
+export default function Empty({ tableInstance }: Props) {
+	return (
+		<tr>
+			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
+				<div className="text-center my-4">
+					<h2>{intl.formatMessage({ id: "redirection-hosts.empty" })}</h2>
+					<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
+					<Button className="btn-yellow my-3">{intl.formatMessage({ id: "redirection-hosts.add" })}</Button>
+				</div>
+			</td>
+		</tr>
+	);
+}

frontend/src/pages/Nginx/RedirectionHosts/Table.tsx

@@ -0,0 +1,130 @@
+import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useMemo } from "react";
+import type { RedirectionHost } from "src/api/backend";
+import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
+import { TableLayout } from "src/components/Table/TableLayout";
+import { intl } from "src/locale";
+import Empty from "./Empty";
+
+interface Props {
+	data: RedirectionHost[];
+	isFetching?: boolean;
+}
+export default function Table({ data, isFetching }: Props) {
+	const columnHelper = createColumnHelper<RedirectionHost>();
+	const columns = useMemo(
+		() => [
+			columnHelper.accessor((row: any) => row.owner, {
+				id: "owner",
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <GravatarFormatter url={value.avatar} name={value.name} />;
+				},
+				meta: {
+					className: "w-1",
+				},
+			}),
+			columnHelper.accessor((row: any) => row, {
+				id: "domainNames",
+				header: intl.formatMessage({ id: "column.source" }),
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <DomainsFormatter domains={value.domainNames} createdOn={value.createdOn} />;
+				},
+			}),
+			columnHelper.accessor((row: any) => row.forwardHttpCode, {
+				id: "forwardHttpCode",
+				header: intl.formatMessage({ id: "column.http-code" }),
+				cell: (info: any) => {
+					return info.getValue();
+				},
+			}),
+			columnHelper.accessor((row: any) => row.forwardScheme, {
+				id: "forwardScheme",
+				header: intl.formatMessage({ id: "column.scheme" }),
+				cell: (info: any) => {
+					return info.getValue().toUpperCase();
+				},
+			}),
+			columnHelper.accessor((row: any) => row.forwardDomainName, {
+				id: "forwardDomainName",
+				header: intl.formatMessage({ id: "column.destination" }),
+				cell: (info: any) => {
+					return info.getValue();
+				},
+			}),
+			columnHelper.accessor((row: any) => row.certificate, {
+				id: "certificate",
+				header: intl.formatMessage({ id: "column.ssl" }),
+				cell: (info: any) => {
+					return <CertificateFormatter certificate={info.getValue()} />;
+				},
+			}),
+			columnHelper.accessor((row: any) => row.enabled, {
+				id: "enabled",
+				header: intl.formatMessage({ id: "column.status" }),
+				cell: (info: any) => {
+					return <StatusFormatter enabled={info.getValue()} />;
+				},
+			}),
+			columnHelper.display({
+				id: "id", // todo: not needed for a display?
+				cell: (info: any) => {
+					return (
+						<span className="dropdown">
+							<button
+								type="button"
+								className="btn dropdown-toggle btn-action btn-sm px-1"
+								data-bs-boundary="viewport"
+								data-bs-toggle="dropdown"
+							>
+								<IconDotsVertical />
+							</button>
+							<div className="dropdown-menu dropdown-menu-end">
+								<span className="dropdown-header">
+									{intl.formatMessage(
+										{
+											id: "redirection-hosts.actions-title",
+										},
+										{ id: info.row.original.id },
+									)}
+								</span>
+								<a className="dropdown-item" href="#">
+									<IconEdit size={16} />
+									{intl.formatMessage({ id: "action.edit" })}
+								</a>
+								<a className="dropdown-item" href="#">
+									<IconPower size={16} />
+									{intl.formatMessage({ id: "action.disable" })}
+								</a>
+								<div className="dropdown-divider" />
+								<a className="dropdown-item" href="#">
+									<IconTrash size={16} />
+									{intl.formatMessage({ id: "action.delete" })}
+								</a>
+							</div>
+						</span>
+					);
+				},
+				meta: {
+					className: "text-end w-1",
+				},
+			}),
+		],
+		[columnHelper],
+	);
+
+	const tableInstance = useReactTable<RedirectionHost>({
+		columns,
+		data,
+		getCoreRowModel: getCoreRowModel(),
+		rowCount: data.length,
+		meta: {
+			isFetching,
+		},
+		enableSortingRemoval: false,
+	});
+
+	return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
+}

frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx

@@ -0,0 +1,52 @@
+import { IconSearch } from "@tabler/icons-react";
+import Alert from "react-bootstrap/Alert";
+import { Button, LoadingPage } from "src/components";
+import { useRedirectionHosts } from "src/hooks";
+import { intl } from "src/locale";
+import Table from "./Table";
+
+export default function TableWrapper() {
+	const { isFetching, isLoading, isError, error, data } = useRedirectionHosts(["owner", "certificate"]);
+
+	if (isLoading) {
+		return <LoadingPage />;
+	}
+
+	if (isError) {
+		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
+	}
+
+	return (
+		<div className="card mt-4">
+			<div className="card-status-top bg-yellow" />
+			<div className="card-table">
+				<div className="card-header">
+					<div className="row w-full">
+						<div className="col">
+							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "redirection-hosts.title" })}</h2>
+						</div>
+						<div className="col-md-auto col-sm-12">
+							<div className="ms-auto d-flex flex-wrap btn-list">
+								<div className="input-group input-group-flat w-auto">
+									<span className="input-group-text input-group-text-sm">
+										<IconSearch size={16} />
+									</span>
+									<input
+										id="advanced-table-search"
+										type="text"
+										className="form-control form-control-sm"
+										autoComplete="off"
+									/>
+								</div>
+								<Button size="sm" className="btn-yellow">
+									{intl.formatMessage({ id: "redirection-hosts.add" })}
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<Table data={data ?? []} isFetching={isFetching} />
+			</div>
+		</div>
+	);
+}

frontend/src/pages/Nginx/RedirectionHosts/index.tsx

@@ -0,0 +1,12 @@
+import { HasPermission } from "src/components";
+import TableWrapper from "./TableWrapper";
+
+const RedirectionHosts = () => {
+	return (
+		<HasPermission permission="redirectionHosts" type="view">
+			<TableWrapper />
+		</HasPermission>
+	);
+};
+
+export default RedirectionHosts;

frontend/src/pages/Nginx/Streams/Empty.tsx

@@ -0,0 +1,20 @@
+import type { Table as ReactTable } from "@tanstack/react-table";
+import { Button } from "src/components";
+import { intl } from "src/locale";
+
+interface Props {
+	tableInstance: ReactTable<any>;
+}
+export default function Empty({ tableInstance }: Props) {
+	return (
+		<tr>
+			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
+				<div className="text-center my-4">
+					<h2>{intl.formatMessage({ id: "streams.empty" })}</h2>
+					<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
+					<Button className="btn-blue my-3">{intl.formatMessage({ id: "streams.add" })}</Button>
+				</div>
+			</td>
+		</tr>
+	);
+}

frontend/src/pages/Nginx/Streams/Table.tsx

@@ -0,0 +1,139 @@
+import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useMemo } from "react";
+import type { Stream } from "src/api/backend";
+import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
+import { TableLayout } from "src/components/Table/TableLayout";
+import { intl } from "src/locale";
+import Empty from "./Empty";
+
+interface Props {
+	data: Stream[];
+	isFetching?: boolean;
+}
+export default function Table({ data, isFetching }: Props) {
+	const columnHelper = createColumnHelper<Stream>();
+	const columns = useMemo(
+		() => [
+			columnHelper.accessor((row: any) => row.owner, {
+				id: "owner",
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <GravatarFormatter url={value.avatar} name={value.name} />;
+				},
+				meta: {
+					className: "w-1",
+				},
+			}),
+			columnHelper.accessor((row: any) => row, {
+				id: "incomingPort",
+				header: intl.formatMessage({ id: "column.incoming-port" }),
+				cell: (info: any) => {
+					const value = info.getValue();
+					// Bit of a hack to reuse the DomainsFormatter component
+					return <DomainsFormatter domains={[value.incomingPort]} createdOn={value.createdOn} />;
+				},
+			}),
+			columnHelper.accessor((row: any) => row, {
+				id: "forwardHttpCode",
+				header: intl.formatMessage({ id: "column.destination" }),
+				cell: (info: any) => {
+					const value = info.getValue();
+					return `${value.forwardingHost}:${value.forwardingPort}`;
+				},
+			}),
+			columnHelper.accessor((row: any) => row, {
+				id: "tcpForwarding",
+				header: intl.formatMessage({ id: "column.protocol" }),
+				cell: (info: any) => {
+					const value = info.getValue();
+					return (
+						<>
+							{value.tcpForwarding ? (
+								<span className="badge badge-lg domain-name">
+									{intl.formatMessage({ id: "streams.tcp" })}
+								</span>
+							) : null}
+							{value.udpForwarding ? (
+								<span className="badge badge-lg domain-name">
+									{intl.formatMessage({ id: "streams.udp" })}
+								</span>
+							) : null}
+						</>
+					);
+				},
+			}),
+			columnHelper.accessor((row: any) => row.certificate, {
+				id: "certificate",
+				header: intl.formatMessage({ id: "column.ssl" }),
+				cell: (info: any) => {
+					return <CertificateFormatter certificate={info.getValue()} />;
+				},
+			}),
+			columnHelper.accessor((row: any) => row.enabled, {
+				id: "enabled",
+				header: intl.formatMessage({ id: "column.status" }),
+				cell: (info: any) => {
+					return <StatusFormatter enabled={info.getValue()} />;
+				},
+			}),
+			columnHelper.display({
+				id: "id", // todo: not needed for a display?
+				cell: (info: any) => {
+					return (
+						<span className="dropdown">
+							<button
+								type="button"
+								className="btn dropdown-toggle btn-action btn-sm px-1"
+								data-bs-boundary="viewport"
+								data-bs-toggle="dropdown"
+							>
+								<IconDotsVertical />
+							</button>
+							<div className="dropdown-menu dropdown-menu-end">
+								<span className="dropdown-header">
+									{intl.formatMessage(
+										{
+											id: "streams.actions-title",
+										},
+										{ id: info.row.original.id },
+									)}
+								</span>
+								<a className="dropdown-item" href="#">
+									<IconEdit size={16} />
+									{intl.formatMessage({ id: "action.edit" })}
+								</a>
+								<a className="dropdown-item" href="#">
+									<IconPower size={16} />
+									{intl.formatMessage({ id: "action.disable" })}
+								</a>
+								<div className="dropdown-divider" />
+								<a className="dropdown-item" href="#">
+									<IconTrash size={16} />
+									{intl.formatMessage({ id: "action.delete" })}
+								</a>
+							</div>
+						</span>
+					);
+				},
+				meta: {
+					className: "text-end w-1",
+				},
+			}),
+		],
+		[columnHelper],
+	);
+
+	const tableInstance = useReactTable<Stream>({
+		columns,
+		data,
+		getCoreRowModel: getCoreRowModel(),
+		rowCount: data.length,
+		meta: {
+			isFetching,
+		},
+		enableSortingRemoval: false,
+	});
+
+	return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
+}

frontend/src/pages/Nginx/Streams/TableWrapper.tsx

@@ -0,0 +1,52 @@
+import { IconSearch } from "@tabler/icons-react";
+import Alert from "react-bootstrap/Alert";
+import { Button, LoadingPage } from "src/components";
+import { useStreams } from "src/hooks";
+import { intl } from "src/locale";
+import Table from "./Table";
+
+export default function TableWrapper() {
+	const { isFetching, isLoading, isError, error, data } = useStreams(["owner", "certificate"]);
+
+	if (isLoading) {
+		return <LoadingPage />;
+	}
+
+	if (isError) {
+		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
+	}
+
+	return (
+		<div className="card mt-4">
+			<div className="card-status-top bg-blue" />
+			<div className="card-table">
+				<div className="card-header">
+					<div className="row w-full">
+						<div className="col">
+							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "streams.title" })}</h2>
+						</div>
+						<div className="col-md-auto col-sm-12">
+							<div className="ms-auto d-flex flex-wrap btn-list">
+								<div className="input-group input-group-flat w-auto">
+									<span className="input-group-text input-group-text-sm">
+										<IconSearch size={16} />
+									</span>
+									<input
+										id="advanced-table-search"
+										type="text"
+										className="form-control form-control-sm"
+										autoComplete="off"
+									/>
+								</div>
+								<Button size="sm" className="btn-blue">
+									{intl.formatMessage({ id: "streams.add" })}
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<Table data={data ?? []} isFetching={isFetching} />
+			</div>
+		</div>
+	);
+}

frontend/src/pages/Nginx/Streams/index.tsx

@@ -0,0 +1,12 @@
+import { HasPermission } from "src/components";
+import TableWrapper from "./TableWrapper";
+
+const Streams = () => {
+	return (
+		<HasPermission permission="streams" type="view">
+			<TableWrapper />
+		</HasPermission>
+	);
+};
+
+export default Streams;

frontend/src/pages/Settings/SettingTable.tsx

@@ -0,0 +1,111 @@
+import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
+import { intl } from "src/locale";
+
+export default function AuditTable() {
+	return (
+		<div className="card mt-4">
+			<div className="card-status-top bg-teal" />
+			<div className="card-table">
+				<div className="card-header">
+					<div className="row w-full">
+						<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "settings.title" })}</h2>
+					</div>
+				</div>
+				<div id="advanced-table">
+					<div className="table-responsive">
+						<table className="table table-vcenter table-selectable">
+							<thead>
+								<tr>
+									<th className="w-1" />
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Source
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Destination
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											SSL
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Access
+										</button>
+									</th>
+									<th>
+										<button type="button" className="table-sort d-flex justify-content-between">
+											Status
+										</button>
+									</th>
+									<th className="w-1" />
+								</tr>
+							</thead>
+							<tbody className="table-tbody">
+								<tr>
+									<td data-label="Owner">
+										<div className="d-flex py-1 align-items-center">
+											<span
+												className="avatar avatar-2 me-2"
+												style={{
+													backgroundImage:
+														"url(//www.gravatar.com/avatar/6193176330f8d38747f038c170ddb193?default=mm)",
+												}}
+											/>
+										</div>
+									</td>
+									<td data-label="Destination">
+										<div className="flex-fill">
+											<div className="font-weight-medium">
+												<span className="badge badge-lg domain-name">blog.jc21.com</span>
+											</div>
+											<div className="text-secondary mt-1">Created: 20th September 2024</div>
+										</div>
+									</td>
+									<td data-label="Source">http://172.17.0.1:3001</td>
+									<td data-label="SSL">Let's Encrypt</td>
+									<td data-label="Access">Public</td>
+									<td data-label="Status">
+										<span className="badge bg-lime-lt">Online</span>
+									</td>
+									<td data-label="Status" className="text-end">
+										<span className="dropdown">
+											<button
+												type="button"
+												className="btn dropdown-toggle btn-action btn-sm px-1"
+												data-bs-boundary="viewport"
+												data-bs-toggle="dropdown"
+											>
+												<IconDotsVertical />
+											</button>
+											<div className="dropdown-menu dropdown-menu-end">
+												<span className="dropdown-header">Proxy Host #2</span>
+												<a className="dropdown-item" href="#">
+													<IconEdit size={16} />
+													Edit
+												</a>
+												<a className="dropdown-item" href="#">
+													<IconPower size={16} />
+													Disable
+												</a>
+												<div className="dropdown-divider" />
+												<a className="dropdown-item" href="#">
+													<IconTrash size={16} />
+													Delete
+												</a>
+											</div>
+										</span>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/pages/Settings/index.tsx

@@ -0,0 +1,12 @@
+import { HasPermission } from "src/components";
+import SettingTable from "./SettingTable";
+
+const Settings = () => {
+	return (
+		<HasPermission permission="admin" type="manage">
+			<SettingTable />
+		</HasPermission>
+	);
+};
+
+export default Settings;

frontend/src/pages/Users/Empty.tsx

@@ -0,0 +1,20 @@
+import type { Table as ReactTable } from "@tanstack/react-table";
+import { Button } from "src/components";
+import { intl } from "src/locale";
+
+interface Props {
+	tableInstance: ReactTable<any>;
+}
+export default function Empty({ tableInstance }: Props) {
+	return (
+		<tr>
+			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
+				<div className="text-center my-4">
+					<h2>{intl.formatMessage({ id: "proxy-hosts.empty" })}</h2>
+					<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
+					<Button className="btn-lime my-3">{intl.formatMessage({ id: "proxy-hosts.add" })}</Button>
+				</div>
+			</td>
+		</tr>
+	);
+}

frontend/src/pages/Users/Table.tsx

@@ -0,0 +1,128 @@
+import { IconDotsVertical, IconEdit, IconLock, IconShield, IconTrash } from "@tabler/icons-react";
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useMemo } from "react";
+import type { User } from "src/api/backend";
+import { GravatarFormatter, ValueWithDateFormatter } from "src/components";
+import { TableLayout } from "src/components/Table/TableLayout";
+import { intl } from "src/locale";
+import Empty from "./Empty";
+
+interface Props {
+	data: User[];
+	isFetching?: boolean;
+	currentUserId?: number;
+	onEditUser?: (id: number) => void;
+}
+export default function Table({ data, isFetching, currentUserId, onEditUser }: Props) {
+	const columnHelper = createColumnHelper<User>();
+	const columns = useMemo(
+		() => [
+			columnHelper.accessor((row: any) => row, {
+				id: "avatar",
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <GravatarFormatter url={value.avatar} name={value.name} />;
+				},
+				meta: {
+					className: "w-1",
+				},
+			}),
+			columnHelper.accessor((row: any) => row, {
+				id: "name",
+				header: intl.formatMessage({ id: "column.name" }),
+				cell: (info: any) => {
+					const value = info.getValue();
+					// Hack to reuse domains formatter
+					return <ValueWithDateFormatter value={value.name} createdOn={value.createdOn} />;
+				},
+			}),
+			columnHelper.accessor((row: any) => row.email, {
+				id: "email",
+				header: intl.formatMessage({ id: "column.email" }),
+				cell: (info: any) => {
+					return info.getValue();
+				},
+			}),
+			// TODO: formatter for roles
+			columnHelper.accessor((row: any) => row.roles, {
+				id: "roles",
+				header: intl.formatMessage({ id: "column.roles" }),
+				cell: (info: any) => {
+					return JSON.stringify(info.getValue());
+				},
+			}),
+			columnHelper.display({
+				id: "id", // todo: not needed for a display?
+				cell: (info: any) => {
+					return (
+						<span className="dropdown">
+							<button
+								type="button"
+								className="btn dropdown-toggle btn-action btn-sm px-1"
+								data-bs-boundary="viewport"
+								data-bs-toggle="dropdown"
+							>
+								<IconDotsVertical />
+							</button>
+							<div className="dropdown-menu dropdown-menu-end">
+								<span className="dropdown-header">
+									{intl.formatMessage(
+										{
+											id: "users.actions-title",
+										},
+										{ id: info.row.original.id },
+									)}
+								</span>
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onEditUser?.(info.row.original.id);
+									}}
+								>
+									<IconEdit size={16} />
+									{intl.formatMessage({ id: "user.edit" })}
+								</a>
+								<a className="dropdown-item" href="#">
+									<IconShield size={16} />
+									{intl.formatMessage({ id: "action.permissions" })}
+								</a>
+								<a className="dropdown-item" href="#">
+									<IconLock size={16} />
+									{intl.formatMessage({ id: "user.change-password" })}
+								</a>
+								{currentUserId !== info.row.original.id ? (
+									<>
+										<div className="dropdown-divider" />
+										<a className="dropdown-item" href="#">
+											<IconTrash size={16} />
+											{intl.formatMessage({ id: "action.delete" })}
+										</a>
+									</>
+								) : null}
+							</div>
+						</span>
+					);
+				},
+				meta: {
+					className: "text-end w-1",
+				},
+			}),
+		],
+		[columnHelper, currentUserId, onEditUser],
+	);
+
+	const tableInstance = useReactTable<User>({
+		columns,
+		data,
+		getCoreRowModel: getCoreRowModel(),
+		rowCount: data.length,
+		meta: {
+			isFetching,
+		},
+		enableSortingRemoval: false,
+	});
+
+	return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
+}

frontend/src/pages/Users/TableWrapper.tsx

@@ -0,0 +1,62 @@
+import { IconSearch } from "@tabler/icons-react";
+import { useState } from "react";
+import Alert from "react-bootstrap/Alert";
+import { Button, LoadingPage } from "src/components";
+import { useUser, useUsers } from "src/hooks";
+import { intl } from "src/locale";
+import { UserModal } from "src/modals";
+import Table from "./Table";
+
+export default function TableWrapper() {
+	const [editUserId, setEditUserId] = useState(0);
+	const { isFetching, isLoading, isError, error, data } = useUsers(["permissions"]);
+	const { data: currentUser } = useUser("me");
+
+	if (isLoading) {
+		return <LoadingPage />;
+	}
+
+	if (isError) {
+		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
+	}
+
+	return (
+		<div className="card mt-4">
+			<div className="card-status-top bg-orange" />
+			<div className="card-table">
+				<div className="card-header">
+					<div className="row w-full">
+						<div className="col">
+							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "users.title" })}</h2>
+						</div>
+						<div className="col-md-auto col-sm-12">
+							<div className="ms-auto d-flex flex-wrap btn-list">
+								<div className="input-group input-group-flat w-auto">
+									<span className="input-group-text input-group-text-sm">
+										<IconSearch size={16} />
+									</span>
+									<input
+										id="advanced-table-search"
+										type="text"
+										className="form-control form-control-sm"
+										autoComplete="off"
+									/>
+								</div>
+								<Button size="sm" className="btn-orange">
+									{intl.formatMessage({ id: "users.add" })}
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<Table
+					data={data ?? []}
+					isFetching={isFetching}
+					currentUserId={currentUser?.id}
+					onEditUser={(id: number) => setEditUserId(id)}
+				/>
+				{editUserId ? <UserModal userId={editUserId} onClose={() => setEditUserId(0)} /> : null}
+			</div>
+		</div>
+	);
+}

frontend/src/pages/Users/index.tsx

@@ -0,0 +1,12 @@
+import { HasPermission } from "src/components";
+import TableWrapper from "./TableWrapper";
+
+const Users = () => {
+	return (
+		<HasPermission permission="admin" type="manage">
+			<TableWrapper />
+		</HasPermission>
+	);
+};
+
+export default Users;