From cfb3258133d09a5e01d9078eb3db862a8544bbc8 Mon Sep 17 00:00:00 2001
From: prokawsar <prokawsar@gmail.com>
Date: Mon, 22 Jul 2024 09:23:32 +0600
Subject: [PATCH 01/10] Seperate save history button

---
 src/routes/(app)/+page.svelte | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 26fc690..849cb6e 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -47,11 +47,13 @@
 
 	const removePaper = async (idx: string) => {
 		paperCount = paperCount.filter((field) => field.id != idx)
+		if (perPaperResult.has(idx)) perPaperResult.delete(idx)
+		perPaperResult = perPaperResult
 		getAllInputs()
 	}
 
 	const calculatePaperCost = async () => {
-		if (!paperCount.length || hasNullValue) return
+		if (hasNullValue) return
 		perPaperResult.clear()
 		finalPrice = 0
 		paperCount.forEach((paper) => {
@@ -62,15 +64,6 @@
 		})
 		perPaperResult = perPaperResult
 
-		// Saving to history
-		if ($totalHistoryStore < MAX_HISTORY) {
-			addHistory({
-				name: customer_name,
-				final_price: finalPrice,
-				papers: paperCount
-			})
-			$totalHistoryStore = await getTotalHistory()
-		}
 		// mixpanel data prepare
 		const perPageData: number[] = []
 		perPaperResult.forEach((data) => {
@@ -83,6 +76,17 @@
 		})
 	}
 
