From 3d6e329ac07637898af1922d483ad5ed1ad8a367 Mon Sep 17 00:00:00 2001
From: curt <curt@crabinak.com>
Date: Mon, 4 Nov 2024 10:47:57 -0600
Subject: [PATCH 1/6] added DayDivider to Beam

---
 beam/src/components/BeamDayDivider.vue        | 38 +++++++++++++++++++
 beam/src/index.ts                             |  3 ++
 ...listview-day-divider_2024-11-04-16-47.json | 10 +++++
 common/reviews/api/beam.api.md                |  3 ++
 examples/beam/default.story.vue               | 22 +++++++++++
 5 files changed, 76 insertions(+)
 create mode 100644 beam/src/components/BeamDayDivider.vue
 create mode 100644 common/changes/@stonecrop/beam/feat-beam-listview-day-divider_2024-11-04-16-47.json

diff --git a/beam/src/components/BeamDayDivider.vue b/beam/src/components/BeamDayDivider.vue
new file mode 100644
index 00000000..258620a7
--- /dev/null
+++ b/beam/src/components/BeamDayDivider.vue
@@ -0,0 +1,38 @@
+<template>
+	<div class="beam_day-divider">
+		<h2>{{ getDate }}</h2>
+	</div>
+</template>
+<script setup lang="ts">
+import { defineProps, computed } from 'vue'
+const props = defineProps(['month', 'day', 'year'])
+
+const getDate = computed(() => {
+	const date = []
+	if (props.year) date.push(props.year)
+	if (props.month) date.push(props.month)
+	if (props.day) date.push(props.day)
+	const formattedDate = date.join(' - ')
+	return formattedDate
+})
+</script>
+<style scoped>
+.beam_day-divider {
+	text-align: center;
+	padding: 0.4rem;
+	background: var(--primary-color);
+	border: 1px solid var(--row-border-color);
+	border-right: none;
+	border-left: none;
+	box-sizing: border-box;
+	margin-bottom: 1rem;
+
+	& h2 {
+		text-align: center;
+		font-size: 1rem;
+		color: var(--primary-text-color);
+		margin: 0;
+		padding: 0;
+	}
+}
+</style>
diff --git a/beam/src/index.ts b/beam/src/index.ts
index 43486f40..7c031d11 100644
--- a/beam/src/index.ts
+++ b/beam/src/index.ts
@@ -17,6 +17,7 @@ import BeamHeading from './components/BeamHeading.vue'
 import BeamArrow from './components/BeamArrow.vue'
 import BeamBtn from './components/BeamBtn.vue'
 import BeamProgress from './components/BeamProgress.vue'
+import BeamDayDivider from './components/BeamDayDivider.vue'
 import 'themes/beam.css'
 
 /**
@@ -42,6 +43,7 @@ function install(app: App /* options */) {
 	app.component('BeamArrow', BeamArrow)
 	app.component('BeamBtn', BeamBtn)
 	app.component('BeamProgress', BeamProgress)
+	app.component('BeamDayDivider', BeamDayDivider)
 }
 
 export {
@@ -57,5 +59,6 @@ export {
 	ListView,
 	Navbar,
 	ScanInput,
+	BeamDayDivider,
 	install,
 }
diff --git a/common/changes/@stonecrop/beam/feat-beam-listview-day-divider_2024-11-04-16-47.json b/common/changes/@stonecrop/beam/feat-beam-listview-day-divider_2024-11-04-16-47.json
new file mode 100644
index 00000000..cf9c5544
--- /dev/null
+++ b/common/changes/@stonecrop/beam/feat-beam-listview-day-divider_2024-11-04-16-47.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/beam",
+      "comment": "added day divider to beam",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/beam"
+}
\ No newline at end of file
diff --git a/common/reviews/api/beam.api.md b/common/reviews/api/beam.api.md
index 9dc784b4..1810f5d7 100644
--- a/common/reviews/api/beam.api.md
+++ b/common/reviews/api/beam.api.md
@@ -6,6 +6,7 @@
 
 import ActionFooter from '@/components/ActionFooter.vue';
 import { App } from 'vue';
