@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.0

package/src/components/PreviewFull.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { PlussCore } from "../feature.config";
+const { Components } = PlussCore;
+const { Text } = Components;
+import fullNoTitle from "../images/fullNoTitle.png";
+import styles from "./PreviewFull.module.css";
+
+const PreviewFull = ({ backgroundColor, widgetTitle, titleClassName }) => {
+	return (
+		<div className={styles.previewFull}>
+			<Text type="body" className={titleClassName}>
+				{widgetTitle}
+			</Text>
+			<img
+				className={styles.previewFull__image}
+				style={{ backgroundColor }}
+				src={fullNoTitle}
+				alt="fullNoTitle"
+			/>
+		</div>
+	);
+};
+
+export default PreviewFull;

package/src/components/PreviewFull.module.css

@@ -0,0 +1,11 @@
+/* PreviewFull BEM CSS Module */
+
+/* Block */
+.previewFull {
+	position: relative;
+}
+
+/* Elements */
+.previewFull__image {
+	width: 100%;
+}

package/src/components/PreviewGrid.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const SVG_PATH =
+	"M12.1875 0.9375C11.1548 0.9375 9.67896 1.25977 8.7616 1.87866C7.0166 1.94275 5.82275 3.16772 5.62683 5.11047C5.50781 6.30981 5.61768 7.16858 5.68909 7.73621C5.71472 7.93396 5.74219 8.15735 5.73303 8.22327C5.71838 8.31116 5.70374 8.39905 5.69092 8.48694C5.61401 8.4906 5.54626 8.50159 5.48584 8.51807C4.71313 8.72498 4.38904 9.85474 4.73511 11.1456C4.98596 12.0813 5.51147 12.7844 6.08643 13.0005C6.38306 13.9087 6.81885 14.8114 7.36084 15.6244L3.03955 18.1274C1.16455 19.2114 0 21.2329 0 23.399V26.7188C0 27.4933 0.631714 28.125 1.40625 28.125H19.519C20.6287 29.2786 22.1832 30 23.9062 30C27.2662 30 30 27.2662 30 23.9062C30 21.2402 28.2751 18.9734 25.8856 18.1494L21.8115 15.5127C22.4158 14.7931 22.9193 13.8977 23.2397 12.9419C23.6847 12.7478 24.0765 12.2168 24.267 11.4972C24.3823 11.0669 24.4061 10.6329 24.3311 10.274C24.2377 9.80896 23.9777 9.48669 23.6224 9.39148C23.5986 9.38416 23.573 9.37866 23.5455 9.375C23.4979 9.06738 23.4174 8.76709 23.2892 8.39905C23.3734 8.42102 23.465 8.45032 23.5437 8.48145C23.703 8.54919 23.8898 8.52173 24.0234 8.4082C24.1589 8.29651 24.2194 8.1189 24.1827 7.94861C23.606 5.31006 21.6467 3.73535 18.9441 3.73535H18.5962C18.5248 3.73535 18.446 3.74084 18.371 3.74634C17.1332 1.9519 15.1355 0.9375 12.6562 0.9375H12.1875ZM12.1875 1.875H12.6562C15.5017 1.875 17.5562 3.32886 18.3984 5.89783C18.0743 5.86121 17.7393 5.90149 17.5104 6.12305C17.3309 6.29333 17.1625 6.62109 17.3749 7.19971C17.6642 7.98523 17.7667 8.45032 17.7979 9.1095C17.8052 9.27795 17.9041 9.4281 18.0524 9.505C18.2007 9.58008 18.3801 9.57092 18.5211 9.47937C18.598 9.42993 18.6383 9.42444 18.6475 9.42444C18.761 9.46289 18.9661 10.0342 18.7335 10.9039C18.5028 11.7664 18.0597 12.1307 17.9224 12.1307C17.7136 12.1252 17.5323 12.2681 17.4738 12.4658C16.6827 15.1227 14.6155 17.8125 12.1875 17.8125C9.75952 17.8125 7.69226 15.1227 6.90125 12.4658C6.84265 12.2681 6.66138 12.1307 6.45264 12.1307C6.31531 12.1307 5.87219 11.7664 5.64148 10.9039C5.4071 10.0269 5.61768 9.45374 5.72571 9.42444C5.72754 9.42444 5.76782 9.42444 5.85205 9.47937C5.99487 9.57092 6.17432 9.58008 6.32263 9.505C6.47278 9.4281 6.56799 9.27795 6.57715 9.1095C6.58813 8.86414 6.61377 8.62061 6.65588 8.38623C6.69067 8.18481 6.66321 7.95959 6.61926 7.61719C6.55151 7.09167 6.45081 6.297 6.56067 5.20386C6.70898 3.70789 7.58606 2.8125 8.91357 2.8125C9.01611 2.8125 9.11316 2.77954 9.19556 2.71912C9.83826 2.23755 11.1237 1.875 12.1875 1.875ZM18.913 4.67285H18.9459C20.9491 4.67285 22.4121 5.66528 23.0566 7.42676C22.8461 7.43042 22.6392 7.48352 22.4835 7.63367C22.3224 7.78564 22.1704 8.07312 22.3535 8.56384C22.5641 9.13879 22.6392 9.47571 22.6611 9.95361C22.6685 10.1221 22.7655 10.2722 22.9156 10.3491C23.0621 10.4224 23.2361 10.415 23.3752 10.329C23.4338 10.4608 23.4851 10.7977 23.3624 11.2555C23.2178 11.792 22.9486 12.0612 22.8735 12.0831H22.8717C22.6648 12.0831 22.4817 12.2186 22.4231 12.4182C22.0312 13.7366 21.2512 14.9469 20.3394 15.6537C20.1343 15.813 20.0958 16.1078 20.2551 16.311C20.3467 16.4319 20.4858 16.4941 20.625 16.4941C20.7257 16.4941 20.8264 16.463 20.9125 16.3971C20.9912 16.3348 21.0681 16.2653 21.145 16.1993L23.6591 17.8253C22.9193 17.8546 22.2144 18.0103 21.5643 18.2812C21.4856 18.2318 21.416 18.1732 21.3354 18.1274L17.0142 15.6244C17.5562 14.8114 17.9901 13.9087 18.2886 13.0005C18.8617 12.7844 19.389 12.0831 19.6381 11.1456C19.9841 9.85474 19.6619 8.72498 18.8892 8.51807C18.8306 8.50342 18.761 8.4906 18.6841 8.48694C18.62 7.98523 18.4918 7.51648 18.2538 6.87561C18.2483 6.8573 18.2428 6.84082 18.2373 6.82617C18.4021 6.83899 18.6676 6.90674 18.8837 6.99463C19.0466 7.06238 19.2316 7.03491 19.3652 6.92139C19.4989 6.80969 19.5593 6.63208 19.5209 6.46179C19.3799 5.81543 19.1748 5.21667 18.913 4.67285ZM9.62219 4.74609C9.28711 4.7168 8.9502 4.86877 8.75793 5.16357L8.00537 6.30432C7.86255 6.52039 7.92297 6.81152 8.13904 6.95435C8.2196 7.00745 8.3075 7.03125 8.39539 7.03125C8.54919 7.03125 8.69751 6.95801 8.78906 6.82068L9.53979 5.67993L10.2722 6.03699C11.6071 6.68701 13.0994 7.03125 14.5844 7.03125H15.7819C16.04 7.03125 16.2506 6.82068 16.2506 6.5625C16.2506 6.30432 16.04 6.09375 15.7819 6.09375H14.5844C13.2404 6.09375 11.8909 5.78247 10.6842 5.19287L9.95178 4.83582C9.84558 4.78455 9.73389 4.75525 9.62219 4.74609ZM7.9248 16.3788C9.06555 17.7704 10.5487 18.75 12.1875 18.75C13.8263 18.75 15.3094 17.7722 16.4502 16.3806L20.6104 18.7885C18.9294 19.8761 17.8125 21.7621 17.8125 23.9062C17.8125 25.1147 18.1696 26.239 18.7793 27.1875H1.40625C1.14807 27.1875 0.9375 26.9769 0.9375 26.7188V23.399C0.9375 21.5662 1.92261 19.856 3.51013 18.9368L7.9248 16.3788ZM23.9062 18.75C26.7499 18.75 29.0625 21.0626 29.0625 23.9062C29.0625 26.7499 26.7499 29.0625 23.9062 29.0625C21.0626 29.0625 18.75 26.7499 18.75 23.9062C18.75 21.0626 21.0626 18.75 23.9062 18.75ZM8.4668 18.75C8.28369 18.739 8.10425 18.8361 8.01819 19.0082C7.90283 19.2407 7.99622 19.5227 8.22693 19.6381L11.9769 21.5131C12.0447 21.546 12.1161 21.5625 12.1875 21.5625C12.2589 21.5625 12.3322 21.546 12.3981 21.5131L16.1481 19.6381C16.3788 19.5227 16.4722 19.2407 16.3568 19.0082C16.2415 18.7775 15.9595 18.6841 15.7269 18.7994L12.1875 20.5701L8.64807 18.7994C8.58948 18.7701 8.52722 18.7555 8.4668 18.75ZM23.9062 20.625C23.6481 20.625 23.4375 20.8356 23.4375 21.0938V23.4375H21.0938C20.8356 23.4375 20.625 23.6481 20.625 23.9062C20.625 24.1644 20.8356 24.375 21.0938 24.375H23.4375V26.7188C23.4375 26.9769 23.6481 27.1875 23.9062 27.1875C24.1644 27.1875 24.375 26.9769 24.375 26.7188V24.375H26.7188C26.9769 24.375 27.1875 24.1644 27.1875 23.9062C27.1875 23.6481 26.9769 23.4375 26.7188 23.4375H24.375V21.0938C24.375 20.8356 24.1644 20.625 23.9062 20.625ZM2.8125 24.375C2.55432 24.375 2.34375 24.5856 2.34375 24.8438V25.7812C2.34375 26.0394 2.55432 26.25 2.8125 26.25C3.07068 26.25 3.28125 26.0394 3.28125 25.7812V24.8438C3.28125 24.5856 3.07068 24.375 2.8125 24.375ZM5.15625 24.375C4.89807 24.375 4.6875 24.5856 4.6875 24.8438V25.7812C4.6875 26.0394 4.89807 26.25 5.15625 26.25C5.41443 26.25 5.625 26.0394 5.625 25.7812V24.8438C5.625 24.5856 5.41443 24.375 5.15625 24.375ZM7.5 24.375C7.24182 24.375 7.03125 24.5856 7.03125 24.8438V25.7812C7.03125 26.0394 7.24182 26.25 7.5 26.25C7.75818 26.25 7.96875 26.0394 7.96875 25.7812V24.8438C7.96875 24.5856 7.75818 24.375 7.5 24.375ZM9.84375 24.375C9.58557 24.375 9.375 24.5856 9.375 24.8438V25.7812C9.375 26.0394 9.58557 26.25 9.84375 26.25C10.1019 26.25 10.3125 26.0394 10.3125 25.7812V24.8438C10.3125 24.5856 10.1019 24.375 9.84375 24.375ZM12.1875 24.375C11.9293 24.375 11.7188 24.5856 11.7188 24.8438V25.7812C11.7188 26.0394 11.9293 26.25 12.1875 26.25C12.4457 26.25 12.6562 26.0394 12.6562 25.7812V24.8438C12.6562 24.5856 12.4457 24.375 12.1875 24.375ZM14.5312 24.375C14.2731 24.375 14.0625 24.5856 14.0625 24.8438V25.7812C14.0625 26.0394 14.2731 26.25 14.5312 26.25C14.7894 26.25 15 26.0394 15 25.7812V24.8438C15 24.5856 14.7894 24.375 14.5312 24.375ZM16.875 24.375C16.6168 24.375 16.4062 24.5856 16.4062 24.8438V25.7812C16.4062 26.0394 16.6168 26.25 16.875 26.25C17.1332 26.25 17.3438 26.0394 17.3438 25.7812V24.8438C17.3438 24.5856 17.1332 24.375 16.875 24.375Z";
+
+const PreviewGrid = ({ colour }) => {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox={"0 0 30 30"}>
+			<path key={SVG_PATH.substring(0, 20)} d={SVG_PATH} fill={colour} />
+		</svg>
+	);
+};
+
+export default PreviewGrid;

