dev

src/app/interfaces/read/products.ts

@@ -12,6 +12,7 @@ export interface ProductDTO {
 	id: string
 	name: string
 	expirationDate: OPT.Option<number>
+	creationDate: number
 }
 
 export const ProductDTO = {

src/app/use-cases/product-list.ts

@@ -34,6 +34,7 @@ export interface ProductModel {
 	id: string
 	name: string
 	expirationDate: OPT.Option<number>
+	creationDate: number
 	isExpired: boolean
 }
 
@@ -50,6 +51,7 @@ export interface UseCases {
 
 interface ProductEntity {
 	id: string
+	creationDate: number
 	product: Product
 }
 
@@ -70,6 +72,7 @@ const toProductEntitiesWithInvalid: (
 				({
 					id: entityDTO.id,
 					product,
+					creationDate: entityDTO.creationDate,
 				}) as const,
 		),
 	),
@@ -90,15 +93,18 @@ const toProductModels: (
 		T.map(timestamp =>
 			pipe(
 				products,
-				RoA.map(({ id, product }) => ({
-					id,
-					name: name(product),
-					isExpired: isExpired(
-						product,
-						timestamp,
-					),
-					expirationDate: expiration(product),
-				})),
+				RoA.map(
+					({ id, product, creationDate }) => ({
+						id,
+						name: name(product),
+						isExpired: isExpired(
+							product,
+							timestamp,
+						),
+						expirationDate: expiration(product),
+						creationDate,
+					}),
+				),
 			),
 		),
 	)

src/data/dexie/read/products.ts

@@ -118,6 +118,7 @@ const decodeProductRow = (
 		product.expiration_date,
 		OPT.fromNullable,
 	),
+	creationDate: product.creation_date,
 })
 
 const logErrors = flow(

src/ui/core/helpers.ts

@@ -143,9 +143,9 @@ export const formatRemainingTime = (
 		return `${differenceInHours(to, from).toString(10)}h`
 	}
 
-	if (days <= 31) {
+	if (days <= 28) {
 		return `${days.toString(10)}d`
 	}
 
-	return `>1m`
+	return `>4w`
 }

src/ui/pages/Home/components/ExpirationBar.tsx

@@ -1,18 +1,49 @@
-import type { Component } from 'solid-js'
-
-import type { ProductModel } from '@/app/use-cases/product-list'
+import { type Component, Show } from 'solid-js'
 
 import { useUiStateContext } from '../context'
 
 export const ExpirationBar: Component<{
 	expiration: () => number
+	creation: number
 }> = props => {
 	const {
 		store: [state],
 		uiStore: [uiState, setUiState],
 	} = useUiStateContext()!
 
+	const isExpired = () =>
+		props.expiration() -
+			uiState.currentTimestamp <
+		0
+
+	const currentProgress = () => {
+		const totalDuration =
+			props.expiration() - props.creation
+		const remainingDuration =
+			props.expiration() -
+			uiState.currentTimestamp
+
+		return remainingDuration / totalDuration
+	}
+
 	return (
-		<div class="mt-[5px] h-[5px] w-full bg-red-400"></div>
+		<Show
+			fallback={
+				<div class="mt-[5px] h-[5px] w-full border-[1px] border-primary">
+					<div
+						class="h-full bg-primary"
+						style={{
+							width: `${(
+								currentProgress() * 100
+							).toString()}%`,
+						}}
+					/>
+				</div>
+			}
+			when={isExpired()}>
+			<p class="font-bold text-red-500">
+				Expired
+			</p>
+		</Show>
 	)
 }