+import BeamDayDivider from './components/BeamDayDivider.vue';
 import BeamMetadata from './components/BeamMetadata.vue';
 import BeamModal from '@/components/BeamModal.vue';
 import BeamModalOutlet from '@/components/BeamModalOutlet.vue';
@@ -20,6 +21,8 @@ import ScanInput from '@/components/ScanInput.vue';
 
 export { ActionFooter }
 
+export { BeamDayDivider }
+
 export { BeamMetadata }
 
 export { BeamModal }
diff --git a/examples/beam/default.story.vue b/examples/beam/default.story.vue
index bf9da974..5023dc2a 100644
--- a/examples/beam/default.story.vue
+++ b/examples/beam/default.story.vue
@@ -49,6 +49,28 @@
 				</div>
 			</BeamMetadata>
 		</Variant>
+		<Variant title="ListView with Day Divider">
+			<BeamModal @confirmmodal="confirmModal" @closemodal="closeModal" :showModal="showModal">
+				<Confirm @confirmmodal="confirmModal" @closemodal="closeModal" />
+			</BeamModal>
+
+			<Navbar @click="handlePrimaryAction">
+				<template #title>
+					<BeamHeading>Items to Receive</BeamHeading>
+				</template>
+				<template #navbaraction>Done</template>
+			</Navbar>
+
+			<BeamDayDivider :month="'10'" :day="'20'" :year="'2024'" />
+			<ListView :items="items" @scrollbottom="loadMoreItems" />
+			<BeamDayDivider :month="'10'" :day="'22'" :year="'2024'" />
+			<ListView :items="items" @scrollbottom="loadMoreItems" />
+			<BeamDayDivider :month="'11'" :day="'10'" :year="'2024'" />
+			<ListView :items="items" @scrollbottom="loadMoreItems" />
+			<ActionFooter @click="handlePrimaryAction">Done</ActionFooter>
+			<ScanInput :scanHandler="incrementItemCount" />
+			<BeamModalOutlet @confirmmodal="confirmModal" @closemodal="closeModal"></BeamModalOutlet>
+		</Variant>
 	</Story>
 </template>
 

From 4ce79d30dc9bfb1277fd7592347a2652b81a7dd6 Mon Sep 17 00:00:00 2001
From: curt <curt@crabinak.com>
Date: Fri, 22 Nov 2024 09:48:38 -0600
Subject: [PATCH 2/6] fixed some padding styles for the list elements and
 updated prefixed variables

---
 beam/src/components/BeamDayDivider.vue | 11 +++++++----
 beam/themes/beam.css                   |  5 ++++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/beam/src/components/BeamDayDivider.vue b/beam/src/components/BeamDayDivider.vue
