foundersandcoders · AlexVOiceover · Jun 8, 2025 · Jun 6, 2025 · Jun 7, 2025 · Jun 7, 2025
diff --git a/src/app.css b/src/app.css
@@ -2,22 +2,39 @@
 @import '@fontsource/metropolis';
 
 @theme {
-	--pink: #d600a8;
-	--black: #000000;
-	--white: #ffffff;
-	--light-pink: #ff2ed2;
-	--teal: #00a7a8;
-	--yellow: #ffcb00;
-	--orange: #ec5d2a;
-	--green: #29e2a3;
-	--purple: #7900d6;
-	--bright-blue: #2235e2;
-	--dark-purple: #4d1b9b;
+	--color-black: #000000;
+	--color-blue-bright: #2235e2;
+	--color-green: #29e2a3;
+	--color-orange: #ec5d2a;
+	--color-pink: #d600a8;
+	--color-pink-light: #ff2ed2;
+	--color-purple: #7900d6;
+	--color-purple-dark: #4d1b9b;
+	--color-teal: #00a7a8;
+	--color-white: #ffffff;
+	--color-yellow: #ffcb00;
 	--font-family-sans: Metropolis, Arial;
 }
 
 body {
-	background-color: var(--white);
-	color: var(--black);
+	background-color: var(--color-white);
+	color: var(--color-black);
 	font-family: var(--font-family-sans);
 }
+
+.dev {
+	margin: 1rem;
+	outline: 2px dashed var(--color-teal);
+	padding: 1rem;
+}
+
+.tile { outline-color: var(--color-blue-bright); }
+
+.list { outline-color: var(--color-purple); }
+
+.button { outline-color: var(--color-pink); }
+
+.inactive {
+	outline-color: var(--color-black);
+	font-style: italic;
+}
diff --git a/src/app.html b/src/app.html
@@ -6,6 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
+
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>

