History wip

package.json

@@ -36,6 +36,7 @@
 	"type": "module",
 	"dependencies": {
 		"@fontsource/jost": "^5.0.18",
+		"@supabase/supabase-js": "^2.44.3",
 		"dayjs": "^1.11.11",
 		"mixpanel-browser": "^2.53.0",
 		"svelte-persisted-store": "^0.11.0",

src/lib/db/supabaseClient.ts

@@ -0,0 +1,4 @@
+import { PUBLIC_SUPABASE_ANON, PUBLIC_SUPABASE_URL } from '$env/static/public'
+import { createClient } from '@supabase/supabase-js'
+
+export const supabase = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON)

src/lib/elements/Input.svelte

@@ -6,6 +6,7 @@
 	export let value: string
 	export let placeholder: string = ''
 	export let disabled: boolean = false
+	export let classNames: string = ''
 
 	let inputRef: HTMLInputElement
 </script>
@@ -14,7 +15,7 @@
 	bind:this={inputRef}
 	{id}
 	{disabled}
-	class="input-field focus:!border-[1.5px] focus:!border-teal-500 focus:outline-none"
+	class="input-field focus:!border-[1.5px] focus:!border-teal-500 focus:outline-none {classNames}"
 	type="number"
 	{placeholder}
 	bind:value

src/lib/stores/index.ts

@@ -1,16 +1,10 @@
-import type { Paper } from '$lib/utils/services'
 import { persisted } from 'svelte-persisted-store'
 import { writable, type Writable } from 'svelte/store'
+import type { CostHistoryType } from '$lib/utils/services'
 
-export type PaperHistory = {
-	id: string
-	finalPrice: number
-	date?: Date
-	papers: Paper[]
-}
-function getPaperStore(): Writable<{ history: PaperHistory[] }> {
-	return persisted<{ history: PaperHistory[] }>('paper_cost_history', { history: [] })
-}
+// function getPaperStore(): Writable<CostHistoryType[]> {
+// 	return persisted<CostHistoryType[]>('paper_cost_history', [])
+// }
 
-export const paperHistoryStore = getPaperStore()
+export const paperHistoryStore = writable<CostHistoryType[]>([])
 export const focusedInputStore: Writable<HTMLInputElement | null> = writable(null)

src/lib/utils/services.ts

