add: zustand fundamentals

src/app/page.tsx

@@ -1,9 +1,11 @@
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Home() {
   return (
     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
       <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+        <Link href={"/auth"}>Login</Link>
         <Image
           className="dark:invert"
           src="/next.svg"

src/features/auth/actions/loginUser.ts

@@ -0,0 +1,24 @@
+// features/auth/actions/loginUser.ts
+import { useAuthStore } from '@/zustand/userStore'
+
+// Simulated API login
+export async function loginUser(number: string, password: string) {
+  // Simulate API call - replace with real one
+  const response = await new Promise<{ user: any }>((resolve) =>
+    setTimeout(() => {
+      resolve({
+        user: {
+          id: '123',
+          name: 'John Doe',
+          number,
+          token: 'mock-jwt-token',
+        },
+      })
+    }, 1000)
+  )
+
+  const { login } = useAuthStore.getState()
+  login(response.user)
+
+  return true;
+}

src/zustand/userStore.ts

@@ -0,0 +1,39 @@
+// zustand/userStore.ts
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+type User = {
+  id: string
+  name: string
+  number: string
+  token: string
+}
+
+type AuthStore = {
+  user: User | null
+  isAuthenticated: boolean
+  login: (userData: User) => void
+  logout: () => void
+}
+
+export const useAuthStore = create<AuthStore>()(
+  persist(
+    (set) => ({
+      user: null,
+      isAuthenticated: false,
+      login: (userData) =>
+        set(() => ({
+          user: userData,
+          isAuthenticated: true,
+        })),
+      logout: () =>
+        set(() => ({
+          user: null,
+          isAuthenticated: false,
+        })),
+    }),
+    {
+      name: 'auth-storage', // Key in localStorage
+    }
+  )
+)