18 sep home

app/(common)/components/ClientWrapper/ClientWrapper.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { GoogleOAuthProvider } from '@react-oauth/google';
+
+
+export const ClientWrapper = ({ children }: { children: React.ReactNode }) => {
+    const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
+
+    if (!clientId) {
+        return <div>Loading...</div>
+    }
+
+    return <GoogleOAuthProvider clientId={clientId}>
+        {children}
+    </GoogleOAuthProvider>
+}

app/(common)/components/SplashScreen/SplashScreen.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { Button } from "@/components/ui/button";
+import { Layer } from "@/components/ui/layer";
+import Image from "next/image";
+import Link from "next/link";
+import { AiOutlineArrowRight } from "react-icons/ai";
+import PersonalFinanceIllustration from '../../assets/Personal_Finance_Illustration.svg';
+
+
+export const SplashScreen = () => {
+    // const [IsSplashScreenShown, setIsSplashScreenShown] = useGeneralStore((state: GeneralStore) => [state.IsSplashScreenShown, state.setIsSplashScreenShown])
+
+    // if (IsSplashScreenShown) {
+    //     return <></>
+    // }
+
+    return <Layer index={10} className="bg-background">
+
+        <div className="flex flex-col  w-screen h-screen items-center z-50 justify-center py-8 ">
+
+            <Image
+                className='mb-16'
+                src={PersonalFinanceIllustration}
+                alt="Personal Finance Illustration"
+                width={150}
+                priority
+            />
+
+            <h1 className='text-3xl font-bold text-center mb-8'>
+                {/* subtitle */}
+                Welcome to {process.env.NEXT_PUBLIC_APP_NAME}
+            </h1>
+
+            <p className='px-8 mb-8 text-center'>
+                {process.env.NEXT_PUBLIC_APP_NAME} is the ultimate tool for tracking your personal finances related to your lending and borrowing activities.
+                Whether you lend money to your friends, borrow money from your family, or use any other form of credit,
+                our finance app will help you stay on top of your finances.
+            </p>
+
+            <Link href="/auth/login">
+                <Button variant="default" type="button">
+                    Get Started &ensp;<AiOutlineArrowRight />
+                </Button>
+            </Link>
+
+            {/* <Login /> */}
+        </div>
+    </Layer>
+}

app/(common)/components/index.ts

@@ -1,3 +1 @@
-export { HeroSection } from './HeroSection'
-export { RecentTransactionsSection } from './RecentTransactionsSection'
-
+export * from './ClientWrapper/ClientWrapper'

app/auth/layout.tsx

@@ -0,0 +1,18 @@
+
+import { GuestLayout } from '@/components/layouts'
+
+export default function AuthenticationLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    let test = 22;
+
+    console.log(test)
+{{
+    console.log(test)
+}}
+    return (
+        <GuestLayout>{children}</GuestLayout>
+    )
+}

app/auth/login/page.tsx

@@ -0,0 +1,18 @@
+
+import { GuestLayout } from '@/components/layouts';
+import { Login } from '@/modules/auth/components/Login';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Mint Pulse',
+    description:
+        'Mint Pulse is the ultimate tool for tracking your personal finances related to your lending and borrowing activities. You can create records of your transactions, set reminders, view reports, and more. You can also sync your data across multiple devices and access it anytime, anywhere. Whether you lend money to your friends, borrow money from your family, or use any other form of credit, our finance app will help you stay on top of your finances and avoid unnecessary fees or interest. Download our finance app today and see how it can make your life easier and happier!',
+}
+
+export default function Home() {
+
+    return <div className="flex flex-col justify-center items-center h-screen w-screen">
+        <Login />
+    </div>;
+
+}

app/(common)/components/HeroSection/HeroSection.tsx → app/dashboard/(common)/components/HeroSection/HeroSection.tsx

@@ -6,15 +6,19 @@ import Link from 'next/link'
 import { GiPayMoney, GiReceiveMoney } from 'react-icons/gi'
 import { TransactionFilterFromModal } from './TransactionFilterFromModal'
 import { useHeroSectionState } from './hooks'
