mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
Merge pull request #48 from Tria-plc/freight/feature/ui-sync
Auth and basic onboarding finished
This commit is contained in:
yaschalew10
@@ -23,7 +23,6 @@ import { CargoTypesModule } from "./modules/cargo-types/cargo-types.module";
|
||||
import { BackofficeModule } from "./modules/backoffice/backoffice.module";
|
||||
import { EdrOrgSeeder } from "./seed/edr-org.seeder";
|
||||
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
ConfigModule.forRoot({
|
||||
@@ -58,7 +57,7 @@ export class AppModule implements OnApplicationBootstrap {
|
||||
constructor(
|
||||
private readonly seeder: DataSeeder,
|
||||
private readonly edrOrgSeeder: EdrOrgSeeder,
|
||||
) {}
|
||||
) { }
|
||||
|
||||
async onApplicationBootstrap() {
|
||||
await this.seeder.run();
|
||||
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
UserCircle,
|
||||
FileUp,
|
||||
MapPinned,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
|
||||
import BookingsPage from "./pages/bookings/BookingsPage";
|
||||
@@ -31,12 +32,7 @@ import TrackingPage from "./pages/tracking/TrackingPage";
|
||||
import BillingPage from "./pages/billing/BillingPage";
|
||||
import TrainsPage from "./pages/trains/TrainsPage";
|
||||
import DashboardPage from "./pages/dashboard/DashboardPage";
|
||||
import {
|
||||
IamLoginPage,
|
||||
LoadingScreen,
|
||||
useAuth,
|
||||
useAuthUser,
|
||||
} from "@tria-plc/iamui-common";
|
||||
import useAuth from "./hooks/useAuth";
|
||||
import CustomersPage from "./pages/customers/CustomersPage";
|
||||
import CustomerDetailPage from "./pages/customers/CustomerDetailPage";
|
||||
import NewCustomerPage from "./pages/customers/NewCustomerPage";
|
||||
@@ -46,9 +42,12 @@ import FileUploadSettingsPage from "./pages/admin/FileUploadSettingsPage";
|
||||
import MyPortalPage from "./pages/portal/MyPortalPage";
|
||||
import EDRFreightLandingPage from "./pages/EDRFreightLandingPage";
|
||||
import SignupPage from "./pages/accounts/SignupPage";
|
||||
import OnboardingPage from "./pages/accounts/OnboardingPage";
|
||||
import VerificationOtpPage from "./pages/accounts/VerificationOtpPage";
|
||||
import SetPasswordPage from "./pages/accounts/SetPasswordPage";
|
||||
import LoginPage from "./pages/accounts/LoginPage";
|
||||
import Station from "./components/stations/Station";
|
||||
import { useEffect } from "react";
|
||||
|
||||
const sidebarItems: SidebarItem[] = [
|
||||
{ label: "My Portal", href: "/", icon: <UserCircle /> },
|
||||
@@ -72,44 +71,42 @@ const sidebarItems: SidebarItem[] = [
|
||||
const App = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { user, loading } = useAuth();
|
||||
const { logout } = useAuthUser();
|
||||
const { user, isPending, logout, customer, customerQuery } = useAuth();
|
||||
|
||||
if (loading) {
|
||||
return <LoadingScreen />;
|
||||
console.log({ customer, isPending, user });
|
||||
useEffect(() => {
|
||||
if (!user) return;
|
||||
// if (!user.hasSetPassword) navigate("/set-password");
|
||||
}, [user]);
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<Loader2 className="animate-spin text-primary" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (user) {
|
||||
if (!user) {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<EDRFreightLandingPage />} />
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/signup" element={<SignupPage />} />
|
||||
<Route path="/otp" element={<VerificationOtpPage />} />
|
||||
<Route path="/set-password" element={<SetPasswordPage />} />
|
||||
<Route path="/auth" element={<IamLoginPage />} />
|
||||
{/* <Route path="*" element={<Navigate to="/auth" replace />} /> */}
|
||||
<Route path="*" element={<Navigate to="/login" replace />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
if (user && !customer && !customerQuery.isPending) {
|
||||
return <OnboardingPage />;
|
||||
}
|
||||
|
||||
const displayName = user?.name?.en || user?.username || user?.email || "User";
|
||||
const userEmail = user?.email;
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
[
|
||||
"auth-token",
|
||||
"refresh-token",
|
||||
"auth-user",
|
||||
"current-position-id",
|
||||
"selected-position-id",
|
||||
].forEach((name) => {
|
||||
document.cookie = `${name}=; Max-Age=0; path=/`;
|
||||
});
|
||||
localStorage.clear();
|
||||
window.location.replace("/auth");
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardLayout
|
||||
title="EDR Freight"
|
||||
@@ -119,7 +116,7 @@ const App = () => {
|
||||
enableThemeToggle
|
||||
userName={displayName}
|
||||
userEmail={userEmail}
|
||||
onLogout={handleLogout}
|
||||
onLogout={logout}
|
||||
>
|
||||
<Routes>
|
||||
<Route path="/dashboard" element={<DashboardPage />} />
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { ShieldCheck, Train } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface AuthLayoutProps {
|
||||
children: ReactNode;
|
||||
parentClassName?: string;
|
||||
contentClassName?: string;
|
||||
left: {
|
||||
badge: string;
|
||||
title: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
stats: {
|
||||
label: string;
|
||||
value: string;
|
||||
footer: string;
|
||||
progress: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default function AuthLayout({
|
||||
children,
|
||||
parentClassName,
|
||||
contentClassName,
|
||||
left,
|
||||
}: AuthLayoutProps) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<div className={cn("grid min-h-screen lg:grid-cols-2", parentClassName)}>
|
||||
<div className="relative hidden overflow-hidden bg-primary p-8 px-12 text-primary-foreground lg:flex lg:flex-col lg:justify-between">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.14),transparent_35%)]" />
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-14 items-center justify-center rounded-3xl bg-white/10 backdrop-blur">
|
||||
<Train className="size-7" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold">EDR Freight</h1>
|
||||
<p className="mt-1 text-sm opacity-80">
|
||||
Railway Logistics Platform
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-16 max-w-lg">
|
||||
<div className="inline-flex rounded-full bg-white/10 px-4 py-2 text-sm font-semibold backdrop-blur">
|
||||
{left.badge}
|
||||
</div>
|
||||
<h2 className="mt-6 text-4xl font-bold leading-tight tracking-tight">
|
||||
{left.title}
|
||||
</h2>
|
||||
<p className="mt-6 text-lg leading-8 opacity-85">
|
||||
{left.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-14 grid gap-5">
|
||||
{left.features.map((item) => (
|
||||
<div key={item} className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-2xl bg-white/10">
|
||||
<ShieldCheck className="size-5" />
|
||||
</div>
|
||||
<span className="font-medium">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center p-6 md:p-10",
|
||||
contentClassName,
|
||||
)}
|
||||
>
|
||||
<div className="w-full max-w-lg">
|
||||
<div className="mb-8 flex items-center gap-3 lg:hidden">
|
||||
<div className="flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
|
||||
<Train className="size-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">EDR Freight</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Railway Logistics Platform
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Field, FieldLabel, FieldError, Input } from "@edr/ui-common";
|
||||
|
||||
interface PhoneInputProps {
|
||||
disabled?: boolean;
|
||||
countryCode?: React.ComponentProps<typeof Input>;
|
||||
phone?: React.ComponentProps<typeof Input>;
|
||||
countryCodeError?: { message?: string };
|
||||
phoneError?: { message?: string };
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export default function PhoneInput({
|
||||
disabled,
|
||||
countryCode: countryCodeProps,
|
||||
phone: phoneProps,
|
||||
countryCodeError,
|
||||
phoneError,
|
||||
label = "Phone Number",
|
||||
}: PhoneInputProps) {
|
||||
return (
|
||||
<Field data-invalid={Boolean(countryCodeError || phoneError)}>
|
||||
<FieldLabel>{label}</FieldLabel>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
type="text"
|
||||
disabled={disabled}
|
||||
className="w-20"
|
||||
aria-invalid={Boolean(countryCodeError)}
|
||||
{...countryCodeProps}
|
||||
/>
|
||||
<Input
|
||||
type="tel"
|
||||
placeholder="912345678"
|
||||
disabled={disabled}
|
||||
className="flex-1"
|
||||
aria-invalid={Boolean(phoneError)}
|
||||
{...phoneProps}
|
||||
/>
|
||||
</div>
|
||||
<FieldError errors={[countryCodeError, phoneError]} />
|
||||
</Field>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +1,25 @@
|
||||
export const URL_CONSTANTS = {
|
||||
AUTH: {
|
||||
LOGIN: "/auth/login",
|
||||
REGISTER: "/auth/register",
|
||||
REFRESH_TOKEN: "/auth/refresh-token",
|
||||
LOGOUT: "/auth/logout",
|
||||
LOGIN: "/api/auth/login",
|
||||
REGISTER: "/api/auth/register",
|
||||
REFRESH_TOKEN: "/api/auth/refresh-token",
|
||||
LOGOUT: "/api/auth/logout",
|
||||
PROFILE: "/auth/profile",
|
||||
},
|
||||
|
||||
USERS: {
|
||||
SIGN_UP: "/api/auth/signup",
|
||||
GENERATE_VERIFICATION_CODE: "/api/auth/generate-verification-code",
|
||||
BASE: "/users",
|
||||
BY_ID: (id: string | number) => `/users/${id}`,
|
||||
SIGN_UP: "/api/auth/signup",
|
||||
SET_PASSWORD: "/api/auth/set-password",
|
||||
ME: "/api/auth/me"
|
||||
ME: "/api/auth/me",
|
||||
GENERATE_VERIFICATION_CODE: "/users/generate-verification-code",
|
||||
},
|
||||
|
||||
OTP: {
|
||||
SEND: "/api/otp/send",
|
||||
VERIFY: "/api/otp/verify",
|
||||
},
|
||||
ROLES: {
|
||||
BASE: "/roles",
|
||||
BY_ID: (id: string | number) => `/roles/${id}`,
|
||||
@@ -68,11 +72,11 @@ export const URL_CONSTANTS = {
|
||||
BY_ID: (id: string | number) => `/customers/${id}`,
|
||||
BOOKINGS: (id: string | number) => `/customers/${id}/bookings`,
|
||||
},
|
||||
|
||||
|
||||
CUSTOMERS_API: {
|
||||
BASE: "/api/customers",
|
||||
BY_ID: (id: string) => `/api/customers/${id}`,
|
||||
BY_USER_ID: (id: string) => `/api/customers/user/${id}`
|
||||
BY_USER_ID: (id: string) => `/api/customers/user/${id}`,
|
||||
},
|
||||
|
||||
BOOKINGS: {
|
||||
@@ -81,9 +85,4 @@ export const URL_CONSTANTS = {
|
||||
CANCEL: (id: string | number) => `/bookings/${id}/cancel`,
|
||||
CONFIRM: (id: string | number) => `/bookings/${id}/confirm`,
|
||||
},
|
||||
|
||||
OTP: {
|
||||
SEND: "/api/otp/send",
|
||||
VERIFY: "/api/otp/verify",
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
185
apps/edr-freight-web/portal/src/hooks/useAuth.ts
Normal file
185
apps/edr-freight-web/portal/src/hooks/useAuth.ts
Normal file
@@ -0,0 +1,185 @@
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { api } from "@/services/api";
|
||||
import type {
|
||||
LoginPayload,
|
||||
LoginResponse,
|
||||
SignupPayload,
|
||||
SignupResponse,
|
||||
OtpResponse,
|
||||
} from "@/types/auth";
|
||||
import type { Result } from "@/utils/result";
|
||||
import { extractApiError } from "@/utils/result";
|
||||
|
||||
function setCookie(name: string, value: string, days: number) {
|
||||
const expires = new Date();
|
||||
expires.setDate(expires.getDate() + days);
|
||||
document.cookie = `${name}=${value}; path=/; expires=${expires.toUTCString()}; SameSite=Lax`;
|
||||
}
|
||||
|
||||
function getCookie(name: string): string | undefined {
|
||||
return document.cookie
|
||||
.split("; ")
|
||||
.find((row) => row.startsWith(`${name}=`))
|
||||
?.split("=")[1];
|
||||
}
|
||||
|
||||
const useAuth = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const authQuery = useQuery(
|
||||
api.auth.getMyInfo.queryOptions({
|
||||
enabled: !!getCookie("auth-token"),
|
||||
retry: false,
|
||||
staleTime: 10 * 60 * 1000,
|
||||
}),
|
||||
);
|
||||
|
||||
const customerQuery = useQuery(
|
||||
api.customers.getByUserId.queryOptions({
|
||||
input: { id: authQuery.data?.id ?? "" },
|
||||
enabled: !!authQuery.data?.id,
|
||||
retry: false,
|
||||
staleTime: 10 * 60 * 1000,
|
||||
refetchOnWindowFocus: false,
|
||||
}),
|
||||
);
|
||||
|
||||
const hasToken = !!getCookie("auth-token");
|
||||
const isPending = authQuery.isPending && hasToken;
|
||||
|
||||
const login = async (
|
||||
payload: LoginPayload,
|
||||
): Promise<Result<LoginResponse>> => {
|
||||
try {
|
||||
const res = await api.auth.login.call(payload);
|
||||
setCookie("auth-token", res.token, 7);
|
||||
setCookie("refresh-token", res.refreshToken, 7);
|
||||
await authQuery.refetch();
|
||||
return { success: true, data: res };
|
||||
} catch (err) {
|
||||
return { success: false, error: extractApiError(err) };
|
||||
}
|
||||
};
|
||||
|
||||
const signup = async (
|
||||
payload: SignupPayload,
|
||||
): Promise<Result<SignupResponse>> => {
|
||||
try {
|
||||
const res = await api.auth.createUser.call(payload);
|
||||
setCookie("auth-token", res.token, 7);
|
||||
setCookie("refresh-token", res.refreshToken, 7);
|
||||
await authQuery.refetch();
|
||||
const otpCode = res.otp?.split(" ")?.[6] ?? "";
|
||||
localStorage.setItem("otp", otpCode);
|
||||
localStorage.setItem("otp-phone", payload.phoneNumber);
|
||||
localStorage.setItem("otp-email", payload.email);
|
||||
api.auth.sendOTP
|
||||
.call({ phone: payload.phoneNumber, otp: otpCode })
|
||||
.catch(() => { });
|
||||
return { success: true, data: res };
|
||||
} catch (err) {
|
||||
return { success: false, error: extractApiError(err) };
|
||||
}
|
||||
};
|
||||
|
||||
const setPassword = async (data: {
|
||||
newPassword: string;
|
||||
confirmPassword: string;
|
||||
}): Promise<Result<void>> => {
|
||||
try {
|
||||
const userId = authQuery.data?.id ?? "";
|
||||
const email = localStorage.getItem("otp-email") ?? "";
|
||||
const verificationCode = localStorage.getItem("otp") ?? "";
|
||||
await api.auth.setPassword.call({
|
||||
newPassword: data.newPassword,
|
||||
confirmPassword: data.confirmPassword,
|
||||
userId,
|
||||
email,
|
||||
verificationCode,
|
||||
});
|
||||
["userId", "otp", "otp-phone", "otp-email"].forEach((k) =>
|
||||
localStorage.removeItem(k),
|
||||
);
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: api.auth.getMyInfo.queryKey(),
|
||||
});
|
||||
return { success: true, data: undefined };
|
||||
} catch (err) {
|
||||
return { success: false, error: extractApiError(err) };
|
||||
}
|
||||
};
|
||||
|
||||
const verifyOTP = async (otp: string): Promise<Result<OtpResponse>> => {
|
||||
try {
|
||||
const phone = localStorage.getItem("otp-phone") ?? "";
|
||||
const res = await api.auth.verifyOTP.call({ phone, otp });
|
||||
return { success: true, data: res };
|
||||
} catch (err) {
|
||||
return { success: false, error: extractApiError(err) };
|
||||
}
|
||||
};
|
||||
|
||||
const sendOTP = async (otp: string): Promise<Result<OtpResponse>> => {
|
||||
try {
|
||||
const phone = localStorage.getItem("otp-phone") ?? "";
|
||||
const res = await api.auth.sendOTP.call({ phone, otp });
|
||||
return { success: true, data: res };
|
||||
} catch (err) {
|
||||
return { success: false, error: extractApiError(err) };
|
||||
}
|
||||
};
|
||||
|
||||
const generateVerificationCode = async (
|
||||
type: string,
|
||||
): Promise<Result<string>> => {
|
||||
try {
|
||||
const email = localStorage.getItem("otp-email") ?? "";
|
||||
const phoneNumber = localStorage.getItem("otp-phone") ?? "";
|
||||
const res = await api.auth.generateVerificationCode.call({
|
||||
email,
|
||||
phoneNumber,
|
||||
type,
|
||||
});
|
||||
return { success: true, data: res };
|
||||
} catch (err) {
|
||||
return { success: false, error: extractApiError(err) };
|
||||
}
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
try {
|
||||
await api.auth.logout.call();
|
||||
} catch {
|
||||
// proceed with client-side cleanup even if server call fails
|
||||
}
|
||||
[
|
||||
"auth-token",
|
||||
"refresh-token",
|
||||
"auth-user",
|
||||
"current-position-id",
|
||||
"selected-position-id",
|
||||
].forEach((name) => {
|
||||
document.cookie = `${name}=; Max-Age=0; path=/`;
|
||||
});
|
||||
localStorage.clear();
|
||||
queryClient.clear();
|
||||
window.location.href = "/login";
|
||||
};
|
||||
|
||||
return {
|
||||
isPending,
|
||||
user: authQuery.data ?? null,
|
||||
customer: customerQuery.data ?? null,
|
||||
login,
|
||||
signup,
|
||||
setPassword,
|
||||
verifyOTP,
|
||||
sendOTP,
|
||||
generateVerificationCode,
|
||||
logout,
|
||||
authQuery,
|
||||
customerQuery,
|
||||
};
|
||||
};
|
||||
|
||||
export default useAuth;
|
||||
@@ -2,18 +2,11 @@ import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import "@tria-plc/iamui-common/styles.css";
|
||||
import "@edr/ui-common/styles.css";
|
||||
import "../index.css";
|
||||
import "@edr/ui-common/theme.css";
|
||||
|
||||
import App from "./App";
|
||||
import {
|
||||
AuthProvider,
|
||||
configureIam,
|
||||
UserProvider,
|
||||
axiosInstance,
|
||||
} from "@tria-plc/iamui-common";
|
||||
|
||||
// Purge cookies that were stored as the literal string "undefined" before the
|
||||
// envelope interceptor fix. Without this, stale sessions would keep sending
|
||||
@@ -29,36 +22,6 @@ import {
|
||||
});
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
window.__IAM_CONFIG__ = {
|
||||
apiUrl: `${import.meta.env.VITE_BASE_API_URL}/api`,
|
||||
postLoginPath: "/",
|
||||
};
|
||||
|
||||
// Unwrap the StandardResponse envelope ({ success, data, timestamp }) that the
|
||||
// freight API's ResponseTransformInterceptor adds to every response, so that
|
||||
// iamui-common can read response.data.token / response.data fields as expected.
|
||||
axiosInstance.interceptors.response.use((response) => {
|
||||
if (
|
||||
response.data &&
|
||||
typeof response.data === "object" &&
|
||||
"success" in response.data &&
|
||||
"data" in response.data
|
||||
) {
|
||||
response.data = response.data.data;
|
||||
}
|
||||
return response;
|
||||
});
|
||||
window.__USER_MANAGEMENT_BRANDING__ = {
|
||||
organizationName: "EDR Platform",
|
||||
appName: "EDR Portal",
|
||||
moduleBasePath: "/user-management",
|
||||
backToAppPath: "/",
|
||||
backToAppLabel: "Back to dashboard",
|
||||
};
|
||||
|
||||
configureIam({
|
||||
apiUrl: `${import.meta.env.VITE_BASE_API_URL}/api`,
|
||||
});
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
|
||||
@@ -70,11 +33,7 @@ createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<UserProvider>
|
||||
<App />
|
||||
</UserProvider>
|
||||
</AuthProvider>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
</StrictMode>,
|
||||
|
||||
190
apps/edr-freight-web/portal/src/pages/accounts/LoginPage.tsx
Normal file
190
apps/edr-freight-web/portal/src/pages/accounts/LoginPage.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { ArrowRight, Mail, Phone, Loader2 } from "lucide-react";
|
||||
import useAuth from "@/hooks/useAuth";
|
||||
import AuthLayout from "@/components/auth/AuthLayout";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
} from "@edr/ui-common";
|
||||
import PhoneInput from "@/components/auth/PhoneInput";
|
||||
|
||||
type LoginMethod = "email" | "phone";
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const { login } = useAuth();
|
||||
const [method, setMethod] = useState<LoginMethod>("email");
|
||||
const [identifier, setIdentifier] = useState("");
|
||||
const [countryCode, setCountryCode] = useState("+251");
|
||||
const [phoneNumber, setPhoneNumber] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
const loginId = method === "email"
|
||||
? identifier
|
||||
: `${countryCode}${phoneNumber.startsWith("0") ? phoneNumber.slice(1) : phoneNumber}`;
|
||||
const result = await login({ email: loginId, password });
|
||||
if (result.success) {
|
||||
navigate("/");
|
||||
} else {
|
||||
setError(result.error.message);
|
||||
}
|
||||
} catch {
|
||||
setError("An unexpected error occurred");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
left={{
|
||||
badge: "Welcome Back",
|
||||
title: "Sign in to your freight operations account",
|
||||
description:
|
||||
"Access your dashboard to manage shipments, monitor railway operations, track consignments, and streamline logistics workflows.",
|
||||
features: [
|
||||
"Real-time shipment tracking",
|
||||
"Secure logistics management",
|
||||
"Enterprise-grade operations",
|
||||
"Multi-corridor freight monitoring",
|
||||
],
|
||||
stats: {
|
||||
label: "Active Corridors",
|
||||
value: "24+",
|
||||
footer: "Operational",
|
||||
progress: "w-[95%]",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="mb-6">
|
||||
<div className="mb-4 flex size-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
|
||||
<Mail className="size-6" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-black tracking-tight">Welcome back</h2>
|
||||
<p className="mt-2 text-base text-muted-foreground">
|
||||
Enter your credentials to access your portal
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
|
||||
<div className="flex gap-2 rounded-lg bg-muted p-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant={"ghost"}
|
||||
size="sm"
|
||||
onClick={() => setMethod("email")}
|
||||
className={`flex-1 hover:bg-background/40! ${method === "email" ? "bg-background shadow border" : ""}`}
|
||||
>
|
||||
<Mail data-icon="inline-start" />
|
||||
Email
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={"ghost"}
|
||||
size="sm"
|
||||
onClick={() => setMethod("phone")}
|
||||
className={`flex-1 hover:bg-background/40! ${method === "phone" ? "bg-background shadow border" : ""}`}
|
||||
>
|
||||
<Phone data-icon="inline-start" />
|
||||
Phone
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<FieldGroup>
|
||||
{method === "email" ? (
|
||||
<Field>
|
||||
<FieldLabel>Email Address</FieldLabel>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="name@company.com"
|
||||
value={identifier}
|
||||
onChange={(e) => setIdentifier(e.target.value)}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</Field>
|
||||
) : (
|
||||
<PhoneInput
|
||||
disabled={loading}
|
||||
countryCode={{
|
||||
value: countryCode,
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => setCountryCode(e.target.value),
|
||||
}}
|
||||
phone={{
|
||||
value: phoneNumber,
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Field>
|
||||
<div className="flex items-center justify-between">
|
||||
<FieldLabel>Password</FieldLabel>
|
||||
<Button
|
||||
type="button"
|
||||
variant="link"
|
||||
size="xs"
|
||||
className="h-auto p-0"
|
||||
>
|
||||
Forgot password?
|
||||
</Button>
|
||||
</div>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-xl border border-red-200 bg-red-50 px-4 py-2.5 text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={loading} size="lg" className="w-full">
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" data-icon="inline-start" />
|
||||
Signing in...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Sign In
|
||||
<ArrowRight data-icon="inline-end" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Don't have an account?{" "}
|
||||
<Button
|
||||
type="button"
|
||||
variant="link"
|
||||
size="sm"
|
||||
onClick={() => navigate("/signup")}
|
||||
className="h-auto p-0 font-semibold"
|
||||
>
|
||||
Create an account
|
||||
</Button>
|
||||
</p>
|
||||
</form>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,520 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
ArrowRight,
|
||||
ArrowLeft,
|
||||
Building2,
|
||||
User,
|
||||
FileText,
|
||||
CheckCircle2,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import useAuth from "@/hooks/useAuth";
|
||||
import { api } from "@/services/api";
|
||||
import type { CreateCustomerDto } from "@/types/customers";
|
||||
import AuthLayout from "@/components/auth/AuthLayout";
|
||||
import PhoneInput from "@/components/auth/PhoneInput";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
} from "@edr/ui-common";
|
||||
|
||||
type OnboardingStep = "company" | "personnel" | "poa";
|
||||
|
||||
const onboardingSchema = z.object({
|
||||
companyName: z.string().min(1, "Company name is required"),
|
||||
companyEmail: z.string().email("Invalid email address"),
|
||||
companyPhone: z.string().min(1, "Company phone is required"),
|
||||
companyPhoneCountryCode: z.string().min(1, "Country code is required"),
|
||||
companyLocation: z.string().min(1, "Location is required"),
|
||||
companyAddress: z.string().min(1, "Address is required"),
|
||||
tinNumber: z.string().length(10, "TIN must be exactly 10 digits"),
|
||||
vatNumber: z
|
||||
.string()
|
||||
.min(1, "VAT number is required")
|
||||
.length(10, "VAT number must be exactly 10 digits"),
|
||||
fanNumber: z.string().length(16, "FAN must be exactly 16 digits"),
|
||||
contactPersonName: z.string().min(1, "Contact person name is required"),
|
||||
contactPersonPhone: z.string().min(1, "Contact person phone is required"),
|
||||
contactPersonPhoneCountryCode: z.string().min(1, "Country code is required"),
|
||||
generalManagerName: z.string().min(1, "GM name is required"),
|
||||
generalManagerEmail: z.string().email("Invalid GM email"),
|
||||
generalManagerPhone: z.string().min(1, "GM phone is required"),
|
||||
generalManagerPhoneCountryCode: z.string().min(1, "Country code is required"),
|
||||
poaName: z.string().optional(),
|
||||
poaPhone: z.string().optional(),
|
||||
poaPhoneCountryCode: z.string().optional(),
|
||||
poaAddress: z.string().optional(),
|
||||
poaEmail: z.string().optional(),
|
||||
poaLocation: z.string().optional(),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof onboardingSchema>;
|
||||
|
||||
const stepFields: Record<OnboardingStep, (keyof FormData)[]> = {
|
||||
company: [
|
||||
"companyName",
|
||||
"companyEmail",
|
||||
"companyPhone",
|
||||
"companyPhoneCountryCode",
|
||||
"companyLocation",
|
||||
"companyAddress",
|
||||
"tinNumber",
|
||||
"vatNumber",
|
||||
"fanNumber",
|
||||
],
|
||||
personnel: [
|
||||
"contactPersonName",
|
||||
"contactPersonPhone",
|
||||
"contactPersonPhoneCountryCode",
|
||||
"generalManagerName",
|
||||
"generalManagerEmail",
|
||||
"generalManagerPhone",
|
||||
"generalManagerPhoneCountryCode",
|
||||
],
|
||||
poa: [],
|
||||
};
|
||||
|
||||
export default function OnboardingPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const { user } = useAuth();
|
||||
const [step, setStep] = useState<OnboardingStep>("company");
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
trigger,
|
||||
formState: { errors },
|
||||
} = useForm<FormData>({
|
||||
resolver: zodResolver(onboardingSchema),
|
||||
defaultValues: {
|
||||
companyName: "",
|
||||
companyEmail: "",
|
||||
companyPhone: "",
|
||||
companyPhoneCountryCode: "+251",
|
||||
companyLocation: "",
|
||||
companyAddress: "",
|
||||
tinNumber: "",
|
||||
vatNumber: "",
|
||||
fanNumber: "",
|
||||
contactPersonName: "",
|
||||
contactPersonPhone: "",
|
||||
contactPersonPhoneCountryCode: "+251",
|
||||
generalManagerName: "",
|
||||
generalManagerEmail: "",
|
||||
generalManagerPhone: "",
|
||||
generalManagerPhoneCountryCode: "+251",
|
||||
poaName: "",
|
||||
poaPhone: "",
|
||||
poaPhoneCountryCode: "+251",
|
||||
poaAddress: "",
|
||||
poaEmail: "",
|
||||
poaLocation: "",
|
||||
},
|
||||
});
|
||||
|
||||
const createCustomerMutation = useMutation({
|
||||
mutationFn: (payload: CreateCustomerDto) =>
|
||||
api.customers.create.call(payload),
|
||||
onSuccess: () => {
|
||||
if (user)
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: api.customers.getByUserId.queryKey({ id: user.id }),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const nextStep = async () => {
|
||||
if (step === "poa") {
|
||||
handleSubmit(onSubmit)();
|
||||
return;
|
||||
}
|
||||
const fields = stepFields[step];
|
||||
const isValid = await trigger(fields);
|
||||
if (!isValid) return;
|
||||
setStep(step === "company" ? "personnel" : "poa");
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (step === "personnel") setStep("company");
|
||||
else if (step === "poa") setStep("personnel");
|
||||
};
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
const nameParts = (user?.name?.en ?? "").split(" ");
|
||||
const payload: CreateCustomerDto = {
|
||||
userId: user!.id,
|
||||
firstName: nameParts[0] || "",
|
||||
lastName: nameParts.slice(-1)[0] || "",
|
||||
email: user!.email,
|
||||
phone: user!.phoneNumber,
|
||||
companyName: data.companyName,
|
||||
companyEmail: data.companyEmail,
|
||||
companyPhone: `${data.companyPhoneCountryCode}${data.companyPhone}`,
|
||||
companyLocation: data.companyLocation,
|
||||
companyAddress: data.companyAddress,
|
||||
contactPersonName: data.contactPersonName,
|
||||
contactPersonPhone: `${data.contactPersonPhoneCountryCode}${data.contactPersonPhone}`,
|
||||
tinNumber: data.tinNumber,
|
||||
vatNumber: data.vatNumber,
|
||||
fanNumber: data.fanNumber,
|
||||
generalManagerName: data.generalManagerName,
|
||||
generalManagerEmail: data.generalManagerEmail,
|
||||
generalManagerPhone: `${data.generalManagerPhoneCountryCode}${data.generalManagerPhone}`,
|
||||
poaName: data.poaName || undefined,
|
||||
poaPhone:
|
||||
data.poaPhone && data.poaPhoneCountryCode
|
||||
? `${data.poaPhoneCountryCode}${data.poaPhone}`
|
||||
: undefined,
|
||||
poaAddress: data.poaAddress || undefined,
|
||||
poaEmail: data.poaEmail || undefined,
|
||||
poaLocation: data.poaLocation || undefined,
|
||||
};
|
||||
createCustomerMutation.mutate(payload);
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
left={{
|
||||
badge: "Complete Your Profile",
|
||||
title: "Set up your company profile",
|
||||
description:
|
||||
"Provide your business details to start using EDR Freight for managing shipments, tracking consignments, and streamlining logistics operations across Ethiopia and Djibouti.",
|
||||
features: [
|
||||
"Company registration details",
|
||||
"Contact and management personnel",
|
||||
"Power of Attorney (optional)",
|
||||
],
|
||||
stats: {
|
||||
label: "Active Customers",
|
||||
value: "500+",
|
||||
footer: "And growing",
|
||||
progress: "w-[95%]",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="mb-8 lg:col-span-2">
|
||||
<div className="flex items-center justify-between max-w-lg mx-auto relative px-2">
|
||||
<div className="absolute top-1/2 left-0 w-full h-0.5 bg-border -translate-y-1/2 z-0" />
|
||||
<StepIcon
|
||||
icon={<Building2 className="size-5" />}
|
||||
active={step === "company"}
|
||||
completed={step !== "company"}
|
||||
/>
|
||||
<StepIcon
|
||||
icon={<User className="size-5" />}
|
||||
active={step === "personnel"}
|
||||
completed={step === "poa"}
|
||||
/>
|
||||
<StepIcon
|
||||
icon={<FileText className="size-5" />}
|
||||
active={step === "poa"}
|
||||
completed={false}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-center text-sm text-muted-foreground mt-3">
|
||||
{step === "company" && "Step 1 of 3 — Company Information"}
|
||||
{step === "personnel" && "Step 2 of 3 — Personnel Details"}
|
||||
{step === "poa" && "Step 3 of 3 — Power of Attorney (Optional)"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
|
||||
<FieldGroup className="gap-4">
|
||||
{step === "company" && (
|
||||
<>
|
||||
<Field data-invalid={Boolean(errors.companyName)}>
|
||||
<FieldLabel>Company Name</FieldLabel>
|
||||
<Input
|
||||
placeholder="Global Logistics Ltd"
|
||||
aria-invalid={Boolean(errors.companyName)}
|
||||
{...register("companyName")}
|
||||
/>
|
||||
<FieldError errors={[errors.companyName]} />
|
||||
</Field>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field data-invalid={Boolean(errors.companyEmail)}>
|
||||
<FieldLabel>Company Email</FieldLabel>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="ops@company.com"
|
||||
aria-invalid={Boolean(errors.companyEmail)}
|
||||
{...register("companyEmail")}
|
||||
/>
|
||||
<FieldError errors={[errors.companyEmail]} />
|
||||
</Field>
|
||||
|
||||
<PhoneInput
|
||||
countryCode={{ ...register("companyPhoneCountryCode") }}
|
||||
phone={{
|
||||
...register("companyPhone"),
|
||||
placeholder: "912345678",
|
||||
}}
|
||||
countryCodeError={errors.companyPhoneCountryCode}
|
||||
phoneError={errors.companyPhone}
|
||||
label="Company Phone"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field data-invalid={Boolean(errors.companyLocation)}>
|
||||
<FieldLabel>Location</FieldLabel>
|
||||
<Input
|
||||
placeholder="Addis Ababa, Ethiopia"
|
||||
aria-invalid={Boolean(errors.companyLocation)}
|
||||
{...register("companyLocation")}
|
||||
/>
|
||||
<FieldError errors={[errors.companyLocation]} />
|
||||
</Field>
|
||||
|
||||
<Field data-invalid={Boolean(errors.companyAddress)}>
|
||||
<FieldLabel>Address</FieldLabel>
|
||||
<Input
|
||||
placeholder="Bole Subcity, Woreda 03"
|
||||
aria-invalid={Boolean(errors.companyAddress)}
|
||||
{...register("companyAddress")}
|
||||
/>
|
||||
<FieldError errors={[errors.companyAddress]} />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field data-invalid={Boolean(errors.tinNumber)}>
|
||||
<FieldLabel>TIN Number (10 digits)</FieldLabel>
|
||||
<Input
|
||||
placeholder="1234567890"
|
||||
maxLength={10}
|
||||
aria-invalid={Boolean(errors.tinNumber)}
|
||||
{...register("tinNumber")}
|
||||
/>
|
||||
<FieldError errors={[errors.tinNumber]} />
|
||||
</Field>
|
||||
|
||||
<Field data-invalid={Boolean(errors.vatNumber)}>
|
||||
<FieldLabel>VAT Number</FieldLabel>
|
||||
<Input
|
||||
placeholder="VAT-12345"
|
||||
aria-invalid={Boolean(errors.vatNumber)}
|
||||
maxLength={10}
|
||||
{...register("vatNumber")}
|
||||
/>
|
||||
<FieldError errors={[errors.vatNumber]} />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field data-invalid={Boolean(errors.fanNumber)}>
|
||||
<FieldLabel>FAN Number (16 digits)</FieldLabel>
|
||||
<Input
|
||||
placeholder="1234567890123456"
|
||||
maxLength={16}
|
||||
aria-invalid={Boolean(errors.fanNumber)}
|
||||
{...register("fanNumber")}
|
||||
/>
|
||||
<FieldError errors={[errors.fanNumber]} />
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === "personnel" && (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Personal details are pulled from your account. Contact and
|
||||
management info is collected below.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-foreground mb-3">
|
||||
Contact Person
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field data-invalid={Boolean(errors.contactPersonName)}>
|
||||
<FieldLabel>Name</FieldLabel>
|
||||
<Input
|
||||
placeholder="Jane Smith"
|
||||
aria-invalid={Boolean(errors.contactPersonName)}
|
||||
{...register("contactPersonName")}
|
||||
/>
|
||||
<FieldError errors={[errors.contactPersonName]} />
|
||||
</Field>
|
||||
|
||||
<PhoneInput
|
||||
countryCode={{
|
||||
...register("contactPersonPhoneCountryCode"),
|
||||
}}
|
||||
phone={{
|
||||
...register("contactPersonPhone"),
|
||||
placeholder: "912345678",
|
||||
}}
|
||||
countryCodeError={errors.contactPersonPhoneCountryCode}
|
||||
phoneError={errors.contactPersonPhone}
|
||||
label="Phone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="border-border" />
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-foreground mb-3">
|
||||
General Manager
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field
|
||||
className="col-span-2"
|
||||
data-invalid={Boolean(errors.generalManagerName)}
|
||||
>
|
||||
<FieldLabel>Name</FieldLabel>
|
||||
<Input
|
||||
placeholder="Abebe Bikila"
|
||||
aria-invalid={Boolean(errors.generalManagerName)}
|
||||
{...register("generalManagerName")}
|
||||
/>
|
||||
<FieldError errors={[errors.generalManagerName]} />
|
||||
</Field>
|
||||
|
||||
<Field data-invalid={Boolean(errors.generalManagerEmail)}>
|
||||
<FieldLabel>Email</FieldLabel>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="gm@company.com"
|
||||
aria-invalid={Boolean(errors.generalManagerEmail)}
|
||||
{...register("generalManagerEmail")}
|
||||
/>
|
||||
<FieldError errors={[errors.generalManagerEmail]} />
|
||||
</Field>
|
||||
|
||||
<PhoneInput
|
||||
countryCode={{
|
||||
...register("generalManagerPhoneCountryCode"),
|
||||
}}
|
||||
phone={{
|
||||
...register("generalManagerPhone"),
|
||||
placeholder: "912345678",
|
||||
}}
|
||||
countryCodeError={errors.generalManagerPhoneCountryCode}
|
||||
phoneError={errors.generalManagerPhone}
|
||||
label="Phone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === "poa" && (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Power of Attorney details are optional. Skip if not applicable.
|
||||
</p>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>PoA Name</FieldLabel>
|
||||
<Input
|
||||
placeholder="Authorized Representative Name"
|
||||
{...register("poaName")}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field>
|
||||
<FieldLabel>PoA Email</FieldLabel>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="poa@company.com"
|
||||
{...register("poaEmail")}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<PhoneInput
|
||||
countryCode={{ ...register("poaPhoneCountryCode") }}
|
||||
phone={{ ...register("poaPhone"), placeholder: "912345678" }}
|
||||
label="PoA Phone"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field>
|
||||
<FieldLabel>PoA Location</FieldLabel>
|
||||
<Input
|
||||
placeholder="City, Country"
|
||||
{...register("poaLocation")}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>PoA Address</FieldLabel>
|
||||
<Input
|
||||
placeholder="Full Address"
|
||||
{...register("poaAddress")}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</FieldGroup>
|
||||
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={prevStep}
|
||||
disabled={step === "company"}
|
||||
>
|
||||
<ArrowLeft />
|
||||
Back
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={nextStep}
|
||||
disabled={createCustomerMutation.isPending}
|
||||
>
|
||||
{createCustomerMutation.isPending ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" />
|
||||
Submitting...
|
||||
</>
|
||||
) : step === "poa" ? (
|
||||
"Complete Registration"
|
||||
) : (
|
||||
<>
|
||||
Next Step
|
||||
<ArrowRight />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function StepIcon({
|
||||
icon,
|
||||
active,
|
||||
completed,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
active: boolean;
|
||||
completed: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`relative z-10 flex h-10 w-10 items-center justify-center rounded-full border-2 transition-all ${completed
|
||||
? "bg-primary border-primary text-primary-foreground"
|
||||
: active
|
||||
? "bg-background border-primary text-primary shadow-md"
|
||||
: "bg-background border-border text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{completed ? <CheckCircle2 className="size-5" /> : icon}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,418 +1,217 @@
|
||||
import { setPassword } from "@/services/account";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import {
|
||||
ArrowRight,
|
||||
LockKeyhole,
|
||||
ShieldCheck,
|
||||
Train,
|
||||
Eye,
|
||||
EyeOff,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useState, useMemo } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { ArrowRight, Check, Eye, EyeOff, LockKeyhole, Loader2, X } from "lucide-react";
|
||||
import useAuth from "@/hooks/useAuth";
|
||||
import AuthLayout from "@/components/auth/AuthLayout";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
} from "@edr/ui-common";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Schema
|
||||
// -----------------------------------------------------------------------------
|
||||
const passwordRequirements = [
|
||||
{ label: "At least 8 characters", test: (v: string) => v.length >= 8 },
|
||||
{ label: "One uppercase letter", test: (v: string) => /[A-Z]/.test(v) },
|
||||
{ label: "One lowercase letter", test: (v: string) => /[a-z]/.test(v) },
|
||||
{ label: "One number", test: (v: string) => /\d/.test(v) },
|
||||
{ label: "One special character", test: (v: string) => /[^A-Za-z0-9]/.test(v) },
|
||||
] as const;
|
||||
|
||||
const passwordSchema = z
|
||||
.object({
|
||||
password: z
|
||||
.string()
|
||||
.min(
|
||||
8,
|
||||
"Password must be at least 8 characters"
|
||||
),
|
||||
|
||||
confirmPassword: z
|
||||
.string()
|
||||
.min(
|
||||
8,
|
||||
"Confirm password is required"
|
||||
),
|
||||
.min(8, "Password must be at least 8 characters")
|
||||
.regex(/[A-Z]/, "Password must include an uppercase letter")
|
||||
.regex(/[a-z]/, "Password must include a lowercase letter")
|
||||
.regex(/\d/, "Password must include a number")
|
||||
.regex(/[^A-Za-z0-9]/, "Password must include a special character"),
|
||||
confirmPassword: z.string().min(1, "Please confirm your password"),
|
||||
})
|
||||
.refine(
|
||||
(data) =>
|
||||
data.password ===
|
||||
data.confirmPassword,
|
||||
{
|
||||
message:
|
||||
"Passwords do not match",
|
||||
path: ["confirmPassword"],
|
||||
}
|
||||
);
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Passwords do not match",
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
|
||||
type FormData = z.infer<
|
||||
typeof passwordSchema
|
||||
>;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Component
|
||||
// -----------------------------------------------------------------------------
|
||||
type FormData = z.infer<typeof passwordSchema>;
|
||||
|
||||
export default function SetPasswordPage() {
|
||||
const [
|
||||
showPassword,
|
||||
setShowPassword,
|
||||
] = useState(false);
|
||||
|
||||
const [
|
||||
showConfirmPassword,
|
||||
setShowConfirmPassword,
|
||||
] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const { setPassword } = useAuth();
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
} = useForm<FormData>({
|
||||
resolver:
|
||||
zodResolver(passwordSchema),
|
||||
|
||||
defaultValues: {
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
resolver: zodResolver(passwordSchema),
|
||||
defaultValues: { password: "", confirmPassword: "" },
|
||||
});
|
||||
|
||||
const naviagte = useNavigate();
|
||||
const password = watch("password");
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mutation
|
||||
// ---------------------------------------------------------------------------
|
||||
const requirements = useMemo(
|
||||
() => passwordRequirements.map((r) => ({ ...r, met: r.test(password || "") })),
|
||||
[password],
|
||||
);
|
||||
|
||||
const setPasswordMutation =
|
||||
useMutation({
|
||||
mutationFn: async (
|
||||
data: FormData
|
||||
) => setPassword({
|
||||
newPassword: data?.password,
|
||||
confirmPassword: data?.confirmPassword,
|
||||
userId: localStorage.getItem("userId"),
|
||||
email: localStorage.getItem("otp-email"),
|
||||
verificationCode: localStorage.getItem("otp"),
|
||||
}),
|
||||
const allMet = requirements.every((r) => r.met);
|
||||
|
||||
onSuccess: () => {
|
||||
naviagte("/auth");
|
||||
reset();
|
||||
},
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Submit
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const onSubmit = async (
|
||||
data: FormData
|
||||
) => {
|
||||
const onSubmit = async (data: FormData) => {
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
await setPasswordMutation.mutateAsync(
|
||||
data
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
const result = await setPassword({
|
||||
newPassword: data.password,
|
||||
confirmPassword: data.confirmPassword,
|
||||
});
|
||||
if (result.success) {
|
||||
navigate("/auth");
|
||||
} else {
|
||||
setError(result.error.message);
|
||||
}
|
||||
} catch {
|
||||
setError("An unexpected error occurred");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// UI
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<div className="grid min-h-screen lg:grid-cols-2">
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* Left Side */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
|
||||
<div className="relative hidden overflow-hidden bg-primary p-12 text-primary-foreground lg:flex lg:flex-col lg:justify-between">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.14),transparent_35%)]" />
|
||||
|
||||
<div className="relative z-10">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-14 items-center justify-center rounded-3xl bg-white/10 backdrop-blur">
|
||||
<Train className="size-7" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 className="text-3xl font-black tracking-tight">
|
||||
EDR Freight
|
||||
</h1>
|
||||
|
||||
<p className="mt-1 text-sm opacity-80">
|
||||
Railway Logistics
|
||||
Platform
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero */}
|
||||
<div className="mt-20 max-w-lg">
|
||||
<div className="inline-flex rounded-full bg-white/10 px-4 py-2 text-sm font-semibold backdrop-blur">
|
||||
Account Security
|
||||
</div>
|
||||
|
||||
<h2 className="mt-6 text-5xl font-black leading-tight tracking-tight">
|
||||
Set your secure
|
||||
password
|
||||
</h2>
|
||||
|
||||
<p className="mt-6 text-lg leading-8 opacity-85">
|
||||
Create a strong
|
||||
password to secure
|
||||
your EDR Freight
|
||||
account and protect
|
||||
railway logistics
|
||||
operations and shipment
|
||||
data.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="mt-14 grid gap-5">
|
||||
{[
|
||||
"Enterprise-grade security",
|
||||
"Protected account access",
|
||||
"Secure freight operations",
|
||||
"Advanced authentication system",
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<div className="flex size-10 items-center justify-center rounded-2xl bg-white/10">
|
||||
<ShieldCheck className="size-5" />
|
||||
</div>
|
||||
|
||||
<span className="font-medium">
|
||||
{item}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="relative z-10 rounded-[32px] border border-white/10 bg-white/10 p-6 backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm opacity-80">
|
||||
Security Protection
|
||||
</p>
|
||||
|
||||
<h3 className="mt-2 text-4xl font-black">
|
||||
256-bit
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl bg-white/10 px-4 py-2 text-sm font-semibold">
|
||||
Encrypted
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 h-3 overflow-hidden rounded-full bg-white/10">
|
||||
<div className="h-full w-[98%] rounded-full bg-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* Right Side */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
|
||||
<div className="flex items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-xl">
|
||||
{/* Mobile Logo */}
|
||||
<div className="mb-8 flex items-center gap-3 lg:hidden">
|
||||
<div className="flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
|
||||
<Train className="size-6" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">
|
||||
EDR Freight
|
||||
</h1>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Railway Logistics
|
||||
Platform
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card */}
|
||||
<div className="rounded-[36px] border border-border bg-card p-8 shadow-2xl md:p-10">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-4 flex size-16 items-center justify-center rounded-3xl bg-primary/10 text-primary">
|
||||
<LockKeyhole className="size-8" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-4xl font-black tracking-tight">
|
||||
Set Password
|
||||
</h2>
|
||||
|
||||
<p className="mt-3 text-lg text-muted-foreground">
|
||||
Create a secure
|
||||
password for your
|
||||
EDR Freight account.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Success */}
|
||||
{setPasswordMutation.isSuccess && (
|
||||
<div className="mb-6 rounded-2xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
|
||||
Password updated
|
||||
successfully.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{setPasswordMutation.isError && (
|
||||
<div className="mb-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
Failed to set
|
||||
password. Please try
|
||||
again.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form
|
||||
onSubmit={handleSubmit(
|
||||
onSubmit
|
||||
)}
|
||||
className="space-y-6"
|
||||
>
|
||||
{/* Password */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold">
|
||||
Password
|
||||
</label>
|
||||
|
||||
<div className="relative">
|
||||
<input
|
||||
type={
|
||||
showPassword
|
||||
? "text"
|
||||
: "password"
|
||||
}
|
||||
placeholder="Enter password"
|
||||
disabled={
|
||||
setPasswordMutation.isPending
|
||||
}
|
||||
{...register(
|
||||
"password"
|
||||
)}
|
||||
className="h-14 w-full rounded-2xl border border-input bg-background px-4 pr-14 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10 disabled:opacity-60"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setShowPassword(
|
||||
!showPassword
|
||||
)
|
||||
}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="size-5" />
|
||||
) : (
|
||||
<Eye className="size-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{errors.password && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{
|
||||
errors.password
|
||||
.message
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold">
|
||||
Confirm Password
|
||||
</label>
|
||||
|
||||
<div className="relative">
|
||||
<input
|
||||
type={
|
||||
showConfirmPassword
|
||||
? "text"
|
||||
: "password"
|
||||
}
|
||||
placeholder="Confirm password"
|
||||
disabled={
|
||||
setPasswordMutation.isPending
|
||||
}
|
||||
{...register(
|
||||
"confirmPassword"
|
||||
)}
|
||||
className="h-14 w-full rounded-2xl border border-input bg-background px-4 pr-14 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10 disabled:opacity-60"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setShowConfirmPassword(
|
||||
!showConfirmPassword
|
||||
)
|
||||
}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground"
|
||||
>
|
||||
{showConfirmPassword ? (
|
||||
<EyeOff className="size-5" />
|
||||
) : (
|
||||
<Eye className="size-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{errors.confirmPassword && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{
|
||||
errors
|
||||
.confirmPassword
|
||||
.message
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={
|
||||
setPasswordMutation.isPending
|
||||
}
|
||||
className="flex h-14 w-full items-center justify-center gap-2 rounded-2xl bg-primary text-lg font-semibold text-primary-foreground shadow-lg transition hover:-translate-y-0.5 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{setPasswordMutation.isPending ? (
|
||||
"Saving..."
|
||||
) : (
|
||||
<>
|
||||
Save Password
|
||||
|
||||
<ArrowRight className="size-5" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<AuthLayout
|
||||
left={{
|
||||
badge: "Account Security",
|
||||
title: "Set your secure password",
|
||||
description:
|
||||
"Create a strong password to secure your EDR Freight account and protect railway logistics operations and shipment data.",
|
||||
features: [
|
||||
"Enterprise-grade security",
|
||||
"Protected account access",
|
||||
"Secure freight operations",
|
||||
"Advanced authentication system",
|
||||
],
|
||||
stats: { label: "Security Protection", value: "256-bit", footer: "Encrypted", progress: "w-[98%]" },
|
||||
}}
|
||||
>
|
||||
<div className="mb-6">
|
||||
<div className="mb-4 flex size-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
|
||||
<LockKeyhole className="size-6" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-black tracking-tight">Set Password</h2>
|
||||
<p className="mt-2 text-base text-muted-foreground">
|
||||
Create a secure password for your account.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-2.5 text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
|
||||
<FieldGroup>
|
||||
<Field data-invalid={Boolean(errors.password)}>
|
||||
<FieldLabel>Password</FieldLabel>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Enter password"
|
||||
disabled={loading}
|
||||
aria-invalid={Boolean(errors.password)}
|
||||
className="pr-12"
|
||||
{...register("password")}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground"
|
||||
>
|
||||
{showPassword ? <EyeOff /> : <Eye />}
|
||||
</Button>
|
||||
</div>
|
||||
<FieldError errors={[errors.password]} />
|
||||
</Field>
|
||||
|
||||
{password && (
|
||||
<ul className="space-y-1.5">
|
||||
{requirements.map((req) => (
|
||||
<li
|
||||
key={req.label}
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm",
|
||||
req.met ? "text-emerald-600" : "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{req.met ? (
|
||||
<Check className="size-4 shrink-0 text-emerald-500" />
|
||||
) : (
|
||||
<X className="size-4 shrink-0 text-muted-foreground/50" />
|
||||
)}
|
||||
{req.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<Field data-invalid={Boolean(errors.confirmPassword)}>
|
||||
<FieldLabel>Confirm Password</FieldLabel>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
placeholder="Confirm password"
|
||||
disabled={loading}
|
||||
aria-invalid={Boolean(errors.confirmPassword)}
|
||||
className="pr-12"
|
||||
{...register("confirmPassword")}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
className="absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground"
|
||||
>
|
||||
{showConfirmPassword ? <EyeOff /> : <Eye />}
|
||||
</Button>
|
||||
</div>
|
||||
<FieldError errors={[errors.confirmPassword]} />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading || !allMet}
|
||||
size="lg"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" data-icon="inline-start" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Save Password
|
||||
<ArrowRight data-icon="inline-end" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,534 +1,197 @@
|
||||
import { userType } from "@/enums/userType";
|
||||
import { createOTP, createUser } from "@/services/account";
|
||||
|
||||
import { CreateUserPayload } from "@/types/createUser";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
ShieldCheck,
|
||||
Train,
|
||||
UserPlus,
|
||||
} from "lucide-react";
|
||||
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Schema
|
||||
// -----------------------------------------------------------------------------
|
||||
import { ArrowRight, UserPlus, Loader2 } from "lucide-react";
|
||||
import { userType } from "@/enums/userType";
|
||||
import useAuth from "@/hooks/useAuth";
|
||||
import type { SignupPayload } from "@/types/auth";
|
||||
import AuthLayout from "@/components/auth/AuthLayout";
|
||||
import PhoneInput from "@/components/auth/PhoneInput";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
} from "@edr/ui-common";
|
||||
|
||||
const userSchema = z.object({
|
||||
email: z
|
||||
.string()
|
||||
.email("Invalid email address"),
|
||||
|
||||
username: z
|
||||
.string()
|
||||
.min(
|
||||
3,
|
||||
"Username must be at least 3 characters"
|
||||
),
|
||||
|
||||
countryCode: z
|
||||
.string()
|
||||
.min(
|
||||
1,
|
||||
"Country code is required"
|
||||
),
|
||||
|
||||
phone: z
|
||||
.string()
|
||||
.min(
|
||||
9,
|
||||
"Phone number is too short"
|
||||
)
|
||||
.max(
|
||||
9,
|
||||
"Phone number is too long"
|
||||
),
|
||||
|
||||
email: z.string().email("Invalid email address"),
|
||||
username: z.string().min(3, "Username must be at least 3 characters"),
|
||||
countryCode: z.string().min(1, "Country code is required"),
|
||||
phone: z.string().min(9, "Phone number is too short").max(9, "Phone number is too long"),
|
||||
userType: z.string(),
|
||||
|
||||
name: z.object({
|
||||
en: z
|
||||
.string()
|
||||
.min(2, "Name is required"),
|
||||
|
||||
en: z.string().min(2, "Name is required"),
|
||||
am: z.string().nullable(),
|
||||
}),
|
||||
});
|
||||
|
||||
type FormData = z.infer<
|
||||
typeof userSchema
|
||||
>;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Component
|
||||
// -----------------------------------------------------------------------------
|
||||
type FormData = z.infer<typeof userSchema>;
|
||||
|
||||
export default function SignupPage() {
|
||||
const navigate = useNavigate();
|
||||
const { signup } = useAuth();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
reset,
|
||||
} = useForm<FormData>({
|
||||
resolver:
|
||||
zodResolver(userSchema),
|
||||
|
||||
resolver: zodResolver(userSchema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
username: "",
|
||||
countryCode: "+251",
|
||||
phone: "",
|
||||
userType:
|
||||
userType.individual,
|
||||
|
||||
name: {
|
||||
en: "",
|
||||
am: "",
|
||||
},
|
||||
userType: userType.individual,
|
||||
name: { en: "", am: "" },
|
||||
},
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Create User Mutation
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const createUserMutation =
|
||||
useMutation({
|
||||
mutationFn: (
|
||||
user: CreateUserPayload
|
||||
) => createUser(user),
|
||||
|
||||
onSuccess: () => {
|
||||
reset();
|
||||
},
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Submit
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const onSubmit = async (
|
||||
data: FormData
|
||||
) => {
|
||||
const onSubmit = async (data: FormData) => {
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
const normalizedPhone =
|
||||
data.phone.startsWith(
|
||||
"0"
|
||||
)
|
||||
? data.phone.slice(1)
|
||||
: data.phone;
|
||||
|
||||
const fullPhoneNumber = `${data.countryCode
|
||||
}${normalizedPhone}`;
|
||||
|
||||
const payload: CreateUserPayload =
|
||||
{
|
||||
const normalizedPhone = data.phone.startsWith("0") ? data.phone.slice(1) : data.phone;
|
||||
const payload: SignupPayload = {
|
||||
email: data.email,
|
||||
|
||||
username:
|
||||
data.username,
|
||||
|
||||
phoneNumber:
|
||||
fullPhoneNumber,
|
||||
|
||||
userType:
|
||||
data.userType,
|
||||
|
||||
name: {
|
||||
en: data.name.en,
|
||||
am:
|
||||
data.name.am ||
|
||||
"",
|
||||
},
|
||||
username: data.username,
|
||||
phoneNumber: `${data.countryCode}${normalizedPhone}`,
|
||||
userType: data.userType,
|
||||
name: { en: data.name.en, am: data.name.am ?? "" },
|
||||
};
|
||||
|
||||
const res =
|
||||
await createUserMutation.mutateAsync(
|
||||
payload
|
||||
);
|
||||
|
||||
if (res?.success) {
|
||||
// save auth token
|
||||
// document.cookie = `auth-token=${res.data?.token}; path=/`;
|
||||
localStorage.setItem(
|
||||
"auth-token",
|
||||
`auth-token=${res.data?.token}; path=/`
|
||||
);
|
||||
localStorage.setItem(
|
||||
"userId",res.data?.userId
|
||||
);
|
||||
localStorage.setItem(
|
||||
"otp",res.data?.otp?.split(" ")?.[6]
|
||||
);
|
||||
createOTP({ phone: payload.phoneNumber, otp:res.data?.otp?.split(" ")?.[6] })
|
||||
// save phone for otp page
|
||||
localStorage.setItem(
|
||||
"otp-phone",
|
||||
payload.phoneNumber
|
||||
);
|
||||
// save phone for set password page
|
||||
|
||||
localStorage.setItem(
|
||||
"otp-email",
|
||||
payload.email
|
||||
);
|
||||
// navigate otp page
|
||||
const result = await signup(payload);
|
||||
if (result.success) {
|
||||
navigate("/otp");
|
||||
} else {
|
||||
setError(result.error.message);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} catch {
|
||||
setError("An unexpected error occurred");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// UI
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<div className="grid min-h-screen lg:grid-cols-2">
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* Left Side */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
|
||||
<div className="relative hidden overflow-hidden bg-primary p-12 text-primary-foreground lg:flex lg:flex-col lg:justify-between">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.14),transparent_35%)]" />
|
||||
|
||||
<div className="relative z-10">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-14 items-center justify-center rounded-3xl bg-white/10 backdrop-blur">
|
||||
<Train className="size-7" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 className="text-3xl font-black tracking-tight">
|
||||
EDR Freight
|
||||
</h1>
|
||||
|
||||
<p className="mt-1 text-sm opacity-80">
|
||||
Railway Logistics
|
||||
Platform
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero */}
|
||||
<div className="mt-20 max-w-lg">
|
||||
<div className="inline-flex rounded-full bg-white/10 px-4 py-2 text-sm font-semibold backdrop-blur">
|
||||
Smart Freight
|
||||
Operations
|
||||
</div>
|
||||
|
||||
<h2 className="mt-6 text-5xl font-black leading-tight tracking-tight">
|
||||
Create your freight
|
||||
operations account
|
||||
</h2>
|
||||
|
||||
<p className="mt-6 text-lg leading-8 opacity-85">
|
||||
Join EDR Freight to
|
||||
manage shipments,
|
||||
monitor railway
|
||||
operations, track
|
||||
consignments, and
|
||||
streamline logistics
|
||||
workflows across
|
||||
Ethiopia and
|
||||
Djibouti.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="mt-14 grid gap-5">
|
||||
{[
|
||||
"Real-time shipment tracking",
|
||||
"Secure logistics management",
|
||||
"Enterprise-grade operations",
|
||||
"Multi-corridor freight monitoring",
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<div className="flex size-10 items-center justify-center rounded-2xl bg-white/10">
|
||||
<ShieldCheck className="size-5" />
|
||||
</div>
|
||||
|
||||
<span className="font-medium">
|
||||
{item}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="relative z-10 rounded-[32px] border border-white/10 bg-white/10 p-6 backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm opacity-80">
|
||||
Active Corridors
|
||||
</p>
|
||||
|
||||
<h3 className="mt-2 text-4xl font-black">
|
||||
24+
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl bg-white/10 px-4 py-2 text-sm font-semibold">
|
||||
Operational
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 h-3 overflow-hidden rounded-full bg-white/10">
|
||||
<div className="h-full w-[95%] rounded-full bg-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* Right Side */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
|
||||
<div className="flex items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-2xl">
|
||||
{/* Mobile Logo */}
|
||||
<div className="mb-8 flex items-center gap-3 lg:hidden">
|
||||
<div className="flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
|
||||
<Train className="size-6" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">
|
||||
EDR Freight
|
||||
</h1>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Railway Logistics
|
||||
Platform
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Card */}
|
||||
<div className="rounded-[36px] border border-border bg-card p-8 shadow-2xl md:p-10">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-4 flex size-16 items-center justify-center rounded-3xl bg-primary/10 text-primary">
|
||||
<UserPlus className="size-8" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-4xl font-black tracking-tight">
|
||||
Create Account
|
||||
</h2>
|
||||
|
||||
<p className="mt-3 text-lg text-muted-foreground">
|
||||
Register to access
|
||||
EDR Freight
|
||||
services and railway
|
||||
logistics operations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Success */}
|
||||
{createUserMutation.isSuccess && (
|
||||
<div className="mb-6 rounded-2xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
|
||||
Account created
|
||||
successfully.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{createUserMutation.isError && (
|
||||
<div className="mb-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
Failed to create
|
||||
account. Please try
|
||||
again.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form
|
||||
onSubmit={handleSubmit(
|
||||
onSubmit
|
||||
)}
|
||||
className="space-y-6"
|
||||
>
|
||||
{/* Full Name */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold">
|
||||
Full Name
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
disabled={
|
||||
createUserMutation.isPending
|
||||
}
|
||||
{...register(
|
||||
"name.en"
|
||||
)}
|
||||
className="h-13 w-full rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10 disabled:opacity-60"
|
||||
/>
|
||||
|
||||
{errors.name?.en && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{
|
||||
errors.name.en
|
||||
.message
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Username */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold">
|
||||
Username
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="john_doe"
|
||||
disabled={
|
||||
createUserMutation.isPending
|
||||
}
|
||||
{...register(
|
||||
"username"
|
||||
)}
|
||||
className="h-13 w-full rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10 disabled:opacity-60"
|
||||
/>
|
||||
|
||||
{errors.username && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{
|
||||
errors.username
|
||||
.message
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold">
|
||||
Email Address
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="email"
|
||||
placeholder="john@example.com"
|
||||
disabled={
|
||||
createUserMutation.isPending
|
||||
}
|
||||
{...register(
|
||||
"email"
|
||||
)}
|
||||
className="h-13 w-full rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10 disabled:opacity-60"
|
||||
/>
|
||||
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{
|
||||
errors.email
|
||||
.message
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold">
|
||||
Phone Number
|
||||
</label>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
disabled={
|
||||
createUserMutation.isPending
|
||||
}
|
||||
{...register(
|
||||
"countryCode"
|
||||
)}
|
||||
className="h-13 w-28 rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10 disabled:opacity-60"
|
||||
/>
|
||||
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="912345678"
|
||||
disabled={
|
||||
createUserMutation.isPending
|
||||
}
|
||||
{...register(
|
||||
"phone"
|
||||
)}
|
||||
className="h-13 flex-1 rounded-2xl border border-input bg-background px-4 outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10 disabled:opacity-60"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{(errors.countryCode ||
|
||||
errors.phone) && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{errors
|
||||
.countryCode
|
||||
?.message ||
|
||||
errors.phone
|
||||
?.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={
|
||||
createUserMutation.isPending
|
||||
}
|
||||
className="flex h-14 w-full items-center justify-center gap-2 rounded-2xl bg-primary text-lg font-semibold text-primary-foreground shadow-lg transition hover:-translate-y-0.5 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{createUserMutation.isPending ? (
|
||||
"Creating..."
|
||||
) : (
|
||||
<>
|
||||
Create Account
|
||||
|
||||
<ArrowRight className="size-5" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Already have an
|
||||
account?
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="ml-2 font-semibold text-primary hover:underline"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<AuthLayout
|
||||
left={{
|
||||
badge: "Smart Freight Operations",
|
||||
title: "Create your freight operations account",
|
||||
description:
|
||||
"Join EDR Freight to manage shipments, monitor railway operations, track consignments, and streamline logistics workflows across Ethiopia and Djibouti.",
|
||||
features: [
|
||||
"Real-time shipment tracking",
|
||||
"Secure logistics management",
|
||||
"Enterprise-grade operations",
|
||||
"Multi-corridor freight monitoring",
|
||||
],
|
||||
stats: { label: "Active Corridors", value: "24+", footer: "Operational", progress: "w-[95%]" },
|
||||
}}
|
||||
>
|
||||
<div className="mb-6">
|
||||
<div className="mb-4 flex size-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
|
||||
<UserPlus className="size-6" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-black tracking-tight">Create Account</h2>
|
||||
<p className="mt-2 text-base text-muted-foreground">
|
||||
Register to access EDR Freight services.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-2.5 text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
|
||||
<FieldGroup className="gap-4">
|
||||
<Field data-invalid={Boolean(errors.name?.en)}>
|
||||
<FieldLabel>Full Name</FieldLabel>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
disabled={loading}
|
||||
aria-invalid={Boolean(errors.name?.en)}
|
||||
{...register("name.en")}
|
||||
/>
|
||||
<FieldError errors={[errors.name?.en]} />
|
||||
</Field>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field data-invalid={Boolean(errors.username)}>
|
||||
<FieldLabel>Username</FieldLabel>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="john_doe"
|
||||
disabled={loading}
|
||||
aria-invalid={Boolean(errors.username)}
|
||||
{...register("username")}
|
||||
/>
|
||||
<FieldError errors={[errors.username]} />
|
||||
</Field>
|
||||
|
||||
<Field data-invalid={Boolean(errors.email)}>
|
||||
<FieldLabel>Email Address</FieldLabel>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="john@example.com"
|
||||
disabled={loading}
|
||||
aria-invalid={Boolean(errors.email)}
|
||||
{...register("email")}
|
||||
/>
|
||||
<FieldError errors={[errors.email]} />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<PhoneInput
|
||||
disabled={loading}
|
||||
countryCode={{ ...register("countryCode") }}
|
||||
phone={{ ...register("phone") }}
|
||||
countryCodeError={errors.countryCode}
|
||||
phoneError={errors.phone}
|
||||
/>
|
||||
</FieldGroup>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
size="lg"
|
||||
className="w-full"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" data-icon="inline-start" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Create Account
|
||||
<ArrowRight data-icon="inline-end" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Already have an account?
|
||||
<Button
|
||||
type="button"
|
||||
variant="link"
|
||||
size="sm"
|
||||
onClick={() => navigate("/login")}
|
||||
className="h-auto p-0 font-semibold"
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
</p>
|
||||
</form>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,70 +1,36 @@
|
||||
import { verificationCodeType } from "@/enums/verificationCodeType";
|
||||
|
||||
import {
|
||||
generateVerificationCode,
|
||||
verifyOTP,
|
||||
} from "@/services/account";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
ShieldCheck,
|
||||
Train,
|
||||
MailCheck,
|
||||
RotateCw,
|
||||
} from "lucide-react";
|
||||
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Schema
|
||||
// -----------------------------------------------------------------------------
|
||||
import { ArrowRight, MailCheck, RotateCw, Loader2 } from "lucide-react";
|
||||
import { verificationCodeType } from "@/enums/verificationCodeType";
|
||||
import useAuth from "@/hooks/useAuth";
|
||||
import AuthLayout from "@/components/auth/AuthLayout";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
} from "@edr/ui-common";
|
||||
|
||||
const otpSchema = z.object({
|
||||
code: z
|
||||
.string()
|
||||
.regex(
|
||||
/^\d{6}$/,
|
||||
"OTP must be exactly 6 digits"
|
||||
),
|
||||
code: z.string().regex(/^\d{6}$/, "OTP must be exactly 6 digits"),
|
||||
});
|
||||
|
||||
type FormData = z.infer<
|
||||
typeof otpSchema
|
||||
>;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Component
|
||||
// -----------------------------------------------------------------------------
|
||||
type FormData = z.infer<typeof otpSchema>;
|
||||
|
||||
export default function VerificationOtpPage() {
|
||||
const navigate =
|
||||
useNavigate();
|
||||
const navigate = useNavigate();
|
||||
const { verifyOTP, generateVerificationCode } = useAuth();
|
||||
const [verifying, setVerifying] = useState(false);
|
||||
const [resending, setResending] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [resentMessage, setResentMessage] = useState<string | null>(null);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Local Storage Data
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const phone =
|
||||
localStorage.getItem(
|
||||
"otp-phone"
|
||||
) || "";
|
||||
|
||||
const email =
|
||||
localStorage.getItem(
|
||||
"otp-email"
|
||||
) || "";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Form
|
||||
// ---------------------------------------------------------------------------
|
||||
const phone = localStorage.getItem("otp-phone") || "";
|
||||
|
||||
const {
|
||||
register,
|
||||
@@ -72,383 +38,165 @@ export default function VerificationOtpPage() {
|
||||
formState: { errors },
|
||||
watch,
|
||||
} = useForm<FormData>({
|
||||
resolver:
|
||||
zodResolver(otpSchema),
|
||||
|
||||
defaultValues: {
|
||||
code: "",
|
||||
},
|
||||
resolver: zodResolver(otpSchema),
|
||||
defaultValues: { code: "" },
|
||||
});
|
||||
|
||||
const otpValue =
|
||||
watch("code");
|
||||
const otpValue = watch("code");
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Verify Mutation
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const verifyMutation =
|
||||
useMutation({
|
||||
mutationFn: async (
|
||||
data: {
|
||||
phone: string;
|
||||
otp: string;
|
||||
}
|
||||
) => verifyOTP(data),
|
||||
|
||||
onSuccess: () => {
|
||||
navigate(
|
||||
"/set-password"
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Resend Mutation
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const resendMutation =
|
||||
useMutation({
|
||||
mutationFn: async () => {
|
||||
return generateVerificationCode(
|
||||
{
|
||||
email,
|
||||
phoneNumber:
|
||||
phone,
|
||||
|
||||
type:
|
||||
verificationCodeType.setPassword,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Submit
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const onSubmit = async (
|
||||
data: FormData
|
||||
) => {
|
||||
const onSubmit = async (data: FormData) => {
|
||||
setError(null);
|
||||
setVerifying(true);
|
||||
try {
|
||||
await verifyMutation.mutateAsync(
|
||||
{
|
||||
phone,
|
||||
otp: data.code,
|
||||
}
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
const result = await verifyOTP(data.code);
|
||||
if (result.success) {
|
||||
navigate("/set-password");
|
||||
} else {
|
||||
setError(result.error.message);
|
||||
}
|
||||
} catch {
|
||||
setError("An unexpected error occurred");
|
||||
} finally {
|
||||
setVerifying(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
const handleResend = async () => {
|
||||
setResentMessage(null);
|
||||
setResending(true);
|
||||
try {
|
||||
const result = await generateVerificationCode(verificationCodeType.setPassword);
|
||||
if (result.success) {
|
||||
setResentMessage("New OTP code sent successfully.");
|
||||
} else {
|
||||
setError(result.error.message);
|
||||
}
|
||||
} catch {
|
||||
setError("An unexpected error occurred");
|
||||
} finally {
|
||||
setResending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const maskedPhone =
|
||||
phone.length > 4
|
||||
? `${phone.slice(
|
||||
0,
|
||||
7
|
||||
)}******`
|
||||
: phone;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// UI
|
||||
// ---------------------------------------------------------------------------
|
||||
const maskedPhone = phone.length > 4 ? `${phone.slice(0, 7)}******` : phone;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<div className="grid min-h-screen lg:grid-cols-2">
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* Left Side */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
|
||||
<div className="relative hidden overflow-hidden bg-primary p-12 text-primary-foreground lg:flex lg:flex-col lg:justify-between">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.14),transparent_35%)]" />
|
||||
|
||||
<div className="relative z-10">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-14 items-center justify-center rounded-3xl bg-white/10 backdrop-blur">
|
||||
<Train className="size-7" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 className="text-3xl font-black tracking-tight">
|
||||
EDR Freight
|
||||
</h1>
|
||||
|
||||
<p className="mt-1 text-sm opacity-80">
|
||||
Railway Logistics
|
||||
Platform
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero */}
|
||||
<div className="mt-20 max-w-lg">
|
||||
<div className="inline-flex rounded-full bg-white/10 px-4 py-2 text-sm font-semibold backdrop-blur">
|
||||
Secure
|
||||
Verification
|
||||
</div>
|
||||
|
||||
<h2 className="mt-6 text-5xl font-black leading-tight tracking-tight">
|
||||
Verify your
|
||||
account securely
|
||||
</h2>
|
||||
|
||||
<p className="mt-6 text-lg leading-8 opacity-85">
|
||||
Enter the
|
||||
verification code
|
||||
sent to your phone
|
||||
number to continue
|
||||
using EDR Freight
|
||||
logistics services.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="mt-14 grid gap-5">
|
||||
{[
|
||||
"Secure OTP verification",
|
||||
"Protected account access",
|
||||
"Fast identity confirmation",
|
||||
"Enterprise-grade security",
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<div className="flex size-10 items-center justify-center rounded-2xl bg-white/10">
|
||||
<ShieldCheck className="size-5" />
|
||||
</div>
|
||||
|
||||
<span className="font-medium">
|
||||
{item}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Stats */}
|
||||
<div className="relative z-10 rounded-[32px] border border-white/10 bg-white/10 p-6 backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm opacity-80">
|
||||
Verification
|
||||
Security
|
||||
</p>
|
||||
|
||||
<h3 className="mt-2 text-4xl font-black">
|
||||
99.9%
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl bg-white/10 px-4 py-2 text-sm font-semibold">
|
||||
Protected
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 h-3 overflow-hidden rounded-full bg-white/10">
|
||||
<div className="h-full w-[99%] rounded-full bg-white" />
|
||||
</div>
|
||||
</div>
|
||||
<AuthLayout
|
||||
left={{
|
||||
badge: "Secure Verification",
|
||||
title: "Verify your account securely",
|
||||
description:
|
||||
"Enter the verification code sent to your phone number to continue using EDR Freight logistics services.",
|
||||
features: [
|
||||
"Secure OTP verification",
|
||||
"Protected account access",
|
||||
"Fast identity confirmation",
|
||||
"Enterprise-grade security",
|
||||
],
|
||||
stats: { label: "Verification Security", value: "99.9%", footer: "Protected", progress: "w-[99%]" },
|
||||
}}
|
||||
>
|
||||
<div className="mb-6">
|
||||
<div className="mb-4 flex size-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
|
||||
<MailCheck className="size-6" />
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* Right Side */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
|
||||
<div className="flex items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-xl">
|
||||
{/* Mobile Logo */}
|
||||
<div className="mb-8 flex items-center gap-3 lg:hidden">
|
||||
<div className="flex size-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
|
||||
<Train className="size-6" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">
|
||||
EDR Freight
|
||||
</h1>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Railway Logistics
|
||||
Platform
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* OTP Card */}
|
||||
<div className="rounded-[36px] border border-border bg-card p-8 shadow-2xl md:p-10">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-4 flex size-16 items-center justify-center rounded-3xl bg-primary/10 text-primary">
|
||||
<MailCheck className="size-8" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-4xl font-black tracking-tight">
|
||||
OTP Verification
|
||||
</h2>
|
||||
|
||||
<p className="mt-3 text-lg text-muted-foreground">
|
||||
Enter the
|
||||
6-digit code sent
|
||||
to:
|
||||
</p>
|
||||
|
||||
<div className="mt-4 rounded-2xl border border-border bg-muted/50 px-4 py-3">
|
||||
<p className="font-semibold">
|
||||
{maskedPhone}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Success */}
|
||||
{verifyMutation.isSuccess && (
|
||||
<div className="mb-6 rounded-2xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
|
||||
Verification
|
||||
successful.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{verifyMutation.isError && (
|
||||
<div className="mb-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
Invalid OTP
|
||||
code. Please try
|
||||
again.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Resend Success */}
|
||||
{resendMutation.isSuccess && (
|
||||
<div className="mb-6 rounded-2xl border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-700">
|
||||
New OTP code sent
|
||||
successfully.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form
|
||||
onSubmit={handleSubmit(
|
||||
onSubmit
|
||||
)}
|
||||
className="space-y-6"
|
||||
>
|
||||
{/* OTP */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold">
|
||||
Verification
|
||||
Code
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
maxLength={6}
|
||||
placeholder="123456"
|
||||
disabled={
|
||||
verifyMutation.isPending
|
||||
}
|
||||
{...register(
|
||||
"code"
|
||||
)}
|
||||
className="h-16 w-full rounded-2xl border border-input bg-background px-5 text-center text-3xl font-black tracking-[12px] outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10 disabled:opacity-60"
|
||||
/>
|
||||
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
{errors.code ? (
|
||||
<p className="text-sm text-red-500">
|
||||
{
|
||||
errors.code
|
||||
.message
|
||||
}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Enter the OTP
|
||||
sent to your
|
||||
phone
|
||||
</p>
|
||||
)}
|
||||
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{
|
||||
otpValue.length
|
||||
}
|
||||
/6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Verify Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={
|
||||
verifyMutation.isPending ||
|
||||
otpValue.length !==
|
||||
6
|
||||
}
|
||||
className="flex h-14 w-full items-center justify-center gap-2 rounded-2xl bg-primary text-lg font-semibold text-primary-foreground shadow-lg transition hover:-translate-y-0.5 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{verifyMutation.isPending ? (
|
||||
"Verifying..."
|
||||
) : (
|
||||
<>
|
||||
Verify Account
|
||||
|
||||
<ArrowRight className="size-5" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Resend */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
resendMutation.mutate()
|
||||
}
|
||||
disabled={
|
||||
resendMutation.isPending
|
||||
}
|
||||
className="flex h-14 w-full items-center justify-center gap-2 rounded-2xl border border-border bg-background text-base font-semibold transition hover:bg-muted disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{resendMutation.isPending ? (
|
||||
"Sending..."
|
||||
) : (
|
||||
<>
|
||||
<RotateCw className="size-5" />
|
||||
|
||||
Resend Code
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Didn’t receive
|
||||
the code?
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
resendMutation.mutate()
|
||||
}
|
||||
className="ml-2 font-semibold text-primary hover:underline"
|
||||
>
|
||||
Send again
|
||||
</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-2xl font-black tracking-tight">OTP Verification</h2>
|
||||
<p className="mt-2 text-base text-muted-foreground">Enter the 6-digit code sent to:</p>
|
||||
<div className="mt-3 rounded-xl border border-border bg-muted/50 px-4 py-2">
|
||||
<p className="text-sm font-semibold">{maskedPhone}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-2.5 text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{resentMessage && (
|
||||
<div className="mb-4 rounded-xl border border-blue-200 bg-blue-50 px-4 py-2.5 text-sm text-blue-700">
|
||||
{resentMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
|
||||
<FieldGroup>
|
||||
<Field data-invalid={Boolean(errors.code)}>
|
||||
<FieldLabel>Verification Code</FieldLabel>
|
||||
<Input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
maxLength={6}
|
||||
placeholder="123456"
|
||||
disabled={verifying}
|
||||
aria-invalid={Boolean(errors.code)}
|
||||
className="h-14 text-center text-2xl font-black tracking-[10px]"
|
||||
{...register("code")}
|
||||
/>
|
||||
<div className="mt-1.5 flex items-center justify-between">
|
||||
{errors.code ? (
|
||||
<FieldError errors={[errors.code]} />
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">Enter the OTP sent to your phone</p>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">{otpValue.length}/6</span>
|
||||
</div>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={verifying || otpValue.length !== 6}
|
||||
size="lg"
|
||||
className="w-full"
|
||||
>
|
||||
{verifying ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" data-icon="inline-start" />
|
||||
Verifying...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Verify Account
|
||||
<ArrowRight data-icon="inline-end" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleResend}
|
||||
disabled={resending}
|
||||
className="w-full"
|
||||
>
|
||||
{resending ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" data-icon="inline-start" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RotateCw data-icon="inline-start" />
|
||||
Resend Code
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Didn't receive the code?
|
||||
<Button
|
||||
type="button"
|
||||
variant="link"
|
||||
size="sm"
|
||||
onClick={handleResend}
|
||||
className="h-auto p-0 font-semibold"
|
||||
>
|
||||
Send again
|
||||
</Button>
|
||||
</p>
|
||||
</form>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { CheckCircle2, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Button } from "@edr/ui-common";
|
||||
import Breadcrumbs from "@/components/Breadcrumbs";
|
||||
import { addBooking } from "./bookings.mock";
|
||||
import { getCurrentCustomer } from "@/lib/currentCustomer";
|
||||
import { api } from "@/services/api";
|
||||
import type { CreateBookingPayload } from "@/services/bookings.service";
|
||||
@@ -33,10 +33,18 @@ import {
|
||||
|
||||
export default function NewBookingPage() {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const [step, setStep] = useState(1);
|
||||
const [renewalValidating, setRenewalValidating] = useState(false);
|
||||
const [renewalValid, setRenewalValid] = useState<boolean | null>(null);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (payload: CreateBookingPayload) =>
|
||||
api.bookings.create.call(payload),
|
||||
onSuccess: (booking) => {
|
||||
queryClient.invalidateQueries({ queryKey: api.bookings.list.queryKey() });
|
||||
setTimeout(() => navigate(`/bookings/${booking.id}`), 2500);
|
||||
},
|
||||
});
|
||||
|
||||
const form = useForm<BookingFormValues>({
|
||||
defaultValues: initialBookingFormValues,
|
||||
@@ -48,8 +56,6 @@ export default function NewBookingPage() {
|
||||
const destinationYard = form.watch("destinationYard");
|
||||
const containers = form.watch("containers");
|
||||
const previousContractRef = form.watch("previousContractRef");
|
||||
const contractId =
|
||||
form.watch("draftContractId") || form.watch("previousContractRef");
|
||||
|
||||
const direction = useMemo(
|
||||
() => getRouteDirection(originYard, destinationYard),
|
||||
@@ -113,7 +119,7 @@ export default function NewBookingPage() {
|
||||
setStep((currentStep) => Math.min(STEPS.length, currentStep + 1));
|
||||
}
|
||||
|
||||
function handleSubmit(data: BookingFormValues) {
|
||||
const handleSubmit = form.handleSubmit((data) => {
|
||||
if (data.contractType === "renewal" && renewalValid !== true) {
|
||||
form.setError("previousContractRef", {
|
||||
type: "manual",
|
||||
@@ -124,15 +130,7 @@ export default function NewBookingPage() {
|
||||
}
|
||||
|
||||
const me = getCurrentCustomer();
|
||||
const reference =
|
||||
data.draftContractId ||
|
||||
data.previousContractRef ||
|
||||
`EDR-DRAFT-${Date.now()}`;
|
||||
|
||||
const qtyCount =
|
||||
data.cargoType === "container"
|
||||
? data.containers.reduce((acc, c) => acc + Number(c.qty || 0), 0)
|
||||
: 1;
|
||||
const reference = data.previousContractRef;
|
||||
|
||||
const totalWeight =
|
||||
data.cargoType === "container"
|
||||
@@ -142,48 +140,13 @@ export default function NewBookingPage() {
|
||||
)
|
||||
: Number(data.cargoWeight || 0);
|
||||
|
||||
const description =
|
||||
data.cargoType === "container"
|
||||
? data.containers.map((c) => `${c.qty} × ${c.type}`).join(", ")
|
||||
: data.freightType === "bulk"
|
||||
? `Bulk - ${data.bulkCommodity === "Others" ? data.bulkCommodityOther : data.bulkCommodity}`
|
||||
: `Break-Bulk - ${data.breakBulkType === "Others" ? data.breakBulkTypeOther : data.breakBulkType}`;
|
||||
|
||||
const newBooking = {
|
||||
id: Date.now(),
|
||||
reference,
|
||||
customerId: me.id,
|
||||
customer: me.company,
|
||||
cargoType: (data.cargoType === "container"
|
||||
? "Containerized"
|
||||
: "Bulk") as any,
|
||||
originStation: data.originYard,
|
||||
destinationStation: data.destinationYard,
|
||||
transportMode: (data.serviceType === "rail"
|
||||
? "Rail"
|
||||
: "Multimodal") as any,
|
||||
containerType: (data.cargoType === "container" &&
|
||||
data.containers[0]?.type === "40ft"
|
||||
? "40FT"
|
||||
: "20FT") as any,
|
||||
containerCount: qtyCount,
|
||||
weightTons: totalWeight,
|
||||
requestedDate: new Date().toISOString().slice(0, 10),
|
||||
priority: (data.isHazardous ? "High" : "Normal") as any,
|
||||
cargoDescription: description,
|
||||
specialInstructions: data.notes || "Standard handling required",
|
||||
status: "Pending" as any,
|
||||
};
|
||||
|
||||
addBooking(newBooking);
|
||||
|
||||
// Call API using api.bookings.create.call
|
||||
const apiPayload = {
|
||||
reference,
|
||||
customerId: String(me.id),
|
||||
scheduledDate: new Date().toISOString().slice(0, 10),
|
||||
totalAmount: 0,
|
||||
contractType: data.contractType.toUpperCase(),
|
||||
contractType:
|
||||
data.contractType.toUpperCase() as CreateBookingPayload["contractType"],
|
||||
previousContractId: data.previousContractRef || undefined,
|
||||
serviceType:
|
||||
data.serviceType === "rail" ? "RAIL_ONLY" : "RAIL_AND_FORWARDING",
|
||||
@@ -197,8 +160,8 @@ export default function NewBookingPage() {
|
||||
: undefined,
|
||||
equipmentReturn:
|
||||
data.equipmentReturn === "with_return"
|
||||
? "WITH_RETURN"
|
||||
: "WITHOUT_RETURN",
|
||||
? ("WITH_RETURN" as const)
|
||||
: ("WITHOUT_RETURN" as const),
|
||||
originStation: data.originYard,
|
||||
destinationStation: data.destinationYard,
|
||||
cargoTotalWeightVgm: totalWeight,
|
||||
@@ -220,31 +183,18 @@ export default function NewBookingPage() {
|
||||
...(data.cargoType === "container" && data.containers.length > 0
|
||||
? {
|
||||
containers: data.containers.map((c) => ({
|
||||
type: c.type === "40ft" ? "40FT" as const : "20FT" as const,
|
||||
type: c.type === "40ft" ? ("40FT" as const) : ("20FT" as const),
|
||||
qty: Number(c.qty || 1),
|
||||
vgm: Number(c.vgm || 0),
|
||||
})),
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
} satisfies CreateBookingPayload;
|
||||
|
||||
api.bookings.create
|
||||
.call(apiPayload as CreateBookingPayload)
|
||||
.then((created) => {
|
||||
console.log("Successfully created booking via API:", created);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.warn(
|
||||
"API call failed (expected if API server is offline), falling back to mock storage:",
|
||||
err,
|
||||
);
|
||||
});
|
||||
createMutation.mutate(apiPayload);
|
||||
});
|
||||
|
||||
setSubmitted(true);
|
||||
setTimeout(() => navigate("/bookings"), 2500);
|
||||
}
|
||||
|
||||
if (submitted) {
|
||||
if (createMutation.isSuccess && createMutation.data) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center p-6">
|
||||
<div className="w-full max-w-sm rounded-2xl border border-border bg-card p-10 text-center shadow-sm">
|
||||
@@ -257,7 +207,7 @@ export default function NewBookingPage() {
|
||||
notified once approved.
|
||||
</p>
|
||||
<p className="mt-4 font-mono text-sm font-semibold text-primary">
|
||||
{contractId}
|
||||
{createMutation.data.reference}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -268,7 +218,7 @@ export default function NewBookingPage() {
|
||||
<form
|
||||
id="new-booking-form"
|
||||
className="flex flex-col"
|
||||
onSubmit={form.handleSubmit(handleSubmit)}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<div className="sticky top-0 z-20 border-b border-border bg-background">
|
||||
<div className="mx-auto max-w-4xl space-y-3 px-6 py-3">
|
||||
|
||||
@@ -151,7 +151,6 @@ export const bookingFormSchema = z
|
||||
.object({
|
||||
contractType: z.enum(["new", "renewal"], "Select a contract type."),
|
||||
previousContractRef: z.string(),
|
||||
draftContractId: z.string(),
|
||||
serviceType: z.enum(["rail", "rail_forwarding"], "Select a service type."),
|
||||
firstMileEnabled: z.boolean(),
|
||||
pickUpAddress: z.string(),
|
||||
@@ -162,7 +161,7 @@ export const bookingFormSchema = z
|
||||
destinationYard: z.string(),
|
||||
cargoType: z.enum(["container", "bulk"], "Select a cargo type."),
|
||||
cargoWeight: z.string(),
|
||||
freightType: z.enum(["bulk", "break_bulk", ""]).default(""),
|
||||
freightType: z.enum(["bulk", "break_bulk"]),
|
||||
bulkCommodity: z.string(),
|
||||
bulkCommodityOther: z.string(),
|
||||
breakBulkType: z.string(),
|
||||
@@ -188,14 +187,6 @@ export const bookingFormSchema = z
|
||||
termsAccepted: z.boolean(),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (data.contractType === "new" && !data.draftContractId.trim()) {
|
||||
ctx.addIssue({
|
||||
code: "custom",
|
||||
path: ["draftContractId"],
|
||||
message: "A draft contract ID is required.",
|
||||
});
|
||||
}
|
||||
|
||||
if (data.contractType === "renewal" && !data.previousContractRef.trim()) {
|
||||
ctx.addIssue({
|
||||
code: "custom",
|
||||
@@ -360,7 +351,6 @@ export type BookingFormValues = z.infer<typeof bookingFormSchema>;
|
||||
|
||||
export const initialBookingFormValues: Partial<BookingFormValues> = {
|
||||
previousContractRef: "",
|
||||
draftContractId: "",
|
||||
firstMileEnabled: false,
|
||||
pickUpAddress: "",
|
||||
lastMileEnabled: false,
|
||||
@@ -383,7 +373,7 @@ export const initialBookingFormValues: Partial<BookingFormValues> = {
|
||||
};
|
||||
|
||||
export const stepFields: Record<number, Array<keyof BookingFormValues>> = {
|
||||
1: ["contractType", "previousContractRef", "draftContractId"],
|
||||
1: ["contractType", "previousContractRef"],
|
||||
2: ["serviceType"],
|
||||
3: [
|
||||
"firstMileEnabled",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Controller, type UseFormReturn } from "react-hook-form";
|
||||
import { FileText, Loader2, RefreshCw } from "lucide-react";
|
||||
import { Button, Field, FieldError, FieldLabel, Input } from "@edr/ui-common";
|
||||
import { type BookingFormValues, genContractId } from "./schema";
|
||||
import { Button, Field, FieldLabel, Input } from "@edr/ui-common";
|
||||
import { type BookingFormValues } from "./schema";
|
||||
import { AlertBox, OptionCard, OptionFieldError, StepHeader } from "./shared";
|
||||
|
||||
type BookingForm = UseFormReturn<BookingFormValues>;
|
||||
@@ -18,9 +18,7 @@ export function Step1ContractType({
|
||||
onValidate: () => void;
|
||||
}) {
|
||||
const contractType = form.watch("contractType");
|
||||
const draftContractId = form.watch("draftContractId");
|
||||
const previousContractRef = form.watch("previousContractRef");
|
||||
const errors = form.formState.errors;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -40,12 +38,6 @@ export function Step1ContractType({
|
||||
onClick={() => {
|
||||
field.onChange("new");
|
||||
form.clearErrors(["contractType", "previousContractRef"]);
|
||||
if (!draftContractId) {
|
||||
form.setValue("draftContractId", genContractId(), {
|
||||
shouldDirty: true,
|
||||
shouldValidate: true,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
|
||||
@@ -55,11 +47,6 @@ export function Step1ContractType({
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||
Blank contract form. A draft ID is auto-generated.
|
||||
</p>
|
||||
{field.value === "new" && draftContractId && (
|
||||
<p className="mt-2 font-mono text-xs font-semibold text-primary">
|
||||
{draftContractId}
|
||||
</p>
|
||||
)}
|
||||
</OptionCard>
|
||||
|
||||
<OptionCard
|
||||
@@ -115,9 +102,6 @@ export function Step1ContractType({
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<FieldError
|
||||
errors={[fieldState.error, errors.draftContractId]}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -1,13 +1,6 @@
|
||||
import {
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
|
||||
import {
|
||||
Link,
|
||||
useNavigate,
|
||||
} from "react-router-dom";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
|
||||
import {
|
||||
Building2,
|
||||
@@ -31,19 +24,10 @@ import { formatCurrency } from "@/pages/billing/invoices.mock";
|
||||
|
||||
import { customersService } from "@/services/customers.service";
|
||||
|
||||
import { getMyInfo } from "@/services/account";
|
||||
import { authService } from "@/services/auth.service";
|
||||
import NewCustomerPage from "../customers/NewCustomerPage";
|
||||
import { Button } from "@edr/ui-common";
|
||||
|
||||
type Customer = {
|
||||
id: string;
|
||||
companyName: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
};
|
||||
|
||||
export default function MyPortalPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -58,58 +42,10 @@ export default function MyPortalPage() {
|
||||
// MOCK DATA
|
||||
// ------------------------------------------------------------
|
||||
|
||||
const me = useMemo(() => getCurrentCustomer(), []);
|
||||
const myBookings = useMemo(() => getMyBookings(), []);
|
||||
const myShipments = useMemo(() => getMyShipments(), []);
|
||||
const myInvoices = useMemo(() => getMyInvoices(), []);
|
||||
|
||||
// ------------------------------------------------------------
|
||||
// FETCH CUSTOMER
|
||||
// ------------------------------------------------------------
|
||||
|
||||
useEffect(() => {
|
||||
const initialize = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const userRes = await getMyInfo();
|
||||
const userId = userRes?.data?.id;
|
||||
localStorage.setItem("currentUser", JSON.stringify(userRes.data));
|
||||
// if (!userId) {
|
||||
// navigate("/login");
|
||||
// return;
|
||||
// }
|
||||
|
||||
const res = await customersService.getByUserId(userId);
|
||||
if (res) {
|
||||
setCustomer(res);
|
||||
return;
|
||||
}
|
||||
|
||||
// customer not found → onboarding
|
||||
// navigate("/customers/register");
|
||||
} catch (error: any) {
|
||||
console.error("Customer fetch failed:", error);
|
||||
|
||||
const status = error?.response?.status;
|
||||
|
||||
if (status === 404) {
|
||||
// navigate("/customers/register");
|
||||
return;
|
||||
}
|
||||
|
||||
if (status === 401) {
|
||||
// navigate("/login");
|
||||
return;
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
initialize();
|
||||
}, [navigate]);
|
||||
|
||||
// ------------------------------------------------------------
|
||||
// LOADING
|
||||
// ------------------------------------------------------------
|
||||
@@ -118,9 +54,7 @@ export default function MyPortalPage() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-slate-50">
|
||||
<div className="rounded-2xl bg-white px-6 py-4 shadow-sm">
|
||||
<p className="text-sm text-slate-600">
|
||||
Loading portal...
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">Loading portal...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -134,9 +68,7 @@ export default function MyPortalPage() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-slate-50">
|
||||
<div className="text-center space-y-4">
|
||||
<p className="text-slate-600">
|
||||
No customer profile found
|
||||
</p>
|
||||
<p className="text-slate-600">No customer profile found</p>
|
||||
|
||||
{/* <Link
|
||||
to="/customers/register"
|
||||
@@ -146,12 +78,9 @@ export default function MyPortalPage() {
|
||||
Create Customer Profile
|
||||
</Link> */}
|
||||
<NewCustomerPage>
|
||||
<Button
|
||||
className="inline-flex items-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-white"
|
||||
|
||||
>
|
||||
<Button className="inline-flex items-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-white">
|
||||
<Plus className="h-4 w-4" />
|
||||
Create Customer Profile
|
||||
Create Customer Profile
|
||||
</Button>
|
||||
</NewCustomerPage>
|
||||
</div>
|
||||
@@ -164,31 +93,24 @@ export default function MyPortalPage() {
|
||||
// ------------------------------------------------------------
|
||||
|
||||
const activeBookings = myBookings.filter(
|
||||
(b) =>
|
||||
b.status === "Confirmed" ||
|
||||
b.status === "In Transit"
|
||||
(b) => b.status === "Confirmed" || b.status === "In Transit",
|
||||
);
|
||||
|
||||
const activeShipments = myShipments.filter(
|
||||
(s) => s.status === "In Transit"
|
||||
);
|
||||
const activeShipments = myShipments.filter((s) => s.status === "In Transit");
|
||||
|
||||
const outstandingInvoices = myInvoices.filter(
|
||||
(i) => i.status === "Sent" || i.status === "Overdue"
|
||||
(i) => i.status === "Sent" || i.status === "Overdue",
|
||||
);
|
||||
|
||||
const totalOutstanding = outstandingInvoices.reduce(
|
||||
(sum, i) =>
|
||||
i.currency === "USD" ? sum + i.amount : sum,
|
||||
0
|
||||
(sum, i) => (i.currency === "USD" ? sum + i.amount : sum),
|
||||
0,
|
||||
);
|
||||
|
||||
const totalSpent = myInvoices.reduce(
|
||||
(sum, i) =>
|
||||
i.status === "Paid" && i.currency === "USD"
|
||||
? sum + i.amount
|
||||
: sum,
|
||||
0
|
||||
i.status === "Paid" && i.currency === "USD" ? sum + i.amount : sum,
|
||||
0,
|
||||
);
|
||||
|
||||
// ------------------------------------------------------------
|
||||
@@ -198,13 +120,11 @@ export default function MyPortalPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 p-6">
|
||||
<div className="mx-auto max-w-7xl space-y-6">
|
||||
|
||||
<Breadcrumbs items={[{ label: "My Portal" }]} />
|
||||
|
||||
{/* HERO */}
|
||||
<div className="rounded-3xl bg-gradient-to-r from-[#059669] to-[#10B981] p-6 text-white">
|
||||
<div className="flex justify-between flex-col md:flex-row gap-6">
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-14 w-14 flex items-center justify-center rounded-2xl bg-white/20 text-xl font-bold">
|
||||
{customer.companyName?.charAt(0)}
|
||||
@@ -244,7 +164,6 @@ export default function MyPortalPage() {
|
||||
|
||||
{/* KPI */}
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
|
||||
<KpiCard
|
||||
label="Active Bookings"
|
||||
value={String(activeBookings.length)}
|
||||
@@ -283,7 +202,6 @@ export default function MyPortalPage() {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// ------------------------------------------------------------
|
||||
// KPI CARD
|
||||
// ------------------------------------------------------------
|
||||
@@ -304,24 +222,16 @@ function KpiCard({
|
||||
tone?: "brand" | "danger";
|
||||
}) {
|
||||
const iconClassName =
|
||||
tone === "danger"
|
||||
? "bg-red-100 text-red-600"
|
||||
: "bg-[#10B981] text-white";
|
||||
tone === "danger" ? "bg-red-100 text-red-600" : "bg-[#10B981] text-white";
|
||||
|
||||
const content = (
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">
|
||||
{label}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">{label}</p>
|
||||
|
||||
<h3 className="mt-2 text-2xl font-bold text-slate-900">
|
||||
{value}
|
||||
</h3>
|
||||
<h3 className="mt-2 text-2xl font-bold text-slate-900">{value}</h3>
|
||||
|
||||
<p className="mt-1 text-xs text-slate-500">
|
||||
{sub}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-slate-500">{sub}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -337,18 +247,11 @@ function KpiCard({
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<Link
|
||||
to={href}
|
||||
className={`block ${className}`}
|
||||
>
|
||||
<Link to={href} className={`block ${className}`}>
|
||||
{content}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <div className={className}>{content}</div>;
|
||||
}
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
import { URL_CONSTANTS } from "@/constants/URLS";
|
||||
import { CreateUserPayload } from "@/types/createUser";
|
||||
import { VerificationCodePayload } from "@/types/generateVerificationCode";
|
||||
import { UserTypeRequest } from "@/types/userTypeRequest";
|
||||
import { client } from "@/utils/api";
|
||||
import { ApiResponse } from "@edr/types";
|
||||
import { GenerateVerifcationCodePayload } from "node_modules/@tria-plc/iamui-common/dist/types/shared/services/authService";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// API
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
export const createUser = async (
|
||||
body: CreateUserPayload
|
||||
) => {
|
||||
const res =
|
||||
await client.post<
|
||||
ApiResponse<any>
|
||||
>(
|
||||
URL_CONSTANTS.USERS.SIGN_UP,
|
||||
body
|
||||
);
|
||||
|
||||
return res.data;
|
||||
};
|
||||
|
||||
export const getMyInfo = async () => {
|
||||
const res =
|
||||
await client.get<
|
||||
ApiResponse<any>
|
||||
>(
|
||||
URL_CONSTANTS.USERS.ME
|
||||
);
|
||||
|
||||
return res.data;
|
||||
};
|
||||
|
||||
export const generateVerificationCode = async (
|
||||
body: VerificationCodePayload
|
||||
) => {
|
||||
const res =
|
||||
await client.patch<
|
||||
ApiResponse<string>
|
||||
>(
|
||||
URL_CONSTANTS.USERS.GENERATE_VERIFICATION_CODE,
|
||||
body
|
||||
);
|
||||
|
||||
return res.data.data;
|
||||
};
|
||||
|
||||
export const setPassword = async (
|
||||
body: any
|
||||
) => {
|
||||
const res =
|
||||
await client.patch<
|
||||
ApiResponse<string>
|
||||
>(
|
||||
URL_CONSTANTS.USERS.SET_PASSWORD,
|
||||
body
|
||||
);
|
||||
|
||||
return res.data.data;
|
||||
};
|
||||
|
||||
export const createOTP = async (
|
||||
body: any
|
||||
) => {
|
||||
const res =
|
||||
await client.post<
|
||||
ApiResponse<any>
|
||||
>(
|
||||
URL_CONSTANTS.OTP.SEND,
|
||||
body
|
||||
);
|
||||
|
||||
return res.data;
|
||||
};
|
||||
|
||||
export const verifyOTP = async (
|
||||
body: any
|
||||
) => {
|
||||
const res =
|
||||
await client.post<
|
||||
ApiResponse<any>
|
||||
>(
|
||||
URL_CONSTANTS.OTP.VERIFY,
|
||||
body
|
||||
);
|
||||
|
||||
return res.data;
|
||||
};
|
||||
@@ -13,6 +13,8 @@ import { consignmentsService } from "./consignments.service";
|
||||
import { trackingService } from "./tracking.service";
|
||||
import { fileUploadSettingsService } from "./fileUploadSettings.service";
|
||||
import { dropdownSettingsService } from "./dropdownSettings.service";
|
||||
import { authService } from "./auth.service";
|
||||
import { customersService } from "./customers.service";
|
||||
import {
|
||||
CreateDropdownOptionDto,
|
||||
CreateDropdownSettingDto,
|
||||
@@ -21,12 +23,101 @@ import {
|
||||
UpdateDropdownOptionDto,
|
||||
UpdateDropdownSettingDto,
|
||||
} from "@/types/dropdownSettings";
|
||||
import {
|
||||
CreateCustomerDto,
|
||||
Customer,
|
||||
UpdateCustomerDto,
|
||||
} from "@/types/customers";
|
||||
import type {
|
||||
AuthUser,
|
||||
GenerateVerificationCodePayload,
|
||||
LoginPayload,
|
||||
LoginResponse,
|
||||
OtpPayload,
|
||||
OtpResponse,
|
||||
SetPasswordPayload,
|
||||
SignupPayload,
|
||||
SignupResponse,
|
||||
} from "@/types/auth";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// API definition
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export const api = {
|
||||
auth: {
|
||||
login: endpoint<LoginPayload, LoginResponse>(
|
||||
"auth",
|
||||
"login",
|
||||
authService.login,
|
||||
),
|
||||
createUser: endpoint<SignupPayload, SignupResponse>(
|
||||
"auth",
|
||||
"createUser",
|
||||
authService.createUser,
|
||||
),
|
||||
getMyInfo: endpoint<void, AuthUser>(
|
||||
"auth",
|
||||
"getMyInfo",
|
||||
authService.getMyInfo,
|
||||
),
|
||||
generateVerificationCode: endpoint<GenerateVerificationCodePayload, string>(
|
||||
"auth",
|
||||
"generateVerificationCode",
|
||||
authService.generateVerificationCode,
|
||||
),
|
||||
setPassword: endpoint<SetPasswordPayload, void>(
|
||||
"auth",
|
||||
"setPassword",
|
||||
authService.setPassword,
|
||||
),
|
||||
sendOTP: endpoint<OtpPayload, OtpResponse>(
|
||||
"auth",
|
||||
"sendOTP",
|
||||
authService.sendOTP,
|
||||
),
|
||||
verifyOTP: endpoint<OtpPayload, OtpResponse>(
|
||||
"auth",
|
||||
"verifyOTP",
|
||||
authService.verifyOTP,
|
||||
),
|
||||
logout: endpoint<void, void>("auth", "logout", authService.logout),
|
||||
},
|
||||
|
||||
customers: {
|
||||
list: endpoint<void, Customer[]>(
|
||||
"customers",
|
||||
"list",
|
||||
customersService.list,
|
||||
),
|
||||
|
||||
get: endpoint<{ id: string }, Customer>("customers", "get", ({ id }) =>
|
||||
customersService.getById(id),
|
||||
),
|
||||
|
||||
create: endpoint<CreateCustomerDto, Customer>(
|
||||
"customers",
|
||||
"create",
|
||||
customersService.create,
|
||||
),
|
||||
|
||||
update: endpoint<{ id: string; dto: UpdateCustomerDto }, Customer>(
|
||||
"customers",
|
||||
"update",
|
||||
({ id, dto }) => customersService.update(id, dto),
|
||||
),
|
||||
|
||||
remove: endpoint<{ id: string }, void>("customers", "remove", ({ id }) =>
|
||||
customersService.remove(id),
|
||||
),
|
||||
|
||||
getByUserId: endpoint<{ id: string }, Customer | null>(
|
||||
"customers",
|
||||
"getByUserId",
|
||||
({ id }) => customersService.getByUserId(id),
|
||||
),
|
||||
},
|
||||
|
||||
bookings: {
|
||||
list: endpoint<void, PaginatedResponse<Freight.IBooking>>(
|
||||
"bookings",
|
||||
|
||||
90
apps/edr-freight-web/portal/src/services/auth.service.ts
Normal file
90
apps/edr-freight-web/portal/src/services/auth.service.ts
Normal file
@@ -0,0 +1,90 @@
|
||||
import { URL_CONSTANTS } from "@/constants/URLS";
|
||||
import { client } from "@/utils/api";
|
||||
import { ApiResponse } from "@edr/types";
|
||||
import type {
|
||||
AuthUser,
|
||||
GenerateVerificationCodePayload,
|
||||
LoginPayload,
|
||||
LoginResponse,
|
||||
OtpPayload,
|
||||
OtpResponse,
|
||||
SetPasswordPayload,
|
||||
SignupPayload,
|
||||
SignupResponse,
|
||||
} from "@/types/auth";
|
||||
|
||||
export const authService = {
|
||||
login: async (body: LoginPayload) => {
|
||||
const res = await client.post<ApiResponse<LoginResponse>>(
|
||||
URL_CONSTANTS.AUTH.LOGIN,
|
||||
body,
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
|
||||
createUser: async (body: SignupPayload) => {
|
||||
const res = await client.post<ApiResponse<SignupResponse>>(
|
||||
URL_CONSTANTS.USERS.SIGN_UP,
|
||||
body,
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
|
||||
getMyInfo: async () => {
|
||||
const res = await client.get<ApiResponse<AuthUser>>(
|
||||
URL_CONSTANTS.USERS.ME,
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
|
||||
generateVerificationCode: async (body: GenerateVerificationCodePayload) => {
|
||||
const res = await client.patch<ApiResponse<string>>(
|
||||
URL_CONSTANTS.USERS.GENERATE_VERIFICATION_CODE,
|
||||
body,
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
|
||||
setPassword: async (body: SetPasswordPayload) => {
|
||||
const res = await client.patch<ApiResponse<void>>(
|
||||
URL_CONSTANTS.USERS.SET_PASSWORD,
|
||||
body,
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
|
||||
sendOTP: async (body: OtpPayload) => {
|
||||
const res = await client.post<ApiResponse<OtpResponse>>(
|
||||
URL_CONSTANTS.OTP.SEND,
|
||||
body,
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
|
||||
verifyOTP: async (body: OtpPayload) => {
|
||||
const res = await client.post<ApiResponse<OtpResponse>>(
|
||||
URL_CONSTANTS.OTP.VERIFY,
|
||||
body,
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
|
||||
refreshToken: async () => {
|
||||
const refreshTokenCookie = document.cookie
|
||||
.split("; ")
|
||||
.find((row) => row.startsWith("refresh-token="))
|
||||
?.split("=")[1];
|
||||
const res = await client.post<ApiResponse<LoginResponse>>(
|
||||
URL_CONSTANTS.AUTH.REFRESH_TOKEN,
|
||||
{ refreshToken: refreshTokenCookie },
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
|
||||
logout: async () => {
|
||||
const res = await client.patch<ApiResponse<void>>(
|
||||
URL_CONSTANTS.AUTH.LOGOUT,
|
||||
);
|
||||
return res.data.data;
|
||||
},
|
||||
};
|
||||
@@ -7,6 +7,7 @@ import type {
|
||||
Customer,
|
||||
UpdateCustomerDto,
|
||||
} from "@/types/customers";
|
||||
import { isAxiosError } from "axios";
|
||||
|
||||
const BASE = URL_CONSTANTS.CUSTOMERS_API.BASE;
|
||||
|
||||
@@ -23,22 +24,26 @@ export const customersService = {
|
||||
return unwrap(response.data);
|
||||
},
|
||||
|
||||
getByUserId: async (userId: string): Promise<Customer> => {
|
||||
const response = await client.get<ApiResponse<Customer>>(
|
||||
URL_CONSTANTS.CUSTOMERS_API.BY_USER_ID(userId),
|
||||
);
|
||||
getByUserId: async (userId: string): Promise<Customer | null> => {
|
||||
try {
|
||||
const response = await client.get<ApiResponse<Customer>>(
|
||||
URL_CONSTANTS.CUSTOMERS_API.BY_USER_ID(userId),
|
||||
);
|
||||
return unwrap(response.data);
|
||||
} catch (e) {
|
||||
if (isAxiosError(e) && e.response?.status === 404) {
|
||||
return null;
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
|
||||
create: async (payload: CreateCustomerDto): Promise<Customer> => {
|
||||
const response = await client.post<ApiResponse<Customer>>(BASE, payload);
|
||||
return unwrap(response.data);
|
||||
},
|
||||
|
||||
create: async (payload: any): Promise<any> => {
|
||||
const response = await client.post<ApiResponse<any>>(BASE, payload);
|
||||
return unwrap(response.data);
|
||||
},
|
||||
|
||||
update: async (
|
||||
id: string,
|
||||
payload: UpdateCustomerDto,
|
||||
): Promise<Customer> => {
|
||||
update: async (id: string, payload: UpdateCustomerDto): Promise<Customer> => {
|
||||
const response = await client.patch<ApiResponse<Customer>>(
|
||||
URL_CONSTANTS.CUSTOMERS_API.BY_ID(id),
|
||||
payload,
|
||||
|
||||
65
apps/edr-freight-web/portal/src/types/auth.ts
Normal file
65
apps/edr-freight-web/portal/src/types/auth.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
export interface AuthUser {
|
||||
id: string;
|
||||
name: { am: string; en: string };
|
||||
email: string;
|
||||
roles: string[];
|
||||
status: string;
|
||||
employee: any[];
|
||||
userType: string;
|
||||
username: string;
|
||||
permissions: string[];
|
||||
phoneNumber: string;
|
||||
sharepointId: string | null;
|
||||
hasSetPassword: boolean;
|
||||
hasFinishedRegistration: boolean;
|
||||
hasFinishedDMSOnboarding: boolean;
|
||||
}
|
||||
|
||||
export interface SignupPayload {
|
||||
email: string;
|
||||
username: string;
|
||||
phoneNumber: string;
|
||||
userType: string;
|
||||
name: { en: string; am: string };
|
||||
}
|
||||
|
||||
export interface SignupResponse {
|
||||
token: string;
|
||||
refreshToken: string;
|
||||
otp: string;
|
||||
userId: string;
|
||||
}
|
||||
|
||||
export interface OtpPayload {
|
||||
phone: string;
|
||||
otp: string;
|
||||
}
|
||||
|
||||
export interface OtpResponse {
|
||||
success: boolean;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface SetPasswordPayload {
|
||||
newPassword: string;
|
||||
confirmPassword: string;
|
||||
userId: string;
|
||||
email: string;
|
||||
verificationCode: string;
|
||||
}
|
||||
|
||||
export interface GenerateVerificationCodePayload {
|
||||
email: string;
|
||||
phoneNumber: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export interface LoginPayload {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
token: string;
|
||||
refreshToken: string;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
export type CreateUserPayload = {
|
||||
email: string;
|
||||
username: string;
|
||||
phoneNumber: string;
|
||||
userType: string;
|
||||
name: {
|
||||
en: string;
|
||||
am?: string;
|
||||
};
|
||||
};
|
||||
@@ -1,5 +0,0 @@
|
||||
export type VerificationCodePayload = {
|
||||
email: string;
|
||||
phoneNumber: string;
|
||||
type: string;
|
||||
};
|
||||
@@ -2,38 +2,129 @@ import {
|
||||
UseQueryOptions,
|
||||
QueryObserverOptions,
|
||||
} from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import axios, { AxiosError, InternalAxiosRequestConfig } from "axios";
|
||||
import { URL_CONSTANTS } from "@/constants/URLS";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Axios client
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export const client = axios.create({
|
||||
const client = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL,
|
||||
});
|
||||
|
||||
function getCookie(name: string): string | undefined {
|
||||
return document.cookie
|
||||
.split("; ")
|
||||
.find((row) => row.startsWith(`${name}=`))
|
||||
?.split("=")[1];
|
||||
}
|
||||
|
||||
function setCookie(name: string, value: string, days: number) {
|
||||
const expires = new Date();
|
||||
expires.setDate(expires.getDate() + days);
|
||||
document.cookie = `${name}=${value}; path=/; expires=${expires.toUTCString()}; SameSite=Lax`;
|
||||
}
|
||||
|
||||
function clearAuthCookies() {
|
||||
["auth-token", "refresh-token", "auth-user", "current-position-id", "selected-position-id"].forEach(
|
||||
(name) => {
|
||||
document.cookie = `${name}=; Max-Age=0; path=/`;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// Attach auth token to every request
|
||||
client.interceptors.request.use((config) => {
|
||||
// TODO: replace with secure storage (cookie/localStorage/auth provider)
|
||||
const token = document.cookie
|
||||
.split("; ")
|
||||
.find((row) => row.startsWith("auth-token="))
|
||||
?.split("=")[1];
|
||||
|
||||
const token = getCookie("auth-token");
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
return config;
|
||||
});
|
||||
|
||||
// Handle auth errors globally
|
||||
// Token refresh state
|
||||
let isRefreshing = false;
|
||||
let failedQueue: {
|
||||
resolve: (token: string) => void;
|
||||
reject: (error: unknown) => void;
|
||||
}[] = [];
|
||||
|
||||
function processQueue(error: unknown, token?: string) {
|
||||
failedQueue.forEach(({ resolve, reject }) => {
|
||||
if (error) {
|
||||
reject(error);
|
||||
} else {
|
||||
resolve(token!);
|
||||
}
|
||||
});
|
||||
failedQueue = [];
|
||||
}
|
||||
|
||||
// Handle auth errors globally with token refresh
|
||||
client.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
window.location.href = "/auth";
|
||||
async (error: AxiosError) => {
|
||||
const originalRequest = error.config as InternalAxiosRequestConfig & {
|
||||
_retry?: boolean;
|
||||
};
|
||||
|
||||
// Don't intercept if:
|
||||
// - no response (network error)
|
||||
// - status is not 401
|
||||
// - already retried
|
||||
// - it's the refresh endpoint itself
|
||||
if (
|
||||
!error.response ||
|
||||
error.response.status !== 401 ||
|
||||
originalRequest._retry ||
|
||||
originalRequest.url === URL_CONSTANTS.AUTH.REFRESH_TOKEN
|
||||
) {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
if (isRefreshing) {
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
failedQueue.push({ resolve, reject });
|
||||
}).then((token) => {
|
||||
originalRequest.headers.Authorization = `Bearer ${token}`;
|
||||
return client(originalRequest);
|
||||
});
|
||||
}
|
||||
|
||||
originalRequest._retry = true;
|
||||
isRefreshing = true;
|
||||
|
||||
const refreshToken = getCookie("refresh-token");
|
||||
|
||||
if (!refreshToken) {
|
||||
isRefreshing = false;
|
||||
clearAuthCookies();
|
||||
if (window.location.pathname !== "/login") {
|
||||
window.location.href = "/login";
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await client.post<{ data: { token: string; refreshToken: string } }>(
|
||||
URL_CONSTANTS.AUTH.REFRESH_TOKEN,
|
||||
{ refreshToken },
|
||||
);
|
||||
const { token, refreshToken: newRefreshToken } = data.data;
|
||||
setCookie("auth-token", token, 7);
|
||||
setCookie("refresh-token", newRefreshToken, 7);
|
||||
originalRequest.headers.Authorization = `Bearer ${token}`;
|
||||
processQueue(null, token);
|
||||
return client(originalRequest);
|
||||
} catch (refreshError) {
|
||||
processQueue(refreshError, undefined);
|
||||
clearAuthCookies();
|
||||
if (window.location.pathname !== "/login") {
|
||||
window.location.href = "/login";
|
||||
}
|
||||
return Promise.reject(refreshError);
|
||||
} finally {
|
||||
isRefreshing = false;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export { client };
|
||||
export type { UseQueryOptions, QueryObserverOptions };
|
||||
|
||||
29
apps/edr-freight-web/portal/src/utils/result.ts
Normal file
29
apps/edr-freight-web/portal/src/utils/result.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
export type Result<T, E = { code: string; message: string; statusCode?: number }> =
|
||||
| { success: true; data: T }
|
||||
| { success: false; error: E };
|
||||
|
||||
export type ApiError = {
|
||||
code: string;
|
||||
message: string;
|
||||
statusCode?: number;
|
||||
};
|
||||
|
||||
export function extractApiError(err: unknown): ApiError {
|
||||
if (err && typeof err === "object") {
|
||||
const obj = err as Record<string, unknown>;
|
||||
const response = obj.response as Record<string, unknown> | undefined;
|
||||
if (response) {
|
||||
const statusCode = response.status as number | undefined;
|
||||
const data = response.data as Record<string, unknown> | undefined;
|
||||
return {
|
||||
code: (data?.error as string) || (data?.message as string) || "api_error",
|
||||
message: (data?.message as string) || (data?.error as string) || "An unexpected error occurred",
|
||||
statusCode,
|
||||
};
|
||||
}
|
||||
if (obj.message && typeof obj.message === "string") {
|
||||
return { code: "client_error", message: obj.message };
|
||||
}
|
||||
}
|
||||
return { code: "unknown_error", message: "An unexpected error occurred" };
|
||||
}
|
||||
@@ -64,17 +64,29 @@ export interface ICustomer extends BaseEntity {
|
||||
}
|
||||
|
||||
export interface CreateCustomerDto {
|
||||
name: string;
|
||||
userId: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
company?: string;
|
||||
customerType?: CustomerType;
|
||||
status?: CustomerStatus;
|
||||
tinNumber?: string;
|
||||
city?: string;
|
||||
country?: string;
|
||||
address?: string;
|
||||
taxId?: string;
|
||||
companyName: string;
|
||||
companyEmail: string;
|
||||
companyPhone: string;
|
||||
companyLocation: string;
|
||||
companyAddress: string;
|
||||
contactPersonName: string;
|
||||
contactPersonPhone: string;
|
||||
tinNumber: string;
|
||||
vatNumber: string;
|
||||
fanNumber: string;
|
||||
generalManagerName: string;
|
||||
generalManagerEmail: string;
|
||||
generalManagerPhone: string;
|
||||
poaName?: string;
|
||||
poaPhone?: string;
|
||||
poaAddress?: string;
|
||||
poaEmail?: string;
|
||||
poaLocation?: string;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
@@ -108,11 +120,54 @@ export interface IConsignment extends BaseEntity {
|
||||
export interface IBooking extends BaseEntity {
|
||||
reference: string;
|
||||
customerId: string;
|
||||
trainId?: string;
|
||||
trainId?: string | null;
|
||||
status: BookingStatus;
|
||||
scheduledDate: string;
|
||||
totalAmount: number;
|
||||
paymentStatus: PaymentStatus;
|
||||
|
||||
contractType: "NEW" | "RENEWAL";
|
||||
previousContractId?: string | null;
|
||||
serviceType: "RAIL_ONLY" | "RAIL_AND_FORWARDING";
|
||||
|
||||
firstMileEnabled: boolean;
|
||||
firstMilePickupAddress?: string | null;
|
||||
lastMileEnabled: boolean;
|
||||
lastMileDeliveryAddress?: string | null;
|
||||
|
||||
equipmentReturn: "WITH_RETURN" | "WITHOUT_RETURN";
|
||||
originStation: string;
|
||||
destinationStation: string;
|
||||
cargoTotalWeightVgm: number;
|
||||
|
||||
freightType: "BULK" | "BREAK_BULK";
|
||||
freightSubtype?: string | null;
|
||||
|
||||
isHazardous: boolean;
|
||||
isRefrigerated: boolean;
|
||||
|
||||
tradeDirection: "IMPORT" | "EXPORT";
|
||||
paymentCurrency: string;
|
||||
allowConsolidation: boolean;
|
||||
consolidationPartnerId?: string | null;
|
||||
|
||||
startDate?: string | null;
|
||||
endDate?: string | null;
|
||||
financialTerms?: string | null;
|
||||
|
||||
containers?: Array<{ type: string; qty: number; vgm: number }> | null;
|
||||
|
||||
versionNumber: number;
|
||||
priorityScore: number;
|
||||
|
||||
approvedByStaffId?: string | null;
|
||||
approvedByStaffAt?: string | null;
|
||||
signedByDirectorId?: string | null;
|
||||
signedByDirectorAt?: string | null;
|
||||
signedByCeoId?: string | null;
|
||||
signedByCeoAt?: string | null;
|
||||
|
||||
files?: Array<{ id: string; name: string; url: string; mimeType: string }>;
|
||||
}
|
||||
|
||||
export interface IInvoice extends BaseEntity {
|
||||
|
||||
Reference in New Issue
Block a user