+	const saveHistory = async () => {
+		if ($totalHistoryStore < MAX_HISTORY) {
+			addHistory({
+				name: customer_name,
+				final_price: finalPrice,
+				papers: paperCount
+			})
+			$totalHistoryStore = await getTotalHistory()
+		}
+	}
+
 	const clearAll = () => {
 		paperCount = [{ ...paperFields, id: makeid(5) }]
 		finalPrice = 0
@@ -109,7 +113,7 @@
 		paperCount.find((paper) => {
 			return !paper.length || !paper.width || !paper.thickness || !paper.rate
 		})
-
+	$: showSaveHistory = perPaperResult.size == paperCount.length
 	// Handling and maintaining focused input index
 	$: inputsArray = inputs && Array.from(inputs)
 	$: focusedInputID = $focusedInputStore && $focusedInputStore.getAttribute('id')
@@ -156,13 +160,20 @@
 				Maximum history reached, delete some history!
 			</p>
 		{/if}
-		<div class="flex w-full items-start">
+		<div class="flex w-full gap-1 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"
 			/>
+			{#if showSaveHistory}
+				<Button
+					on:click={saveHistory}
+					text="Save cost"
+					classNames="text-sm animate-pulse w-1/4 !px-1"
+				/>
+			{/if}
 		</div>
 		<div
 			class="flex flex-col gap-[1px] overflow-y-auto max-w-3xl max-h-[85%] py-2 w-full"

From ace477b21a4ea71395183b926fd383988a2ad854 Mon Sep 17 00:00:00 2001
From: prokawsar <prokawsar@gmail.com>
Date: Mon, 22 Jul 2024 18:38:15 +0600
Subject: [PATCH 02/10] Settings ui wip

---
 src/lib/elements/Input.svelte   |  2 +-
 src/routes/(app)/+layout.svelte | 23 +++++++++++++++++------
 src/routes/(app)/+page.svelte   |  6 +++++-
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/lib/elements/Input.svelte b/src/lib/elements/Input.svelte
index 745e8a5..78ce9f3 100644
--- a/src/lib/elements/Input.svelte
+++ b/src/lib/elements/Input.svelte
@@ -32,6 +32,6 @@
 
 <style lang="postcss">
 	.input-field {
-		@apply border border-gray-400 w-12 p-1 rounded;
+		@apply border border-gray-400 w-12 md:w-full p-1 rounded;
 	}
 </style>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 7c203ff..397cc52 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -6,6 +6,7 @@
 	import { navigating } from '$app/stores'
 	import Loader from '$lib/elements/Loader.svelte'
 	import mixpanel from 'mixpanel-browser'
+	import { slide } from 'svelte/transition'
 
 	//Import Mixpanel SDK
 	mixpanel.init(PUBLIC_MIX_TOKEN, {
@@ -13,6 +14,8 @@
 		track_pageview: true,
 		persistence: 'localStorage'
 	})
+
+	let showSettings = false
 </script>
 
 <main class="h-[100svh] flex flex-col">
@@ -23,13 +26,11 @@
 			<Loader />
 		</div>
 	{/if}
-	<nav>
+	<nav class="max-w-6xl mx-auto w-full">
 		<div class="flex justify-center py-2">
 			<p class="text-center text-2xl text-red-600 font-semibold">Molla Printing & Packaging</p>
 		</div>
-		<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="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 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
@@ -40,10 +41,20 @@
 	</nav>
 	<slot />
 
-	<div class="absolute bottom-0 w-full">
-		<p class="text-center text-gray-400">
+	<div class="absolute bottom-0 w-full flex">
+		<p class="text-right md:text-center text-gray-400 w-3/4">
 			&#x1F4BB;Developed by <a href="https://github.com/prokawsar" target="_blank">ProKawsar</a
 			>&#x1F60E;
 		</p>
+		<!-- <button on:click={() => (showSettings = !showSettings)} class="w-1/4"> Settings </button> -->
+		{#if showSettings}
+			<div
+				transition:slide={{ axis: 'y', duration: 200 }}
+				class="absolute right-2 bottom-7 flex flex-col items-start divide-y divide-orange-400 gap-1 bg-slate-100 p-2 rounded"
+			>
+				<button>Logout</button>
+				<button>Change pin</button>
+			</div>
+		{/if}
 	</div>
 </main>
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 849cb6e..040df7e 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -15,6 +15,7 @@
 	import Icon from '@iconify/svelte'
 	import mixpanel from 'mixpanel-browser'
 	import { onMount, tick } from 'svelte'
+	import { slide } from 'svelte/transition'
 
 	const paperFields = {
 		id: '',
@@ -180,7 +181,10 @@
 			bind:this={inputGroupRef}
 		>
 			{#each paperCount as paper, i}
-				<div class="flex flex-row items-center justify-between rounded">
+				<div
+					class="flex flex-row items-center justify-between rounded"
+					transition:slide={{ axis: 'y', duration: 100 }}
+				>
 					<div class="flex flex-row gap-[3px] items-center overflow-x-auto">
 						<button
 							disabled={paperCount.length == 1 && i == 0}

From 6fb687c93e3fa042440145e9613e603f6a269abf Mon Sep 17 00:00:00 2001
From: prokawsar <prokawsar@gmail.com>
Date: Tue, 23 Jul 2024 07:55:12 +0600
Subject: [PATCH 03/10] Login page

---
 src/app.html                       |  2 +-
 src/routes/auth/login/+page.svelte | 41 ++++++++++++++++++++++--------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/app.html b/src/app.html
index 4f8cd23..cda1768 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/logo.jpeg" />
 		<meta name="viewport" content="width=device-width" />
 		<link
 			rel="manifest"
diff --git a/src/routes/auth/login/+page.svelte b/src/routes/auth/login/+page.svelte
index 77441e3..cd7db72 100644
--- a/src/routes/auth/login/+page.svelte
+++ b/src/routes/auth/login/+page.svelte
@@ -2,7 +2,9 @@
 	import { page } from '$app/stores'
 	import Button from '$lib/elements/Button.svelte'
 	import Input from '$lib/elements/Input.svelte'
+
 	let email = ''
+	let password = ''
 	let otp = ''
 	let isOtpSent = false
 
@@ -13,6 +15,11 @@
 	const verifyOTP = () => {
 		if (!otp) return
 	}
+
+	const handleLogin = () => {
+		if (!email || !password) return
+		console.log(email, password)
+	}
 </script>
 
 <svelte:head>
@@ -24,7 +31,7 @@
 	<div class="w-full bg-gradient-to-r from-transparent via-slate-600/10 to-transparent p-[1px]" />
 
 	<form class="flex w-full flex-col gap-3 items-center">
-		{#if isOtpSent}
+		<!-- {#if isOtpSent}
 			<Input
 				required
 				type="text"
@@ -33,15 +40,27 @@
 				placeholder="******"
 			/>
 			<Button type="submit" text="Login with OTP" on:click={verifyOTP} />
-		{:else}
-			<Input
-				required
-				type="email"
-				bind:value={email}
-				classNames="!w-full text-center"
-				placeholder="Type your email"
-			/>
-			<Button type="submit" text="Send OTP" on:click={handleSendOTP} />
-		{/if}
+		{:else} -->
+		<Input
+			required
+			type="email"
+			bind:value={email}
+			classNames="!w-full text-center"
+			placeholder="Type your email"
+		/>
+		<Input
+			required
+			type="password"
+			bind:value={password}
+			classNames="!w-full text-center font-bold"
+			placeholder="*******"
+		/>
+		<Button type="submit" text="Login" on:click={handleLogin} />
+		<!-- {/if} -->
 	</form>
+
+	<p class="text-center text-slate-500 mt-10">
+		Forget password? Need a new account? <br />
+		Contact: <email>prokawsar@gmail.com</email>
+	</p>
 </section>

From 08974330f332503cacf3a53ec8415fccd85670be Mon Sep 17 00:00:00 2001
From: prokawsar <prokawsar@gmail.com>
Date: Tue, 23 Jul 2024 08:03:42 +0600
Subject: [PATCH 04/10] Auth wip

---
 src/routes/(app)/+layout.svelte    | 7 ++++++-
 src/routes/auth/login/+page.svelte | 9 ++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 397cc52..eb9cce9 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -7,6 +7,7 @@
 	import Loader from '$lib/elements/Loader.svelte'
 	import mixpanel from 'mixpanel-browser'
 	import { slide } from 'svelte/transition'
+	import { supabase } from '$lib/db/supabaseClient'
 
 	//Import Mixpanel SDK
 	mixpanel.init(PUBLIC_MIX_TOKEN, {
@@ -16,6 +17,10 @@
 	})
 
 	let showSettings = false
+
+	const handleLogout = async () => {
+		await supabase.auth.signOut()
+	}
 </script>
 
 <main class="h-[100svh] flex flex-col">
@@ -52,7 +57,7 @@
 				transition:slide={{ axis: 'y', duration: 200 }}
 				class="absolute right-2 bottom-7 flex flex-col items-start divide-y divide-orange-400 gap-1 bg-slate-100 p-2 rounded"
 			>
-				<button>Logout</button>
+				<button on:click={() => handleLogout()}>Logout</button>
 				<button>Change pin</button>
 			</div>
 		{/if}
diff --git a/src/routes/auth/login/+page.svelte b/src/routes/auth/login/+page.svelte
index cd7db72..b89af84 100644
--- a/src/routes/auth/login/+page.svelte
+++ b/src/routes/auth/login/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores'
+	import { supabase } from '$lib/db/supabaseClient'
 	import Button from '$lib/elements/Button.svelte'
 	import Input from '$lib/elements/Input.svelte'
+	import { redirect } from '@sveltejs/kit'
 
 	let email = ''
 	let password = ''
@@ -16,9 +18,14 @@
 		if (!otp) return
 	}
 
-	const handleLogin = () => {
+	const handleLogin = async () => {
 		if (!email || !password) return
 		console.log(email, password)
+		const { data, error } = await supabase.auth.signInWithPassword({ email, password })
+		if (error) {
+			return
+		}
+		return redirect(300, '/')
 	}
 </script>
 

From f07a387ba09679b7bd8999bfa439e24a365a3069 Mon Sep 17 00:00:00 2001
From: prokawsar <prokawsar@gmail.com>
Date: Tue, 23 Jul 2024 14:57:40 +0600
Subject: [PATCH 05/10] ID

---
 src/routes/(app)/+page.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 040df7e..fc73428 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -47,6 +47,8 @@
 	}
 
 	const removePaper = async (idx: string) => {
+		// const element = document.getElementById(idx)
+		// if (element) inputGroupRef.removeChild(element)
 		paperCount = paperCount.filter((field) => field.id != idx)
 		if (perPaperResult.has(idx)) perPaperResult.delete(idx)
 		perPaperResult = perPaperResult
@@ -182,8 +184,9 @@
 		>
 			{#each paperCount as paper, i}
 				<div
+					id={paper.id}
 					class="flex flex-row items-center justify-between rounded"
-					transition:slide={{ axis: 'y', duration: 100 }}
+					transition:slide={{ axis: 'y', duration: 200 }}
 				>
 					<div class="flex flex-row gap-[3px] items-center overflow-x-auto">
 						<button

From fe924bd6556282a95bd49292f7ad98cfeddef881 Mon Sep 17 00:00:00 2001
From: prokawsar <prokawsar@gmail.com>
Date: Tue, 23 Jul 2024 15:00:19 +0600
Subject: [PATCH 06/10] Fix ui and reset

---
 src/routes/(app)/+page.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index fc73428..c6758f3 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -94,6 +94,7 @@
 		paperCount = [{ ...paperFields, id: makeid(5) }]
 		finalPrice = 0
 		focusedIndex = 0
+		customer_name = ''
 		perPaperResult.clear()
 		getAllInputs()
 		setFocus()
@@ -168,13 +169,13 @@
 				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"
+				class="border-b border-dashed w-full h-full px-2 focus:outline-none focus:border-teal-500"
 			/>
 			{#if showSaveHistory}
 				<Button
 					on:click={saveHistory}
 					text="Save cost"
-					classNames="text-sm animate-pulse w-1/4 !px-1"
+					classNames="text-sm animate-pulse w-[26%] !px-1"
 				/>
 			{/if}
 		</div>

From 08365eb08342e26ba3d358a99bb0e02b0fd217ee Mon Sep 17 00:00:00 2001
From: prokawsar <prokawsar@gmail.com>
Date: Wed, 24 Jul 2024 18:10:41 +0600
Subject: [PATCH 07/10] Padding

---
 src/routes/(app)/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index c6758f3..b6f5e38 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -169,7 +169,7 @@
 				bind:value={customer_name}
 				type="text"
 				placeholder="Customer name"
-				class="border-b border-dashed w-full h-full px-2 focus:outline-none focus:border-teal-500"
+				class="border-b py-[2px] border-dashed w-full h-full px-2 focus:outline-none focus:border-teal-500"
 			/>
 			{#if showSaveHistory}
 				<Button

From ad304e77b1ce1fbb3eac1ee9779be6ce365b35c5 Mon Sep 17 00:00:00 2001
From: prokawsar <prokawsar@gmail.com>
Date: Wed, 24 Jul 2024 18:11:16 +0600
Subject: [PATCH 08/10] Fix placeholder name

---
 src/routes/(app)/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index b6f5e38..edc5c66 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -168,7 +168,7 @@
 			<input
 				bind:value={customer_name}
 				type="text"
-				placeholder="Customer name"
+				placeholder="Product name"
 				class="border-b py-[2px] border-dashed w-full h-full px-2 focus:outline-none focus:border-teal-500"
 			/>
 			{#if showSaveHistory}

From 6c501b9a7f7bd8eba4001a871ceaaa9113e61ded Mon Sep 17 00:00:00 2001
From: prokawsar <prokawsar@gmail.com>
Date: Wed, 24 Jul 2024 18:19:37 +0600
Subject: [PATCH 09/10] Padding fix

---
 src/routes/(app)/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index edc5c66..9b3e272 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -175,7 +175,7 @@
 				<Button
 					on:click={saveHistory}
 					text="Save cost"
-					classNames="text-sm animate-pulse w-[26%] !px-1"
+					classNames="text-sm animate-pulse w-[30%] !px-1"
 				/>
 			{/if}
 		</div>

From 1681ffb7ac417090d50dfc7419d1844132ddd80b Mon Sep 17 00:00:00 2001
From: prokawsar <prokawsar@gmail.com>
Date: Wed, 24 Jul 2024 18:26:13 +0600
Subject: [PATCH 10/10] Fix prod

---
 src/routes/(app)/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 9b3e272..a3bc4bd 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -175,7 +175,7 @@
 				<Button
 					on:click={saveHistory}
 					text="Save cost"
-					classNames="text-sm animate-pulse w-[30%] !px-1"
+					classNames="text-sm animate-pulse !w-[30%] !px-1"
 				/>
 			{/if}
 		</div>