prokawsar · prokawsar · Jul 24, 2024 · Jul 22, 2024 · Jul 22, 2024 · Jul 23, 2024
diff --git 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/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
@@ -6,13 +6,21 @@
 	import { navigating } from '$app/stores'
 	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, {
 		debug: false,
 		track_pageview: true,
 		persistence: 'localStorage'
 	})
+
+	let showSettings = false
+
+	const handleLogout = async () => {
+		await supabase.auth.signOut()
+	}
 </script>
 
 <main class="h-[100svh] flex flex-col">
@@ -23,13 +31,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 +46,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 on:click={() => handleLogout()}>Logout</button>
+				<button>Change pin</button>
+			</div>
+		{/if}
 	</div>
 </main>
diff --git 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: '',
@@ -46,12 +47,16 @@
 	}
 
 	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
 		getAllInputs()
 	}
 
 	const calculatePaperCost = async () => {
-		if (!paperCount.length || hasNullValue) return
+		if (hasNullValue) return
 		perPaperResult.clear()
 		finalPrice = 0
 		paperCount.forEach((paper) => {
@@ -62,15 +67,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,10 +79,22 @@
 		})
 	}
 
+	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
 		focusedIndex = 0
+		customer_name = ''
 		perPaperResult.clear()
 		getAllInputs()
 		setFocus()
@@ -109,7 +117,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,20 +164,31 @@
 				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"
+				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}
+				<Button
+					on:click={saveHistory}
+					text="Save cost"
+					classNames="text-sm animate-pulse !w-[30%] !px-1"
+				/>
+			{/if}
 		</div>
 		<div
 			class="flex flex-col gap-[1px] overflow-y-auto max-w-3xl max-h-[85%] py-2 w-full"
 			bind:this={inputGroupRef}
 		>
 			{#each paperCount as paper, i}
-				<div class="flex flex-row items-center justify-between rounded">
+				<div
+					id={paper.id}
+					class="flex flex-row items-center justify-between rounded"
+					transition:slide={{ axis: 'y', duration: 200 }}
+				>
 					<div class="flex flex-row gap-[3px] items-center overflow-x-auto">
 						<button
 							disabled={paperCount.length == 1 && i == 0}

diff --git a/src/routes/auth/login/+page.svelte b/src/routes/auth/login/+page.svelte
@@ -1,8 +1,12 @@
 <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 = ''
 	let otp = ''
 	let isOtpSent = false
 
@@ -13,6 +17,16 @@
 	const verifyOTP = () => {
 		if (!otp) return
 	}
+
+	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>
 
 <svelte:head>
@@ -24,7 +38,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 +47,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>[email protected]</email>
+	</p>
 </section>