+import { useGoogleSpreadSheet } from '@/hooks'
 export function HeroSection() {
-    const { totalCredit, totalDebit, totalBalance, isLoading } =
-        useHeroSectionState()
+
+    // const { doc, ...gss } = useGoogleSpreadSheet()
+    const { totalCredit, totalDebit, totalBalance, isLoading, error } = useHeroSectionState()
+    // const { totalCredit, totalDebit, totalBalance, isLoading, error } = { totalCredit: 0, totalDebit: 0, totalBalance: 0, isLoading: true, error: '' }
+    // console.log({ totalCredit, totalDebit, totalBalance, isLoading, error })
 
 
     return (
         <section className="py-8">
             {/* start:: Filters */}
-            <TransactionFilterFromModal />
+            {/* <TransactionFilterFromModal /> */}
             {/* end:: Filters */}
 
             {/* end:: Filters */}
@@ -53,7 +57,7 @@ export function HeroSection() {
             </div>
             <div className="grid grid-cols-2 font-bold gap-4 px-4 pt-16 text-center text-white">
                 <Link
-                    href="/transactions/create?type=credit"
+                    href="/dashboard/transactions/create?type=credit"
                     className="py-2 bg-destructive rounded-lg hover:bg-danger/95"
                 >
                     <span className="flex mx-auto gap-2 items-center justify-center">
@@ -62,7 +66,7 @@ export function HeroSection() {
                     </span>
                 </Link>
                 <Link
-                    href="/transactions/create?type=debit"
+                    href="/dashboard/transactions/create?type=debit"
                     className="py-2 bg-success rounded-lg hover:bg-success/95"
                 >
                     <span className="flex gap-2  items-center justify-center">

app/(common)/components/HeroSection/TransactionFilterFromModal/FilterForm.tsx → app/dashboard/(common)/components/HeroSection/TransactionFilterFromModal/FilterForm.tsx

@@ -1,5 +1,5 @@
 'use client'
-import Field from '@/components/form/Field'
+import { Field } from '@/components/form/Field'
 import { Button } from '@/components/ui/button'
 import { DialogTrigger } from '@/components/ui/dialog'
 import { Form } from '@/components/ui/form'
@@ -45,6 +45,15 @@ export const FilterForm = () => {
                     name="date_range"
                     mode="range"
                 />
+
+                <Field
+                    form={form}
+                    label="Settled At"
+                    type="date-range"
+                    name="settled_at"
+                    mode="range"
+                />
+
                 <div className="grid grid-cols-2 gap-2">
                     <Label className='col-span-2 mb-2'>Amount Range</Label>
                     <Field

app/(common)/components/HeroSection/TransactionFilterFromModal/hooks.ts → app/dashboard/(common)/components/HeroSection/TransactionFilterFromModal/hooks.ts

@@ -1,5 +1,5 @@
-import { TransactionFilterContext } from '@/app/(common)/context/TransactionFilterProvider'
-import useQueryFilter from '@/hooks/useQueryFilter/useQueryFilter'
+import { TransactionFilterContext } from '@/app/dashboard/(common)/context/TransactionFilterProvider'
+import { useQueryFilter } from '@/hooks/useQueryFilter/useQueryFilter'
 import { User } from '@/modules/users/types'
 import { QueryFilter } from '@/types/queryFilter'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -37,6 +37,12 @@ export const useFilterForm = () => {
             from: filters?.whereBetween?.amount?.[0] || '',
             to: filters?.whereBetween?.amount?.[1] || '',
         },
+        settled_at: filters?.whereBetween?.settled_at?.length === 2
+            ? {
+                from: new Date(filters?.whereBetween?.settled_at[0]),
+                to: new Date(filters?.whereBetween?.settled_at[1]),
+            }
+            : undefined,
     } as z.infer<typeof FormSchema>
 
     console.log({ defaultValues });
@@ -67,10 +73,10 @@ export const useFilterForm = () => {
 
             if (key === 'is_settled') {
                 filters = merge({
-                    where: {
-                        ...filters.where,
-                        is_settled: Boolean(Number(value)),
-                    },
+                    whereNotNull: [
+                        ...(filters?.whereNotNull || []),
+                        'settled_at'
+                    ],
                 }, filters)
             } else if (key === 'user_id') {
                 filters = merge({
@@ -104,6 +110,20 @@ export const useFilterForm = () => {
                         ] as [string, string],
                     },
                 }, filters)
+            } else if (
+                key === 'settled_at' &&
+                typeof value === 'object' &&
+                typeof value?.from === 'object' &&
+                typeof value?.to === 'object'
+            ) {
+                filters = merge({
+                    whereBetween: {
+                        settled_at: [
+                            `${format(value.from, `yyyy-MM-dd'T'`)}00:00`,
+                            `${format(value.to, `yyyy-MM-dd'T'`)}23:59`,
+                        ] as [string, string],
+                    },
+                }, filters)
             }
         })
         setFilters(filters)

app/(common)/components/HeroSection/TransactionFilterFromModal/schema.ts → app/dashboard/(common)/components/HeroSection/TransactionFilterFromModal/schema.ts

@@ -24,6 +24,12 @@ export const FormSchema = z.object({
             to: z.date().optional(),
         })
         .optional(),
+    settled_at: z
+        .object({
+            from: z.date().optional(),
+            to: z.date().optional(),
+        })
+        .optional(),
     amount_range: z
         .object({
             from: z.number()

app/dashboard/(common)/components/HeroSection/hooks.ts

@@ -0,0 +1,47 @@
+'use client'
+
+import { Transaction, useTransactionSheet } from '@/modules/transactions'
+import { useEffect, useState } from 'react'
+
+
+export const useHeroSectionState = () => {
+
+    const [isLoading, setIsLoading] = useState(true)
+    const [error, setError] = useState('')
+    const [totalCredit, setTotalCredit] = useState(0)
+    const [totalDebit, setTotalDebit] = useState(0)
+    const [totalBalance, setTotalBalance] = useState(0)
+    const { transactionSheet, ...ts } = useTransactionSheet()
+    // console.log("🚀 ~ useHeroSectionState ~ ts:", ts)
+
+    // google sheet implementation
+    const getData = async (transactionSheet: any) => {
+        console.log('🚀 ~ file: hooks.ts ~ line 20 ~ getData ~ transactionSheet', transactionSheet)
+        const totalCredit = await transactionSheet.getRows()?.reduce((tc: number, txn: Transaction) => {
+            if (txn.type === 'credit') return tc + txn.amount
+            return tc
+        }, 0)
+
+        const totalDebit = await transactionSheet.getRows()?.reduce((tc: number, txn: Transaction) => {
+            if (txn.type === 'debit') return tc + txn.amount
+            return tc
+        }, 0)
+
+        if (!(typeof totalCredit === 'number' && typeof totalDebit === 'number')) {
+            setError('Something went wrong. Please try again later.')
+            return
+        }
+        const totalBalance = totalCredit - totalDebit
+        setTotalCredit(totalCredit)
+        setTotalDebit(totalDebit)
+        setTotalBalance(totalBalance)
+        setIsLoading(false)
+    }
+
+    useEffect(() => {
+        if (!ts.isLoading && !ts.error && transactionSheet)
+            getData(transactionSheet)
+    }, [ts])
+
+    return { totalCredit, totalDebit, totalBalance, isLoading, error }
+}

app/(common)/components/RecentTransactionsSection/RecentTransactionsSection.tsx → app/dashboard/(common)/components/RecentTransactionsSection/RecentTransactionsSection.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { TransactionList } from '@/modules/transactions/components/list'
+import { TransactionList } from '@/modules/transactions'
 import { Transaction } from '@/modules/transactions/types'
 import { merge } from 'lodash-es'
 import Link from 'next/link'
@@ -27,7 +27,7 @@ export function RecentTransactionsSection({ }) {
         <section className="py-16 px-4">
             <div className="mb-6 flex justify-between">
                 <h4 className="text-xs dark:text-gray-300">RECENT TRANSACTIONS</h4>
-                <Link href={`/transactions`} className="text-xs text-sky-300">
+                <Link href={`/dashboard/transactions`} className="text-xs text-sky-300">
                     More &#8594;
                 </Link>
             </div>

app/dashboard/(common)/components/index.ts

@@ -0,0 +1,3 @@
+export { HeroSection } from './HeroSection'
+export { RecentTransactionsSection } from './RecentTransactionsSection'
+

app/dashboard/layout.tsx

@@ -0,0 +1,12 @@
+
+import { AuthLayout } from '@/components/layouts'
+
+export default function DashboardLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    return (
+        <AuthLayout>{children}</AuthLayout>
+    )
+}