@hotstaq/admin-panel 0.3.18 → 0.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hotstaq/admin-panel",
   "description": "",
-  "version": "0.3.18",
+  "version": "0.4.1",
   "main": "build/index.js",
   "scripts": {
     "start": "hotstaq --hotsite ./HotSite.json --env-file ./.env run --server-type web-api",

package/src/WebExport.ts

@@ -23,7 +23,13 @@ async function buildAssets (): Promise<any>
 				"AdminTable",
 				"AdminTableField",
 				"AdminTableRow",
-				"AdminText"]
+				"AdminText",
+				"AdminFormField",
+				"AdminAddPanel",
+				"AdminCardTable",
+				"AdminDetailPage",
+				"AdminDisclaimer",
+				"AdminEyebrowHeading"]
 		});
 }
 

package/src/components/admin-add-panel.ts

@@ -0,0 +1,210 @@
+import { HotStaq, Hot, HotAPI, HotComponent, HotComponentOutput } from "hotstaq";
+
+/**
+ * Self-contained inline add form. Replaces the modal opened by
+ * <admin-edit hot-type="add"> with a Bootstrap-collapse card that
+ * lives directly on the page — header carries the "+ Add" toggle,
+ * body holds the form fields. No cross-component DOM injection.
+ *
+ * Place this above an <admin-card-table>; when the user clicks the
+ * header toggle, the form panel slides down. On Save, the paired
+ * table is asked to refresh via `attached_list`.
+ *
+ * Usage:
+ *   <admin-add-panel name="bankAccountsAdd"
+ *                    hot-title="Add a bank account"
+ *                    hot-attached_list="bankAccountsList"
+ *                    hot-add_text="+ Add bank account"
+ *                    hot-button_title="Create"
+ *                    hot-onsave="<(values) => {...}Ra>">
+ *     <admin-form-field hot-field="name" hot-label="Name" hot-required="1"
+ *                       hot-col="col-md-6"></admin-form-field>
+ *     <admin-form-field hot-field="bankSyncAPIType" hot-label="Sync type"
+ *                       hot-control="select"
+ *                       hot-options="paypal_webhooks:PayPal Webhooks"
+ *                       hot-col="col-md-6"></admin-form-field>
+ *   </admin-add-panel>
+ */
+export class AdminAddPanel extends HotComponent
+{
+	/** Title shown in the card header (next to the toggle button). */
+	title: string;
+	/** Submit button label. */
+	button_title: string;
+	/** Cancel button label. Empty hides the cancel button. */
+	cancel_text: string;
+	/** Optional id of the partner <admin-card-table>; refreshList() is called after a successful save. */
+	attached_list: string;
+	/** Text shown on the header toggle button. */
+	add_text: string;
+	/** "1" / "true" → panel starts expanded. */
+	start_open: string;
+	/** What to run when the user clicks Save. Receives a values object built from hot-field inputs. Return false to keep the panel open. */
+	onsave: (values: any) => Promise<boolean | void>;
+
+	protected panelId: string;
+	protected formId: string;
+
+	constructor (copy: HotComponent | HotStaq, api: HotAPI)
+	{
+		super (copy, api);
+
+		this.tag             = "admin-add-panel";
+		this.title           = "";
+		this.button_title    = "Save";
+		this.cancel_text     = "Cancel";
+		this.attached_list   = "";
+		this.add_text        = "+ Add";
+		this.start_open      = "0";
+		this.onsave          = null;
+	}
+
+	/**
+	 * Wire submit + cancel handlers after the DOM is in place.
+	 * Bootstrap's data-bs-toggle handles open/close automatically.
+	 */
+	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
+	{
+		const self = this;
+		const root = document.getElementById (this.name);
+		if (root == null)
+			return (null);
+
+		const submitBtn = root.querySelector (".fl-add-panel-submit") as HTMLButtonElement | null;
+		const cancelBtn = root.querySelector (".fl-add-panel-cancel") as HTMLButtonElement | null;
+
+		if (submitBtn != null)
+		{
+			submitBtn.addEventListener ("click", async (e) =>
+				{
+					e.preventDefault ();
+					const values = self.collectFieldValues (root);
+					submitBtn.disabled = true;
+					try
+					{
+						let keepOpen: any = false;
+						if (typeof self.onsave === "function")
+							keepOpen = await self.onsave (values);
+
+						if (keepOpen === false || keepOpen == null)
+						{
+							self.resetFields (root);
+							self.collapsePanel ();
+							self.refreshAttachedList ();
+						}
+					}
+					catch (ex)
+					{
+						console.error ("admin-add-panel onsave threw:", ex);
+					}
+					finally
+					{
+						submitBtn.disabled = false;
+					}
+				});
+		}
+
+		if (cancelBtn != null)
+		{
+			cancelBtn.addEventListener ("click", (e) =>
+				{
+					e.preventDefault ();
+					self.resetFields (root);
+					self.collapsePanel ();
+				});
+		}
+
+		return (null);
+	}
+
+	protected collectFieldValues (root: HTMLElement): any
+	{
+		const out: any = {};
+		const nodes = root.querySelectorAll ("[hot-field]");
+		for (let i = 0; i < nodes.length; i++)
+		{
+			const el = nodes[i] as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+			const field = el.getAttribute ("hot-field");
+			if (field == null || field === "") continue;
+
+			if (el instanceof HTMLInputElement && el.type === "checkbox")
+				out[field] = el.checked;
+			else if (el instanceof HTMLInputElement && el.type === "number")
+				out[field] = el.value === "" ? null : Number (el.value);
+			else
+				out[field] = el.value;
+		}
+		return (out);
+	}
+
+	protected resetFields (root: HTMLElement): void
+	{
+		const nodes = root.querySelectorAll ("[hot-field]");
+		for (let i = 0; i < nodes.length; i++)
+		{
+			const el = nodes[i] as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+			if (el instanceof HTMLInputElement && el.type === "checkbox") el.checked = false;
+			else if (el instanceof HTMLSelectElement) el.selectedIndex = 0;
+			else el.value = "";
+		}
+	}
+
+	protected collapsePanel (): void
+	{
+		const panel = document.getElementById (this.panelId);
+		if (panel == null) return;
+		panel.classList.remove ("show");
+		const triggers = document.querySelectorAll (`[data-bs-target="#${this.panelId}"]`);
+		triggers.forEach (t => t.setAttribute ("aria-expanded", "false"));
+	}
+
+	protected refreshAttachedList (): void
+	{
+		if (this.attached_list === "") return;
+		const list: any = document.getElementById (this.attached_list);
+		if (list != null && typeof list.refreshList === "function")
+			list.refreshList ();
+	}
+
+	output (): string | HotComponentOutput[]
+	{
+		if (this.name === "")
+			throw new Error ("admin-add-panel: name is required");
+
+		this.panelId = `${this.name}Panel`;
+		this.formId  = `${this.name}Form`;
+
+		const showClass = (this.start_open === "1" || this.start_open === "true") ? " show" : "";
+		const ariaExp = showClass ? "true" : "false";
+		const titleHtml = this.title ? `<strong class="fl-add-panel-title">${this.title}</strong>` : `<span></span>`;
+		const cancelHtml = this.cancel_text
+			? `<button type="button" class="btn btn-sm btn-link text-muted fl-add-panel-cancel">${this.cancel_text}</button>`
+			: "";
+
+		// Single self-contained card. Header has the toggle, body is the
+		// collapse panel containing the form. Bootstrap's data-bs-toggle
+		// drives the open/close — no JS wiring needed for that.
+		return (`
+			<div id="${this.name}" class="card fl-add-panel mb-3">
+				<div class="card-header d-flex justify-content-between align-items-center">
+					${titleHtml}
+					<button type="button" class="btn btn-sm btn-primary fl-add-panel-toggle"
+						data-bs-toggle="collapse" data-bs-target="#${this.panelId}"
+						aria-expanded="${ariaExp}" aria-controls="${this.panelId}">${this.add_text}</button>
+				</div>
+				<div id="${this.panelId}" class="collapse fl-add-panel-body${showClass}">
+					<div class="card-body border-top">
+						<form id="${this.formId}" class="fl-add-panel-form">
+							<div class="row g-2 align-items-end">
+								<hot-place-here name="panelBody"></hot-place-here>
+							</div>
+							<div class="d-flex justify-content-end gap-2 mt-3">
+								${cancelHtml}
+								<button type="submit" class="btn btn-sm btn-success fl-add-panel-submit">${this.button_title}</button>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>`);
+	}
+}