package/src/components/PreviewWidget.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { PlussCore } from "../feature.config";
+const { Components } = PlussCore;
+const { Text } = Components;
+import previewWidget from "../images/previewWidget.png";
+import styles from "./PreviewWidget.module.css";
+
+const PreviewWidget = ({ backgroundColor, widgetTitle, titleClassName }) => {
+	return (
+		<div className={styles.previewWidget}>
+			<img
+				className={styles.previewWidget__image}
+				style={{ backgroundColor }}
+				src={previewWidget}
+				alt="previewWidget"
+			/>
+			<Text
+				type="body"
+				className={`${titleClassName} ${styles.previewWidget__title}`}
+			>
+				{widgetTitle}
+			</Text>
+		</div>
+	);
+};
+
+export default PreviewWidget;

package/src/components/PreviewWidget.module.css

@@ -0,0 +1,15 @@
+/* PreviewWidget BEM CSS Module */
+
+/* Block */
+.previewWidget {
+	position: relative;
+}
+
+/* Elements */
+.previewWidget__image {
+	width: 100%;
+}
+
+.previewWidget__title {
+	/* Title styles are handled by titleClassName prop */
+}

package/src/components/SidebarLayout.jsx

@@ -0,0 +1,292 @@
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { withRouter } from "react-router";
+import { HubSidebar, DeleteConfirmationPopup } from "./index.js";
+import {
+	selectWizardMode,
+	selectCurrentStep,
+	selectIsStepComplete,
+	selectIsStepAccessible,
+	selectStepProgress,
+	selectIsEditMode,
+	selectIsCreateMode,
+	selectDefinition,
+	selectDefinitionId,
+} from "../selectors/featureBuilderSelectors";
+import { goToStep } from "../actions/wizardActions";
+import { useDispatch } from "react-redux";
+import { PlussCore } from "../feature.config";
+import { values } from "../values.config";
+import styles from "./SidebarLayout.module.css";
+
+const { Helper, Session } = PlussCore;
+const { getUrl } = Helper;
+const { authedFunction } = Session;
+
+/**
+ * Sidebar Layout component for feature builder wizard
+ * Provides navigation sidebar with step progression, completion tracking
+ * Includes delete functionality for feature definitions
+ * Manages step accessibility based on wizard mode and validation state
+ *
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} props.children - Child components to render in main content area
+ * @param {Object} props.history - React Router history object for navigation
+ * @returns {React.ReactElement} Layout component with sidebar navigation
+ *
+ * @example
+ * <SidebarLayout history={historyObject}>
+ *   <YourMainContent />
+ * </SidebarLayout>
+ */
+const SideBarInner = (props) => {
+	const { children, history } = props;
+	const dispatch = useDispatch();
+
+	// Get wizard state
+	const mode = useSelector(selectWizardMode);
+	const isEditMode = useSelector(selectIsEditMode);
+	const isCreateMode = useSelector(selectIsCreateMode);
+	const currentStep = useSelector(selectCurrentStep);
+	const stepProgress = useSelector(selectStepProgress);
+	const definition = useSelector(selectDefinition);
+	const definitionId = useSelector(selectDefinitionId);
+	const auth = useSelector((state) => state.auth);
+
+	// Delete functionality state
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+	const [isDeleting, setIsDeleting] = useState(false);
+
+	const goTo = (url) => history.push(url);
+
+	const isSelected = (url) => {
+		return history.location.pathname === url;
+	};
+
+	// Define step configuration with dynamic URL based on mode
+	const getStepUrl = (stepKey) => {
+		// Always use /definition/ in the URL since that's how routes are registered
+		return `/feature-builder/definition/${stepKey}`;
+	};
+
+	const steps = [
+		{
+			key: "overview",
+			text: "Feature Overview",
+			icon: "info-circle",
+			url: getStepUrl("overview"),
+		},
+		{
+			key: "fields",
+			text: "Configure Fields",
+			icon: "edit",
+			url: getStepUrl("fields"),
+		},
+		{
+			key: "layout",
+			text: "Choose Layout",
+			icon: "columns",
+			url: getStepUrl("layout"),
+		},
+	];
+
+	// Build sidebar items based on mode
+	const buildSidebarItems = () => {
+		return steps.map((step, index) => {
+			const isCompleted = selectIsStepComplete(step.key);
+			const isAccessible = selectIsStepAccessible(step.key);
+
+			// Add step number to text for better clarity
+			const stepText = `${index + 1}. ${step.text}`;
+
+			const itemProps = {
+				type: "navItem",
+				text: stepText,
+				icon: step.icon,
+				selected: isSelected(step.url),
+				onclick: isAccessible
+					? () => {
+							goTo(step.url);
+							dispatch(goToStep(step.key));
+						}
+					: null,
+				isFontAwesome: true,
+				// Enhanced completion indicator
+				completed: isCompleted,
+				// Allow navigation to completed steps even in create mode
+				disabled: mode === "create" && !isAccessible,
+			};
+
+			return itemProps;
+		});
+	};
+
+	// Determine sidebar title - always use "Build Your Feature" now
+	const getSidebarTitle = () => {
+		return "Build Your Feature";
+	};
+
+	// Simple help text
+	const getHelpText = () => {
+		return "Get help with feature builder";
+	};
+
+	// Build sidebar sections - simplified without progress section
+	const sidebarSections = [
+		{
+			title: getSidebarTitle(),
+			items: buildSidebarItems(),
+		},
+	];
+
+	// Delete functionality handlers
+	const handleDeleteClick = () => {
+		setShowDeleteConfirm(true);
+	};
+
+	const handleConfirmDelete = async () => {
+		if (!definition) return;
+
+		setIsDeleting(true);
+		try {
+			await authedFunction({
+				method: "POST",
+				url: getUrl("feature-builder", "definition/update/delete"),
+				data: { id: definitionId, site: auth.site },
+			});
+
+			// Redirect to welcome screen after deletion
+			history.push("/feature-builder/definition/overview");
+		} finally {
+			setIsDeleting(false);
+			setShowDeleteConfirm(false);
+		}
+	};
+
+	const handleCancelDelete = () => {
+		setShowDeleteConfirm(false);
+	};
+
+	// Add effect to manually attach click handlers since HubSidebar might not use onclick properly
+	useEffect(() => {
+		const attachClickHandlers = () => {
+			const stepsWithUrls = [
+				{ key: "overview", url: getStepUrl("overview") },
+				{ key: "fields", url: getStepUrl("fields") },
+				{ key: "layout", url: getStepUrl("layout") },
+			];
+
+			stepsWithUrls.forEach((step) => {
+				const navItem = Array.from(
+					document.querySelectorAll(".sideNav-item"),
+				).find(
+					(item) =>
+						item.textContent &&
+						item.textContent.includes(
+							step.key === "overview"
+								? "Feature Overview"
+								: step.key === "fields"
+									? "Configure Fields"
+									: "Choose Layout",
+						),
+				);
+
+				if (navItem) {
+					// Remove any existing click listeners
+					navItem.onclick = null;
+
+					// Check if this step is accessible
+					const isAccessible = selectIsStepAccessible(step.key)({
+						[values.reducerKey]: {
+							wizard: {
+								mode: mode,
+								navigation: {
+									currentStep: currentStep,
+								},
+							},
+						},
+					});
+
+					// Add our click handler only if accessible
+					if (isAccessible) {
+						navItem.onclick = (event) => {
+							event.preventDefault();
+							event.stopPropagation();
+							history.push(step.url);
+							dispatch(goToStep(step.key));
+						};
+					}
+
+					// Make sure it's styled appropriately
+					navItem.style.cursor = isAccessible ? "pointer" : "not-allowed";
+					navItem.style.pointerEvents = "auto";
+					navItem.style.opacity = isAccessible ? "1" : "0.5";
+				}
+			});
+		};
+
+		// Initial attachment
+		attachClickHandlers();
+
+		// Re-attach after a short delay to ensure HubSidebar has rendered
+		const timeoutId = setTimeout(attachClickHandlers, 100);
+
+		// Also try to re-attach when DOM changes (observe for mutations)
+		const observer = new MutationObserver(() => {
+			setTimeout(attachClickHandlers, 50);
+		});
+
+		// Start observing the document body for changes
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true,
+		});
+
+		return () => {
+			clearTimeout(timeoutId);
+			observer.disconnect();
+		};
+	}, [history, dispatch, isEditMode, isCreateMode, currentStep]);
+
+	// Show sidebar in all modes
+	const shouldShowSidebar = true;
+
+	return (
+		<div className="hub-wrapperContainer">
+			{shouldShowSidebar && (
+				<HubSidebar
+					sections={sidebarSections}
+					helpGuide={{
+						text: getHelpText(),
+						url: "https://www.plusscommunities.com/user-guide",
+					}}
+				/>
+			)}
+
+			{/* Dev Delete Button - Absolute positioned at bottom of sidebar */}
+			{shouldShowSidebar && (
+				<button onClick={handleDeleteClick} className={styles.devDeleteButton}>
+					DELETE FEATURE DEF
+				</button>
+			)}
+
+			<div className="hub-contentWrapper">
+				<div className={styles.fullWidthContainer}>
+					<div className={styles.contentContainer}>{children}</div>
+				</div>
+			</div>
+
+			{/* Delete Confirmation Popup */}
+			<DeleteConfirmationPopup
+				isOpen={showDeleteConfirm}
+				listing={definition}
+				onConfirm={handleConfirmDelete}
+				onCancel={handleCancelDelete}
+				isDeleting={isDeleting}
+				deleteType="featureDefinition"
+			/>
+		</div>
+	);
+};
+
+export const SidebarLayout = withRouter(SideBarInner);