diff --git a/src/lib/components/footer.svelte b/src/lib/components/footer.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	let { devMode, profileId } = $props();
+</script>
+
+<footer id="dev-info" class="dev flex flex-row justify-between">
+  <div class="dev">
+    {#if profileId}
+      <p>Profile ID: {profileId}</p>
+    {:else}
+      <p>Not Logged In</p>
+    {/if}
+  </div>
+
+  <div class="dev">
+    <p>Dev Mode: {devMode}</p>
+  </div>
+</footer>
diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+
+	const toggleDevMode = getContext<() => void>('toggleDevMode');
+	const onToggleDevMode = () => { toggleDevMode() };
+</script>
+
+<header class="dev flex flex-row justify-between">
+	<h1 class="dev">
+		<strike>Beacons</strike> Questionnaire
+	</h1>
+
+	<button onclick={onToggleDevMode} class="dev button">
+		Toggle Dev Mode
+	</button>
+</header>
diff --git a/src/lib/components/logic/dev.svelte.ts b/src/lib/components/logic/dev.svelte.ts
@@ -0,0 +1,15 @@
+let tileNum = $state(0);
+export function setTileNum(num: number) {
+  tileNum = num;
+}
+export function getTileNum(): number {
+  return tileNum;
+}
+
+let listNum = $state(0);
+export function setListNum(num: number) {
+  listNum = num;
+}
+export function getListNum(): number {
+  return listNum;
+}
diff --git a/src/lib/components/view/dash.svelte b/src/lib/components/view/dash.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { setListNum } from "$lib/components/logic/dev.svelte";
+	import { getUserActions } from "$lib/services/database/actions";
+	import { getQuestions } from "$lib/services/database/questions";
+	import type { View } from "$lib/types/ui";
+	import { getContext } from 'svelte';
+
+	const getProfileId = getContext<() => string>('profileId');
+	let profileId = $derived(getProfileId());
+
+	const setView = getContext<(view: View) => void>('setView');
+
+	let queryQuestions = $state(getQuestions());
+	let queryActions = $derived(profileId != "" ? getUserActions(profileId) : null);
+
+	function getCategories(questions: any) {
+		interface Question {
+			id: string;
+			question_text: string;
+			category: string;
+		};
+
+		const categories = questions.map(
+			// Extract the Categories
+			(question:Question) => question.category
+		).map(
+			// Convert to Title Case
+			(category:string) => category.split('_').map(
+				word => word.charAt(0).toUpperCase() + word.slice(1)
+			).join(' ')
+		);
+
+		// Remove Duplicates
+		const categoriesUnique = [...new Set(categories)];
+
+		return categoriesUnique;
+	}
+
+	const setViewList = (listNum: number) => {
+		setListNum(listNum);
+		setView("list");
+	};
+</script>
+
+<div class="dev">
+	<div id="dash-header" class="dev flex flex-row justify-between">
+		<h2>Dashboard View</h2>
+	</div>
+
+	<div id="dash-tiles" class="dev">
+		{#await queryActions}
+			<p>Loading...</p>
+		{:then result}
+			{#if result && result.data}
+				<button class="dev tile" onclick={() => setViewList(1)}>
+					<p>{result.data.length} Actions</p>
+				</button>
+			{:else}
+				<button class="dev inactive">
+					<p>0 Actions</p>
+				</button>
+			{/if}
+		{:catch error}
+			<p>Error Getting Actions: {error.message}</p>
+		{/await}
+
+		{#await queryQuestions}
+			<p>Loading...</p>
+		{:then result}
+			{#if result.data}
+				{#each getCategories(result.data) as category}
+					<button class="dev tile" onclick={() => setViewList(1)}>
+						<p>{category}</p>
+					</button>
+				{/each}
+			{:else}
+				<p>No categories found</p>
+			{/if}
+		{:catch error}
+			<p>Error Getting Questions: {error.message}</p>
+		{/await}
+	</div>
+</div>
diff --git a/src/lib/components/view/detail.svelte b/src/lib/components/view/detail.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { View } from "$lib/types/ui";
+	import { getContext } from 'svelte';
+
+	const setView = getContext<(view:View) => void>('setView');
+
+	const onBackClick = () => { setView("list") };
+</script>
+
+<div class="dev">
+	<div id="detail-header" class="dev flex flex-row justify-between">
+		<h2 class="dev">Detail View</h2>
+
+		<button onclick={onBackClick} class="dev button">
+			Back
+		</button>
+	</div>
+
+	<div id="detail-content" class="dev">
+	</div>
+</div>
diff --git a/src/lib/components/view/list.svelte b/src/lib/components/view/list.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { getListNum } from "$lib/components/logic/dev.svelte";
+	import type { View } from "$lib/types/ui";
+	import { getContext } from 'svelte';
+
+	const setView = getContext<(view:View) => void>('setView');
+
+	let entries = $state(getListNum());
+
+	const onBackClick = () => { setView("dash") };
+	const onListClick = () => { setView("detail") };
+</script>
+
+<div class="dev">
+	<div id="list-header" class="dev flex flex-row justify-between">
+		<h2 class="dev">List View</h2>
+
+		<button onclick={onBackClick} class="dev button">
+			Back
+		</button>
+	</div>
+
+	<div id="list-items" class="dev flex flex-row justify-left">
+		{#each [...Array(entries)] as _, i}
+			<button onclick={onListClick} class="dev list">
+				List Item {i + 1}
+			</button>
+		{/each}
+	</div>
+</div>
diff --git a/src/lib/types/ui.ts b/src/lib/types/ui.ts
@@ -0,0 +1,7 @@
+export interface ActionCheck {
+  isError: boolean;
+  exist: boolean;
+  count: number;
+}
+
+export type View = "dash" | "list" | "detail";
diff --git a/src/lib/utils/random.ts b/src/lib/utils/random.ts
@@ -0,0 +1,3 @@
+export function randomNum() {
+  return Math.ceil(Math.random() * 10);
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,7 +1,33 @@
 <script lang="ts">
 	import '../app.css';
+	import Header from "$lib/components/header.svelte";
+	import Footer from "$lib/components/footer.svelte";
+	import { setContext } from 'svelte';
+	import type { View } from "$lib/types/ui";
+
+	let devMode = $state<boolean>(true);
+	setContext('devMode', () => devMode);
+	setContext('toggleDevMode', () => { devMode = !devMode });
+
+	/* todo: Profile ID
+		This will need to be replaced by the authentication system
+		*/
+	let profileId = $derived(devMode ? "550e8400-e29b-41d4-a716-446655440001" : "");
+	setContext('profileId', () => profileId);
+
+	let view = $state<View>("dash");
+	setContext('view', () => view);
+	setContext('setView', (newView: View) => { view = newView });
 
 	let { children } = $props();
 </script>
 
+<Header />
+
 {@render children()}
+
+<Footer {devMode} {profileId}/>
+
+<!-- note: Header/Footer Components
+ 	It might be overkill to have the header & footer as separate components as they only appear here, but I'll do it that way for now as future-proofing
+	-->
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,19 @@
-<h1>Welcome to SvelteKit</h1>
-<p>
-	Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
-</p>
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import Dash from "$lib/components/view/dash.svelte";
+	import List from "$lib/components/view/list.svelte";
+	import Detail from "$lib/components/view/detail.svelte";
+	import type { View } from "$lib/types/ui";
+
+	const getView = getContext<() => View>('view');
+</script>
+
+<main id="view" class="dev">
+	{#if getView() === "dash"}
+		<Dash />
+	{:else if getView() === "list"}
+		<List />
+	{:else if getView() === "detail"}
+		<Detail />
+	{/if}
+</main>
diff --git a/vite.config.ts b/vite.config.ts
@@ -4,7 +4,10 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()],
+	plugins: [
+		tailwindcss(),
+		sveltekit()
+	],
 	test: {
 		workspace: [
 			{