How We Work ?
-
+
At Hotbed.lk, we make finding and managing boarding places simple and
efficient. Seekers can quickly find properties with real-time
availability and advanced filters, while owners can manage listings
@@ -53,24 +53,23 @@ const HowWeWork = () => (
export default function HeroSearch() {
return (
-
+
{/* Background image */}
-
- {/* FIX: sm:pb-28 */}
-
-
-
+
+
+
+
Find comfortable boarding places near you
-
+
Search, compare and contact owners quickly with real-time
availability and filters.
diff --git a/src/components/state/ErrorState.tsx b/src/components/state/ErrorState.tsx
new file mode 100644
index 0000000..4da6af1
--- /dev/null
+++ b/src/components/state/ErrorState.tsx
@@ -0,0 +1,32 @@
+import { MdErrorOutline } from "react-icons/md";
+
+interface ErrorStateProps {
+ message: string;
+ onRetry?: () => void;
+}
+
+const ErrorState = ({ message, onRetry }: ErrorStateProps) => {
+ return (
+
+ {/* Icon */}
+
+
+
+ {/* Message */}
+
{message}
+
+ {/* Retry */}
+ {onRetry && (
+
+ Try again
+
+ )}
+
+ );
+};
+
+export default ErrorState;
diff --git a/src/components/state/VerifySuccessModel.tsx b/src/components/state/VerifySuccessModel.tsx
new file mode 100644
index 0000000..1e7b07c
--- /dev/null
+++ b/src/components/state/VerifySuccessModel.tsx
@@ -0,0 +1,44 @@
+type VerifySuccessModalProps = {
+ open: boolean;
+ onClose?: () => void;
+};
+
+export default function VerifySuccessModal({ open, onClose }: VerifySuccessModalProps) {
+ if (!open) return null;
+
+ return (
+
+
+
+
+
Verification complete
+
Your phone number is verified.
+
+ Close
+
+
+
+ );
+}
diff --git a/src/components/state/index.ts b/src/components/state/index.ts
new file mode 100644
index 0000000..56b9ff4
--- /dev/null
+++ b/src/components/state/index.ts
@@ -0,0 +1 @@
+export { default as ErrorState } from "./ErrorState";
diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx
new file mode 100644
index 0000000..30a2104
--- /dev/null
+++ b/src/components/ui/Button/Button.tsx
@@ -0,0 +1,35 @@
+import type { ButtonHTMLAttributes } from "react";
+
+export interface ButtonProps extends ButtonHTMLAttributes
{
+ loading?: boolean;
+}
+
+export default function Button({
+ children,
+ loading,
+ disabled,
+ className = "",
+ ...props
+}: ButtonProps) {
+ return (
+
+ {loading ? (
+
+ Loading
+
+ ) : (
+ children
+ )}
+
+ );
+}
diff --git a/src/components/ui/Input/Input.tsx b/src/components/ui/Input/Input.tsx
new file mode 100644
index 0000000..cc630b0
--- /dev/null
+++ b/src/components/ui/Input/Input.tsx
@@ -0,0 +1,25 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+
+export interface InputProps extends InputHTMLAttributes {
+ error?: string;
+}
+
+const Input = forwardRef(
+ ({ className = "", error, ...props }, ref) => {
+ return (
+
+
+
+ {error &&
{error}
}
+
([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const fetchProperties = async () => {
+ try {
+ setLoading(true);
+ setError(null);
+ const data = await getProperties();
+ setProperties(data);
+ } catch (err) {
+ setError("Failed to load properties");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchProperties();
+ }, []);
+
+ return { properties, loading, error };
+};
diff --git a/src/index.css b/src/index.css
index 7cb8951..f0e0cbe 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap");
@import "tailwindcss";
/* global.css */
@@ -6,4 +7,135 @@
--hover-primary: #3d3c5a;
--background-green: #6a8f7f;
--background-pink: #bfacb569;
+ --listing-ink: #1f2b24;
+ --listing-ink-muted: #5a6b63;
+ --listing-sand: #f6efe7;
+ --listing-glow: #f3d3a4;
+ --listing-mint: #cfe7dd;
+ --listing-clay: #b2763d;
+ --listing-line: #eadfd3;
+ --font-display: "Poppins", sans-serif;
+ --font-body: "Roboto", system-ui, sans-serif;
+}
+
+html,
+body,
+#root {
+ overflow-x: hidden;
+}
+
+body {
+ font-family: var(--font-body);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: var(--font-display);
+}
+
+.font-display {
+ font-family: var(--font-display);
+}
+
+.font-body {
+ font-family: var(--font-body);
+}
+
+.no-scrollbar {
+ scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar:vertical {
+ width: 0;
+}
+
+.no-scrollbar::-webkit-scrollbar:horizontal {
+ height: 10px;
+}
+
+@keyframes rise-in {
+ from {
+ opacity: 0;
+ transform: translateY(12px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.rise-in {
+ animation: rise-in 700ms ease-out both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .rise-in {
+ animation: none;
+ }
+}
+
+@keyframes dot-blink {
+ 0%,
+ 80%,
+ 100% {
+ opacity: 0.2;
+ }
+ 40% {
+ opacity: 1;
+ }
+}
+
+.dot-blink {
+ animation: dot-blink 1.2s infinite ease-in-out;
+}
+
+.dot-blink-delay-1 {
+ animation-delay: 0.2s;
+}
+
+.dot-blink-delay-2 {
+ animation-delay: 0.4s;
+}
+
+@keyframes verified-pop {
+ 0% {
+ opacity: 0;
+ transform: scale(0.92);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes draw-circle {
+ to {
+ stroke-dashoffset: 0;
+ }
+}
+
+@keyframes draw-check {
+ to {
+ stroke-dashoffset: 0;
+ }
+}
+
+.animate-verified-pop {
+ animation: verified-pop 300ms ease-out both;
+}
+
+.verified-circle {
+ stroke-dasharray: 166;
+ stroke-dashoffset: 166;
+ animation: draw-circle 600ms ease forwards;
+}
+
+.verified-check {
+ stroke-dasharray: 48;
+ stroke-dashoffset: 48;
+ animation: draw-check 350ms ease-out 550ms forwards;
}
diff --git a/src/main.tsx b/src/main.tsx
index 10ed13e..85a16d5 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,13 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App.tsx";
createRoot(document.getElementById("root")!).render(
-
+
);
diff --git a/src/pages/Auth/Login.tsx b/src/pages/Auth/Login.tsx
new file mode 100644
index 0000000..e784c55
--- /dev/null
+++ b/src/pages/Auth/Login.tsx
@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useAuthStore } from "../../store/auth.store";
+import Input from "../../components/ui/Input/Input";
+import Button from "../../components/ui/Button/Button";
+
+export default function Login() {
+ const login = useAuthStore((s) => s.login);
+ const loginDemo = useAuthStore((s) => s.loginDemo);
+ const isLoading = useAuthStore((s) => s.isLoading);
+ const error = useAuthStore((s) => s.error);
+
+ const [mobile_number, setPhone] = useState("");
+ const [password, setPassword] = useState("");
+
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const from = location.state?.from || "/";
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ const success = await login({ mobile_number, password });
+ if (success) navigate(from, { replace: true });
+ };
+
+ const handleDemoLogin = () => {
+ loginDemo();
+ navigate("/home", { replace: true });
+ };
+
+ return (
+ <>
+ {/* Header */}
+
+
+ Welcome
+
+
+ Login or Create an account with hotbed.lk
+
+
+
+ Enter Your New Password
+
+
+ Please enter your new password below.
+
+
+
+ Forgot Your Password?
+
+
+ Enter your phone number to reset your password.
+
+
(null);
+ const [showPassword, setShowPassword] = useState(false);
+ const [showConfirm, setShowConfirm] = useState(false);
+
+
+ const [errors, setErrors] = useState>({});
+
+ const navigate = useNavigate();
+
+ const validate = () => {
+ const newErrors: Record = {};
+
+ // First Name
+ if (!fName.trim()) {
+ newErrors.fName = "First name is required";
+ }
+
+ // Last Name
+ if (!lName.trim()) {
+ newErrors.lName = "Last name is required";
+ }
+
+ // Phone Number
+ if (!phone.trim()) {
+ newErrors.phone = "Phone number is required";
+ }
+
+ // Email
+ if (!email.trim()) {
+ newErrors.email = "Email is required";
+ } else {
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!emailRegex.test(email)) {
+ newErrors.email = "Invalid email address";
+ }
+ }
+
+ // Password
+ if (!password) {
+ newErrors.password = "Password is required";
+ }
+
+ // Confirm Password
+ if (!confirmPassword) {
+ newErrors.confirmPassword = "Confirm password is required";
+ } else if (password !== confirmPassword) {
+ newErrors.confirmPassword = "Passwords do not match";
+ }
+
+ setErrors(newErrors);
+ return Object.keys(newErrors).length === 0;
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ setTermsError(null);
+ if (!validate()) return;
+ if (!termsAccepted) {
+ setTermsError("Please accept the terms to continue.");
+ return;
+ }
+
+ const success = await register({
+ first_name: fName.trim(),
+ last_name: lName.trim(),
+ password,
+ mobile_number: phone.trim(),
+ email: email.trim(),
+ });
+
+ if (success) {
+ navigate(ROUTES.VERIFY_PHONE_NUMBER, {
+ replace: true,
+ state: { mobile_number: phone.trim(), email: email.trim() },
+ });
+ }
+ };
+
+ return (
+ <>
+ {/* Header */}
+
+
+ Create Account
+
+
+ Create an account or login with hotbed.lk
+
+
(null);
+ const [formError, setFormError] = useState(null);
+ const [secondsLeft, setSecondsLeft] = useState(RESEND_DELAY_SECONDS);
+ const [showSuccess, setShowSuccess] = useState(false);
+
+ useEffect(() => {
+ if (secondsLeft <= 0) {
+ return;
+ }
+ const timer = window.setInterval(() => {
+ setSecondsLeft((prev) => Math.max(0, prev - 1));
+ }, 1000);
+
+ return () => window.clearInterval(timer);
+ }, [secondsLeft]);
+
+ const handleResend = async () => {
+ if (secondsLeft > 0) {
+ return;
+ }
+
+ setFormError(null);
+
+ if (!mobileNumber && !email) {
+ setFormError("Phone number or email is required to resend.");
+ return;
+ }
+
+ const success = await resendOtp({
+ mobile_number: mobileNumber || null,
+ email: email || null,
+ });
+
+ if (success) {
+ setSecondsLeft(RESEND_DELAY_SECONDS);
+ }
+ };
+
+ const formatTime = (totalSeconds: number) => {
+ const minutes = Math.floor(totalSeconds / 60);
+ const seconds = totalSeconds % 60;
+ return `${minutes}:${String(seconds).padStart(2, "0")}`;
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setCodeError(null);
+ setFormError(null);
+
+ if (!verificationCode.trim()) {
+ setCodeError("Verification code is required");
+ return;
+ }
+
+ if (!mobileNumber && !email) {
+ setFormError("Phone number or email is missing. Please register again.");
+ return;
+ }
+
+ const success = await verifyPhone({
+ mobile_number: mobileNumber || null,
+ email: email || null,
+ otp: verificationCode.trim(),
+ });
+
+ if (success) {
+ setShowSuccess(true);
+ window.setTimeout(() => {
+ setShowSuccess(false);
+ navigate(ROUTES.LOGIN, { replace: true });
+ }, 1500);
+ } else {
+ setFormError("Verification failed. Please check the code and try again.");
+ }
+ };
+
+ return (
+ <>
+
+
+ Verify Your Phone Number
+
+
+
+
+
+
+ {secondsLeft > 0 ? (
+
Wait {formatTime(secondsLeft)} for send verification code again
+ ) : (
+
+ Resend verification code
+
+ )}
+
setShowSuccess(false)}
+ />
+
+ );
+}
diff --git a/src/pages/Feed/feed.tsx b/src/pages/Feed/feed.tsx
new file mode 100644
index 0000000..e159cca
--- /dev/null
+++ b/src/pages/Feed/feed.tsx
@@ -0,0 +1,5 @@
+import FeedLayout from "../../components/layout/Feed/Feed";
+
+export default function Feed() {
+ return
+
+
+
+ );
+}
diff --git a/src/pages/Payment/Payment.tsx b/src/pages/Payment/Payment.tsx
new file mode 100644
index 0000000..966f285
--- /dev/null
+++ b/src/pages/Payment/Payment.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import SubscriptionDetailsCard from "../../components/payment/SubscriptionDetailsCard";
+
+export const Payment = () => {
+ const [showCard, setShowCard] = useState(false);
+
+ return (
+
+
setShowCard(true)}
+ className="bg-black px-6 py-3 text-m text-white"
+ >
+ Test
+
+
+ {showCard && (
+
setShowCard(false)}
+ className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
+ >
+
e.stopPropagation()}
+ className="relative w-full max-w-lg rounded-2xl bg-white p-4 shadow-xl"
+ >
+ setShowCard(false)}
+ aria-label="Close popup"
+ className="absolute right-8 top-6 text-3xl leading-none text-gray-400 hover:text-gray-700"
+ >
+ ×
+
+
+
+
+ )}
+
+ {/* Public routes */}
+
+
+
+ {/* Protected routes */}
+
+
+
+ {/* ADMIN ONLY */}
+
+
+ );
+};
+
+export default AppRoutes;
diff --git a/src/routes/ProtectedRoute.tsx b/src/routes/ProtectedRoute.tsx
new file mode 100644
index 0000000..2a50309
--- /dev/null
+++ b/src/routes/ProtectedRoute.tsx
@@ -0,0 +1,24 @@
+import type { JSX } from "react";
+import { Navigate } from "react-router-dom";
+import { useAuthStore } from "../store/auth.store";
+
+interface ProtectedRouteProps {
+ isAuthenticated: boolean;
+ children: JSX.Element;
+}
+
+const ProtectedRoute = ({ isAuthenticated, children }: ProtectedRouteProps) => {
+ const isAuthReady = useAuthStore((s) => s.isAuthReady);
+
+ if (!isAuthReady) {
+ return null;
+ }
+
+ if (!isAuthenticated) {
+ return | null = null;
+
+const refreshAccessToken = async (): Promise => {
+ const refreshToken = tokenStorage.getRefreshToken();
+ if (!refreshToken) {
+ return null;
+ }
+
+ const res = await plainApi.post("/auth/refresh", {
+ refresh_token: refreshToken,
+ });
+
+ const accessToken =
+ res.data?.token ?? res.data?.access_token ?? res.data?.accessToken ?? null;
+ const nextRefreshToken =
+ res.data?.refresh_token ?? res.data?.refreshToken ?? null;
+
+ if (accessToken) {
+ tokenStorage.setTokens(accessToken, nextRefreshToken ?? refreshToken);
+ }
+
+ return accessToken;
+};
+
+api.interceptors.response.use(
+ (response) => response,
+ async (error) => {
+ const status = error.response?.status;
+ const originalRequest = error.config as AxiosRequestConfig & {
+ _retry?: boolean;
+ };
+ const requestUrl = originalRequest?.url ?? "";
+ const isAuthRequest =
+ requestUrl.includes("/auth/login") || requestUrl.includes("/auth/refresh");
+
+ if (
+ status === 401 &&
+ originalRequest &&
+ !originalRequest._retry &&
+ !isAuthRequest
+ ) {
+ originalRequest._retry = true;
+
+ if (!tokenStorage.getRefreshToken()) {
+ tokenStorage.clearTokens();
+ window.location.href = "/login";
+ return Promise.reject(error);
+ }
+
+ if (!refreshPromise) {
+ refreshPromise = refreshAccessToken().finally(() => {
+ refreshPromise = null;
+ });
+ }
+
+ const newToken = await refreshPromise;
+ if (newToken) {
+ originalRequest.headers = originalRequest.headers ?? {};
+ originalRequest.headers.Authorization = `Bearer ${newToken}`;
+ return api.request(originalRequest);
+ }
+
+ tokenStorage.clearTokens();
+ window.location.href = "/login";
+ }
+
+ return Promise.reject(error);
+ }
+);
+
+export default api;
+export { plainApi };
diff --git a/src/services/auth.service.ts b/src/services/auth.service.ts
new file mode 100644
index 0000000..41c659c
--- /dev/null
+++ b/src/services/auth.service.ts
@@ -0,0 +1,42 @@
+import api from "./api";
+
+export const loginRequest = async (data: {
+ mobile_number: string;
+ password: string;
+}) => {
+ const res = await api.post("/auth/login", data);
+ return res.data;
+};
+
+export const getProfileRequest = async () => {
+ const res = await api.get("/auth/me");
+ return res.data;
+};
+
+export const registerRequest = async (data: {
+ first_name: string;
+ last_name: string;
+ password: string;
+ mobile_number: string;
+ email: string;
+}) => {
+ const res = await api.post("/auth/", data);
+ return res.data;
+};
+
+export const verifyPhoneRequest = async (data: {
+ email?: string | null;
+ mobile_number?: string | null;
+ otp: string;
+}) => {
+ const res = await api.post("/auth/verify", data);
+ return res.data;
+};
+
+export const resendOtpRequest = async (data: {
+ email?: string | null;
+ mobile_number?: string | null;
+}) => {
+ const res = await api.post("/auth/resend-otp", data);
+ return res.data;
+};
diff --git a/src/services/index.ts b/src/services/index.ts
new file mode 100644
index 0000000..2ab33e8
--- /dev/null
+++ b/src/services/index.ts
@@ -0,0 +1 @@
+export * from "./auth.service";
diff --git a/src/services/property.service.ts b/src/services/property.service.ts
new file mode 100644
index 0000000..c4ba45b
--- /dev/null
+++ b/src/services/property.service.ts
@@ -0,0 +1,49 @@
+import type { Property } from "../types/property.types";
+import api from "./api";
+
+type DemoImage = { id: string; image: string };
+type DemoProperty = {
+ id: string;
+ property_type: string;
+ price: number;
+ location_name: string;
+ Images: DemoImage[];
+};
+type DemoResponse = {
+ succuss: boolean;
+ status: number;
+ message: string;
+ total_available_properties: number;
+ properties: DemoProperty[];
+};
+
+const DEFAULT_IMAGE = "/images/banners/landing-p-hero-01.png";
+
+const getImageUrl = (imageId?: string) => {
+ if (!imageId) {
+ return DEFAULT_IMAGE;
+ }
+ const baseUrl =
+ import.meta.env.VITE_IMAGE_BASE_URL ?? import.meta.env.VITE_API_URL;
+ const normalizedBase = baseUrl.replace(/\/$/, "");
+ return `${normalizedBase}/${imageId}`;
+};
+
+const mapDemoProperty = (item: DemoProperty): Property => ({
+ id: item.id,
+ title: item.property_type,
+ location: item.location_name,
+ price: item.price,
+ status: "Available",
+ imageUrl: getImageUrl(item.Images?.[0]?.image),
+});
+
+const fetchLandingProperties = async (): Promise => {
+ const res = await api.get("/general/landing-feed");
+ return (res.data.properties ?? []).map(mapDemoProperty);
+};
+
+export const getlandingProperties = fetchLandingProperties;
+export const getProperties = fetchLandingProperties;
+
+
diff --git a/src/services/token.storage.ts b/src/services/token.storage.ts
new file mode 100644
index 0000000..ef96183
--- /dev/null
+++ b/src/services/token.storage.ts
@@ -0,0 +1,15 @@
+const ACCESS_TOKEN_KEY = "token";
+const REFRESH_TOKEN_KEY = "refresh_token";
+
+export const tokenStorage = {
+ getAccessToken: () => localStorage.getItem(ACCESS_TOKEN_KEY),
+ getRefreshToken: () => localStorage.getItem(REFRESH_TOKEN_KEY),
+ setTokens: (accessToken: string, refreshToken: string) => {
+ localStorage.setItem(ACCESS_TOKEN_KEY, accessToken);
+ localStorage.setItem(REFRESH_TOKEN_KEY, refreshToken);
+ },
+ clearTokens: () => {
+ localStorage.removeItem(ACCESS_TOKEN_KEY);
+ localStorage.removeItem(REFRESH_TOKEN_KEY);
+ },
+};
diff --git a/src/store/auth.store.ts b/src/store/auth.store.ts
new file mode 100644
index 0000000..b3bee1f
--- /dev/null
+++ b/src/store/auth.store.ts
@@ -0,0 +1,237 @@
+import { create } from "zustand";
+import {
+ loginRequest,
+ getProfileRequest,
+ registerRequest,
+ resendOtpRequest,
+ verifyPhoneRequest,
+} from "../services";
+import type { AuthUser } from "../types/auth.types";
+import { tokenStorage } from "../services/token.storage";
+
+interface AuthState {
+ isAuthenticated: boolean;
+ isAuthReady: boolean;
+ user: AuthUser | null;
+ isLoading: boolean;
+ error: string | null;
+
+ initialize: () => Promise;
+ login: (data: {
+ mobile_number: string;
+ password: string;
+ }) => Promise;
+ register: (data: {
+ first_name: string;
+ last_name: string;
+ password: string;
+ mobile_number: string;
+ email: string;
+ }) => Promise;
+ verifyPhone: (data: {
+ email?: string | null;
+ mobile_number?: string | null;
+ otp: string;
+ }) => Promise;
+ resendOtp: (data: {
+ email?: string | null;
+ mobile_number?: string | null;
+ }) => Promise;
+ loginDemo: () => void;
+ logout: () => void;
+}
+
+const getAvatarUrl = (user: any) =>
+ user?.avatar_url ??
+ user?.avatarUrl ??
+ user?.profile_image ??
+ user?.image ??
+ null;
+
+const mapAuthUser = (payload: any): AuthUser => {
+ const user = payload?.user ?? payload?.data ?? payload ?? {};
+ const firstName = user.first_name ?? user.firstName ?? "";
+ const lastName = user.last_name ?? user.lastName ?? "";
+ const name =
+ user.name ??
+ [firstName, lastName].filter(Boolean).join(" ").trim() ??
+ user.username ??
+ "User";
+ const rawRole = user.role ?? user.user_role ?? "VIEWER";
+ const role = (
+ typeof rawRole === "string" ? rawRole.toUpperCase() : "VIEWER"
+ ) as AuthUser["role"];
+
+ return {
+ id: String(user.id ?? user.user_id ?? user.uuid ?? ""),
+ name,
+ role,
+ avatarUrl: getAvatarUrl(user),
+ };
+};
+
+const extractTokens = (payload: any) => ({
+ accessToken:
+ payload?.token ?? payload?.access_token ?? payload?.accessToken ?? null,
+ refreshToken: payload?.refresh_token ?? payload?.refreshToken ?? null,
+});
+
+export const useAuthStore = create((set) => ({
+ isAuthenticated: false,
+ isAuthReady: false,
+ user: null,
+ isLoading: false,
+ error: null,
+
+ initialize: async () => {
+ const accessToken = tokenStorage.getAccessToken();
+ if (!accessToken) {
+ set({ isAuthenticated: false, user: null, isAuthReady: true });
+ return;
+ }
+
+ set({ error: null });
+ try {
+ // const profile = await getProfileRequest();
+ // ths is just a test data because of user profile end point not finalize yet
+ const profile = {
+ user: {
+ id: "12345678",
+ first_name: "Sachintha",
+ last_name: "Nimesh",
+ role: "ADMIN",
+ avatar_url: "/user-avatar-default",
+ },
+ };
+ const user = mapAuthUser(profile);
+ set({
+ isAuthenticated: true,
+ user,
+ isAuthReady: true,
+ });
+ } catch {
+ tokenStorage.clearTokens();
+ set({
+ isAuthenticated: false,
+ user: null,
+ isAuthReady: true,
+ });
+ }
+ },
+
+ login: async (data) => {
+ set({ isLoading: true, error: null });
+
+ try {
+ const res = await loginRequest(data);
+ const { accessToken, refreshToken } = extractTokens(res);
+ if (!accessToken || !refreshToken) {
+ throw new Error("Token response is missing.");
+ }
+
+ tokenStorage.setTokens(accessToken, refreshToken);
+ // const profile = await getProfileRequest();
+ // ths is just a test data because of user profile end point not finalize yet
+ const profile = {
+ user: {
+ id: "12345678",
+ first_name: "Sachintha",
+ last_name: "Nimesh",
+ role: "ADMIN",
+ avatar_url: "/user-avatar-default",
+ },
+ };
+ const user = mapAuthUser(profile);
+ set({
+ isAuthenticated: true,
+ user,
+ isLoading: false,
+ isAuthReady: true,
+ });
+
+ return true;
+ } catch (err: any) {
+ tokenStorage.clearTokens();
+ set({
+ error: err.response?.data?.message || "Login failed",
+ isLoading: false,
+ });
+ return false;
+ }
+ },
+ register: async (data) => {
+ set({ isLoading: true, error: null });
+
+ try {
+ await registerRequest(data);
+ set({ isLoading: false });
+ return true;
+ } catch (err: any) {
+ set({
+ error:
+ err.response?.data?.error_message ||
+ err.response?.data?.message ||
+ "Registration failed",
+ isLoading: false,
+ });
+ return false;
+ }
+ },
+ verifyPhone: async (data) => {
+ set({ isLoading: true, error: null });
+
+ try {
+ await verifyPhoneRequest(data);
+ set({ isLoading: false });
+ return true;
+ } catch (err: any) {
+ set({
+ error:
+ err.response?.data?.error_message ||
+ err.response?.data?.message ||
+ "Verification failed",
+ isLoading: false,
+ });
+ return false;
+ }
+ },
+ resendOtp: async (data) => {
+ set({ isLoading: true, error: null });
+
+ try {
+ await resendOtpRequest(data);
+ set({ isLoading: false });
+ return true;
+ } catch (err: any) {
+ set({
+ error:
+ err.response?.data?.error_message ||
+ err.response?.data?.message ||
+ "Resend failed",
+ isLoading: false,
+ });
+ return false;
+ }
+ },
+ loginDemo: () =>
+ set({
+ isAuthenticated: true,
+ user: {
+ id: "demo-user",
+ name: "Demo User",
+ role: "VIEWER",
+ avatarUrl: null,
+ },
+ isLoading: false,
+ error: null,
+ isAuthReady: true,
+ }),
+
+ logout: () => {
+ tokenStorage.clearTokens();
+ set({
+ isAuthenticated: false,
+ user: null,
+ });
+ },
+}));
diff --git a/src/types/auth.types.ts b/src/types/auth.types.ts
new file mode 100644
index 0000000..9f9e417
--- /dev/null
+++ b/src/types/auth.types.ts
@@ -0,0 +1,8 @@
+export type UserRole = "VIEWER" | "LISTERS" | "ADMIN";
+
+export interface AuthUser {
+ id: string;
+ name: string;
+ role: UserRole;
+ avatarUrl?: string | null;
+}
diff --git a/src/types/property.types.ts b/src/types/property.types.ts
new file mode 100644
index 0000000..6faacb2
--- /dev/null
+++ b/src/types/property.types.ts
@@ -0,0 +1,8 @@
+export interface Property {
+ id: string;
+ title: string;
+ status: string;
+ price: number;
+ location: string;
+ imageUrl?: string;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 189a042..9ec15ed 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,13 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/
export default defineConfig({
- plugins: [
- react(),
- tailwindcss()],
-})
+ plugins: [react(), tailwindcss()],
+ test: {
+ environment: "jsdom",
+ setupFiles: "./src/test/setup.ts",
+ css: true,
+ },
+});
+
+
+ {/* Right Buttons */}
+ {isAuthenticated && user ? (
+ 
+
+ 
+
+
+