package/src/components/SidebarLayout.module.css

@@ -0,0 +1,145 @@
+.fullWidthContent {
+	max-width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 2rem 2rem 3rem 2rem; /* Add extra bottom padding */
+}
+
+/* Full-width container that allows scrollbar at edge */
+.fullWidthContainer {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0; /* Allow content to determine height */
+	width: 100%; /* Take full width to ensure scrollbar is at edge */
+}
+
+/* Content container to keep content centered */
+.contentContainer {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	max-width: 960px;
+	margin: 0 auto;
+	padding: 64px 32px;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+/* Legacy container class for backward compatibility */
+.container{
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0; /* Allow content to determine height */
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 64px 32px;
+}
+
+/* Responsive adjustments for content container */
+@media (max-width: 768px) {
+	.contentContainer {
+		padding: 1.5rem 1.5rem 2.5rem 1.5rem; /* Slightly reduced but still adequate */
+	}
+	.container {
+		padding: 1.5rem 1.5rem 2.5rem 1.5rem; /* Legacy container support */
+	}
+}
+
+@media (max-width: 480px) {
+	.contentContainer {
+		padding: 1rem 1rem 2rem 1rem; /* Maintain padding on small screens */
+	}
+	.container {
+		padding: 1rem 1rem 2rem 1rem; /* Legacy container support */
+	}
+}
+
+/* Enhanced sidebar navigation for progress indication */
+:global(.hub-sideBar) {
+	/* Make sidebar more prominent during creation mode */
+}
+
+:global(.sideNav-item.isCurrent) {
+	background: var(--colour-purple, #6e79c5) !important;
+	color: var(--colour-white, #ffffff) !important;
+	font-weight: 600 !important;
+	border-left: 4px solid var(--colour-branding-dark, #364196) !important;
+}
+
+:global(.sideNav-item.isCurrent) i {
+	color: var(--colour-white, #ffffff) !important;
+}
+
+:global(.sideNav-item.isCompleted) {
+	color: var(--colour-branding-dark, #364196) !important;
+	position: relative;
+}
+
+:global(.sideNav-item.isCompleted::after) {
+	content: "✓";
+	position: absolute;
+	right: 1rem;
+	top: 50%;
+	transform: translateY(-50%);
+	color: var(--colour-branding-dark, #364196);
+	font-weight: bold;
+}
+
+:global(.sideNav-item.isDisabled) {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+/* Enhanced progress section */
+:global(.hub-sideBar-section) {
+	border-bottom: 2px solid var(--colour-branding-main-fade, rgba(74, 87, 183, 0.15));
+	padding-bottom: 1rem;
+	margin-bottom: 1rem;
+}
+
+:global(.hub-sideBar-section:last-child) {
+	border-bottom: none;
+}
+
+/* Delete button styling - bold red for development */
+.deleteButton {
+	color: #dc3545 !important;
+	font-weight: bold !important;
+}
+
+:global(.sideNav-item.deleteButton) {
+	color: #dc3545 !important;
+	font-weight: bold !important;
+}
+
+:global(.sideNav-item.deleteButton:hover) {
+	background-color: rgba(220, 53, 69, 0.1) !important;
+}
+
+:global(.sideNav-item.deleteButton i) {
+	color: #dc3545 !important;
+}
+
+/* Development delete button */
+.devDeleteButton {
+	position: absolute;
+	bottom: 20px;
+	left: 20px;
+	background-color: #ff0000;
+	color: #ffffff;
+	border: none;
+	padding: 8px 12px;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 12px;
+	font-weight: bold;
+	z-index: 1000;
+	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
+
+.devDeleteButton:hover {
+	background-color: #cc0000;
+}

package/src/components/SkeletonLoader.jsx

@@ -0,0 +1,128 @@
+import React from "react";
+import styles from "./SkeletonLoader.module.css";
+
+const SkeletonLoader = ({ type = "card", count = 1, className = "" }) => {
+	const renderSkeletonItem = () => {
+		switch (type) {
+			case "listing-card":
+				return (
+					<div className={styles.listingCard}>
+						<div className={styles.listingCardHeader}>
+							<div className={`${styles.skeletonItem} ${styles.icon}`}></div>
+							<div className={`${styles.skeletonItem} ${styles.title}`}></div>
+						</div>
+						<div className={styles.listingCardBody}>
+							<div
+								className={`${styles.skeletonItem} ${styles.description}`}
+							></div>
+							<div
+								className={`${styles.skeletonItem} ${styles.description}`}
+							></div>
+						</div>
+						<div className={styles.listingCardFooter}>
+							<div
+								className={`${styles.skeletonItem} ${styles.smallText}`}
+							></div>
+							<div className={`${styles.skeletonItem} ${styles.button}`}></div>
+						</div>
+					</div>
+				);
+
+			case "form-field":
+				return (
+					<div className={styles.formField}>
+						<div className={styles.formFieldHeader}>
+							<div
+								className={`${styles.skeletonItem} ${styles.fieldType}`}
+							></div>
+							<div
+								className={`${styles.skeletonItem} ${styles.fieldActions}`}
+							></div>
+						</div>
+						<div className={styles.formFieldBody}>
+							<div className={`${styles.skeletonItem} ${styles.label}`}></div>
+							<div className={`${styles.skeletonItem} ${styles.input}`}></div>
+							<div
+								className={`${styles.skeletonItem} ${styles.helpText}`}
+							></div>
+						</div>
+					</div>
+				);
+
+			case "layout-option":
+				return (
+					<div className={styles.layoutOption}>
+						<div
+							className={`${styles.skeletonItem} ${styles.layoutPreview}`}
+						></div>
+						<div className={styles.layoutContent}>
+							<div
+								className={`${styles.skeletonItem} ${styles.layoutTitle}`}
+							></div>
+							<div
+								className={`${styles.skeletonItem} ${styles.layoutDescription}`}
+							></div>
+						</div>
+					</div>
+				);
+
+			case "form-input":
+				return (
+					<div className={styles.formInput}>
+						<div className={`${styles.skeletonItem} ${styles.label}`}></div>
+						<div className={`${styles.skeletonItem} ${styles.input}`}></div>
+					</div>
+				);
+
+			case "button":
+				return (
+					<div className={`${styles.skeletonItem} ${styles.button}`}></div>
+				);
+
+			case "table-row":
+				return (
+					<tr className={styles.tableRow}>
+						<td>
+							<div
+								className={`${styles.skeletonItem} ${styles.tableDate}`}
+							></div>
+						</td>
+						<td>
+							<div
+								className={`${styles.skeletonItem} ${styles.tableTitle}`}
+							></div>
+						</td>
+						<td>
+							<div
+								className={`${styles.skeletonItem} ${styles.tableActions}`}
+							></div>
+						</td>
+					</tr>
+				);
+
+			case "text":
+				return <div className={`${styles.skeletonItem} ${styles.text}`}></div>;
+
+			default:
+				return (
+					<div className={styles.card}>
+						<div className={`${styles.skeletonItem} ${styles.header}`}></div>
+						<div className={`${styles.skeletonItem} ${styles.content}`}></div>
+						<div className={`${styles.skeletonItem} ${styles.footer}`}></div>
+					</div>
+				);
+		}
+	};
+
+	return (
+		<div className={`${styles.skeletonLoader} ${className}`}>
+			{Array.from({ length: count }).map((_, index) => (
+				<div key={index} className={styles.skeletonItemWrapper}>
+					{renderSkeletonItem()}
+				</div>
+			))}
+		</div>
+	);
+};
+
+export default SkeletonLoader;