package/src/components/admin-card-table.ts

@@ -0,0 +1,183 @@
+import { HotStaq, Hot, HotAPI, HotComponent, HotComponentOutput } from "hotstaq";
+
+/**
+ * Freelight-style card list. Renders campaign / project / member rows
+ * as cards on every viewport, with optional inline action buttons and
+ * a sub-line below the primary label.
+ *
+ * Replaces the click-row-opens-modal flow of <admin-table> + <admin-edit>:
+ * when `hot-detail-route` is set, the whole row becomes a link to the
+ * configured detail URL (e.g. "/budget/:id"). When `hot-detail-route` is
+ * empty, the row renders without navigation — the caller is expected to
+ * provide their own inline action buttons via `hot-row-actions`.
+ *
+ * Usage:
+ *   <admin-card-table id="bankAccountsList" hot-list-url="/v1/bank_accounts/list"
+ *                     hot-detail-route="/bankAccount/:id"
+ *                     hot-primary-field="name" hot-subline-field="bankSyncAPIType"
+ *                     hot-empty-text="No bank accounts yet.">
+ *   </admin-card-table>
+ *
+ * The component exposes a `.refreshList()` method on the rendered DOM
+ * element so callers (the paired admin-add-panel, an edit-save callback,
+ * etc.) can re-fetch without a page reload.
+ */
+export class AdminCardTable extends HotComponent
+{
+	/** Optional title shown in the card header. */
+	title: string;
+	/** Endpoint that returns { length, data: [...] } — usually the entity's list route. */
+	list_url: string;
+	/** JWT token to send as Authorization bearer. Empty for public endpoints. */
+	jwt: string;
+	/** Body params to POST with the list call (JSON). */
+	list_params: string;
+	/** Field name on each row used as the primary card label (default "name"). */
+	primary_field: string;
+	/** Optional second-line field rendered in muted text under the primary label. */
+	subline_field: string;
+	/** Pattern for the row's click target. ":id" interpolates row.id. Empty disables row navigation. */
+	detail_route: string;
+	/** Text shown when the list is empty. */
+	empty_text: string;
+	/** Text shown while the list is loading. */
+	loading_text: string;
+	/** Inner HTML template for the right-side action area, with ":id" placeholder. */
+	row_actions: string;
+	/** Slot name where the partner admin-add-panel injects its toggle button. */
+	add_slot: string;
+
+	constructor (copy: HotComponent | HotStaq, api: HotAPI)
+	{
+		super (copy, api);
+
+		this.tag           = "admin-card-table";
+		this.title         = "";
+		this.list_url      = "";
+		this.jwt           = "";
+		this.list_params   = "{}";
+		this.primary_field = "name";
+		this.subline_field = "";
+		this.detail_route  = "";
+		this.empty_text    = "No items yet.";
+		this.loading_text  = "Loading…";
+		this.row_actions   = "";
+		this.add_slot      = "";
+	}
+
+	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
+	{
+		const self = this;
+		const container = document.getElementById (this.name);
+		if (container == null)
+			return (null);
+
+		// Expose a refreshList() method on the rendered element so the
+		// partner add-panel (and any other caller) can re-fetch when a
+		// row changes.
+		(container as any).refreshList = function () { return self.fetchAndRender (); };
+
+		// Initial load.
+		self.fetchAndRender ();
+
+		return (null);
+	}
+
+	protected async fetchAndRender (): Promise<void>
+	{
+		const container = document.getElementById (this.name);
+		const list = container ? container.querySelector (".fl-card-list") as HTMLElement : null;
+		if (list == null) return;
+
+		try
+		{
+			let payload: any = {};
+			try { payload = JSON.parse (this.list_params || "{}"); } catch (e) { payload = {}; }
+
+			const headers: any = { "Content-Type": "application/json" };
+			if (this.jwt) headers["Authorization"] = "Bearer " + this.jwt;
+
+			const res = await fetch (this.list_url, {
+				method: "POST", headers: headers, body: JSON.stringify (payload)
+			});
+
+			if (!res.ok)
+			{
+				list.innerHTML = `<div class="text-danger small p-3">Could not load: HTTP ${res.status}</div>`;
+				return;
+			}
+
+			const result = await res.json ();
+			const rows: any[] = (result && Array.isArray (result.data)) ? result.data : (Array.isArray (result) ? result : []);
+
+			if (rows.length === 0)
+			{
+				list.innerHTML = `<div class="text-muted small text-center py-4">${this.empty_text}</div>`;
+				return;
+			}
+
+			list.innerHTML = rows.map ((row) => this.renderRow (row)).join ("");
+		}
+		catch (ex)
+		{
+			list.innerHTML = `<div class="text-danger small p-3">Could not load: ${(ex as Error).message}</div>`;
+		}
+	}
+
+	protected escapeHtml (s: any): string
+	{
+		return String (s == null ? "" : s)
+			.replace (/&/g, "&amp;").replace (/</g, "&lt;").replace (/>/g, "&gt;")
+			.replace (/"/g, "&quot;").replace (/'/g, "&#39;");
+	}
+
+	protected interpolate (template: string, row: any): string
+	{
+		if (!template) return "";
+		return template.replace (/:(\w+)/g, (_m, key) => this.escapeHtml (row[key] || ""));
+	}
+
+	protected renderRow (row: any): string
+	{
+		const primaryRaw = row[this.primary_field];
+		const primary = this.escapeHtml (primaryRaw != null && primaryRaw !== "" ? primaryRaw : (row.id || ""));
+		const sublineRaw = this.subline_field ? row[this.subline_field] : "";
+		const subline = sublineRaw ? `<div class="fl-card-row-sub text-muted small">${this.escapeHtml (sublineRaw)}</div>` : "";
+
+		const inner = `
+			<div class="fl-card-row-main">
+				<div class="fl-card-row-label">${primary}</div>
+				${subline}
+			</div>
+			<div class="fl-card-row-actions">${this.interpolate (this.row_actions, row)}</div>`;
+
+		if (this.detail_route)
+		{
+			const href = this.interpolate (this.detail_route, row);
+			return `<a href="${href}" class="fl-card-row fl-card-row-link list-group-item list-group-item-action">${inner}</a>`;
+		}
+		return `<div class="fl-card-row list-group-item">${inner}</div>`;
+	}
+
+	output (): string | HotComponentOutput[]
+	{
+		if (this.name === "")
+			throw new Error ("admin-card-table: id (name) is required");
+		if (this.list_url === "")
+			throw new Error ("admin-card-table: hot-list-url is required");
+
+		const titleHtml = this.title ? `<strong>${this.title}</strong>` : "";
+		const addSlotAttr = this.add_slot ? ` data-card-table-add-slot="${this.add_slot}"` : ` data-card-table-add-slot="${this.name}"`;
+
+		return (`
+			<div id="${this.name}" class="card fl-card-table mb-4">
+				<div class="card-header d-flex justify-content-between align-items-center">
+					${titleHtml}
+					<div class="fl-card-table-actions"${addSlotAttr}></div>
+				</div>
+				<div class="fl-card-list list-group list-group-flush">
+					<div class="text-muted small text-center py-4">${this.loading_text}</div>
+				</div>
+			</div>`);
+	}
+}

package/src/components/admin-detail-page.ts

@@ -0,0 +1,270 @@
+import { HotStaq, Hot, HotAPI, HotComponent, HotComponentOutput } from "hotstaq";
+
+/**
+ * Full-page detail chrome for an entity. Replaces the modal opened by
+ * <admin-edit hot-type="edit"> with a dedicated page (e.g. /budget/:id)
+ * that has its own back link, sections, and a sticky save bar at the
+ * bottom.
+ *
+ * The page is responsible for placing <admin-form-field>s inside the
+ * `<hot-place-here name="detailBody">` slot. This component handles:
+ *   - reading ?id from the URL
+ *   - GET'ing the entity via hot-get-url and populating form fields by
+ *     matching hot-field names against the response keys
+ *   - POST'ing values to hot-save-url on Save click
+ *   - DELETE'ing via hot-delete-url on Delete click (with confirm)
+ *   - showing a back link to hot-back-url
+ *
+ * Usage:
+ *   <admin-detail-page name="budgetDetail"
+ *                      hot-title="Budget"
+ *                      hot-back-url="/budgets"
+ *                      hot-back-text="← All budgets"
+ *                      hot-get-url="/v1/budgets/get"
+ *                      hot-save-url="/v1/budgets/edit"
+ *                      hot-delete-url="/v1/budgets/delete"
+ *                      hot-payload-key="budget"
+ *                      hot-jwt="${jwtToken}">
+ *     <admin-form-field hot-field="name" hot-label="Name" hot-required="1"></admin-form-field>
+ *     ...
+ *   </admin-detail-page>
+ */
+export class AdminDetailPage extends HotComponent
+{
+	/** Heading shown at the top of the page. */
+	title: string;
+	/** URL the back link points at. */
+	back_url: string;
+	/** Text on the back link. */
+	back_text: string;
+	/** GET-by-id endpoint. POSTed with { id: <id> }. */
+	get_url: string;
+	/** Edit/save endpoint. POSTed with { [payload_key]: { id, ...fields } }. */
+	save_url: string;
+	/** Optional delete endpoint. Hides the Delete button when blank. */
+	delete_url: string;
+	/** Wrapper key in the save payload (most DAO routes expect { budget: {...} } / { issue: {...} } etc). */
+	payload_key: string;
+	/** JWT bearer for the API calls. */
+	jwt: string;
+	/** URL query param that holds the entity id (default: "id"). */
+	id_param: string;
+	/** Save button text. */
+	save_text: string;
+	/** Delete button text. */
+	delete_text: string;
+	/** Confirmation prompt for delete. */
+	delete_confirm: string;
+
+	constructor (copy: HotComponent | HotStaq, api: HotAPI)
+	{
+		super (copy, api);
+
+		this.tag             = "admin-detail-page";
+		this.title           = "";
+		this.back_url        = "/";
+		this.back_text       = "← Back";
+		this.get_url         = "";
+		this.save_url        = "";
+		this.delete_url      = "";
+		this.payload_key     = "";
+		this.jwt             = "";
+		this.id_param        = "id";
+		this.save_text       = "Save";
+		this.delete_text     = "Delete";
+		this.delete_confirm  = "Are you sure you want to delete this?";
+	}
+
+	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
+	{
+		const self = this;
+		const page = document.getElementById (this.name);
+		if (page == null) return (null);
+
+		const id = self.readIdFromUrl ();
+		if (!id)
+		{
+			self.showError (page, "No id provided in the URL.");
+			return (null);
+		}
+
+		// Wire buttons.
+		const saveBtn   = page.querySelector (".fl-detail-save") as HTMLButtonElement | null;
+		const deleteBtn = page.querySelector (".fl-detail-delete") as HTMLButtonElement | null;
+
+		if (saveBtn != null)
+			saveBtn.addEventListener ("click", (e) => { e.preventDefault (); self.handleSave (page, id); });
+
+		if (deleteBtn != null)
+			deleteBtn.addEventListener ("click", (e) => { e.preventDefault (); self.handleDelete (id); });
+
+		// Load existing record.
+		self.fetchAndFill (page, id);
+
+		return (null);
+	}
+
+	protected readIdFromUrl (): string
+	{
+		const params = new URLSearchParams (window.location.search);
+		return params.get (this.id_param) || "";
+	}
+
+	protected showError (page: HTMLElement, msg: string): void
+	{
+		const fb = page.querySelector (".fl-detail-feedback") as HTMLElement | null;
+		if (fb) { fb.className = "fl-detail-feedback alert alert-danger"; fb.textContent = msg; }
+	}
+
+	protected showSuccess (page: HTMLElement, msg: string): void
+	{
+		const fb = page.querySelector (".fl-detail-feedback") as HTMLElement | null;
+		if (fb)
+		{
+			fb.className = "fl-detail-feedback alert alert-success";
+			fb.textContent = msg;
+			setTimeout (() => { fb.className = "fl-detail-feedback d-none"; fb.textContent = ""; }, 2500);
+		}
+	}
+
+	protected async fetchAndFill (page: HTMLElement, id: string): Promise<void>
+	{
+		try
+		{
+			const headers: any = { "Content-Type": "application/json" };
+			if (this.jwt) headers["Authorization"] = "Bearer " + this.jwt;
+			const res = await fetch (this.get_url, {
+				method: "POST", headers: headers, body: JSON.stringify ({ id: id })
+			});
+			if (!res.ok) { this.showError (page, "Could not load: HTTP " + res.status); return; }
+			const obj = await res.json ();
+			if (obj == null) { this.showError (page, "Record not found."); return; }
+			this.populateFields (page, obj);
+		}
+		catch (ex)
+		{
+			this.showError (page, "Could not load: " + (ex as Error).message);
+		}
+	}
+
+	protected populateFields (page: HTMLElement, obj: any): void
+	{
+		const nodes = page.querySelectorAll ("[hot-field]");
+		for (let i = 0; i < nodes.length; i++)
+		{
+			const el = nodes[i] as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+			const field = el.getAttribute ("hot-field");
+			if (field == null || field === "") continue;
+			const val = obj[field];
+			if (val == null) continue;
+			if (el instanceof HTMLInputElement && el.type === "checkbox")
+				el.checked = val === true || val === "true" || val === 1;
+			else
+				el.value = String (val);
+		}
+	}
+
+	protected collectValues (page: HTMLElement): any
+	{
+		const out: any = {};
+		const nodes = page.querySelectorAll ("[hot-field]");
+		for (let i = 0; i < nodes.length; i++)
+		{
+			const el = nodes[i] as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+			const field = el.getAttribute ("hot-field");
+			if (field == null || field === "") continue;
+			if (el instanceof HTMLInputElement && el.type === "checkbox")
+				out[field] = el.checked;
+			else if (el instanceof HTMLInputElement && el.type === "number")
+				out[field] = el.value === "" ? null : Number (el.value);
+			else
+				out[field] = el.value;
+		}
+		return out;
+	}
+
+	protected async handleSave (page: HTMLElement, id: string): Promise<void>
+	{
+		const values = this.collectValues (page);
+		values.id = id;
+		const body: any = this.payload_key ? { [this.payload_key]: values } : values;
+
+		const btn = page.querySelector (".fl-detail-save") as HTMLButtonElement | null;
+		if (btn) btn.disabled = true;
+		try
+		{
+			const headers: any = { "Content-Type": "application/json" };
+			if (this.jwt) headers["Authorization"] = "Bearer " + this.jwt;
+			const res = await fetch (this.save_url, {
+				method: "POST", headers: headers, body: JSON.stringify (body)
+			});
+			if (!res.ok)
+			{
+				let msg = "HTTP " + res.status;
+				try { const j = await res.json (); if (j && j.error) msg = j.error; } catch (e) {}
+				this.showError (page, "Save failed: " + msg);
+				return;
+			}
+			this.showSuccess (page, "Saved.");
+		}
+		catch (ex)
+		{
+			this.showError (page, "Save failed: " + (ex as Error).message);
+		}
+		finally
+		{
+			if (btn) btn.disabled = false;
+		}
+	}
+
+	protected async handleDelete (id: string): Promise<void>
+	{
+		if (!window.confirm (this.delete_confirm)) return;
+		try
+		{
+			const headers: any = { "Content-Type": "application/json" };
+			if (this.jwt) headers["Authorization"] = "Bearer " + this.jwt;
+			const res = await fetch (this.delete_url, {
+				method: "POST", headers: headers, body: JSON.stringify ({ id: id })
+			});
+			if (!res.ok) { alert ("Delete failed: HTTP " + res.status); return; }
+			window.location.href = this.back_url;
+		}
+		catch (ex)
+		{
+			alert ("Delete failed: " + (ex as Error).message);
+		}
+	}
+
+	output (): string | HotComponentOutput[]
+	{
+		if (this.name === "")
+			throw new Error ("admin-detail-page: id (name) is required");
+		if (this.get_url === "" || this.save_url === "")
+			throw new Error ("admin-detail-page: hot-get-url and hot-save-url are required");
+
+		const deleteBtn = this.delete_url
+			? `<button type="button" class="btn btn-outline-danger fl-detail-delete">${this.delete_text}</button>`
+			: "";
+
+		return (`
+			<div id="${this.name}" class="fl-detail-page">
+				<div class="container" style="max-width:880px;padding:1.5rem 1rem 7rem;">
+					<div class="mb-3"><a href="${this.back_url}" class="text-muted small text-decoration-none">${this.back_text}</a></div>
+					<h1 class="h3 mb-3">${this.title}</h1>
+					<div class="fl-detail-feedback d-none"></div>
+					<div class="card mb-3"><div class="card-body">
+						<div class="row g-3">
+							<hot-place-here name="detailBody"></hot-place-here>
+						</div>
+					</div></div>
+				</div>
+				<div class="fl-detail-save-bar">
+					<div class="container d-flex justify-content-between align-items-center" style="max-width:880px;">
+						${deleteBtn}
+						<button type="button" class="btn btn-primary fl-detail-save ms-auto">${this.save_text}</button>
+					</div>
+				</div>
+			</div>`);
+	}
+}