@@ -1,3 +1,5 @@
+import { supabase } from '$lib/db/supabaseClient'
+
 export type Paper = {
 	id: string
 	length: string
@@ -7,5 +9,36 @@ export type Paper = {
 	[key: string]: string
 }
 
+export type CostHistoryType = {
+	id?: string
+	name: string
+	papers: Paper[]
+	final_price: number
+	created_at?: string
+}
+
 export const PAPER_FIXED = 1550000
 export const MAX_PAPER = 10
+
+export const calculateCost = (paper: Paper): number => {
+	const paperSize = parseFloat(paper.length) * parseFloat(paper.width) * parseFloat(paper.thickness)
+	const result = paperSize / PAPER_FIXED
+	return result * parseFloat(paper.rate)
+}
+
+export const addHistory = async (history: CostHistoryType) => {
+	const { data, error } = await supabase.from('history').insert({
+		name: history.name || '',
+		papers: history.papers || [],
+		final_price: history.final_price || 100
+	})
+	if (!error) {
+		return data
+	}
+	return error
+}
+
+export const deleteHistory = async (id: string) => {
+	const response = await supabase.from('history').delete().eq('id', id)
+	return response
+}

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { page } from '$app/stores'
 	import { PUBLIC_MIX_TOKEN } from '$env/static/public'
 	import '$lib/app.css'
 	import '@fontsource/jost'
@@ -20,15 +21,13 @@
 		<div
 			class="w-full max-w-6xl mx-auto bg-gradient-to-r from-transparent via-orange-800/40 to-transparent p-[1px]"
 		/>
-		<!-- <div class="px-4 flex w-full mt-2">
-			<div
-				class="flex w-full flex-row gap-3 bg-slate-100 py-1 px-2 rounded border-dashed border border-orange-400"
-			>
-				<a href="/" class:hidden={$page.url.pathname == '/'} class="h-full">Back</a>
+		<div class="px-4 flex w-full mt-2">
+			<div class="flex w-full flex-row justify-end gap-3 py-1 px-2 rounded border border-teal-400">
 				<a href="/history" class:hidden={$page.url.pathname == '/history'} class="h-full">History</a
 				>
+				<a href="/" class:!block={$page.url.pathname == '/history'} class="hidden h-full">Home</a>
 			</div>
-		</div> -->
+		</div>
 	</nav>
 	<slot />
 

src/routes/+page.svelte

@@ -2,8 +2,8 @@
 	import Button from '$lib/elements/Button.svelte'
 	import Input from '$lib/elements/Input.svelte'
 	import Result from '$lib/elements/Result.svelte'
-	import { focusedInputStore, paperHistoryStore } from '$lib/stores'
-	import { MAX_PAPER, PAPER_FIXED, type Paper } from '$lib/utils/services'
+	import { focusedInputStore } from '$lib/stores'
+	import { addHistory, calculateCost, MAX_PAPER, type Paper } from '$lib/utils/services'
 	import { makeid } from '$lib/utils/tools'
 	import Icon from '@iconify/svelte'
 	import mixpanel from 'mixpanel-browser'
@@ -30,6 +30,7 @@
 	let inputs: NodeListOf<HTMLInputElement> | null
 	let inputGroupRef: HTMLDivElement
 	let focusedIndex = 0
+	let customer_name = ''
 
 	const addPaper = async () => {
 		paperCount.push({ ...paperFields, id: makeid(5) })
@@ -47,24 +48,19 @@
 		perPaperResult.clear()
 		finalPrice = 0
 		paperCount.forEach((paper) => {
-			const paperSize =
-				parseFloat(paper.length) * parseFloat(paper.width) * parseFloat(paper.thickness)
-			const result = paperSize / PAPER_FIXED
-			const totalPerPaper = result * parseFloat(paper.rate)
+			const totalPerPaper = calculateCost(paper)
 
 			perPaperResult.set(paper.id, totalPerPaper)
 			finalPrice += totalPerPaper
 		})
 		perPaperResult = perPaperResult
 
 		// Saving to history
-		$paperHistoryStore.history.push({
-			id: makeid(6),
-			finalPrice,
-			date: new Date(),
+		addHistory({
+			name: customer_name,
+			final_price: finalPrice,
 			papers: paperCount
 		})
-
 		// mixpanel data prepare
 		const perPageData: number[] = []
 		perPaperResult.forEach((data) => {
@@ -134,10 +130,18 @@
 	<title>Paper Cost Calculator</title>
 </svelte:head>
 
-<section class="max-w-6xl mx-auto flex w-full max-h-[85%] flex-col gap-4 px-4 py-5">
+<section class="max-w-6xl mx-auto flex w-full max-h-[85%] flex-col gap-3 px-4 py-3">
 	<h1 class="text-xl text-center text-teal-500 font-semibold">Paper Cost</h1>
 	<div class="w-full bg-gradient-to-r from-transparent via-slate-600/10 to-transparent p-[1px]" />
-	<div class="flex flex-col w-full justify-between gap-4 h-[90%] items-center">
+	<div class="flex flex-col w-full justify-between gap-2 h-[90%] items-center">
+		<div class="flex w-full items-start">
+			<input
+				bind:value={customer_name}
+				type="text"
+				placeholder="Customer name"
+				class="border-b border-dashed w-full px-2 focus:outline-none focus:border-teal-500"
+			/>
+		</div>
 		<div
 			class="flex flex-col gap-[1px] overflow-y-auto max-w-3xl max-h-[85%] py-2 w-full"
 			bind:this={inputGroupRef}

src/routes/history/+page.server.ts

@@ -0,0 +1,8 @@
+import { supabase } from '$lib/db/supabaseClient'
+
+export async function load() {
+	const { data } = await supabase.from('history').select()
+	return {
+		histories: data ?? []
+	}
+}

src/routes/history/+page.svelte

@@ -1,29 +1,40 @@
 <script lang="ts">
 	import { paperHistoryStore } from '$lib/stores'
 	import days from 'dayjs'
+
+	export let data
+
+	$paperHistoryStore = data.histories
 </script>
 
+<svelte:head>
+	<title>History</title>
+</svelte:head>
+
 <section class="max-w-6xl mx-auto flex w-full max-h-[90%] flex-col gap-4 px-4 py-5">
 	<div class="flex gap-2 items-center justify-center w-full">
 		<h1 class="text-xl text-center">History</h1>
 		<p class="bg-gray-100 flex items-center justify-center rounded-full w-7 h-7">
-			{$paperHistoryStore.history.length}
+			{data.histories.length}
 		</p>
 	</div>
 	<div class="w-full bg-gradient-to-r from-transparent via-slate-600/10 to-transparent p-[1px]" />
 	<div class="flex flex-col w-full justify-between gap-4 h-[90%] items-center">
 		<div class="flex flex-col gap-2 overflow-y-auto w-full max-w-3xl py-2">
-			{#if $paperHistoryStore.history.length}
-				{#each $paperHistoryStore.history.reverse() as { id, finalPrice, papers, date }, i}
+			{#if data.histories.length}
+				{#each data.histories.reverse() as { name, id, final_price, papers, created_at }, i}
 					<div
 						class="flex flex-col gap-1 items-center w-full p-2 border border-dashed rounded shadow-sm"
 					>
 						<a href="/history/{id}" class="flex flex-row items-center pl-1 justify-between w-full">
-							<p class="w-fit">
-								{days(date).format('DD-MM-YYYY hh:mmA')}
+							<p class:hidden={!name} class="w-fit">
+								{name}
+							</p>
+							<p class="w-fit text-gray-500">
+								{days(created_at).format('DD-MM-YYYY hh:mmA')}
 							</p>
 							<p class="text-gray-500">
-								{finalPrice.toFixed(2)}
+								{final_price.toFixed(2)}
 							</p>
 						</a>
 					</div>

src/routes/history/[id]/+page.svelte

@@ -2,37 +2,37 @@
 	import { page } from '$app/stores'
 	import Input from '$lib/elements/Input.svelte'
 	import Result from '$lib/elements/Result.svelte'
-	import { paperHistoryStore, type PaperHistory } from '$lib/stores'
+	import { paperHistoryStore } from '$lib/stores'
 	import dayjs from 'dayjs'
+	import type { CostHistoryType } from '$lib/utils/services'
 
-	const data: PaperHistory[] = $paperHistoryStore.history.filter(
+	const data: CostHistoryType[] = $paperHistoryStore.filter(
 		(history) => history.id == $page.params.id
 	)
 </script>
 
+<svelte:head>
+	<title>History</title>
+</svelte:head>
+
 <section class="max-w-6xl mx-auto flex w-full max-h-[90%] flex-col gap-4 px-4 py-5">
 	<h1 class="text-xl text-center">History Details</h1>
-	<h1 class="text-lg text-center text-gray-500">
-		{dayjs(data[0].date).format('DD-MM-YYYY hh:mmA')}
-	</h1>
 	<div class="w-full bg-gradient-to-r from-transparent via-slate-600/10 to-transparent p-[1px]" />
+	<div class="flex flex-row justify-between px-2 items-center">
+		<p>{data[0].name || ''}</p>
+		<h1 class="text-sm text-center text-gray-500">
+			{dayjs(data[0].created_at).format('DD-MM-YYYY hh:mmA')}
+		</h1>
+	</div>
 
-	<div class="flex flex-col w-full justify-between gap-4 h-[90%] items-center">
+	<div class="flex flex-col w-full justify-between gap-3 h-[90%] items-center">
 		<div class="flex flex-col overflow-y-auto w-full max-w-3xl py-2">
 			{#if data.length}
 				{#each data as history, i}
-					<div
-						class="grid grid-cols-4 w-full gap-1 text-gray-500 text-center items-center overflow-x-auto p-1"
-					>
-						<p>height</p>
-						<p>width</p>
-						<p>thickness</p>
-						<p>rate</p>
-					</div>
-					{#each history.papers as { height, width, thickness, rate }, i}
-						<div class="flex flex-col gap-1 items-center w-full p-2 border border-dashed rounded">
+					{#each history.papers as { length, width, thickness, rate }, i}
+						<div class="flex flex-col gap-1 items-center w-full rounded">
 							<div class="grid grid-cols-4 w-full gap-1 items-center overflow-x-auto p-1">
-								<Input bind:value={height} disabled />
+								<Input bind:value={length} disabled />
 								<Input bind:value={width} disabled />
 								<Input bind:value={thickness} disabled />
 								<Input bind:value={rate} disabled />
@@ -46,8 +46,8 @@
 					{/each}
 
 					<div class="font-bold text-lg mt-2 flex w-full">
-						{#if history.finalPrice}
-							<Result total={history.finalPrice} />
+						{#if history.final_price}
+							<Result total={history.final_price} />
 						{/if}
 					</div>
 				{/each}