Mocked Routes
+));
+
+describe("App", () => {
+ it("renders Toaster, ModalProvider, and AppRoutes", () => {
+ render(Child Content
+ Test Content
+ Test Modal
+ Test Modal
+ Mock Navbar
+));
+
+jest.mock("../../../src/components/shared/SideBar", () => () => (
+ Mock Sidebar
+));
+
+describe("ProtectedRoute", () => {
+ it("redirects to login if not authenticated", () => {
+ isAuthenticatedMock = false;
+ render(
+ Protected Content
+ Protected Content
+
+
+ );
+};
+
+export default AuthCard;
diff --git a/src/components/auth/forms/ForgotPasswordForm.tsx b/src/components/auth/forms/ForgotPasswordForm.tsx
new file mode 100644
index 0000000..8470079
--- /dev/null
+++ b/src/components/auth/forms/ForgotPasswordForm.tsx
@@ -0,0 +1,103 @@
+import { SubmitHandler, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+ forgotPasswordSchema,
+ ForgotPasswordFormData,
+} from "../../../schemas/authSchema";
+import Button from "../../shared/Button";
+import { FormProps } from "../types";
+import { toast } from "sonner";
+import React, { useState } from "react";
+import NewPasswordModal from "../modals/NewPasswordModal";
+
+const ForgotPasswordForm = ({ onSuccess }: FormProps) => {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useFormVirtusize
+ {renderForm()} + +
+ {mode === "login" ? (
+
+
+
+
+
+ ) : (
+
+ )}
+
+
+ );
+};
+
+export default NewPasswordModal;
diff --git a/src/components/auth/types.ts b/src/components/auth/types.ts
new file mode 100644
index 0000000..cea9283
--- /dev/null
+++ b/src/components/auth/types.ts
@@ -0,0 +1,15 @@
+export type FormProps = {
+ onSuccess: () => void;
+};
+
+export type UserResponse = {
+ id: string;
+ username: string;
+};
+
+export type AuthMode = "login" | "register" | "forgot";
+
+export type AuthCardProps = {
+ mode: AuthMode;
+ setMode: (mode: AuthMode) => void;
+};
diff --git a/src/components/clients/forms/ClientForm.tsx b/src/components/clients/forms/ClientForm.tsx
new file mode 100644
index 0000000..60a2ee5
--- /dev/null
+++ b/src/components/clients/forms/ClientForm.tsx
@@ -0,0 +1,231 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useClientsStore } from "../../../stores/useClientStore";
+import { AddClientData, addClientSchema } from "../../../schemas/clientSchema";
+import Button from "../../shared/Button";
+import { CURRENCYOPTIONS } from "../../../lib/constants";
+import { toast } from "sonner";
+import { fromZonedTime, formatInTimeZone } from "date-fns-tz";
+import { useState } from "react";
+import fallbackImg from "../../../assets/fallback.jpg";
+
+type AddClientFormProps = {
+ initialData?: AddClientData;
+ mode?: "add" | "edit";
+ onSuccess: () => void;
+};
+
+const AddClientForm = ({
+ onSuccess,
+ initialData,
+ mode = "add",
+}: AddClientFormProps) => {
+ const { addClient, updateClient } = useClientsStore();
+ const [imageBase64, setImageBase64] = useState
+
+ Enter New Password
+
+
+ );
+};
+
+export default ConfirmDeleteModal;
diff --git a/src/components/clients/modals/ViewClientModal.tsx b/src/components/clients/modals/ViewClientModal.tsx
new file mode 100644
index 0000000..f860797
--- /dev/null
+++ b/src/components/clients/modals/ViewClientModal.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { useClientsStore } from "../../../stores/useClientStore";
+import { formatDate } from "../../../lib/utils";
+import fallbackImg from "../../../assets/fallback.jpg";
+
+type Props = {
+ id: string;
+};
+
+const ViewClientModal = ({ id }: Props) => {
+ const { clients } = useClientsStore();
+ const [client, setClient] = useState(() => clients.find((c) => c.id === id));
+
+ useEffect(() => {
+ if (!client) {
+ fetch(`http://localhost:4090/clients/${id}`)
+ .then((res) => res.json())
+ .then(setClient)
+ .catch(console.error);
+ }
+ }, [id]);
+
+ if (!client) return null;
+
+ return (
+ Confirm Deletion
++ Are you sure you want to delete this client? +
+
+
+
+
+
+
+ );
+};
+
+export default ViewClientModal;
diff --git a/src/components/shared/BackgroundImage.tsx b/src/components/shared/BackgroundImage.tsx
new file mode 100644
index 0000000..9e4c3c0
--- /dev/null
+++ b/src/components/shared/BackgroundImage.tsx
@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { clsx } from "clsx";
+
+type BackgroundImageProps = {
+ src: string;
+ alt?: string;
+ className?: string;
+ overlayClassName?: string;
+ children?: ReactNode;
+};
+
+const BackgroundImage = ({
+ src,
+ alt = "",
+ className,
+ overlayClassName = "relative overflow-hidden",
+ children,
+}: BackgroundImageProps) => {
+ return (
+ + Client Profile +
+ +
+ 
{
+ e.currentTarget.onerror = null;
+ e.currentTarget.src = fallbackImg;
+ }}
+ />
+
+
+
+
+ {client.name}
+{client.company}
+
+
+
+ Age
+ {client.age}
+
+
+ Gender
+ {client.gender}
+
+
+ Subscription
+
+ {client.currency} {client.subscriptionCost}
+
+
+
+ Registered On
+ {formatDate(client.registered)}
+
+
+
+
+ {children}
+
+ );
+};
+
+export default BackgroundImage;
diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx
new file mode 100644
index 0000000..325f7b6
--- /dev/null
+++ b/src/components/shared/Button.tsx
@@ -0,0 +1,61 @@
+import { ButtonHTMLAttributes } from "react";
+import { clsx } from "clsx";
+
+type ButtonVariant = "filled" | "outline" | "ghost";
+
+interface ButtonProps extends ButtonHTMLAttributes
+
+ );
+};
+
+export default Modal;
diff --git a/src/components/shared/NavBar.tsx b/src/components/shared/NavBar.tsx
new file mode 100644
index 0000000..dee519b
--- /dev/null
+++ b/src/components/shared/NavBar.tsx
@@ -0,0 +1,27 @@
+import { useNavigate } from "react-router-dom";
+import { useAuthStore } from "../../stores/useAuthStore";
+import Button from "./Button";
+
+const Navbar = () => {
+ const navigate = useNavigate();
+ const { user, logout } = useAuthStore();
+ const handleLogout = () => {
+ logout();
+ navigate("/?mode=login", { replace: true });
+ };
+
+ return (
+
+
+ {children}
+
+ {`Welcome ${user?.username}`}
+ +
+
+ );
+};
+
+export default ProtectedRoute;
diff --git a/src/components/shared/SideBar.tsx b/src/components/shared/SideBar.tsx
new file mode 100644
index 0000000..65ac74c
--- /dev/null
+++ b/src/components/shared/SideBar.tsx
@@ -0,0 +1,20 @@
+import { Link, useLocation } from "react-router-dom";
+
+const Sidebar = () => {
+ const { pathname } = useLocation();
+
+ const linkClasses = (path: string) =>
+ `block px-4 py-2 rounded hover:bg-gray-200 ${
+ pathname === path ? "bg-gray-300 font-semibold" : ""
+ }`;
+
+ return (
+
+ );
+};
+
+export default Sidebar;
diff --git a/src/components/shared/Table.tsx b/src/components/shared/Table.tsx
new file mode 100644
index 0000000..b0eb722
--- /dev/null
+++ b/src/components/shared/Table.tsx
@@ -0,0 +1,79 @@
+import { ReactNode, useState } from "react";
+import Button from "./Button";
+
+type Column
+
+
+ {children}
+
+
+
+
+
+
+ | + {col.label} + | + ))} +
|---|
| + {col.render(item)} + | + ))} +
+
+
+ Page {page} of {totalPages}
+
+
+
+
+ );
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..f1d8c73
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 0000000..b85bb38
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1,22 @@
+export const CURRENCYOPTIONS = [
+ { code: "USD", symbol: "$" },
+ { code: "INR", symbol: "₹" },
+ { code: "Yen", symbol: "¥" },
+ { code: "CAD", symbol: "C$" },
+ { code: "SGD", symbol: "S$" },
+ { code: "EUR", symbol: "€" },
+ { code: "GBP", symbol: "£" },
+ { code: "PHP", symbol: "₱" },
+ { code: "AUD", symbol: "A$" },
+];
+export const ROUTES = {
+ HOME: "/",
+ DASHBOARD: "/dashboard",
+};
+
+export const MODALIDS = {
+ VIEWCLIENT: "view-client",
+ ADDCLIENT: "add-client",
+ EDITCLIENT: "edit-client",
+ CONFIRMDELETE: "delete-client",
+};
diff --git a/src/lib/hooks/useCurrencySymbol.ts b/src/lib/hooks/useCurrencySymbol.ts
new file mode 100644
index 0000000..722f9b9
--- /dev/null
+++ b/src/lib/hooks/useCurrencySymbol.ts
@@ -0,0 +1,18 @@
+const currencyMap: RecordActions
,
+ render: (c: Client) => (
+
+
+
+
+
+
+ ),
+ },
+ ];
+
+ return (
+
+
+ );
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..0a4009d
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,38 @@
+import { useEffect } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import BackgroundImage from "../components/shared/BackgroundImage";
+import bgImage from "../assets/homeBg.webp";
+import AuthCard from "../components/auth/AuthCard";
+import { useAuthStore } from "../stores/useAuthStore";
+import type { AuthMode } from "../components/auth/types";
+
+const HomePage = () => {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const navigate = useNavigate();
+ const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+
+ const modeParam = searchParams.get("mode");
+ const mode: AuthMode = ["login", "register", "forgot"].includes(modeParam!)
+ ? (modeParam as AuthMode)
+ : "login";
+
+ useEffect(() => {
+ if (isAuthenticated) navigate("/dashboard");
+ }, [isAuthenticated, navigate]);
+
+ const setMode = (newMode: AuthMode) => {
+ setSearchParams({ mode: newMode });
+ };
+
+ return (
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+
+
+ );
+};
+
+export default NotFoundPage;
diff --git a/src/providers/ModalProvider.tsx b/src/providers/ModalProvider.tsx
new file mode 100644
index 0000000..ad2eb37
--- /dev/null
+++ b/src/providers/ModalProvider.tsx
@@ -0,0 +1,83 @@
+import { lazy, useEffect } from "react";
+import { useModalStore } from "../stores/useModalStore";
+import Modal from "../components/shared/Modal";
+import { useSearchParams } from "react-router-dom";
+
+import { MODALIDS } from "../lib/constants";
+import ConfirmDeleteModal from "../components/clients/modals/ConfirmDeleteModal";
+
+const ClientForm = lazy(() => import("../components/clients/forms/ClientForm"));
+const ViewClientModal = lazy(
+ () => import("../components/clients/modals/ViewClientModal")
+);
+
+const ModalProvider = () => {
+ const { modalId, props, setModalId, close } = useModalStore();
+ const [searchParams, setSearchParams] = useSearchParams();
+
+ const urlModalId = searchParams.get("modal");
+ const id = searchParams.get("id");
+
+ useEffect(() => {
+ if (urlModalId && modalId !== urlModalId) {
+ setModalId(urlModalId);
+ }
+ }, [urlModalId]);
+
+ useEffect(() => {
+ if (modalId) {
+ setSearchParams((prev) => {
+ const next = new URLSearchParams(prev);
+ next.set("modal", modalId);
+ if (props?.id) next.set("id", props.id);
+ return next;
+ });
+ } else {
+ setSearchParams((prev) => {
+ const next = new URLSearchParams(prev);
+ next.delete("modal");
+ next.delete("id");
+ return next;
+ });
+ }
+ }, [modalId]);
+
+ const handleClose = () => {
+ close();
+ };
+
+ const renderModal = () => {
+ switch (modalId) {
+ case MODALIDS.ADDCLIENT:
+ return (
+ 404
+Page not found
+ + Back to Home + +