Merge pull request #54 from foundersandcoders/feat/actions-crud-management-issue-53

feat: implement comprehensive actions CRUD management

Author: JasonWarrenUK

src/app.css

@@ -258,6 +258,135 @@ h3 {
 	align-items: center;
 }
 
+.breadcrumb {
+	font-size: 1.25rem;
+	font-weight: 700;
+}
+
+.breadcrumb-list {
+	@apply m-0 flex list-none items-center p-0;
+	white-space: nowrap;
+	overflow: hidden;
+	min-width: 0;
+	flex: 1;
+}
+
+.breadcrumb-item {
+	@apply flex items-center flex-shrink-0;
+}
+
+.breadcrumb-item:last-child {
+	@apply flex-shrink min-w-0;
+	max-width: 100%;
+}
+
+.breadcrumb-link {
+	@apply text-accent-content cursor-pointer border-none bg-transparent p-0 font-normal underline transition-colors hover:text-white;
+}
+
+.breadcrumb-current {
+	@apply text-accent-content font-bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.breadcrumb-separator {
+	@apply text-accent-content/70 font-normal flex-shrink-0;
+	margin: 0 0.25rem;
+}
+
+.actions-crud {
+	@apply space-y-4;
+}
+
+.actions-header {
+	@apply mb-4;
+}
+
+.actions-list {
+	@apply space-y-3;
+}
+
+.action-item {
+	@apply card border-primary bg-base-100 mb-3 rounded-lg border-2 p-3 transition-shadow hover:shadow-md;
+}
+
+.action-view {
+	@apply flex items-start justify-between gap-3;
+}
+
+.action-content {
+	@apply flex-1;
+}
+
+.action-description {
+	@apply text-base-content mb-2 font-medium;
+}
+
+.action-date {
+	@apply text-base-content/60 text-xs;
+}
+
+.action-buttons {
+	@apply flex flex-shrink-0 gap-2;
+}
+
+.action-edit-form {
+	@apply space-y-3;
+}
+
+.action-description-input {
+	@apply textarea border-primary focus:border-accent w-full rounded-lg border p-3 outline-none;
+}
+
+.action-edit-buttons {
+	@apply flex gap-2;
+}
+
+.action-edit-buttons .btn-sm {
+	@apply btn btn-sm;
+}
+
+.action-edit-buttons .btn-submit {
+	@apply btn btn-accent hover:btn-secondary text-base-100 btn-sm;
+}
+
+.new-action-form {
+	@apply card border-primary bg-base-100 space-y-3 rounded-lg border-2 border-dashed p-4;
+}
+
+.new-action-buttons {
+	@apply flex gap-2;
+}
+
+.new-action-buttons .btn-sm {
+	@apply btn btn-sm;
+}
+
+.new-action-buttons .btn-submit {
+	@apply btn btn-accent hover:btn-secondary text-base-100 btn-sm;
+}
+
+.add-action-btn {
+	@apply border-primary hover:border-accent w-full;
+}
+
+/* Error states */
+.border-error {
+	@apply border-error;
+}
+
+/* Loading states */
+.btn:disabled {
+	@apply opacity-50 cursor-not-allowed;
+}
+
+.loading-xs {
+	width: 1rem;
+	height: 1rem;
+}
+
 @media (max-width: 375px) {
 	.dash-grid {
 		@apply grid-cols-1;

src/lib/components/cards/QuestionCard.svelte

@@ -7,6 +7,7 @@
 	import { getContext } from 'svelte';
 	import type { AppState } from '$lib/types/appState';
 	import ConfirmModal from '../ui/ConfirmModal.svelte';
+	import ActionsCRUD from '../ui/ActionsCRUD.svelte';
 
 	// App State
 	const getApp = getContext<() => AppState>('getApp');
@@ -52,8 +53,6 @@
 	let table: TableName = $state('responses');
 	let connectionDetails = $state<QuestionConnections>({
 		responseInput: null,
-		actionsInput: null,
-		actionType: null,
 		responseId: null,
 		visibility: 'private'
 	});
@@ -71,11 +70,6 @@
 			connectionDetails.responseInput.trim() !== ''
 	);
 
-	const hasActionContent = $derived(
-		connectionDetails.actionsInput !== null &&
-			connectionDetails.actionsInput !== undefined &&
-			connectionDetails.actionsInput.trim() !== ''
-	);
 
 	const buttonConfig = $derived(() => {
 		return isUpdate
@@ -87,9 +81,6 @@
 	$inspect(hasResponseContent).with((type, value) =>
 		console.log(`📝 hasResponseContent: ${type} ${value}`)
 	);
-	$inspect(hasActionContent).with((type, value) =>
-		console.log(`📝 hasActionContent: ${type} ${value}`)
-	);
 	$inspect(buttonConfig().primaryText).with((type, value) =>
 		console.log(`🔘 Button 1: ${type} ${value}`)
 	);
@@ -118,7 +109,6 @@
 
 		// Update visibility based on details or default to 'private'
 		visibility = connections.visibility || 'private';
-		connectionDetails.actionsInput = null;
 
 		const data = {
 			queryId: questionId,
@@ -178,19 +168,7 @@
 			</div>
 
 			<div id="question-{questionId}-actions" class="card-content">
-				<div id="question-{questionId}-action-response" class="flex flex-col">
-					<label for="question-{questionId}-action-response-text" class="form-label">
-						Would you like your manager to take any actions in response to this?
-					</label>
-
-					<textarea
-						id="question-{questionId}-actions-response-text"
-						bind:value={connectionDetails.actionsInput}
-						placeholder="Enter your response here..."
-						rows="3"
-						class="text-area form-textarea"
-					></textarea>
-				</div>
+				<ActionsCRUD responseId={connectionDetails.responseId} />
 			</div>
 
 			<div id="question-{questionId}-buttons" class="flex justify-around">
@@ -200,7 +178,6 @@
 					{table}
 					{isUpdate}
 					{hasResponseContent}
-					{hasActionContent}
 					details={connectionDetails}
 					{visibility}
 				/>
@@ -210,7 +187,6 @@
 					{table}
 					{isUpdate}
 					{hasResponseContent}
-					{hasActionContent}
 					details={connectionDetails}
 					{visibility}
 					onclick={isUpdate ? openDeleteModal : undefined}

src/lib/components/layouts/ViewHeader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import HelpButton from '../ui/HelpButton.svelte';
+	import Breadcrumb from '../ui/Breadcrumb.svelte';
 
 	interface Props {
 		title: string;
@@ -10,7 +11,7 @@
 </script>
 
 <div id="{title}-header" class="view-header">
-	<h2 class="text-accent-content">{title}</h2>
+	<Breadcrumb />
 
 	<div class="flex items-center gap-3">
 		{#if onclick}