index 258620a7..8ebf5cdb 100644
--- a/beam/src/components/BeamDayDivider.vue
+++ b/beam/src/components/BeamDayDivider.vue
@@ -20,19 +20,22 @@ const getDate = computed(() => {
 .beam_day-divider {
 	text-align: center;
 	padding: 0.4rem;
-	background: var(--primary-color);
-	border: 1px solid var(--row-border-color);
+	background: var(--sc-primary-color);
+	border: 1px solid var(--sc-row-border-color);
 	border-right: none;
 	border-left: none;
 	box-sizing: border-box;
-	margin-bottom: 1rem;
+	margin: 1rem 0;
 
 	& h2 {
 		text-align: center;
 		font-size: 1rem;
-		color: var(--primary-text-color);
+		color: var(--sc-primary-text-color);
 		margin: 0;
 		padding: 0;
 	}
 }
+.beam_day-divider:first-of-type {
+	margin-top: 0;
+}
 </style>
diff --git a/beam/themes/beam.css b/beam/themes/beam.css
index 6b6ab25c..cfc6b6b0 100644
--- a/beam/themes/beam.css
+++ b/beam/themes/beam.css
@@ -90,9 +90,12 @@ body {
 	list-style-type: none;
 	margin: var(--sc-list-margin);
 	padding: 0;
-	padding-bottom: 2.5em;
+	/* padding-bottom: 2.5em; */
 	margin-top: 1px;
 }
+ul.beam_list-view:last-of-type {
+	padding-bottom: 2.5em;
+}
 
 .beam_list-item {
 	padding: 0.625rem;

From 9f41d336b37e6a5076fc5d6f3c831f44eb67ed27 Mon Sep 17 00:00:00 2001
From: curt <curt@crabinak.com>
Date: Fri, 22 Nov 2024 12:09:19 -0600
Subject: [PATCH 3/6] DayDivider now uses linkComponent. Added sample to
 data.json.

---
 beam/src/components/BeamDayDivider.vue | 28 +++++++++++++++-----------
 beam/src/components/ListView.vue       |  7 ++++++-
 beam/src/types/index.ts                |  1 +
 examples/beam/data/items.json          |  4 ++++
 examples/beam/default.story.vue        |  5 -----
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/beam/src/components/BeamDayDivider.vue b/beam/src/components/BeamDayDivider.vue
index 8ebf5cdb..c776ac54 100644
--- a/beam/src/components/BeamDayDivider.vue
+++ b/beam/src/components/BeamDayDivider.vue
@@ -1,25 +1,29 @@
 <template>
 	<div class="beam_day-divider">
-		<h2>{{ getDate }}</h2>
+		<h2>{{ listItem.date }}</h2>
 	</div>
+	<slot></slot>
 </template>
 <script setup lang="ts">
-import { defineProps, computed } from 'vue'
-const props = defineProps(['month', 'day', 'year'])
+import { defineProps, computed, ref } from 'vue'
+// const props = defineProps(['month', 'day', 'year'])
+
+import type { ListViewItem } from '@/types'
+
+const { item } = defineProps<{ item: ListViewItem }>()
+
+const listItem = ref(item)
 
 const getDate = computed(() => {
-	const date = []
-	if (props.year) date.push(props.year)
-	if (props.month) date.push(props.month)
-	if (props.day) date.push(props.day)
-	const formattedDate = date.join(' - ')
-	return formattedDate
+	const date = String(listItem.date)
+	const newDate = new Date(date).toISOString()
+	return newDate
 })
 </script>
 <style scoped>
 .beam_day-divider {
-	text-align: center;
-	padding: 0.4rem;
+	text-align: left;
+	padding: 1rem;
 	background: var(--sc-primary-color);
 	border: 1px solid var(--sc-row-border-color);
 	border-right: none;
@@ -28,7 +32,7 @@ const getDate = computed(() => {
 	margin: 1rem 0;
 
 	& h2 {
-		text-align: center;
+		text-align: left;
 		font-size: 1rem;
 		color: var(--sc-primary-text-color);
 		margin: 0;
diff --git a/beam/src/components/ListView.vue b/beam/src/components/ListView.vue
index 5fbaa3f4..0c0f67f0 100644
--- a/beam/src/components/ListView.vue
+++ b/beam/src/components/ListView.vue
@@ -1,11 +1,15 @@
 <template>
 	<ul class="beam_list-view">
 		<li v-for="item in items" :key="item.label">
-			<template v-if="item.linkComponent">
+			<template v-if="item.linkComponent == 'BeamDayDivider'">
+				<BeamDayDivider :item="item"></BeamDayDivider>
+			</template>
+			<template v-else-if="item.linkComponent">
 				<component :is="item.linkComponent" :to="item.route" tabindex="-1">
 					<ListItem :item="item"></ListItem>
 				</component>
 			</template>
+
 			<template v-else>
 				<ListItem :item="item"></ListItem>
 			</template>
@@ -18,6 +22,7 @@ import { onMounted, onUnmounted } from 'vue'
 
 import ListItem from '@/components/ListItem.vue'
 import type { ListViewItem } from '@/types'
+import BeamDayDivider from '@/components/BeamDayDivider.vue'
 
 defineProps<{ items: ListViewItem[] }>()
 const emit = defineEmits<{ scrollbottom: [] }>()
diff --git a/beam/src/types/index.ts b/beam/src/types/index.ts
index 08042511..b2dac09c 100644
--- a/beam/src/types/index.ts
+++ b/beam/src/types/index.ts
@@ -10,4 +10,5 @@ export type ListViewItem = {
 		of: number
 		uom: string
 	}
+	date?: string
 }
diff --git a/examples/beam/data/items.json b/examples/beam/data/items.json
index c9cc9e9d..6975bee4 100644
--- a/examples/beam/data/items.json
+++ b/examples/beam/data/items.json
@@ -29,6 +29,10 @@
 		"route": "/item4",
 		"barcode": "5564269659609843627"
 	},
+	{
+		"date": "2012-10-06",
+		"linkComponent": "BeamDayDivider"
+	},
 	{
 		"barcode": "6281478257437327897",
 		"label": "Item 1",
diff --git a/examples/beam/default.story.vue b/examples/beam/default.story.vue
index 25d8023d..ec0ccc3d 100644
--- a/examples/beam/default.story.vue
+++ b/examples/beam/default.story.vue
@@ -62,11 +62,6 @@
 				<template #navbaraction>Done</template>
 			</Navbar>
 
-			<BeamDayDivider :month="'10'" :day="'20'" :year="'2024'" />
-			<ListView :items="items" @scrollbottom="loadMoreItems" />
-			<BeamDayDivider :month="'10'" :day="'22'" :year="'2024'" />
-			<ListView :items="items" @scrollbottom="loadMoreItems" />
-			<BeamDayDivider :month="'11'" :day="'10'" :year="'2024'" />
 			<ListView :items="items" @scrollbottom="loadMoreItems" />
 			<ActionFooter @click="handlePrimaryAction">Done</ActionFooter>
 			<ScanInput :scanHandler="incrementItemCount" />

From d5a0063542ad15e7c758772c44bf04dbfa3194bb Mon Sep 17 00:00:00 2001
From: curt <curt@crabinak.com>
Date: Mon, 25 Nov 2024 09:47:13 -0600
Subject: [PATCH 4/6] updated daydivider prop to accept Date object. Added
 optional flag for ISOString output vs. dateString output

---
 beam/src/components/BeamDayDivider.vue | 19 +++++++++++--------
 beam/src/types/index.ts                |  3 ++-
 examples/beam/data/items.json          |  4 ----
 examples/beam/default.story.vue        |  6 +++++-
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/beam/src/components/BeamDayDivider.vue b/beam/src/components/BeamDayDivider.vue
index c776ac54..3942b1cf 100644
--- a/beam/src/components/BeamDayDivider.vue
+++ b/beam/src/components/BeamDayDivider.vue
@@ -1,23 +1,26 @@
 <template>
 	<div class="beam_day-divider">
-		<h2>{{ listItem.date }}</h2>
+		<h2>{{ getDate }}</h2>
 	</div>
 	<slot></slot>
 </template>
 <script setup lang="ts">
-import { defineProps, computed, ref } from 'vue'
-// const props = defineProps(['month', 'day', 'year'])
+import { defineProps, ref, computed } from 'vue'
 
 import type { ListViewItem } from '@/types'
 
 const { item } = defineProps<{ item: ListViewItem }>()
 
-const listItem = ref(item)
-
 const getDate = computed(() => {
-	const date = String(listItem.date)
-	const newDate = new Date(date).toISOString()
-	return newDate
+	// if needed, the user can specify a Date format flag that will dictate how the output is formatted, defaults to toDateString()
+	// using switch/case here in case more values wanted to be added
+	if (item.dateFormat) {
+		switch (item.dateFormat.toLowerCase()) {
+			case 'iso':
+				return item.date.toISOString()
+		}
+	}
+	return item.date.toDateString()
 })
 </script>
 <style scoped>
diff --git a/beam/src/types/index.ts b/beam/src/types/index.ts
index b2dac09c..a9436f86 100644
--- a/beam/src/types/index.ts
+++ b/beam/src/types/index.ts
@@ -10,5 +10,6 @@ export type ListViewItem = {
 		of: number
 		uom: string
 	}
-	date?: string
+	date?: Date
+	dateFormat?: string
 }
diff --git a/examples/beam/data/items.json b/examples/beam/data/items.json
index 6975bee4..c9cc9e9d 100644
--- a/examples/beam/data/items.json
+++ b/examples/beam/data/items.json
@@ -29,10 +29,6 @@
 		"route": "/item4",
 		"barcode": "5564269659609843627"
 	},
-	{
-		"date": "2012-10-06",
-		"linkComponent": "BeamDayDivider"
-	},
 	{
 		"barcode": "6281478257437327897",
 		"label": "Item 1",
diff --git a/examples/beam/default.story.vue b/examples/beam/default.story.vue
index ec0ccc3d..1edda2c9 100644
--- a/examples/beam/default.story.vue
+++ b/examples/beam/default.story.vue
@@ -139,7 +139,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onBeforeMount } from 'vue'
 import { type ToastPosition, useToast } from 'vue-toast-notification'
 import 'vue-toast-notification/dist/theme-default.css'
 
@@ -153,6 +153,10 @@ const workOrder = reactive({
 	complete: false,
 })
 
+onBeforeMount(() => {
+	items.splice(5, 0, { date: new Date('2024-11-12'), linkComponent: 'BeamDayDivider', dateFormat: 'default' })
+	items.splice(9, 0, { date: new Date('2024-10-18'), linkComponent: 'BeamDayDivider', dateFormat: 'iso' })
+})
 // Start Toast //
 const toast = useToast()
 const toastType = ref('default')

From 39892cdc018362afa069dd5b1ee8dd11ec8ee43f Mon Sep 17 00:00:00 2001
From: Rohan Bansal <rohan@agritheory.dev>
Date: Tue, 26 Nov 2024 16:51:34 +0530
Subject: [PATCH 5/6] fix: modify date formatter

---
 beam/src/components/BeamDayDivider.vue | 24 +++++++++++++------
 beam/src/components/ListView.vue       |  3 ++-
 beam/src/index.ts                      |  5 +---
 beam/src/types/index.ts                |  9 +++----
 common/reviews/api/beam.api.md         |  3 +++
 examples/beam/default.story.vue        | 33 ++++++++++++++++----------
 6 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/beam/src/components/BeamDayDivider.vue b/beam/src/components/BeamDayDivider.vue
index 3942b1cf..2b324217 100644
--- a/beam/src/components/BeamDayDivider.vue
+++ b/beam/src/components/BeamDayDivider.vue
@@ -1,28 +1,37 @@
 <template>
 	<div class="beam_day-divider">
-		<h2>{{ getDate }}</h2>
+		<h2>{{ date }}</h2>
 	</div>
+
 	<slot></slot>
 </template>
+
 <script setup lang="ts">
-import { defineProps, ref, computed } from 'vue'
+import { defineProps, computed } from 'vue'
 
 import type { ListViewItem } from '@/types'
 
+defineSlots<{ default(): any }>()
 const { item } = defineProps<{ item: ListViewItem }>()
 
-const getDate = computed(() => {
-	// if needed, the user can specify a Date format flag that will dictate how the output is formatted, defaults to toDateString()
-	// using switch/case here in case more values wanted to be added
+const date = computed(() => {
+	if (!item.date || isNaN(Date.parse(item.date))) {
+		return item.date
+	}
+
+	// if needed, the user can specify a Date format flag that will dictate how the output is formatted,
+	// defaults to toDateString(); using switch/case here in case more values wanted to be added
+	const dateObj = new Date(item.date)
 	if (item.dateFormat) {
 		switch (item.dateFormat.toLowerCase()) {
 			case 'iso':
-				return item.date.toISOString()
+				return dateObj.toISOString()
 		}
 	}
-	return item.date.toDateString()
+	return dateObj.toDateString()
 })
 </script>
+
 <style scoped>
 .beam_day-divider {
 	text-align: left;
@@ -42,6 +51,7 @@ const getDate = computed(() => {
 		padding: 0;
 	}
 }
+
 .beam_day-divider:first-of-type {
 	margin-top: 0;
 }
diff --git a/beam/src/components/ListView.vue b/beam/src/components/ListView.vue
index d5740bd9..a2db3717 100644
--- a/beam/src/components/ListView.vue
+++ b/beam/src/components/ListView.vue
@@ -4,6 +4,7 @@
 			<template v-if="item.linkComponent == 'BeamDayDivider'">
 				<BeamDayDivider :item="item"></BeamDayDivider>
 			</template>
+
 			<template v-else-if="item.linkComponent">
 				<component :is="item.linkComponent" :to="item.route" tabindex="-1">
 					<ListItem :item="item" @update="handleUpdate"></ListItem>
@@ -20,9 +21,9 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
 
+import BeamDayDivider from '@/components/BeamDayDivider.vue'
 import ListItem from '@/components/ListItem.vue'
 import type { ListViewItem } from '@/types'
-import BeamDayDivider from '@/components/BeamDayDivider.vue'
 
 defineProps<{ items: ListViewItem[] }>()
 const emit = defineEmits<{ update: [item: ListViewItem]; scrollbottom: [] }>()
diff --git a/beam/src/index.ts b/beam/src/index.ts
index dff42f0b..b78b4789 100644
--- a/beam/src/index.ts
+++ b/beam/src/index.ts
@@ -23,6 +23,7 @@ import ScanInput from '@/components/ScanInput.vue'
 import SplitColumn from '@/components/SplitColumn.vue'
 import ToggleArrow from '@/components/ToggleArrow.vue'
 import { useMqttStream } from '@/composables/mqtt'
+export type { ListViewItem } from '@/types'
 import 'themes/beam.css'
 
 /**
@@ -33,19 +34,15 @@ import 'themes/beam.css'
 function install(app: App /* options */) {
 	app.component('ActionFooter', ActionFooter)
 	app.component('BeamArrow', BeamArrow)
-	app.component('BeamArrow', BeamArrow)
-	app.component('BeamBtn', BeamBtn)
 	app.component('BeamBtn', BeamBtn)
 	app.component('BeamDayDivider', BeamDayDivider)
 	app.component('BeamFilter', BeamFilter)
 	app.component('BeamFilterOption', BeamFilterOption)
 	app.component('BeamHeading', BeamHeading)
-	app.component('BeamHeading', BeamHeading)
 	app.component('BeamMetadata', BeamMetadata)
 	app.component('BeamModal', BeamModal)
 	app.component('BeamModalOutlet', BeamModalOutlet)
 	app.component('BeamProgress', BeamProgress)
-	app.component('BeamProgress', BeamProgress)
 	app.component('Confirm', Confirm)
 	app.component('FixedTop', FixedTop)
 	app.component('ItemCheck', ItemCheck)
diff --git a/beam/src/types/index.ts b/beam/src/types/index.ts
index a9436f86..06d4bf57 100644
--- a/beam/src/types/index.ts
+++ b/beam/src/types/index.ts
@@ -1,15 +1,16 @@
 export type ListViewItem = {
 	description: string
 	label: string
+
 	checked?: boolean
-	debounce?: number
-	linkComponent?: string
-	route?: string
 	count?: {
 		count: number
 		of: number
 		uom: string
 	}
-	date?: Date
+	date?: string
 	dateFormat?: string
+	debounce?: number
+	linkComponent?: string
+	route?: string
 }
diff --git a/common/reviews/api/beam.api.md b/common/reviews/api/beam.api.md
index f52cfe0a..b6f79448 100644
--- a/common/reviews/api/beam.api.md
+++ b/common/reviews/api/beam.api.md
@@ -23,6 +23,7 @@ import ItemCount from '@/components/ItemCount.vue';
 import ListAnchor from '@/components/ListAnchor.vue';
 import ListItem from '@/components/ListItem.vue';
 import ListView from '@/components/ListView.vue';
+import { ListViewItem } from '@/types';
 import Navbar from '@/components/Navbar.vue';
 import ScanInput from '@/components/ScanInput.vue';
 import SplitColumn from '@/components/SplitColumn.vue';
@@ -68,6 +69,8 @@ export { ListItem }
 
 export { ListView }
 
+export { ListViewItem }
+
 export { Navbar }
 
 export { ScanInput }
diff --git a/examples/beam/default.story.vue b/examples/beam/default.story.vue
index 9c244207..edc0f5ed 100644
--- a/examples/beam/default.story.vue
+++ b/examples/beam/default.story.vue
@@ -62,7 +62,7 @@
 				<template #navbaraction>Done</template>
 			</Navbar>
 
-			<ListView :items="items" @scrollbottom="loadMoreItems" />
+			<ListView :items="itemsWithDivider" @scrollbottom="loadMoreItems" />
 			<ActionFooter @click="handlePrimaryAction">Done</ActionFooter>
 			<ScanInput :scanHandler="incrementItemCount" />
 			<BeamModalOutlet @confirmmodal="confirmModal" @closemodal="closeModal"></BeamModalOutlet>
@@ -130,6 +130,7 @@
 						]" />
 				</BeamFilter>
 			</FixedTop>
+
 			<ListView :items="items" @scrollbottom="loadMoreItems" />
 			<ActionFooter @click="handlePrimaryAction">Done</ActionFooter>
 			<ScanInput :scanHandler="incrementItemCount" />
@@ -139,13 +140,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onBeforeMount } from 'vue'
+import type { ListViewItem } from '@stonecrop/beam'
+import { ref, reactive, computed } from 'vue'
 import { type ToastPosition, useToast } from 'vue-toast-notification'
 import 'vue-toast-notification/dist/theme-default.css'
 
 import data from './data/items.json'
 
-const items = ref(data)
+const items = ref<ListViewItem[]>(data)
+const showModal = ref(false)
 const workOrder = reactive({
 	orderNumber: 'WO#2024-01-00001',
 	product: 'Ambrosia Pie',
@@ -154,10 +157,6 @@ const workOrder = reactive({
 	complete: false,
 })
 
-onBeforeMount(() => {
-	items.splice(5, 0, { date: new Date('2024-11-12'), linkComponent: 'BeamDayDivider', dateFormat: 'default' })
-	items.splice(9, 0, { date: new Date('2024-10-18'), linkComponent: 'BeamDayDivider', dateFormat: 'iso' })
-})
 // Start Toast //
 const toast = useToast()
 const toastType = ref('default')
@@ -175,11 +174,20 @@ const showNotification = () => {
 }
 // End Toast //
 
-const showModal = ref(false)
-
-const handlePrimaryAction = () => {
-	showModal.value = true
-}
+const itemsWithDivider = computed(() => {
+	const itemsCopy = [...items.value]
+	itemsCopy.splice(3, 0, {
+		date: '2024-11-12T00:00:00.000Z',
+		linkComponent: 'BeamDayDivider',
+		dateFormat: 'default',
+	})
+	itemsCopy.splice(7, 0, {
+		date: '2024-10-18T00:00:00.000Z',
+		linkComponent: 'BeamDayDivider',
+		dateFormat: 'iso',
+	})
+	return itemsCopy
+})
 
 const incrementItemCount = (barcode: string, qty: number) => {
 	// return indices of the matching barcode
@@ -263,4 +271,5 @@ const loadMoreItems = () => {
 
 const confirmModal = () => (showModal.value = false)
 const closeModal = () => (showModal.value = false)
+const handlePrimaryAction = () => (showModal.value = true)
 </script>

From 4a29b146870a6d59a34031289b6ab4b4ddf5d7b1 Mon Sep 17 00:00:00 2001
From: curt <curt@crabinak.com>
Date: Tue, 26 Nov 2024 09:45:53 -0600
Subject: [PATCH 6/6] updated day divider to use cell-changed color

---
 beam/src/components/BeamDayDivider.vue | 6 ++----
 beam/themes/beam.css                   | 2 ++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/beam/src/components/BeamDayDivider.vue b/beam/src/components/BeamDayDivider.vue
index 2b324217..e64d6612 100644
--- a/beam/src/components/BeamDayDivider.vue
+++ b/beam/src/components/BeamDayDivider.vue
@@ -36,10 +36,8 @@ const date = computed(() => {
 .beam_day-divider {
 	text-align: left;
 	padding: 1rem;
-	background: var(--sc-primary-color);
-	border: 1px solid var(--sc-row-border-color);
-	border-right: none;
-	border-left: none;
+	background: var(--sc-cell-changed-color);
+	border-bottom: 1px solid var(--sc-row-border-color);
 	box-sizing: border-box;
 	margin: 1rem 0;
 
diff --git a/beam/themes/beam.css b/beam/themes/beam.css
index 690f2512..1604bae6 100644
--- a/beam/themes/beam.css
+++ b/beam/themes/beam.css
@@ -20,6 +20,8 @@
 	--sc-btn-label-color: black;
 
 	--sc-list-margin: 0rem 0.625rem;
+
+	--sc-cell-changed-color: #d8edff;
 }
 
 /* body {