base code with auth
This commit is contained in:
azeeee05
@@ -0,0 +1,2 @@
|
||||
# Local development - for developers on their local machines
|
||||
VITE_API_BASE_URL=http://localhost:8000
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,73 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress.
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>saas_frontend</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+4418
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "saas_frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"axios": "^1.13.2",
|
||||
"i18next": "^25.7.4",
|
||||
"i18next-browser-languagedetector": "^8.2.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet-control-geocoder": "^3.3.1",
|
||||
"leaflet.fullscreen": "^5.3.0",
|
||||
"lucide-react": "^0.562.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-hook-form": "^7.50.0",
|
||||
"react-i18next": "^16.5.3",
|
||||
"react-router-dom": "^7.12.0",
|
||||
"react-toastify": "^11.0.5",
|
||||
"tailwindcss": "^4.1.18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/node": "^24.10.1",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react-swc": "^4.2.2",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.46.4",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
+18
@@ -0,0 +1,18 @@
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { AuthProvider } from "./context/AuthContext";
|
||||
import { ThemeProvider } from "./context/ThemeContext";
|
||||
import AppRoutes from "./routes";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<AuthProvider>
|
||||
<ThemeProvider>
|
||||
<BrowserRouter>
|
||||
<AppRoutes />
|
||||
</BrowserRouter>
|
||||
</ThemeProvider>
|
||||
</AuthProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,76 @@
|
||||
import { apiClient } from "../../lib/apiClient";
|
||||
import type { AuthUser, SigninRequest, SignupRequest, TokenResponse } from "./AuthTypes";
|
||||
|
||||
type AuthApiOptions = {
|
||||
tenantId?: string;
|
||||
};
|
||||
|
||||
type LogoutResponse = {
|
||||
message: string;
|
||||
};
|
||||
|
||||
type UpdateProfilePayload = {
|
||||
first_name?: string;
|
||||
last_name?: string;
|
||||
phone_number?: string;
|
||||
};
|
||||
|
||||
const withTenantHeader = (tenantId?: string) =>
|
||||
tenantId ? { headers: { "X-Tenant-ID": tenantId } } : undefined;
|
||||
|
||||
export const authApi = {
|
||||
signin: (payload: SigninRequest, options?: AuthApiOptions) =>
|
||||
apiClient.post<TokenResponse>(
|
||||
"/api/auth/signin",
|
||||
payload,
|
||||
{ ...withTenantHeader(options?.tenantId), successMessage: "Signed in successfully", errorMessage: "Failed to sign in" }
|
||||
),
|
||||
signup: (payload: SignupRequest, options?: AuthApiOptions) =>
|
||||
apiClient.post<AuthUser>(
|
||||
"/api/auth/signup",
|
||||
payload,
|
||||
{ ...withTenantHeader(options?.tenantId), successMessage: "Account created", errorMessage: "Failed to create account" }
|
||||
),
|
||||
logout: () => apiClient.post<LogoutResponse>("/api/auth/logout", { successMessage: "Signed out", errorMessage: "Failed to sign out" }),
|
||||
me: () => apiClient.get<AuthUser>("/api/auth/me"),
|
||||
resetPassword: (oldPassword: string, newPassword: string) =>
|
||||
apiClient.post<{ message: string }>("/api/auth/reset-password", {
|
||||
old_password: oldPassword,
|
||||
new_password: newPassword,
|
||||
}, { successMessage: "Password updated", errorMessage: "Failed to update password" }),
|
||||
|
||||
forgotPassword: (email: string) =>
|
||||
apiClient.post<{ message: string }>("/api/auth/forgot-password", { email }, {
|
||||
successMessage: "If email exists, OTP sent",
|
||||
errorMessage: "Failed to process request"
|
||||
}),
|
||||
|
||||
verifyOtp: (email: string, otp: string) =>
|
||||
apiClient.post<{ message: string }>("/api/auth/verify-otp", { email, otp }, {
|
||||
successMessage: "OTP Verified",
|
||||
errorMessage: "Invalid OTP"
|
||||
}),
|
||||
|
||||
resetPasswordWithOtp: (email: string, otp: string, newPassword: string) =>
|
||||
apiClient.post<{ message: string }>("/api/auth/reset-password-otp", {
|
||||
email,
|
||||
otp,
|
||||
new_password: newPassword
|
||||
}, { successMessage: "Password reset successfully", errorMessage: "Failed to reset password" }),
|
||||
|
||||
updateProfile: (userId: string, payload: UpdateProfilePayload) =>
|
||||
apiClient.put<AuthUser>(`/api/auth/update/${userId}`, payload, {
|
||||
successMessage: "Profile updated successfully",
|
||||
errorMessage: "Failed to update profile",
|
||||
}),
|
||||
|
||||
updateLanguage: (userId: string, language: string) =>
|
||||
apiClient.patch<AuthUser>(`/api/auth/update/${userId}/language`, { preferred_language: language }, {
|
||||
silent: true,
|
||||
}),
|
||||
|
||||
refresh: (refreshToken: string) =>
|
||||
apiClient.post<TokenResponse>("/api/auth/refresh", {
|
||||
refresh_token: refreshToken,
|
||||
}),
|
||||
};
|
||||
@@ -0,0 +1,54 @@
|
||||
export type Access = {
|
||||
id: string;
|
||||
access_code: string;
|
||||
category: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type Role = {
|
||||
id: string;
|
||||
role_name: string;
|
||||
accesses: string[];
|
||||
};
|
||||
|
||||
export type AuthUser = {
|
||||
id: string;
|
||||
email: string;
|
||||
first_name: string;
|
||||
last_name?: string | null;
|
||||
phone_number?: string | null;
|
||||
status?: string;
|
||||
tenant_id?: string | null;
|
||||
tenant_name?: string | null;
|
||||
tenant_logo_url?: string | null;
|
||||
preferred_language?: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
role?: Role | null;
|
||||
};
|
||||
|
||||
export type SigninRequest = {
|
||||
email: string;
|
||||
password: string;
|
||||
};
|
||||
|
||||
export type SignupRequest = {
|
||||
email: string;
|
||||
password: string;
|
||||
first_name: string;
|
||||
last_name?: string;
|
||||
phone_number?: string;
|
||||
status?: string;
|
||||
};
|
||||
|
||||
export type TokenResponse = {
|
||||
access_token: string;
|
||||
refresh_token: string;
|
||||
token_type: string;
|
||||
user: AuthUser;
|
||||
};
|
||||
|
||||
export type ApiError = {
|
||||
detail?: string;
|
||||
message?: string;
|
||||
};
|
||||
@@ -0,0 +1,140 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Mail, Lock, } from "lucide-react";
|
||||
import { CustomInput, CustomButton, CustomOTPInput, CustomBackButton } from "../../../components/Custom";
|
||||
import { authApi } from "../AuthApi";
|
||||
|
||||
type Step = "email" | "otp" | "password";
|
||||
|
||||
export default function ResetPassword() {
|
||||
const [step, setStep] = useState<Step>("email");
|
||||
const [email, setEmail] = useState("");
|
||||
const [otp, setOtp] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSendOtp = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await authApi.forgotPassword(email);
|
||||
setStep("otp");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleVerifyOtp = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await authApi.verifyOtp(email, otp);
|
||||
setStep("password");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetPassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (newPassword !== confirmPassword) {
|
||||
alert("Passwords do not match");
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await authApi.resetPasswordWithOtp(email, otp, newPassword);
|
||||
navigate("/signin");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1 [&_.text-gray-700]:!text-white">
|
||||
<div className="w-full max-w-md pt-10 mx-auto">
|
||||
<CustomBackButton to="/signin" tooltip="Back to Sign In" className="text-gray-400 hover:text-gray-200" />
|
||||
</div>
|
||||
<div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
|
||||
<div className="mb-5 sm:mb-8">
|
||||
<h1 className="mb-2 font-semibold text-white text-2xl">
|
||||
{step === "email" && "Forgot Password?"}
|
||||
{step === "otp" && "Verify OTP"}
|
||||
{step === "password" && "Reset Password"}
|
||||
</h1>
|
||||
<p className="text-sm text-gray-300">
|
||||
{step === "email" && "Enter your email address to receive a verification code."}
|
||||
{step === "otp" && `Enter the verification code sent to ${email}`}
|
||||
{step === "password" && "Enter your new password below."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={step === "email" ? handleSendOtp : step === "otp" ? handleVerifyOtp : handleResetPassword}>
|
||||
<div className="space-y-6">
|
||||
{step === "email" && (
|
||||
<CustomInput
|
||||
label="Email Address"
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
leftIcon={<Mail size={20} />}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === "otp" && (
|
||||
<CustomOTPInput
|
||||
value={otp}
|
||||
onChange={setOtp}
|
||||
label="OTP Code"
|
||||
length={6}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === "password" && (
|
||||
<>
|
||||
<CustomInput
|
||||
label="New Password"
|
||||
type="password"
|
||||
placeholder="Enter new password"
|
||||
required
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
leftIcon={<Lock size={20} />}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Confirm Password"
|
||||
type="password"
|
||||
placeholder="Confirm new password"
|
||||
required
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
leftIcon={<Lock size={20} />}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<CustomButton className="w-full" size="md" variant="primary" type="submit" loading={isLoading}>
|
||||
{step === "email" && "Send OTP"}
|
||||
{step === "otp" && "Verify"}
|
||||
{step === "password" && "Reset Password"}
|
||||
</CustomButton>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
|
||||
import { CustomInput, CustomCheckBox, CustomButton } from "../../../components/custom";
|
||||
import type { SigninRequest } from "../AuthTypes";
|
||||
import { useAuth } from "../../../context/AuthContext";
|
||||
|
||||
export default function SignInForm() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
const { login } = useAuth(); // Retrieve login function from context
|
||||
|
||||
const handleSignIn = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setErrorMessage("");
|
||||
setIsLoading(true);
|
||||
|
||||
const payload: SigninRequest = {
|
||||
email,
|
||||
password,
|
||||
};
|
||||
|
||||
try {
|
||||
// Use the context login function to ensure state is updated
|
||||
await login(payload, isChecked);
|
||||
|
||||
// Redirect to the dashboard after successful signin.
|
||||
navigate("/dashboard");
|
||||
} catch (error) {
|
||||
const message =
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Unable to sign in. Please try again.";
|
||||
setErrorMessage(message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1 [&_.text-gray-700]:!text-white [&_label]:!text-gray-300">
|
||||
|
||||
<div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
|
||||
<div>
|
||||
<div className="mb-5 sm:mb-8">
|
||||
<h1 className="mb-2 font-semibold text-white text-2xl">
|
||||
Sign In
|
||||
</h1>
|
||||
<p className="text-sm text-gray-300">
|
||||
Enter your email and password to sign in!
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-black transition-colors bg-white rounded-lg px-7 hover:bg-gray-50 hover:text-gray-900 w-full">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z"
|
||||
fill="#4285F4"
|
||||
/>
|
||||
<path
|
||||
d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z"
|
||||
fill="#34A853"
|
||||
/>
|
||||
<path
|
||||
d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z"
|
||||
fill="#FBBC05"
|
||||
/>
|
||||
<path
|
||||
d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z"
|
||||
fill="#EB4335"
|
||||
/>
|
||||
</svg>
|
||||
Sign in with Google
|
||||
</button>
|
||||
</div>
|
||||
<div className="relative py-3 sm:py-5">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-700"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="p-2 text-gray-400 bg-slate-900 sm:px-5 sm:py-2">
|
||||
Or
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={handleSignIn}>
|
||||
<div className="space-y-6">
|
||||
<CustomInput
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="info@gmail.com"
|
||||
required
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
className="!text-gray-900"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
className="!text-gray-900"
|
||||
/>
|
||||
|
||||
{errorMessage && (
|
||||
<p className="text-sm text-red-400">
|
||||
{errorMessage}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<CustomCheckBox
|
||||
label="Keep me logged in"
|
||||
checked={isChecked}
|
||||
onChange={(e) => setIsChecked(e.target.checked)}
|
||||
/>
|
||||
<Link
|
||||
to="/reset-password"
|
||||
className="text-sm text-blue-400 hover:text-blue-300"
|
||||
>
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<CustomButton
|
||||
className="w-full"
|
||||
size="md"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
loading={isLoading}
|
||||
>
|
||||
Sign in
|
||||
</CustomButton>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* <div className="mt-5">
|
||||
<p className="text-sm font-normal text-center text-gray-300 sm:text-start">
|
||||
Don't have an account? {""}
|
||||
<Link
|
||||
to="/signup"
|
||||
className="text-blue-400 hover:text-blue-300"
|
||||
>
|
||||
Sign Up
|
||||
</Link>
|
||||
</p>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { CustomInput, CustomCheckBox, CustomButton } from "../../../components/Custom";
|
||||
import type { SignupRequest } from "../AuthTypes";
|
||||
import { authApi } from "../AuthApi";
|
||||
|
||||
export default function SignUpForm() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
const handleSignUp = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setErrorMessage("");
|
||||
setIsLoading(true);
|
||||
|
||||
if (!isChecked) {
|
||||
// Require terms acceptance before sending the signup request.
|
||||
setErrorMessage("Please accept the terms and conditions to continue.");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const payload: SignupRequest = {
|
||||
first_name: firstName,
|
||||
last_name: lastName || undefined,
|
||||
email,
|
||||
password,
|
||||
};
|
||||
|
||||
try {
|
||||
// Call the backend signup API.
|
||||
await authApi.signup(payload);
|
||||
|
||||
// Signup does not return tokens, so take the user to signin.
|
||||
navigate("/signin");
|
||||
} catch (error) {
|
||||
const message =
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Unable to sign up. Please try again.";
|
||||
setErrorMessage(message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1 w-full overflow-y-auto lg:w-1/2 no-scrollbar [&_.text-gray-700]:!text-white">
|
||||
<div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
|
||||
<div>
|
||||
<div className="mb-5 sm:mb-8">
|
||||
<h1 className="mb-2 font-semibold text-white text-2xl">
|
||||
Sign Up
|
||||
</h1>
|
||||
<p className="text-sm text-gray-300">
|
||||
Enter your email and password to sign up!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-black transition-colors bg-white rounded-lg px-7 hover:bg-gray-50 hover:text-gray-900 w-full">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z"
|
||||
fill="#4285F4"
|
||||
/>
|
||||
<path
|
||||
d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z"
|
||||
fill="#34A853"
|
||||
/>
|
||||
<path
|
||||
d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z"
|
||||
fill="#FBBC05"
|
||||
/>
|
||||
<path
|
||||
d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z"
|
||||
fill="#EB4335"
|
||||
/>
|
||||
</svg>
|
||||
Sign up with Google
|
||||
</button>
|
||||
</div>
|
||||
<div className="relative py-3 sm:py-5">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-700"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="p-2 text-gray-400 bg-slate-900 sm:px-5 sm:py-2">
|
||||
Or
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={handleSignUp}>
|
||||
<div className="space-y-5">
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
||||
<CustomInput
|
||||
label="First Name"
|
||||
type="text"
|
||||
placeholder="Enter your first name"
|
||||
required
|
||||
value={firstName}
|
||||
onChange={(event) => setFirstName(event.target.value)}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Last Name"
|
||||
type="text"
|
||||
placeholder="Enter your last name"
|
||||
required
|
||||
value={lastName}
|
||||
onChange={(event) => setLastName(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CustomInput
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
/>
|
||||
|
||||
{errorMessage && (
|
||||
<p className="text-sm text-red-400">
|
||||
{errorMessage}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<CustomCheckBox
|
||||
checked={isChecked}
|
||||
onChange={(e) => setIsChecked(e.target.checked)}
|
||||
/>
|
||||
<p className="inline-block font-normal text-gray-300 text-sm">
|
||||
By creating an account means you agree to the{" "}
|
||||
<span className="text-white font-medium">
|
||||
Terms and Conditions,
|
||||
</span>{" "}
|
||||
and our{" "}
|
||||
<span className="text-white font-medium">
|
||||
Privacy Policy
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<CustomButton
|
||||
className="w-full"
|
||||
size="md"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
loading={isLoading}
|
||||
>
|
||||
Sign Up
|
||||
</CustomButton>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="mt-5">
|
||||
<p className="text-sm font-normal text-center text-gray-300 sm:text-start">
|
||||
Already have an account? {""}
|
||||
<Link
|
||||
to="/signin"
|
||||
className="text-blue-400 hover:text-blue-300"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
|
||||
import AuthLayout from "../../components/layout/AuthLayout";
|
||||
import ResetPassword from "./Components/ResetPasswordForm";
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
return (
|
||||
<AuthLayout>
|
||||
<ResetPassword />
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
|
||||
import AuthLayout from "../../components/layout/AuthLayout";
|
||||
import SignInForm from "./Components/SignInForm";
|
||||
|
||||
export default function SignIn() {
|
||||
return (
|
||||
<AuthLayout>
|
||||
<SignInForm />
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
|
||||
import AuthLayout from "../../components/layout/AuthLayout";
|
||||
import SignUpForm from "./Components/SignUpForm";
|
||||
|
||||
export default function SignUp() {
|
||||
return (
|
||||
<AuthLayout>
|
||||
<SignUpForm />
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Construction } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const Dashboard = () => {
|
||||
const { t } = useTranslation('dashboard');
|
||||
|
||||
return (
|
||||
<div className="min-h-[80vh] flex flex-col items-center justify-center p-4 text-center animate-fade-in">
|
||||
<div className="bg-[var(--card-bg)] p-8 rounded-2xl border border-[var(--card-border)] shadow-sm max-w-lg w-full flex flex-col items-center">
|
||||
<div className="bg-orange-50 p-4 rounded-full mb-6">
|
||||
<Construction className="w-12 h-12 text-orange-500" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('title')}
|
||||
</h1>
|
||||
|
||||
<p className="text-[var(--text-secondary)] text-lg mb-8 leading-relaxed">
|
||||
{t('message')}
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
@@ -0,0 +1,194 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { useAuth } from "../../context/AuthContext";
|
||||
import { useTheme } from "../../context/ThemeContext";
|
||||
import { authApi } from "../Authentication/AuthApi";
|
||||
import { paletteApi } from "../theme/PaletteApi";
|
||||
import type { ColorPalette } from "../theme/ThemeTypes";
|
||||
import CustomButton from "../../components/custom/CustomButton";
|
||||
import { Loader } from "../../components/custom/CustomLoader";
|
||||
import { Check, User } from "lucide-react";
|
||||
|
||||
const ProfilePage: React.FC = () => {
|
||||
const { user, refreshUser } = useAuth();
|
||||
const { currentPalette, setTheme } = useTheme();
|
||||
|
||||
const [palettes, setPalettes] = useState<ColorPalette[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// Form states
|
||||
const [firstName, setFirstName] = useState(user?.first_name || "");
|
||||
const [lastName, setLastName] = useState(user?.last_name || "");
|
||||
const [phone, setPhone] = useState(user?.phone_number || "");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPalettes = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await paletteApi.getAllPalettes();
|
||||
setPalettes(data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch palettes", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPalettes();
|
||||
}, []);
|
||||
|
||||
// Update form when user data changes
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
setFirstName(user.first_name || "");
|
||||
setLastName(user.last_name || "");
|
||||
setPhone(user.phone_number || "");
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const handleThemeSelect = (palette: ColorPalette) => {
|
||||
setTheme(palette);
|
||||
toast.success("Theme updated successfully");
|
||||
};
|
||||
|
||||
const handleProfileUpdate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!user) return;
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await authApi.updateProfile(user.id, {
|
||||
first_name: firstName,
|
||||
last_name: lastName,
|
||||
phone_number: phone,
|
||||
});
|
||||
await refreshUser();
|
||||
toast.success("Profile updated successfully");
|
||||
} catch (error) {
|
||||
console.error("Failed to update profile", error);
|
||||
toast.error("Failed to update profile");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading && palettes.length === 0) {
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center">
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-8 animate-fade-in">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-[var(--text-primary)]">Profile Settings</h1>
|
||||
<p className="text-[var(--text-secondary)] mt-2">Manage your account settings and preferences.</p>
|
||||
</div>
|
||||
|
||||
{/* Profile Information Section */}
|
||||
<div className="bg-[var(--card-bg)] border border-[var(--card-border)] rounded-xl p-6 shadow-sm">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="p-3 bg-blue-100 rounded-lg text-blue-600">
|
||||
<User size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-[var(--text-primary)]">Personal Information</h2>
|
||||
<p className="text-sm text-[var(--text-secondary)]">Update your personal details.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleProfileUpdate} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-[var(--text-primary)]">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-[var(--card-border)] bg-[var(--background)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--primary)] outline-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-[var(--text-primary)]">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-[var(--card-border)] bg-[var(--background)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--primary)] outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-[var(--text-primary)]">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={user?.email || ""}
|
||||
disabled
|
||||
className="w-full px-3 py-2 rounded-lg border border-[var(--card-border)] bg-[var(--background-secondary)] text-[var(--text-secondary)] cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-[var(--text-primary)]">Phone Number</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-[var(--card-border)] bg-[var(--background)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--primary)] outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-4">
|
||||
<CustomButton type="submit" loading={isSaving} variant="primary">
|
||||
Save Changes
|
||||
</CustomButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Theme Selection Section */}
|
||||
<div className="bg-[var(--card-bg)] border border-[var(--card-border)] rounded-xl p-6 shadow-sm">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold text-[var(--text-primary)]">Theme Preferences</h2>
|
||||
<p className="text-sm text-[var(--text-secondary)]">Choose a color theme for your interface.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{palettes.map((palette) => (
|
||||
<button
|
||||
key={palette.id}
|
||||
onClick={() => handleThemeSelect(palette)}
|
||||
className={`
|
||||
relative flex items-center gap-3 p-3 rounded-xl border text-left transition-all duration-200
|
||||
${currentPalette?.id === palette.id
|
||||
? "border-[var(--primary)] bg-[var(--primary)]/5 ring-1 ring-[var(--primary)]"
|
||||
: "border-[var(--card-border)] hover:border-[var(--text-secondary)]"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex gap-1">
|
||||
<div className="w-6 h-6 rounded-full shadow-sm border border-[var(--card-border)]" style={{ backgroundColor: palette.colors.primary }} />
|
||||
<div className="w-6 h-6 rounded-full shadow-sm border border-[var(--card-border)]" style={{ backgroundColor: palette.colors.sidebar_bg }} />
|
||||
<div className="w-6 h-6 rounded-full shadow-sm border border-[var(--card-border)]" style={{ backgroundColor: palette.colors.header_bg }} />
|
||||
</div>
|
||||
|
||||
<span className="font-medium text-[var(--text-primary)]">{palette.name}</span>
|
||||
|
||||
{currentPalette?.id === palette.id && (
|
||||
<div className="absolute top-3 right-3 text-[var(--primary)]">
|
||||
<Check size={18} />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfilePage;
|
||||
@@ -0,0 +1,28 @@
|
||||
import { apiClient } from "../../lib/apiClient";
|
||||
import type { ColorPalette } from "./ThemeTypes";
|
||||
|
||||
export const paletteApi = {
|
||||
getAllPalettes: async () => {
|
||||
return await apiClient.get<ColorPalette[]>("/api/theme/get");
|
||||
},
|
||||
|
||||
getPalette: async (id: string) => {
|
||||
return await apiClient.get<ColorPalette>(`/api/theme/get/${id}`);
|
||||
},
|
||||
|
||||
createPalette: async (paletteData: any) => {
|
||||
return await apiClient.post<ColorPalette>("/api/theme/create", paletteData);
|
||||
},
|
||||
|
||||
updatePalette: async (id: string, paletteData: any) => {
|
||||
return await apiClient.put<ColorPalette>(`/api/theme/update/${id}`, paletteData);
|
||||
},
|
||||
|
||||
deletePalette: async (id: string) => {
|
||||
await apiClient.delete(`/api/theme/delete/${id}`);
|
||||
},
|
||||
|
||||
setTenantPalette: async (tenantId: string, paletteId: string) => {
|
||||
return await apiClient.put(`/api/theme/tenants/${tenantId}/palette?palette_id=${paletteId}`);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
export interface ColorSet {
|
||||
primary: string;
|
||||
primary_hover: string;
|
||||
|
||||
sidebar_bg: string;
|
||||
sidebar_text: string;
|
||||
sidebar_text_muted: string;
|
||||
sidebar_active_bg: string;
|
||||
sidebar_active_text: string;
|
||||
sidebar_hover_bg: string;
|
||||
sidebar_border: string;
|
||||
|
||||
header_bg: string;
|
||||
header_text: string;
|
||||
header_border: string;
|
||||
|
||||
// Backgrounds
|
||||
background: string;
|
||||
background_secondary: string;
|
||||
|
||||
// Text
|
||||
text_primary: string;
|
||||
text_secondary: string;
|
||||
|
||||
// Cards / Surfaces
|
||||
card_bg: string;
|
||||
card_border: string;
|
||||
|
||||
table_header_bg: string;
|
||||
table_row_hover: string;
|
||||
table_border: string;
|
||||
|
||||
[key: string]: string; // Allow extra colors
|
||||
}
|
||||
|
||||
export interface ColorPalette {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
is_default: boolean;
|
||||
colors: ColorSet;
|
||||
tenant_id?: string;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
[key: string]: any; // Allow for other properties and CustomTable compatibility
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
import React, { useEffect, useState, useMemo } from "react";
|
||||
import { Plus, Edit2, Trash2 } from "lucide-react";
|
||||
import { toast } from "react-toastify";
|
||||
import {CustomButton} from "../../../components/custom/CustomButton";
|
||||
import DataTable, { type ColumnDef } from "../../../components/custom/CustomTable";
|
||||
import { CustomActionMenu, CustomActionItem, CustomStatus } from "../../../components/custom";
|
||||
import { Loader } from "../../../components/custom/CustomLoader";
|
||||
import { paletteApi } from "../PaletteApi";
|
||||
import type { ColorPalette } from "../ThemeTypes";
|
||||
import PaletteForm from "./PaletteForm";
|
||||
import { useTheme } from "../../../context/ThemeContext";
|
||||
|
||||
const AllPalettes: React.FC = () => {
|
||||
const [palettes, setPalettes] = useState<ColorPalette[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingPalette, setEditingPalette] = useState<ColorPalette | null>(null);
|
||||
const { refreshTheme } = useTheme();
|
||||
|
||||
const fetchPalettes = async () => {
|
||||
setIsLoading(true);
|
||||
setErrorMessage("");
|
||||
try {
|
||||
const data = await paletteApi.getAllPalettes();
|
||||
setPalettes(data);
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : "Failed to fetch palettes";
|
||||
setErrorMessage(message);
|
||||
console.error("Failed to fetch palettes", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchPalettes();
|
||||
}, []);
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingPalette(null);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (palette: ColorPalette) => {
|
||||
setEditingPalette(palette);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!window.confirm("Are you sure you want to delete this palette?")) return;
|
||||
try {
|
||||
await paletteApi.deletePalette(id);
|
||||
toast.success("Palette deleted successfully");
|
||||
fetchPalettes();
|
||||
} catch (error) {
|
||||
// toast handled by api client
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (data: any) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
if (editingPalette) {
|
||||
await paletteApi.updatePalette(editingPalette.id, data);
|
||||
toast.success("Palette updated successfully");
|
||||
} else {
|
||||
await paletteApi.createPalette(data);
|
||||
toast.success("Palette created successfully");
|
||||
}
|
||||
setIsModalOpen(false);
|
||||
fetchPalettes();
|
||||
// Optionally refresh theme if the updated palette was the active one
|
||||
refreshTheme();
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = useMemo<ColumnDef<ColorPalette>[]>(
|
||||
() => [
|
||||
{
|
||||
key: "name",
|
||||
header: "Name",
|
||||
searchable: true,
|
||||
render: (row) => (
|
||||
<div>
|
||||
<div className="font-medium text-(--text-primary)">{row.name}</div>
|
||||
{row.description && (
|
||||
<div className="text-xs text-(--text-secondary)">{row.description}</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "is_default",
|
||||
header: "Default",
|
||||
render: (row) => (
|
||||
row.is_default ? (
|
||||
<CustomStatus status="Default" variant="success" />
|
||||
) : null
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "colors",
|
||||
header: "Preview",
|
||||
render: (row) => (
|
||||
<div className="flex items-center gap-1">
|
||||
<div
|
||||
className="w-6 h-6 rounded-full border border-(--card-border) shadow-sm"
|
||||
style={{ backgroundColor: row.colors.primary }}
|
||||
title="Primary"
|
||||
/>
|
||||
<div
|
||||
className="w-6 h-6 rounded-full border border-(--card-border) shadow-sm"
|
||||
style={{ backgroundColor: row.colors.sidebar_bg }}
|
||||
title="Sidebar"
|
||||
/>
|
||||
<div
|
||||
className="w-6 h-6 rounded-full border border-(--card-border) shadow-sm"
|
||||
style={{ backgroundColor: row.colors.header_bg }}
|
||||
title="Header"
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "actions",
|
||||
header: "Actions",
|
||||
render: (row) => (
|
||||
<CustomActionMenu>
|
||||
<CustomActionItem onClick={() => handleEdit(row)}>
|
||||
<Edit2 size={16} className="mr-2" /> Edit Palette
|
||||
</CustomActionItem>
|
||||
|
||||
<CustomActionItem
|
||||
onClick={() => handleDelete(row.id)}
|
||||
className={`${row.is_default ? "opacity-50 cursor-not-allowed" : "text-red-600 hover:text-red-700 hover:bg-red-50"}`}
|
||||
>
|
||||
<div
|
||||
className="flex items-center w-full"
|
||||
onClick={(e) => {
|
||||
if (row.is_default) {
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 size={16} className="mr-2" /> Delete Palette
|
||||
</div>
|
||||
</CustomActionItem>
|
||||
</CustomActionMenu>
|
||||
),
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-(--text-primary)">Theme Palettes</h1>
|
||||
{/* <p className="text-sm text-(--text-secondary) mt-1">
|
||||
Manage system color themes and default palettes.
|
||||
</p> */}
|
||||
</div>
|
||||
<CustomButton onClick={handleCreate} leftIcon={<Plus size={18} />}>
|
||||
Create Palette
|
||||
</CustomButton>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-6">
|
||||
<Loader />
|
||||
</div>
|
||||
) : errorMessage ? (
|
||||
<div className="rounded-lg border border-red-200 bg-red-50 p-6 text-sm text-red-600">
|
||||
{errorMessage}
|
||||
</div>
|
||||
) : (
|
||||
<DataTable
|
||||
data={palettes}
|
||||
columns={columns}
|
||||
enableSearchDropdown={true}
|
||||
search="name"
|
||||
/>
|
||||
)}
|
||||
|
||||
<PaletteForm
|
||||
isOpen={isModalOpen}
|
||||
initialData={editingPalette}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => setIsModalOpen(false)}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AllPalettes;
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Check } from "lucide-react";
|
||||
import CustomModal from "../../../components/custom/CustomModal";
|
||||
import CustomInput from "../../../components/custom/CustomInput";
|
||||
import { CustomButton } from "../../../components/custom/CustomButton";
|
||||
import type { ColorPalette } from "../ThemeTypes";
|
||||
|
||||
interface PaletteFormProps {
|
||||
initialData?: ColorPalette | null;
|
||||
onSubmit: (data: any) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
isLoading?: boolean;
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
const colorFields = [
|
||||
{ label: "Primary Color", key: "primary" },
|
||||
{ label: "Primary Hover", key: "primary_hover" },
|
||||
{ label: "Sidebar Background", key: "sidebar_bg" },
|
||||
{ label: "Sidebar Text", key: "sidebar_text" },
|
||||
{ label: "Sidebar Text Muted", key: "sidebar_text_muted" },
|
||||
{ label: "Sidebar Active BG", key: "sidebar_active_bg" },
|
||||
{ label: "Sidebar Active Text", key: "sidebar_active_text" },
|
||||
{ label: "Sidebar Hover BG", key: "sidebar_hover_bg" },
|
||||
{ label: "Sidebar Border", key: "sidebar_border" },
|
||||
{ label: "Header Background", key: "header_bg" },
|
||||
{ label: "Header Text", key: "header_text" },
|
||||
{ label: "Header Border", key: "header_border" },
|
||||
{ label: "App Background", key: "background" },
|
||||
{ label: "App Secondary BG", key: "background_secondary" },
|
||||
{ label: "Text Primary", key: "text_primary" },
|
||||
{ label: "Text Secondary", key: "text_secondary" },
|
||||
{ label: "Card Background", key: "card_bg" },
|
||||
{ label: "Card Border", key: "card_border" },
|
||||
{ label: "Table Header BG", key: "table_header_bg" },
|
||||
{ label: "Table Row Hover", key: "table_row_hover" },
|
||||
{ label: "Table Border", key: "table_border" },
|
||||
];
|
||||
|
||||
const emptyColors = colorFields.reduce((acc, field) => {
|
||||
acc[field.key] = "#000000";
|
||||
return acc;
|
||||
}, {} as Record<string, string>);
|
||||
|
||||
const PaletteForm: React.FC<PaletteFormProps> = ({
|
||||
initialData,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
isLoading,
|
||||
isOpen,
|
||||
}) => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
watch,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
name: "",
|
||||
description: "",
|
||||
is_default: false,
|
||||
colors: emptyColors,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
reset({
|
||||
name: initialData.name,
|
||||
description: initialData.description || "",
|
||||
is_default: initialData.is_default,
|
||||
colors: initialData.colors,
|
||||
});
|
||||
} else {
|
||||
reset({
|
||||
name: "",
|
||||
description: "",
|
||||
is_default: false,
|
||||
colors: emptyColors,
|
||||
});
|
||||
}
|
||||
}, [initialData, isOpen, reset]);
|
||||
|
||||
const handleFormSubmit = async (data: any) => {
|
||||
await onSubmit(data);
|
||||
};
|
||||
|
||||
const footer = (
|
||||
<div className="flex gap-2">
|
||||
<CustomButton
|
||||
type="button"
|
||||
variant="outlined"
|
||||
onClick={onCancel}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancel
|
||||
</CustomButton>
|
||||
<CustomButton
|
||||
type="submit"
|
||||
form="palette-form"
|
||||
disabled={isLoading}
|
||||
loading={isLoading}
|
||||
leftIcon={<Check size={16} />}
|
||||
>
|
||||
{initialData ? "Update Palette" : "Create Palette"}
|
||||
</CustomButton>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<CustomModal
|
||||
isOpen={isOpen}
|
||||
onClose={onCancel}
|
||||
title={initialData ? "Edit Palette" : "Create New Palette"}
|
||||
size="lg"
|
||||
footer={footer}
|
||||
>
|
||||
<form
|
||||
key={initialData?.id || "create"}
|
||||
id="palette-form"
|
||||
onSubmit={handleSubmit(handleFormSubmit)}
|
||||
className="space-y-6"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<CustomInput
|
||||
label="Palette Name"
|
||||
{...register("name", { required: "Name is required" })}
|
||||
error={errors.name?.message as string}
|
||||
placeholder="e.g. Dark Mode"
|
||||
/>
|
||||
<CustomInput
|
||||
label="Description"
|
||||
{...register("description")}
|
||||
placeholder="Optional description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="is_default"
|
||||
{...register("is_default")}
|
||||
className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<label htmlFor="is_default" className="text-sm font-medium text-gray-700">
|
||||
Set as Default Palette
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200 pt-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Color Configuration
|
||||
</h3>
|
||||
|
||||
<div className="max-h-[60vh] overflow-y-auto pr-2 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{colorFields.map((field) => {
|
||||
const currentColor = watch(`colors.${field.key}` as any);
|
||||
|
||||
return (
|
||||
<div key={field.key} className="flex items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
className="h-10 w-10 rounded border border-gray-300 cursor-pointer p-0.5"
|
||||
value={currentColor}
|
||||
onChange={(e) => {
|
||||
setValue(
|
||||
`colors.${field.key}` as any,
|
||||
e.target.value,
|
||||
{ shouldDirty: true }
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label={field.label}
|
||||
{...register(`colors.${field.key}` as any, {
|
||||
required: "Required",
|
||||
})}
|
||||
placeholder="#000000"
|
||||
containerClassName="flex-1 mb-0"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</CustomModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaletteForm;
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Route, Routes } from "react-router-dom";
|
||||
import AllPalettes from "./components/AllPalettes";
|
||||
const Theme: React.FC = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route index element={<AllPalettes />} />
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
|
||||
export default Theme;
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,128 @@
|
||||
import React, { useEffect, useRef, useState, useLayoutEffect } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { MoreVertical } from "lucide-react";
|
||||
|
||||
interface CustomActionMenuProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const CustomActionMenu: React.FC<CustomActionMenuProps> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [position, setPosition] = useState({ top: 0, left: 0 });
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const updatePosition = () => {
|
||||
if (buttonRef.current && isOpen) {
|
||||
const buttonRect = buttonRef.current.getBoundingClientRect();
|
||||
const menuRect = menuRef.current?.getBoundingClientRect();
|
||||
|
||||
let top = buttonRect.bottom + 4;
|
||||
let left = buttonRect.right - (menuRect?.width || 160); // Default items width
|
||||
|
||||
// Check if it fits vertically
|
||||
if (menuRect && top + menuRect.height > window.innerHeight) {
|
||||
top = buttonRect.top - menuRect.height - 4; // Flip up
|
||||
}
|
||||
|
||||
// Check if it fits horizontally
|
||||
if (left < 0) {
|
||||
left = buttonRect.left; // Align left if no space on right
|
||||
}
|
||||
|
||||
setPosition({ top, left });
|
||||
}
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
updatePosition();
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScrollOrResize = () => {
|
||||
if (isOpen) updatePosition();
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScrollOrResize, true);
|
||||
window.addEventListener("resize", handleScrollOrResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScrollOrResize, true);
|
||||
window.removeEventListener("resize", handleScrollOrResize);
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
// Handle click outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement;
|
||||
if (
|
||||
isOpen &&
|
||||
buttonRef.current &&
|
||||
!buttonRef.current.contains(target) &&
|
||||
!target.closest(".custom-action-menu-dropdown")
|
||||
) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
}
|
||||
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
ref={buttonRef}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-full transition-colors focus:outline-none ${isOpen ? 'bg-(--table-row-hover) text-(--text-primary)' : 'text-(--text-secondary) hover:bg-(--table-row-hover) hover:text-(--text-primary)'}`}
|
||||
aria-label="Actions"
|
||||
>
|
||||
<MoreVertical size={18} />
|
||||
</button>
|
||||
|
||||
{isOpen &&
|
||||
createPortal(
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="custom-action-menu-dropdown fixed z-[9999] min-w-[160px] rounded-lg bg-(--card-bg) shadow-xl border border-(--card-border) focus:outline-none"
|
||||
style={{
|
||||
top: position.top,
|
||||
left: position.left,
|
||||
}}
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<div className="py-1 divide-y divide-(--table-border)">
|
||||
{children}
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const CustomActionItem: React.FC<{
|
||||
children: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
}> = ({ children, onClick, className = "" }) => (
|
||||
<div
|
||||
className={`group flex items-center w-full cursor-pointer px-4 py-2.5 text-sm text-(--text-primary) hover:bg-(--table-row-hover) transition-colors ${className}`}
|
||||
onClick={() => {
|
||||
onClick?.();
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default CustomActionMenu;
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { MoveLeft } from "lucide-react";
|
||||
|
||||
interface CustomBackButtonProps {
|
||||
to?: string;
|
||||
label?: string;
|
||||
tooltip?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const CustomBackButton: React.FC<CustomBackButtonProps> = ({
|
||||
to,
|
||||
label = "",
|
||||
tooltip,
|
||||
className = "",
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleBack = (e: React.MouseEvent) => {
|
||||
if (!to) {
|
||||
e.preventDefault();
|
||||
navigate(-1);
|
||||
}
|
||||
};
|
||||
|
||||
const content = (
|
||||
<div
|
||||
className={`group relative inline-flex items-center gap-2 text-gray-500 hover:text-gray-900 transition-colors cursor-pointer ${className}`}
|
||||
>
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
|
||||
<MoveLeft className="h-4 w-4" />
|
||||
</div>
|
||||
{label && <span className="text-sm font-medium">{label}</span>}
|
||||
|
||||
{tooltip && !label && (
|
||||
<div className="absolute top-full mt-2 left-0 hidden whitespace-nowrap rounded bg-gray-800 px-2 py-1 text-xs text-white shadow-md group-hover:block z-50">
|
||||
{tooltip}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (to) {
|
||||
return <Link to={to}>{content}</Link>;
|
||||
}
|
||||
|
||||
return <div onClick={handleBack}>{content}</div>;
|
||||
};
|
||||
|
||||
export default CustomBackButton;
|
||||
@@ -0,0 +1,81 @@
|
||||
import React from "react";
|
||||
|
||||
type ButtonVariant = "primary" | "secondary" | "outlined" | "text" | "icon";
|
||||
type ButtonSize = "sm" | "md" | "lg";
|
||||
|
||||
interface CustomButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
leftIcon?: React.ReactNode;
|
||||
rightIcon?: React.ReactNode;
|
||||
loading?: boolean;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const CustomButton: React.FC<CustomButtonProps> = ({
|
||||
variant = "primary",
|
||||
size = "md",
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
loading = false,
|
||||
disabled,
|
||||
className = "",
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
const baseClasses =
|
||||
"inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
|
||||
|
||||
const variantClasses = {
|
||||
primary:
|
||||
"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 disabled:bg-gray-300 dark:disabled:bg-gray-700 disabled:text-gray-500",
|
||||
secondary:
|
||||
"bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500 disabled:bg-gray-300 dark:disabled:bg-gray-700 disabled:text-gray-500",
|
||||
outlined:
|
||||
"border-2 border-blue-600 text-blue-600 bg-transparent hover:bg-blue-50 dark:hover:bg-blue-900/20 focus:ring-blue-500 disabled:border-gray-300 dark:disabled:border-gray-700 disabled:text-gray-400 disabled:hover:bg-transparent",
|
||||
text: "text-blue-600 bg-transparent hover:bg-blue-50 dark:hover:bg-blue-900/20 focus:ring-blue-500 disabled:text-gray-400 disabled:hover:bg-transparent",
|
||||
icon: "bg-transparent text-gray-500 focus:ring-gray-500 disabled:text-gray-300",
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
sm: variant === "icon" ? "p-1.5" : "px-3 py-1.5 text-sm gap-1.5",
|
||||
md: variant === "icon" ? "p-2" : "px-4 py-2 text-sm gap-2",
|
||||
lg: variant === "icon" ? "p-3" : "px-6 py-3 text-base gap-2",
|
||||
};
|
||||
|
||||
const isDisabled = disabled || loading;
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]
|
||||
} ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`}
|
||||
disabled={isDisabled}
|
||||
{...props}
|
||||
>
|
||||
{loading ? (
|
||||
<svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
) : leftIcon ? (
|
||||
<span className="flex items-center justify-center">{leftIcon}</span>
|
||||
) : null}
|
||||
{children}
|
||||
{rightIcon ? <span className="flex items-center justify-center">{rightIcon}</span> : null}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomButton;
|
||||
@@ -0,0 +1,57 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
interface CustomCheckBoxProps
|
||||
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
||||
label?: string;
|
||||
}
|
||||
|
||||
const CustomCheckBox = forwardRef<HTMLInputElement, CustomCheckBoxProps>(
|
||||
({ label, className = "", disabled, ...props }, ref) => {
|
||||
return (
|
||||
<label
|
||||
className={`
|
||||
inline-flex items-center gap-2.5 cursor-pointer
|
||||
${disabled ? "cursor-not-allowed opacity-60" : ""}
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
<div className="relative flex items-center">
|
||||
<input
|
||||
ref={ref}
|
||||
type="checkbox"
|
||||
className="peer sr-only"
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
/>
|
||||
<div
|
||||
className={`
|
||||
w-5 h-5 border rounded
|
||||
transition-all duration-200
|
||||
flex items-center justify-center
|
||||
border-gray-300 bg-white
|
||||
peer-checked:bg-blue-600 peer-checked:border-blue-600
|
||||
peer-checked:[&_svg]:opacity-100
|
||||
peer-hover:border-blue-600
|
||||
peer-focus:ring-2 peer-focus:ring-blue-600/20
|
||||
peer-disabled:bg-gray-100 peer-disabled:border-gray-200
|
||||
`}
|
||||
>
|
||||
<Check
|
||||
size={14}
|
||||
className="text-white opacity-0 transition-opacity duration-200"
|
||||
strokeWidth={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{label && (
|
||||
<span className="text-sm font-medium text-gray-700 select-none">
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default CustomCheckBox;
|
||||
@@ -0,0 +1,86 @@
|
||||
import React from "react";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import CustomButton from "./CustomButton";
|
||||
import CustomModal from "./CustomModal";
|
||||
|
||||
type ConfirmationVariant = "default" | "danger";
|
||||
|
||||
interface CustomConfirmationModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
title?: string;
|
||||
description?: string;
|
||||
confirmText?: string;
|
||||
cancelText?: string;
|
||||
variant?: ConfirmationVariant;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
const CustomConfirmationModal: React.FC<CustomConfirmationModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onConfirm,
|
||||
title,
|
||||
description,
|
||||
confirmText = "Confirm",
|
||||
cancelText = "Cancel",
|
||||
variant = "default",
|
||||
isLoading = false,
|
||||
}) => {
|
||||
const isDanger = variant === "danger";
|
||||
const defaultTitle = isDanger ? "Delete item?" : "Confirm action";
|
||||
const defaultDescription = isDanger
|
||||
? "This action cannot be undone. Are you sure you want to proceed?"
|
||||
: "Are you sure you want to proceed?";
|
||||
|
||||
return (
|
||||
<CustomModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={title ?? defaultTitle}
|
||||
size="sm"
|
||||
closeOnOverlayClick={!isLoading}
|
||||
footer={
|
||||
<>
|
||||
<CustomButton
|
||||
type="button"
|
||||
variant="outlined"
|
||||
onClick={onClose}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{cancelText}
|
||||
</CustomButton>
|
||||
<CustomButton
|
||||
type="button"
|
||||
variant="primary"
|
||||
onClick={onConfirm}
|
||||
loading={isLoading}
|
||||
className={
|
||||
isDanger
|
||||
? "bg-red-600 hover:bg-red-700 focus:ring-red-500 disabled:bg-red-300"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{confirmText}
|
||||
</CustomButton>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`flex h-10 w-10 items-center justify-center rounded-full ${
|
||||
isDanger ? "bg-red-100 text-red-600" : "bg-blue-100 text-blue-600"
|
||||
}`}
|
||||
>
|
||||
<AlertTriangle size={20} />
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">
|
||||
{description ?? defaultDescription}
|
||||
</p>
|
||||
</div>
|
||||
</CustomModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomConfirmationModal;
|
||||
@@ -0,0 +1,55 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import { Calendar } from "lucide-react";
|
||||
|
||||
interface CustomDatePickerProps
|
||||
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
const CustomDatePicker = forwardRef<HTMLInputElement, CustomDatePickerProps>(
|
||||
({ label, error, className = "", disabled, required, ...props }, ref) => {
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-1.5">
|
||||
{label && (
|
||||
<label className="text-sm font-semibold text-gray-700">
|
||||
{label}
|
||||
{required && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
<div className="relative w-full">
|
||||
<input
|
||||
ref={ref}
|
||||
type="date"
|
||||
disabled={disabled}
|
||||
className={`
|
||||
w-full rounded-lg
|
||||
bg-white text-black text-sm
|
||||
border border-gray-300
|
||||
pl-10 pr-3 py-3
|
||||
outline-none
|
||||
transition-all duration-200
|
||||
hover:border-blue-600
|
||||
focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20
|
||||
disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed disabled:border-gray-200
|
||||
placeholder:text-gray-400
|
||||
${
|
||||
error
|
||||
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
||||
: ""
|
||||
}
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
/>
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
|
||||
<Calendar size={18} />
|
||||
</span>
|
||||
</div>
|
||||
{error && <p className="text-xs text-red-500 mt-0.5">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default CustomDatePicker;
|
||||
@@ -0,0 +1,56 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import { CalendarClock } from "lucide-react";
|
||||
|
||||
interface CustomDateTimePickerProps
|
||||
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
const CustomDateTimePicker = forwardRef<
|
||||
HTMLInputElement,
|
||||
CustomDateTimePickerProps
|
||||
>(({ label, error, className = "", disabled, required, ...props }, ref) => {
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-1.5">
|
||||
{label && (
|
||||
<label className="text-sm font-semibold text-gray-700">
|
||||
{label}
|
||||
{required && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
<div className="relative w-full">
|
||||
<input
|
||||
ref={ref}
|
||||
type="datetime-local"
|
||||
disabled={disabled}
|
||||
className={`
|
||||
w-full rounded-lg
|
||||
bg-white text-black text-sm
|
||||
border border-gray-300
|
||||
pl-10 pr-3 py-3
|
||||
outline-none
|
||||
transition-all duration-200
|
||||
hover:border-blue-600
|
||||
focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20
|
||||
disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed disabled:border-gray-200
|
||||
placeholder:text-gray-400
|
||||
${
|
||||
error
|
||||
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
||||
: ""
|
||||
}
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
/>
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
|
||||
<CalendarClock size={18} />
|
||||
</span>
|
||||
</div>
|
||||
{error && <p className="text-xs text-red-500 mt-0.5">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default CustomDateTimePicker;
|
||||
@@ -0,0 +1,87 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
interface Option {
|
||||
label: string;
|
||||
value: string | number;
|
||||
}
|
||||
|
||||
interface CustomDropdownProps
|
||||
extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
||||
label?: string;
|
||||
options: Option[];
|
||||
leftIcon?: React.ReactNode;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
const CustomDropdown = forwardRef<HTMLSelectElement, CustomDropdownProps>(
|
||||
(
|
||||
{
|
||||
label,
|
||||
options,
|
||||
leftIcon,
|
||||
placeholder,
|
||||
disabled,
|
||||
className = "",
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-1.5">
|
||||
{label && (
|
||||
<label className="text-sm font-semibold text-(--text-primary)">
|
||||
{label}
|
||||
{props.required && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="relative w-full">
|
||||
{leftIcon && (
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-(--text-secondary) pointer-events-none">
|
||||
{leftIcon}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<select
|
||||
ref={ref}
|
||||
disabled={disabled}
|
||||
className={`
|
||||
w-full rounded-lg
|
||||
bg-(--background) text-(--text-primary) text-sm
|
||||
border border-(--card-border)
|
||||
px-3 py-3
|
||||
outline-none
|
||||
transition-all duration-200
|
||||
appearance-none
|
||||
hover:border-blue-500
|
||||
focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20
|
||||
disabled:bg-(--background-secondary) disabled:text-(--text-secondary) disabled:cursor-not-allowed disabled:border-(--card-border)
|
||||
${leftIcon ? "pl-10" : ""}
|
||||
pr-10
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
{placeholder && (
|
||||
<option value="" disabled hidden className="bg-(--card-bg) text-(--text-primary)">
|
||||
{placeholder}
|
||||
</option>
|
||||
)}
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value} className="bg-(--card-bg) text-(--text-primary)">
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-(--text-secondary) pointer-events-none">
|
||||
<ChevronDown size={16} />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default CustomDropdown;
|
||||
@@ -0,0 +1,197 @@
|
||||
import React, { useRef, useState, useEffect } from "react";
|
||||
import { Upload, X, File } from "lucide-react";
|
||||
|
||||
interface CustomFileUploaderProps {
|
||||
label?: string;
|
||||
required?: boolean;
|
||||
multiple?: boolean;
|
||||
maxFiles?: number;
|
||||
accept?: string;
|
||||
value?: File[];
|
||||
onChange?: (files: File[]) => void;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const CustomFileUploader: React.FC<CustomFileUploaderProps> = ({
|
||||
label,
|
||||
required,
|
||||
multiple = false,
|
||||
maxFiles,
|
||||
accept,
|
||||
value = [],
|
||||
onChange,
|
||||
disabled,
|
||||
className = "",
|
||||
}) => {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [previews, setPreviews] = useState<{ [key: string]: string }>({});
|
||||
|
||||
useEffect(() => {
|
||||
// Cleanup object URLs to avoid memory leaks
|
||||
return () => {
|
||||
Object.values(previews).forEach((url) => URL.revokeObjectURL(url));
|
||||
};
|
||||
}, [previews]);
|
||||
|
||||
useEffect(() => {
|
||||
// Generate previews for new files
|
||||
const newPreviews: { [key: string]: string } = {};
|
||||
value.forEach((file) => {
|
||||
if (file.type.startsWith("image/") && !previews[file.name]) {
|
||||
newPreviews[file.name] = URL.createObjectURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
if (Object.keys(newPreviews).length > 0) {
|
||||
setPreviews((prev) => ({ ...prev, ...newPreviews }));
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (disabled) return;
|
||||
const files = Array.from(e.target.files || []);
|
||||
handleFiles(files);
|
||||
};
|
||||
|
||||
const handleFiles = (newFiles: File[]) => {
|
||||
let updatedFiles = multiple ? [...value, ...newFiles] : newFiles;
|
||||
|
||||
if (maxFiles && updatedFiles.length > maxFiles) {
|
||||
updatedFiles = updatedFiles.slice(0, maxFiles);
|
||||
}
|
||||
|
||||
onChange?.(updatedFiles);
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
if (!disabled) setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
if (disabled) return;
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
handleFiles(files);
|
||||
};
|
||||
|
||||
const removeFile = (e: React.MouseEvent, index: number) => {
|
||||
e.stopPropagation();
|
||||
if (disabled) return;
|
||||
const fileToRemove = value[index];
|
||||
const newFiles = value.filter((_, i) => i !== index);
|
||||
onChange?.(newFiles);
|
||||
|
||||
// Cleanup preview if it exists
|
||||
if (previews[fileToRemove.name]) {
|
||||
URL.revokeObjectURL(previews[fileToRemove.name]);
|
||||
setPreviews((prev) => {
|
||||
const newPrev = { ...prev };
|
||||
delete newPrev[fileToRemove.name];
|
||||
return newPrev;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`w-full flex flex-col gap-1.5 ${className}`}>
|
||||
{label && (
|
||||
<label className="text-sm font-semibold text-gray-700">
|
||||
{label}
|
||||
{required && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`
|
||||
relative w-full rounded-lg border-2 border-dashed
|
||||
flex flex-col items-center justify-center p-6
|
||||
transition-all duration-200
|
||||
${
|
||||
isDragging
|
||||
? "border-blue-600 bg-blue-50"
|
||||
: "border-gray-300 bg-gray-50 hover:bg-gray-100"
|
||||
}
|
||||
${disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}
|
||||
`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => !disabled && inputRef.current?.click()}
|
||||
>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
multiple={multiple}
|
||||
accept={accept}
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col items-center gap-2 text-gray-500">
|
||||
<Upload size={24} />
|
||||
<span className="text-sm font-medium">
|
||||
{isDragging ? "Drop files here" : "Click or drag to upload"}
|
||||
</span>
|
||||
{maxFiles && (
|
||||
<span className="text-xs text-gray-400">
|
||||
Max {maxFiles} file{maxFiles > 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{value.length > 0 && (
|
||||
<div className="flex flex-col gap-2 mt-2">
|
||||
{value.map((file, index) => (
|
||||
<div
|
||||
key={`${file.name}-${index}`}
|
||||
className="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3 overflow-hidden">
|
||||
<div className="w-10 h-10 flex-shrink-0 rounded-lg bg-gray-100 flex items-center justify-center overflow-hidden border border-gray-200">
|
||||
{file.type.startsWith("image/") && previews[file.name] ? (
|
||||
<img
|
||||
src={previews[file.name]}
|
||||
alt={file.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<File size={20} className="text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col overflow-hidden">
|
||||
<span className="text-sm font-medium text-gray-700 truncate">
|
||||
{file.name}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{(file.size / 1024).toFixed(1)} KB
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{!disabled && (
|
||||
<button
|
||||
onClick={(e) => removeFile(e, index)}
|
||||
className="p-1 text-gray-400 hover:text-red-500 transition-colors rounded-full hover:bg-gray-100"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomFileUploader;
|
||||
@@ -0,0 +1,80 @@
|
||||
import React from "react";
|
||||
import { Minus, Plus } from "lucide-react";
|
||||
|
||||
interface CustomIncrementProps {
|
||||
label?: string;
|
||||
required?: boolean;
|
||||
value: number;
|
||||
onChange: (value: number) => void;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const CustomIncrement: React.FC<CustomIncrementProps> = ({
|
||||
label,
|
||||
required = false,
|
||||
value,
|
||||
onChange,
|
||||
min = 1,
|
||||
max = Number.POSITIVE_INFINITY,
|
||||
step = 1,
|
||||
disabled = false,
|
||||
className = "",
|
||||
}) => {
|
||||
const handleDecrease = () => {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
onChange(Math.max(min, value - step));
|
||||
};
|
||||
|
||||
const handleIncrease = () => {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
onChange(Math.min(max, value + step));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col gap-1.5 ${className}`}>
|
||||
{label && (
|
||||
<label className="text-sm font-semibold text-gray-700">
|
||||
{label}
|
||||
{required && <span className="ml-1 text-red-500">*</span>}
|
||||
</label>
|
||||
)}
|
||||
<div
|
||||
className={`inline-flex h-11 items-center overflow-hidden rounded-lg border border-gray-200 bg-white ${
|
||||
disabled ? "opacity-60" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Decrease quantity"
|
||||
onClick={handleDecrease}
|
||||
disabled={disabled || value <= min}
|
||||
className="flex h-11 w-11 items-center justify-center text-gray-600 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Minus size={16} />
|
||||
</button>
|
||||
<div className="min-w-[48px] text-center text-sm font-semibold text-gray-700">
|
||||
{value}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Increase quantity"
|
||||
onClick={handleIncrease}
|
||||
disabled={disabled || value >= max}
|
||||
className="flex h-11 w-11 items-center justify-center text-gray-600 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Plus size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomIncrement;
|
||||
@@ -0,0 +1,132 @@
|
||||
import React, { useState, forwardRef } from "react";
|
||||
import { Phone, Eye, EyeOff } from "lucide-react";
|
||||
|
||||
type InputType = "text" | "password" | "number" | "email" | "tel" | "date";
|
||||
|
||||
interface CustomInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string;
|
||||
type?: InputType;
|
||||
leftIcon?: React.ReactNode;
|
||||
rightIcon?: React.ReactNode;
|
||||
maxLength?: number;
|
||||
phonePrefix?: string;
|
||||
error?: string;
|
||||
containerClassName?: string;
|
||||
}
|
||||
|
||||
const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>(
|
||||
(
|
||||
{
|
||||
label,
|
||||
type = "text",
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
maxLength,
|
||||
phonePrefix,
|
||||
disabled,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
error,
|
||||
onInput,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const isPassword = type === "password";
|
||||
const isPhone = phonePrefix !== undefined;
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const inputType = isPassword && showPassword ? "text" : type;
|
||||
|
||||
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
|
||||
if (maxLength && (type === "number" || type === "tel")) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (target.value.length > maxLength) {
|
||||
target.value = target.value.slice(0, maxLength);
|
||||
}
|
||||
}
|
||||
onInput?.(e);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`w-full flex flex-col gap-1.5 ${containerClassName}`}>
|
||||
{label && (
|
||||
<label htmlFor={props.id} className="block text-sm font-medium text-[var(--text-primary)]">
|
||||
{label}
|
||||
{props.required && <span className="ml-1 text-red-500">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`relative w-full ${isPhone
|
||||
? "flex overflow-hidden rounded-lg border border-(--card-border) bg-(--background)"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{isPhone && (
|
||||
<div className="flex items-center gap-2 border-r border-(--card-border) bg-(--background-secondary) px-3 text-sm font-semibold text-(--text-primary)">
|
||||
<Phone size={16} className="text-(--text-secondary)" />
|
||||
{phonePrefix}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isPhone && leftIcon && (
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-(--text-secondary)">
|
||||
{leftIcon}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<input
|
||||
ref={ref}
|
||||
type={inputType}
|
||||
maxLength={
|
||||
type === "number" || type === "tel" ? undefined : maxLength
|
||||
}
|
||||
onInput={handleInput}
|
||||
disabled={disabled}
|
||||
className={`
|
||||
${isPhone
|
||||
? "w-full px-3 py-3 text-sm text-(--text-primary) bg-(--background) outline-none placeholder-(--text-secondary)/50"
|
||||
: `
|
||||
w-full rounded-lg
|
||||
bg-(--background) text-(--text-primary) text-sm
|
||||
border ${error ? "border-red-500" : "border-(--card-border)"}
|
||||
px-3 py-3
|
||||
outline-none
|
||||
transition-all duration-200
|
||||
hover:border-blue-500
|
||||
focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20
|
||||
disabled:bg-(--background-secondary) disabled:text-(--text-secondary) disabled:cursor-not-allowed disabled:border-(--card-border)
|
||||
placeholder-(--text-secondary)/50
|
||||
${leftIcon ? "pl-10" : ""}
|
||||
${rightIcon || isPassword ? "pr-10" : ""}
|
||||
`
|
||||
}
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
{!isPhone && isPassword ? (
|
||||
<span
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-slate-400 select-none hover:text-slate-600"
|
||||
>
|
||||
{showPassword ? <Eye size={20} /> : <EyeOff size={20} />}
|
||||
</span>
|
||||
) : (
|
||||
!isPhone &&
|
||||
rightIcon && (
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
|
||||
{rightIcon}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default CustomInput;
|
||||
@@ -0,0 +1,64 @@
|
||||
import type { ComponentProps } from "react";
|
||||
|
||||
type LoaderProps = {
|
||||
label?: string;
|
||||
size?: "sm" | "md" | "lg" | "xl";
|
||||
variant?: "primary" | "white" | "gray";
|
||||
inline?: boolean;
|
||||
className?: string;
|
||||
} & ComponentProps<"div">;
|
||||
|
||||
const sizeMap = {
|
||||
sm: "h-5 w-5 border-2",
|
||||
md: "h-8 w-8 border-[3px]",
|
||||
lg: "h-10 w-10 border-4",
|
||||
xl: "h-14 w-14 border-4",
|
||||
};
|
||||
|
||||
const variantMap = {
|
||||
primary: "border-blue-500 border-l-transparent",
|
||||
white: "border-white border-l-transparent",
|
||||
gray: "border-gray-500 border-l-transparent",
|
||||
};
|
||||
|
||||
export function Loader({
|
||||
label,
|
||||
size = "md",
|
||||
variant = "primary",
|
||||
inline = false,
|
||||
className,
|
||||
...rest
|
||||
}: LoaderProps) {
|
||||
const spinnerClass = [
|
||||
"rounded-full",
|
||||
"animate-spin",
|
||||
sizeMap[size],
|
||||
variantMap[variant],
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
const containerClass = [
|
||||
"flex items-center gap-3",
|
||||
inline ? "justify-start" : "justify-center",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
return (
|
||||
<div
|
||||
className={containerClass}
|
||||
aria-live="polite"
|
||||
aria-busy="true"
|
||||
{...rest}
|
||||
>
|
||||
<div className={spinnerClass} />
|
||||
{label && (
|
||||
<span className="text-sm font-medium text-gray-600">{label}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Loader;
|
||||
@@ -0,0 +1,99 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
interface CustomModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title?: string;
|
||||
children: React.ReactNode;
|
||||
footer?: React.ReactNode;
|
||||
size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full";
|
||||
closeOnOverlayClick?: boolean;
|
||||
zIndex?: number;
|
||||
}
|
||||
|
||||
const CustomModal: React.FC<CustomModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
title,
|
||||
children,
|
||||
footer,
|
||||
size = "md",
|
||||
closeOnOverlayClick = true,
|
||||
zIndex = 50,
|
||||
}) => {
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape" && isOpen) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = "hidden";
|
||||
document.addEventListener("keydown", handleEscape);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = "unset";
|
||||
document.removeEventListener("keydown", handleEscape);
|
||||
};
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const sizes = {
|
||||
sm: "max-w-sm",
|
||||
md: "max-w-md",
|
||||
lg: "max-w-lg",
|
||||
xl: "max-w-xl",
|
||||
"2xl": "max-w-2xl",
|
||||
"3xl": "max-w-3xl",
|
||||
"4xl": "max-w-4xl",
|
||||
full: "max-w-full m-4",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm transition-opacity"
|
||||
style={{ zIndex }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
onClick={() => closeOnOverlayClick && onClose()}
|
||||
/>
|
||||
<div
|
||||
ref={modalRef}
|
||||
className={`
|
||||
relative w-full bg-(--card-bg) border border-(--card-border) rounded-xl shadow-xl transform transition-all
|
||||
flex flex-col max-h-[90vh]
|
||||
${sizes[size]}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-(--card-border)">
|
||||
<h3 className="text-lg font-semibold text-(--text-primary)">{title}</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 text-(--text-secondary) hover:text-(--text-primary) hover:bg-(--background) rounded-lg transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{footer && (
|
||||
<div className="px-6 py-4 bg-(--background) border-t border-(--card-border) rounded-b-xl flex justify-end gap-3">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomModal;
|
||||
@@ -0,0 +1,196 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { ChevronDown, X, Check } from "lucide-react";
|
||||
|
||||
interface Option {
|
||||
label: string;
|
||||
value: string | number;
|
||||
}
|
||||
|
||||
interface CustomMultiSelectProps {
|
||||
label?: string;
|
||||
options: Option[];
|
||||
value?: (string | number)[];
|
||||
onChange?: (value: (string | number)[]) => void;
|
||||
placeholder?: string;
|
||||
leftIcon?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
|
||||
label,
|
||||
options,
|
||||
value = [],
|
||||
onChange,
|
||||
placeholder = "Select options...",
|
||||
leftIcon,
|
||||
disabled,
|
||||
required,
|
||||
className = "",
|
||||
error,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
containerRef.current &&
|
||||
!containerRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setIsOpen(false);
|
||||
setSearchTerm("");
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleSelect = (optionValue: string | number) => {
|
||||
if (disabled) return;
|
||||
const newValue = value.includes(optionValue)
|
||||
? value.filter((v) => v !== optionValue)
|
||||
: [...value, optionValue];
|
||||
onChange?.(newValue);
|
||||
};
|
||||
|
||||
const removeValue = (e: React.MouseEvent, optionValue: string | number) => {
|
||||
e.stopPropagation();
|
||||
if (disabled) return;
|
||||
onChange?.(value.filter((v) => v !== optionValue));
|
||||
};
|
||||
|
||||
const selectedOptions = options.filter((opt) => value.includes(opt.value));
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-1.5" ref={containerRef}>
|
||||
{label && (
|
||||
<label className="text-sm font-semibold text-(--text-primary)">
|
||||
{label}
|
||||
{required && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="relative w-full">
|
||||
<div
|
||||
onClick={() => !disabled && setIsOpen(!isOpen)}
|
||||
className={`
|
||||
w-full rounded-lg
|
||||
bg-(--background) text-(--text-primary) text-sm
|
||||
border ${isOpen
|
||||
? "border-blue-600 ring-2 ring-blue-600/20"
|
||||
: error ? "border-red-500" : "border-(--card-border)"
|
||||
}
|
||||
px-3 py-0 h-[46px]
|
||||
outline-none
|
||||
transition-all duration-200
|
||||
hover:border-blue-500
|
||||
cursor-pointer
|
||||
flex items-center gap-2
|
||||
overflow-hidden
|
||||
${disabled
|
||||
? "bg-(--background-secondary) text-(--text-secondary) cursor-not-allowed border-(--card-border)"
|
||||
: ""
|
||||
}
|
||||
${leftIcon ? "pl-10" : ""}
|
||||
pr-10
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
{leftIcon && (
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-(--text-secondary) pointer-events-none">
|
||||
{leftIcon}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 overflow-hidden w-full h-full">
|
||||
{selectedOptions.length === 0 ? (
|
||||
<span className="text-(--text-secondary)/50 text-nowrap">{placeholder}</span>
|
||||
) : selectedOptions.length === 1 ? (
|
||||
<span
|
||||
key={selectedOptions[0].value}
|
||||
className="flex items-center gap-1 px-2 py-0.5 rounded bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 text-xs font-medium border border-blue-100 dark:border-blue-800 min-w-0"
|
||||
>
|
||||
<span className="truncate">{selectedOptions[0].label}</span>
|
||||
<X
|
||||
size={14}
|
||||
className="cursor-pointer hover:text-blue-900 dark:hover:text-blue-200 shrink-0"
|
||||
onClick={(e) => removeValue(e, selectedOptions[0].value)}
|
||||
/>
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 text-xs font-medium border border-blue-100 dark:border-blue-800">
|
||||
{selectedOptions.length} Selected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-(--text-secondary) pointer-events-none">
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={`transition-transform duration-200 ${isOpen ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isOpen && !disabled && (
|
||||
<div className="absolute z-50 w-full mt-1 bg-(--card-bg) border border-(--card-border) rounded-lg shadow-lg max-h-60 overflow-hidden flex flex-col py-1">
|
||||
<div className="px-2 py-1 border-b border-(--card-border)">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
className="w-full px-2 py-1 text-sm bg-transparent outline-none text-(--text-primary) placeholder-(--text-secondary)/50"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
value={searchTerm}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto max-h-48">
|
||||
{options
|
||||
.filter(opt => opt.label.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
.length === 0 ? (
|
||||
<div className="px-3 py-2 text-sm text-(--text-secondary)">
|
||||
No options available
|
||||
</div>
|
||||
) : (
|
||||
options
|
||||
.filter(opt => opt.label.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
.map((option) => {
|
||||
const isSelected = value.includes(option.value);
|
||||
return (
|
||||
<div
|
||||
key={option.value}
|
||||
onClick={() => handleSelect(option.value)}
|
||||
className={`
|
||||
px-3 py-2 text-sm cursor-pointer flex items-center justify-between
|
||||
${isSelected
|
||||
? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400"
|
||||
: "text-(--text-primary) hover:bg-(--table-row-hover)"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{option.label}
|
||||
{isSelected && <Check size={16} />}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomMultiSelect;
|
||||
@@ -0,0 +1,102 @@
|
||||
import React, { useRef, useEffect } from "react";
|
||||
|
||||
interface CustomOTPInputProps {
|
||||
length?: number;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
label?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
const CustomOTPInput: React.FC<CustomOTPInputProps> = ({
|
||||
length = 6,
|
||||
value,
|
||||
onChange,
|
||||
label,
|
||||
error,
|
||||
}) => {
|
||||
const inputs = useRef<(HTMLInputElement | null)[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (inputs.current[0]) {
|
||||
inputs.current[0].focus();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement>,
|
||||
index: number
|
||||
) => {
|
||||
const val = e.target.value;
|
||||
if (isNaN(Number(val))) return;
|
||||
|
||||
const newOtp = value.split("");
|
||||
newOtp[index] = val.substring(val.length - 1);
|
||||
const combinedOtp = newOtp.join("");
|
||||
onChange(combinedOtp);
|
||||
|
||||
// Move to next input if value is entered
|
||||
if (val && index < length - 1 && inputs.current[index + 1]) {
|
||||
inputs.current[index + 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (
|
||||
e: React.KeyboardEvent<HTMLInputElement>,
|
||||
index: number
|
||||
) => {
|
||||
if (
|
||||
e.key === "Backspace" &&
|
||||
!value[index] &&
|
||||
index > 0 &&
|
||||
inputs.current[index - 1]
|
||||
) {
|
||||
// Move to previous input on backspace if current is empty
|
||||
inputs.current[index - 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
|
||||
e.preventDefault();
|
||||
const pastedData = e.clipboardData.getData("text").slice(0, length);
|
||||
if (/^\d+$/.test(pastedData)) {
|
||||
onChange(pastedData);
|
||||
// Focus the last filled input or the next empty one
|
||||
const nextIndex = Math.min(pastedData.length, length - 1);
|
||||
inputs.current[nextIndex]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
{label && (
|
||||
<label className="text-sm font-semibold text-white">{label}</label>
|
||||
)}
|
||||
<div className="flex gap-2 justify-between sm:justify-start">
|
||||
{Array.from({ length }).map((_, index) => (
|
||||
<input
|
||||
key={index}
|
||||
ref={(el) => { inputs.current[index] = el }}
|
||||
type="text"
|
||||
maxLength={1}
|
||||
value={value[index] || ""}
|
||||
onChange={(e) => handleChange(e, index)}
|
||||
onKeyDown={(e) => handleKeyDown(e, index)}
|
||||
onPaste={handlePaste}
|
||||
className={`w-10 h-12 sm:w-12 sm:h-14 text-center text-xl font-bold rounded-lg border outline-none transition-all duration-200
|
||||
bg-white text-gray-800 border-gray-300 focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20
|
||||
${
|
||||
error
|
||||
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
||||
: ""
|
||||
}
|
||||
`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-500 mt-1">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomOTPInput;
|
||||
@@ -0,0 +1,74 @@
|
||||
.custom-phone-input {
|
||||
font-family: inherit;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.custom-phone-input .PhoneInputInput {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
outline: none;
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 0.875rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
background-color: var(--background);
|
||||
color: var(--text-primary);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
|
||||
.custom-phone-input .PhoneInputInput:hover {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.custom-phone-input .PhoneInputInput:focus {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.custom-phone-input .PhoneInputInput::placeholder {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.custom-phone-input .PhoneInputInput:disabled {
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: not-allowed;
|
||||
border-color: var(--card-border);
|
||||
}
|
||||
|
||||
.custom-phone-input .PhoneInputCountry {
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.custom-phone-input .PhoneInputCountryIcon,
|
||||
.custom-phone-input .PhoneInputCountrySelectArrow {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.custom-phone-input.error .PhoneInputInput {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.custom-phone-input.error .PhoneInputInput:focus {
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.custom-phone-input.disabled .PhoneInputInput {
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: not-allowed;
|
||||
border-color: var(--card-border);
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
import { useState, useRef, useEffect, useMemo } from 'react';
|
||||
import { type Country, getCountries, getCountryCallingCode } from 'react-phone-number-input';
|
||||
import Input from 'react-phone-number-input/input';
|
||||
import en from 'react-phone-number-input/locale/en';
|
||||
import { ChevronDown, Search, Check, X } from 'lucide-react';
|
||||
import * as Flags from 'country-flag-icons/react/3x2';
|
||||
import 'react-phone-number-input/style.css';
|
||||
import './CustomPhoneInput.css';
|
||||
|
||||
interface CustomPhoneInputProps {
|
||||
label: string;
|
||||
name: string;
|
||||
value?: string;
|
||||
onChange: (value: string | undefined) => void;
|
||||
required?: boolean;
|
||||
error?: string;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
defaultCountry?: Country;
|
||||
}
|
||||
|
||||
const CountrySelectWithSearch = ({ value, onChange, options, disabled }: any) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && searchInputRef.current) {
|
||||
searchInputRef.current.focus();
|
||||
}
|
||||
if (!isOpen) {
|
||||
setSearch("");
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const filteredOptions = useMemo(() => {
|
||||
return options.filter((option: any) =>
|
||||
option.label && option.label.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
}, [options, search]);
|
||||
|
||||
const selectedOption = options.find((opt: any) => opt.value === value);
|
||||
// Use explicit flag from library if available, otherwise fallback to text
|
||||
const FlagComponent = value && (Flags as any)[value] ? (Flags as any)[value] : null;
|
||||
|
||||
return (
|
||||
<div className="relative h-full" ref={dropdownRef}>
|
||||
<button
|
||||
type="button"
|
||||
className="h-full px-3 flex items-center gap-2 border border-(--card-border) rounded-l-lg bg-(--background) hover:border-blue-500 transition-colors"
|
||||
onClick={() => !disabled && setIsOpen(!isOpen)}
|
||||
disabled={disabled}
|
||||
>
|
||||
{FlagComponent ? (
|
||||
<FlagComponent title={selectedOption?.label} className="w-6 h-4 object-cover rounded-sm border border-gray-100" />
|
||||
) : (
|
||||
<span className="text-sm font-medium">{value}</span>
|
||||
)}
|
||||
<ChevronDown size={14} className={`text-gray-500 transition-transform ${isOpen ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute z-50 top-full left-0 mt-1 w-[280px] bg-(--card-bg) border border-(--card-border) rounded-lg shadow-lg overflow-hidden flex flex-col">
|
||||
<div className="p-2 border-b border-(--card-border) sticky top-0 bg-(--card-bg)">
|
||||
<div className="relative">
|
||||
<Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
placeholder="Search country..."
|
||||
className="w-full text-sm pl-8 pr-8 py-1.5 rounded-md border border-(--card-border) bg-(--background-secondary) text-(--text-primary) outline-none focus:border-blue-500 placeholder:text-gray-400"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
onClick={() => setSearch("")}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[200px] overflow-y-auto">
|
||||
{filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option: any) => {
|
||||
const OptionFlag = option.value && (Flags as any)[option.value] ? (Flags as any)[option.value] : null;
|
||||
return (
|
||||
<button
|
||||
key={option.value || 'divider'}
|
||||
type="button"
|
||||
className={`w-full text-left px-3 py-2 text-sm flex items-center gap-3 hover:bg-(--table-row-hover) transition-colors ${option.value === value ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600" : "text-(--text-primary)"
|
||||
}`}
|
||||
onClick={() => {
|
||||
onChange(option.value);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
{OptionFlag && <OptionFlag className="w-6 h-4 object-cover rounded-sm border border-gray-100" />}
|
||||
<span className="flex-1 truncate">{option.label}</span>
|
||||
{option.value === value && <Check size={14} />}
|
||||
<span className="text-xs text-gray-400">+{getCountryCallingCode(option.value)}</span>
|
||||
</button>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="p-3 text-center text-sm text-gray-500">No countries found</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const CustomPhoneInput = ({
|
||||
label,
|
||||
name,
|
||||
value,
|
||||
onChange,
|
||||
required = false,
|
||||
error,
|
||||
placeholder = "Enter phone number",
|
||||
disabled = false,
|
||||
defaultCountry = "IN" as Country,
|
||||
}: CustomPhoneInputProps) => {
|
||||
const [country, setCountry] = useState<Country>(defaultCountry);
|
||||
|
||||
const handleCountryChange = (newCountry: Country) => {
|
||||
setCountry(newCountry);
|
||||
};
|
||||
|
||||
const handlePhoneChange = (newValue: string | undefined) => {
|
||||
onChange(newValue);
|
||||
};
|
||||
|
||||
const countryOptions = useMemo(() => {
|
||||
return getCountries().map((country) => ({
|
||||
value: country,
|
||||
label: en[country],
|
||||
}));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor={name} className="text-sm font-medium text-(--text-primary)">
|
||||
{label}
|
||||
{required && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
|
||||
<div className={`custom-phone-input ${error ? 'error' : ''} ${disabled ? 'disabled' : ''}`}>
|
||||
<div className="PhoneInputCountry">
|
||||
<CountrySelectWithSearch
|
||||
value={country}
|
||||
onChange={handleCountryChange}
|
||||
options={countryOptions}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-1 min-w-0 border rounded-r-lg border-l-0 border-(--card-border) bg-(--background) focus-within:ring-2 focus-within:ring-blue-600/20 focus-within:border-blue-600 hover:border-blue-500 transition-all">
|
||||
<div className="pl-3 text-(--text-secondary) font-medium select-none text-sm">
|
||||
+{getCountryCallingCode(country)}
|
||||
</div>
|
||||
<Input
|
||||
country={country}
|
||||
value={value}
|
||||
onChange={handlePhoneChange}
|
||||
disabled={disabled}
|
||||
placeholder={placeholder}
|
||||
className="w-full h-full p-3 bg-transparent border-none outline-none text-sm text-(--text-primary) placeholder-(--text-secondary)/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-red-500 mt-1">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
import React, { forwardRef } from "react";
|
||||
|
||||
interface CustomRadioProps
|
||||
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
||||
label?: string;
|
||||
}
|
||||
|
||||
const CustomRadio = forwardRef<HTMLInputElement, CustomRadioProps>(
|
||||
({ label, className = "", disabled, ...props }, ref) => {
|
||||
return (
|
||||
<label
|
||||
className={`
|
||||
inline-flex items-center gap-2.5 cursor-pointer
|
||||
${disabled ? "cursor-not-allowed opacity-60" : ""}
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
<div className="relative flex items-center">
|
||||
<input
|
||||
ref={ref}
|
||||
type="radio"
|
||||
className="peer sr-only"
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
/>
|
||||
<div
|
||||
className={`
|
||||
w-5 h-5 border rounded-full
|
||||
transition-all duration-200
|
||||
flex items-center justify-center
|
||||
border-gray-300 bg-white
|
||||
peer-checked:border-blue-600 peer-checked:bg-blue-600
|
||||
peer-checked:[&>div]:opacity-100
|
||||
peer-hover:border-blue-600
|
||||
peer-focus:ring-2 peer-focus:ring-blue-600/20
|
||||
peer-disabled:bg-gray-100 peer-disabled:border-gray-200
|
||||
`}
|
||||
>
|
||||
<div className="w-2 h-2 bg-white rounded-full opacity-0 transition-opacity duration-200" />
|
||||
</div>
|
||||
</div>
|
||||
{label && (
|
||||
<span className="text-sm font-medium text-gray-700 select-none">
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default CustomRadio;
|
||||
@@ -0,0 +1,247 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { ChevronDown, X } from "lucide-react";
|
||||
|
||||
interface Option {
|
||||
label: string;
|
||||
value: string | number;
|
||||
}
|
||||
|
||||
interface CustomSearchableDropdownProps
|
||||
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
|
||||
label?: string;
|
||||
options: Option[];
|
||||
value?: string | number;
|
||||
onChange?: (value: string) => void;
|
||||
placeholder?: string;
|
||||
leftIcon?: React.ReactNode;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
const CustomSearchableDropdown = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
CustomSearchableDropdownProps
|
||||
>(
|
||||
(
|
||||
{
|
||||
label,
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "Select...",
|
||||
disabled,
|
||||
className = "",
|
||||
required,
|
||||
leftIcon,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [highlightedIndex, setHighlightedIndex] = useState(0);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Sync search term with selected value on mount or value update
|
||||
useEffect(() => {
|
||||
const selectedOption = options.find((opt) => String(opt.value) === String(value));
|
||||
if (selectedOption) {
|
||||
setSearchTerm(selectedOption.label);
|
||||
} else {
|
||||
setSearchTerm("");
|
||||
}
|
||||
}, [value, options]);
|
||||
|
||||
const filteredOptions = options.filter((option) =>
|
||||
option.label.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
dropdownRef.current &&
|
||||
!dropdownRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setIsOpen(false);
|
||||
// Revert to selected value label if closing without selection
|
||||
const selectedOption = options.find((opt) => String(opt.value) === String(value));
|
||||
if (selectedOption) {
|
||||
setSearchTerm(selectedOption.label);
|
||||
} else if (!value) {
|
||||
setSearchTerm("");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [value, options]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setHighlightedIndex(0);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchTerm(e.target.value);
|
||||
setIsOpen(true);
|
||||
if (e.target.value === "") {
|
||||
onChange?.(""); // Clear selection if input is cleared
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (!isOpen && e.key !== "Tab") {
|
||||
setIsOpen(true);
|
||||
}
|
||||
|
||||
switch (e.key) {
|
||||
case "ArrowDown":
|
||||
e.preventDefault();
|
||||
setHighlightedIndex((prev) =>
|
||||
prev < filteredOptions.length - 1 ? prev + 1 : prev
|
||||
);
|
||||
break;
|
||||
case "ArrowUp":
|
||||
e.preventDefault();
|
||||
setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : prev));
|
||||
break;
|
||||
case "Enter":
|
||||
e.preventDefault();
|
||||
if (isOpen && filteredOptions[highlightedIndex]) {
|
||||
handleSelect(filteredOptions[highlightedIndex]);
|
||||
}
|
||||
break;
|
||||
case "Escape":
|
||||
e.preventDefault();
|
||||
setIsOpen(false);
|
||||
break;
|
||||
case "Tab":
|
||||
setIsOpen(false);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelect = (option: Option) => {
|
||||
onChange?.(String(option.value));
|
||||
setSearchTerm(option.label);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const handleClear = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onChange?.("");
|
||||
setSearchTerm("");
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
const handleFocus = () => {
|
||||
if (!disabled) setIsOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-1.5" ref={ref}>
|
||||
{label && (
|
||||
<label className="text-sm font-medium text-(--text-primary)">
|
||||
{label}
|
||||
{required && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="relative w-full" ref={dropdownRef}>
|
||||
{leftIcon && (
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-(--text-secondary) pointer-events-none z-[99999]">
|
||||
{leftIcon}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<input
|
||||
{...props}
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleFocus}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
className={`
|
||||
w-full rounded-lg
|
||||
bg-(--background) text-(--text-primary) text-sm
|
||||
border ${props.error ? 'border-red-500' : 'border-(--card-border)'}
|
||||
py-3
|
||||
outline-none
|
||||
transition-all duration-200
|
||||
hover:border-blue-500
|
||||
focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20
|
||||
disabled:bg-(--background-secondary) disabled:text-(--text-secondary) disabled:cursor-not-allowed disabled:border-(--card-border)
|
||||
placeholder-(--text-secondary)/50
|
||||
${leftIcon ? "pl-10" : "px-3"}
|
||||
pr-16
|
||||
${className}
|
||||
`}
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => !disabled && setIsOpen(!isOpen)}
|
||||
className="text-(--text-secondary) hover:text-(--text-primary) cursor-pointer disabled:cursor-not-allowed p-0.5"
|
||||
disabled={disabled}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={`transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{searchTerm && !disabled && (
|
||||
<button type="button" onClick={handleClear} className="text-(--text-secondary) hover:text-(--text-primary) p-0.5">
|
||||
<X size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isOpen && !disabled && filteredOptions.length > 0 && (
|
||||
<div className="absolute z-[999] w-full mt-2 bg-(--card-bg) border border-(--card-border) rounded-lg shadow-lg max-h-60 overflow-y-auto flex flex-col">
|
||||
{filteredOptions.map((option, index) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => handleSelect(option)}
|
||||
onMouseEnter={() => setHighlightedIndex(index)}
|
||||
className={`
|
||||
w-full text-left px-4 py-2 text-sm
|
||||
transition-colors duration-150
|
||||
${String(option.value) === String(value)
|
||||
? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 font-medium"
|
||||
: highlightedIndex === index
|
||||
? "bg-(--table-row-hover) text-(--text-primary)"
|
||||
: "text-(--text-primary) hover:bg-(--table-row-hover)"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{isOpen && !disabled && filteredOptions.length === 0 && (
|
||||
<div className="absolute z-[999] w-full mt-2 bg-(--card-bg) border border-(--card-border) rounded-lg shadow-lg p-4 text-center text-sm text-(--text-secondary)">
|
||||
No results found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{props.error && <p className="text-xs text-red-500 mt-1">{props.error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
CustomSearchableDropdown.displayName = "CustomSearchableDropdown";
|
||||
|
||||
export default CustomSearchableDropdown;
|
||||
@@ -0,0 +1,81 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export type StatusVariant =
|
||||
| "success"
|
||||
| "error"
|
||||
| "warning"
|
||||
| "info"
|
||||
| "neutral";
|
||||
|
||||
interface CustomStatusProps {
|
||||
status: string; // The text to display
|
||||
variant?: StatusVariant; // Explicit variant
|
||||
className?: string; // Additional classes
|
||||
}
|
||||
|
||||
// Helper to deduce variant from common status strings if not provided
|
||||
const getVariantFromStatus = (status: string): StatusVariant => {
|
||||
const lower = status.toLowerCase();
|
||||
|
||||
if (["active", "success", "completed", "paid", "delivered", "ready to ship"].some(s => lower.includes(s))) return "success";
|
||||
if (["inactive", "failed", "rejected", "error", "deleted", "banned"].some(s => lower.includes(s))) return "error";
|
||||
if (["pending", "processing", "draft", "warning", "hold", "ready", "packed"].some(s => lower.includes(s))) return "warning";
|
||||
if (["info", "shipped", "in_transit", "labeled"].some(s => lower.includes(s))) return "info";
|
||||
|
||||
return "neutral";
|
||||
};
|
||||
|
||||
const CustomStatus: React.FC<CustomStatusProps> = ({
|
||||
status,
|
||||
variant,
|
||||
className = ""
|
||||
}) => {
|
||||
const { t } = useTranslation(['orders', 'common']);
|
||||
const finalVariant = variant || getVariantFromStatus(status);
|
||||
|
||||
// Helper to map backend status (e.g. READY_TO_SHIP) to translation key (e.g. readyToShip)
|
||||
const getTranslationKey = (statusStr: string) => {
|
||||
const normalize = (s: string) => s.toUpperCase().replace(/\s+/g, '_');
|
||||
const normalized = normalize(statusStr);
|
||||
|
||||
const map: Record<string, string> = {
|
||||
"READY_TO_SHIP": "readyToShip",
|
||||
"IN_TRANSIT": "inTransit",
|
||||
"READY_FOR_TRANSIT": "readyForTransit",
|
||||
"PICKUP_SCHEDULED": "pickupScheduled",
|
||||
"NEW": "new",
|
||||
"READY": "ready",
|
||||
"SHIPPED": "shipped",
|
||||
"DELIVERED": "delivered"
|
||||
};
|
||||
|
||||
if (map[normalized]) return map[normalized];
|
||||
|
||||
return statusStr.toLowerCase().replace(/ (\w)/g, (_match, p1) => p1.toUpperCase());
|
||||
};
|
||||
|
||||
const translatedStatus = t(`status.${getTranslationKey(status)}`, { defaultValue: status });
|
||||
|
||||
const styles = {
|
||||
success: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 border-green-200 dark:border-green-800",
|
||||
error: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 border-red-200 dark:border-red-800",
|
||||
warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800",
|
||||
info: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300 border-blue-200 dark:border-blue-800",
|
||||
neutral: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 border-gray-200 dark:border-gray-700",
|
||||
};
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`
|
||||
inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border
|
||||
${styles[finalVariant]}
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
{translatedStatus}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomStatus;
|
||||
@@ -0,0 +1,49 @@
|
||||
import React, { forwardRef } from "react";
|
||||
|
||||
interface CustomSwitchProps
|
||||
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
||||
label?: string;
|
||||
}
|
||||
|
||||
const CustomSwitch = forwardRef<HTMLInputElement, CustomSwitchProps>(
|
||||
({ label, className = "", disabled, ...props }, ref) => {
|
||||
return (
|
||||
<label
|
||||
className={`
|
||||
inline-flex items-center gap-3 cursor-pointer
|
||||
${disabled ? "cursor-not-allowed opacity-60" : ""}
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
<div className="relative inline-flex items-center">
|
||||
<input
|
||||
ref={ref}
|
||||
type="checkbox"
|
||||
className="peer sr-only"
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
/>
|
||||
<div
|
||||
className={`
|
||||
w-11 h-6 bg-gray-200 rounded-full
|
||||
peer-focus:ring-2 peer-focus:ring-blue-600/20
|
||||
peer-checked:after:translate-x-full peer-checked:after:border-white
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:border-gray-300 after:border after:rounded-full
|
||||
after:h-5 after:w-5 after:transition-all
|
||||
peer-checked:bg-blue-600
|
||||
peer-disabled:bg-gray-100
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
{label && (
|
||||
<span className="text-sm font-medium text-gray-700 select-none">
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default CustomSwitch;
|
||||
@@ -0,0 +1,510 @@
|
||||
import * as React from "react";
|
||||
import CustomButton from "./CustomButton";
|
||||
import CustomInput from "./CustomInput";
|
||||
import { Upload, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export function cn(...parts: Array<string | false | null | undefined>) {
|
||||
return parts.filter(Boolean).join(" ");
|
||||
}
|
||||
|
||||
export type Primitive =
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| null
|
||||
| undefined
|
||||
| Date
|
||||
| Record<string, unknown>;
|
||||
|
||||
export type ColumnDef<T> = {
|
||||
key: keyof T | string;
|
||||
header: React.ReactNode;
|
||||
exportHeader?: string;
|
||||
render?: (row: T) => React.ReactNode;
|
||||
searchable?: boolean;
|
||||
cellClassName?: string;
|
||||
};
|
||||
|
||||
export type DataTableProps<T extends Record<string, unknown>> = {
|
||||
data: T[];
|
||||
columns: Array<ColumnDef<T>>;
|
||||
defaultPageSize?: number;
|
||||
pageSizeOptions?: number[];
|
||||
exportFileName?: string;
|
||||
className?: string;
|
||||
getRowId?: (row: T, index: number) => string | number;
|
||||
filterControls?: React.ReactNode;
|
||||
|
||||
enableSearchDropdown?: boolean;
|
||||
buildSuggestionLabel?: (row: T) => string;
|
||||
onSuggestionSelect?: (row: T) => void;
|
||||
maxSuggestions?: number;
|
||||
highlightClassName?: string;
|
||||
|
||||
manualPagination?: boolean;
|
||||
manualFiltering?: boolean;
|
||||
totalRows?: number;
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
search?: string;
|
||||
onPageChange?: (page: number) => void;
|
||||
onPageSizeChange?: (pageSize: number) => void;
|
||||
onSearchChange?: (search: string) => void;
|
||||
|
||||
searchInputRef?: React.RefObject<HTMLInputElement | null>;
|
||||
maxHeight?: string;
|
||||
isLoading?: boolean;
|
||||
};
|
||||
|
||||
function toCSVValue(v: unknown) {
|
||||
if (v == null) return "";
|
||||
const text =
|
||||
v instanceof Date
|
||||
? v.toISOString()
|
||||
: typeof v === "object"
|
||||
? JSON.stringify(v)
|
||||
: String(v);
|
||||
const needsWrap = /[",\n]/.test(text);
|
||||
return needsWrap ? `"${text.replace(/"/g, '""')}"` : text;
|
||||
}
|
||||
|
||||
function downloadCSV(fileName: string, rows: string[]) {
|
||||
const blob = new Blob([rows.join("\n")], { type: "text/csv;charset=utf-8;" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = fileName;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
export function DataTable<T extends Record<string, unknown>>(
|
||||
props: DataTableProps<T>
|
||||
) {
|
||||
const { t } = useTranslation('common');
|
||||
const {
|
||||
data,
|
||||
columns,
|
||||
defaultPageSize = 10,
|
||||
pageSizeOptions = [5, 10, 20, 50],
|
||||
exportFileName = "export.csv",
|
||||
className,
|
||||
getRowId,
|
||||
filterControls,
|
||||
enableSearchDropdown = false,
|
||||
buildSuggestionLabel,
|
||||
onSuggestionSelect,
|
||||
maxSuggestions = 8,
|
||||
highlightClassName = "ring-2 ring-indigo-400",
|
||||
manualPagination = false,
|
||||
manualFiltering = false,
|
||||
totalRows,
|
||||
page: controlledPage,
|
||||
pageSize: controlledPageSize,
|
||||
search: controlledSearch,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
onSearchChange,
|
||||
searchInputRef,
|
||||
maxHeight = "70vh", // Default max height
|
||||
isLoading,
|
||||
} = props;
|
||||
|
||||
const [internalSearch, setInternalSearch] = React.useState("");
|
||||
const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize);
|
||||
const [internalPage, setInternalPage] = React.useState(1);
|
||||
|
||||
const search = manualFiltering && controlledSearch !== undefined ? controlledSearch : internalSearch;
|
||||
const pageSize = manualPagination && controlledPageSize !== undefined ? controlledPageSize : internalPageSize;
|
||||
const page = manualPagination && controlledPage !== undefined ? controlledPage : internalPage;
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!manualPagination) {
|
||||
setInternalPage(1);
|
||||
}
|
||||
}, [internalSearch, internalPageSize, manualPagination]);
|
||||
|
||||
const searchableColumns = React.useMemo(
|
||||
() => columns.filter((c) => c.searchable !== false),
|
||||
[columns]
|
||||
);
|
||||
|
||||
const getCellValue = React.useCallback(
|
||||
(row: T, key: ColumnDef<T>["key"]) =>
|
||||
(row as Record<string, unknown>)[String(key)],
|
||||
[]
|
||||
);
|
||||
|
||||
const normalizedText = (v: unknown) => {
|
||||
if (v instanceof Date) return v.toISOString();
|
||||
if (v == null) return "";
|
||||
return String(v);
|
||||
};
|
||||
|
||||
const filtered = React.useMemo(() => {
|
||||
if (manualFiltering) return data;
|
||||
const query = search.trim().toLowerCase();
|
||||
return data.filter((row) => {
|
||||
if (!query) return true;
|
||||
return searchableColumns.some((c) => {
|
||||
const text = normalizedText(getCellValue(row, c.key));
|
||||
return text.toLowerCase().includes(query);
|
||||
});
|
||||
});
|
||||
}, [data, getCellValue, search, searchableColumns, manualFiltering]);
|
||||
|
||||
const total = manualPagination && totalRows !== undefined ? totalRows : filtered.length;
|
||||
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||||
const clampedPage = Math.min(page, totalPages);
|
||||
const start = (clampedPage - 1) * pageSize;
|
||||
const pageRows = manualPagination ? data : filtered.slice(start, start + pageSize);
|
||||
|
||||
const exportCurrentView = () => {
|
||||
const header = columns
|
||||
.map((c) =>
|
||||
toCSVValue(
|
||||
c.exportHeader ??
|
||||
(typeof c.header === "string" ? c.header : "")
|
||||
)
|
||||
)
|
||||
.join(",");
|
||||
const lines = pageRows.map((row) =>
|
||||
columns
|
||||
.map((c) => {
|
||||
const value = c.render ? c.render(row) : getCellValue(row, c.key);
|
||||
if (typeof value === "string" || typeof value === "number")
|
||||
return toCSVValue(value);
|
||||
return toCSVValue(getCellValue(row, c.key));
|
||||
})
|
||||
.join(",")
|
||||
);
|
||||
downloadCSV(exportFileName, [header, ...lines]);
|
||||
};
|
||||
|
||||
const containerRef = React.useRef<HTMLDivElement | null>(null);
|
||||
const [showSuggestions, setShowSuggestions] = React.useState(false);
|
||||
const [activeIndex, setActiveIndex] = React.useState(-1);
|
||||
const [highlightedId, setHighlightedId] = React.useState<string | number | null>(null);
|
||||
|
||||
const defaultLabelBuilder = React.useCallback(
|
||||
(row: T) => {
|
||||
const parts = searchableColumns
|
||||
.map((c) => normalizedText(getCellValue(row, c.key)))
|
||||
.filter(Boolean);
|
||||
return parts.join(" • ");
|
||||
},
|
||||
[getCellValue, searchableColumns]
|
||||
);
|
||||
|
||||
const suggestionLabel = buildSuggestionLabel ?? defaultLabelBuilder;
|
||||
|
||||
const suggestions = React.useMemo(() => {
|
||||
if (!enableSearchDropdown) return [];
|
||||
const q = search.trim().toLowerCase();
|
||||
if (!q) return [];
|
||||
const scored = data
|
||||
.map((row, idx) => {
|
||||
const label = suggestionLabel(row);
|
||||
const lower = label.toLowerCase();
|
||||
if (!lower.includes(q)) return null;
|
||||
const starts = lower.startsWith(q) ? 0 : 1;
|
||||
return { row, idx, label, score: starts };
|
||||
})
|
||||
.filter(Boolean) as Array<{
|
||||
row: T;
|
||||
idx: number;
|
||||
label: string;
|
||||
score: number;
|
||||
}>;
|
||||
|
||||
scored.sort((a, b) => a.score - b.score || a.label.localeCompare(b.label));
|
||||
return scored.slice(0, maxSuggestions);
|
||||
}, [enableSearchDropdown, search, data, maxSuggestions, suggestionLabel]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!enableSearchDropdown) return;
|
||||
const onDocClick = (e: MouseEvent) => {
|
||||
if (!containerRef.current?.contains(e.target as Node)) {
|
||||
setShowSuggestions(false);
|
||||
setActiveIndex(-1);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", onDocClick);
|
||||
return () => document.removeEventListener("mousedown", onDocClick);
|
||||
}, [enableSearchDropdown]);
|
||||
|
||||
const jumpToRow = React.useCallback(
|
||||
(absoluteIndex: number, row: T) => {
|
||||
const targetPage = Math.max(1, Math.ceil((absoluteIndex + 1) / pageSize));
|
||||
if (manualPagination && onPageChange) {
|
||||
onPageChange(targetPage);
|
||||
} else {
|
||||
setInternalPage(targetPage);
|
||||
}
|
||||
const id = getRowId?.(row, absoluteIndex) ?? String(absoluteIndex);
|
||||
setHighlightedId(id);
|
||||
window.setTimeout(() => setHighlightedId(null), 1600);
|
||||
},
|
||||
[getRowId, pageSize, manualPagination, onPageChange]
|
||||
);
|
||||
|
||||
const selectSuggestion = React.useCallback(
|
||||
(s: { row: T; idx: number; label: string }) => {
|
||||
if (manualFiltering && onSearchChange) {
|
||||
onSearchChange(s.label);
|
||||
} else {
|
||||
setInternalSearch(s.label);
|
||||
}
|
||||
setShowSuggestions(false);
|
||||
setActiveIndex(-1);
|
||||
jumpToRow(s.idx, s.row);
|
||||
onSuggestionSelect?.(s.row);
|
||||
},
|
||||
[jumpToRow, onSuggestionSelect, manualFiltering, onSearchChange]
|
||||
);
|
||||
|
||||
const onSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (!enableSearchDropdown || !showSuggestions) return;
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
setActiveIndex((i) => Math.max(i - 1, 0));
|
||||
} else if (e.key === "Enter" && activeIndex >= 0) {
|
||||
e.preventDefault();
|
||||
const chosen = suggestions[activeIndex];
|
||||
selectSuggestion({ row: chosen.row, idx: chosen.idx, label: chosen.label });
|
||||
} else if (e.key === "Escape") {
|
||||
setShowSuggestions(false);
|
||||
setActiveIndex(-1);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] shadow-md",
|
||||
className
|
||||
)}
|
||||
ref={containerRef}
|
||||
>
|
||||
<div className="flex items-center justify-between p-4 bg-[var(--card-bg)] border-b border-[var(--card-border)] rounded-t-lg">
|
||||
<div className="relative w-full max-w-sm">
|
||||
<CustomInput
|
||||
label=""
|
||||
value={search}
|
||||
onChange={(e) => {
|
||||
const newValue = e.target.value;
|
||||
if (manualFiltering && onSearchChange) {
|
||||
onSearchChange(newValue);
|
||||
} else {
|
||||
setInternalSearch(newValue);
|
||||
}
|
||||
if (enableSearchDropdown) setShowSuggestions(true);
|
||||
}}
|
||||
onKeyDown={onSearchKeyDown}
|
||||
onFocus={() => {
|
||||
if (enableSearchDropdown && search.trim()) setShowSuggestions(true);
|
||||
}}
|
||||
placeholder={t('actions.search') + "..."}
|
||||
className="mb-0 text-[var(--text-primary)]"
|
||||
ref={searchInputRef}
|
||||
/>
|
||||
{enableSearchDropdown &&
|
||||
showSuggestions &&
|
||||
suggestions.length > 0 && (
|
||||
<div className="absolute z-20 mt-1 w-full overflow-hidden rounded-md border border-[var(--card-border)] bg-[var(--card-bg)] shadow-lg">
|
||||
<ul className="max-h-72 overflow-auto py-1 text-sm">
|
||||
{suggestions.map((s, i) => (
|
||||
<li
|
||||
key={(getRowId?.(s.row, s.idx) ?? s.label) as React.Key}
|
||||
className={cn(
|
||||
"cursor-pointer px-3 py-2 hover:bg-[var(--table-row-hover)]",
|
||||
i === activeIndex && "bg-[var(--table-row-hover)]"
|
||||
)}
|
||||
onMouseEnter={() => setActiveIndex(i)}
|
||||
onMouseLeave={() => setActiveIndex(-1)}
|
||||
onClick={() =>
|
||||
selectSuggestion({
|
||||
row: s.row,
|
||||
idx: s.idx,
|
||||
label: s.label,
|
||||
})
|
||||
}
|
||||
>
|
||||
<div className="truncate text-[var(--text-primary)]">{s.label}</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{filterControls}
|
||||
<CustomButton
|
||||
variant="outlined"
|
||||
size="sm"
|
||||
onClick={exportCurrentView}
|
||||
leftIcon={<Upload size={16} />}
|
||||
>
|
||||
{t('actions.export')}
|
||||
</CustomButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="max-w-full overflow-x-auto overflow-y-auto relative [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[#1D2A4B] [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-[#1D2A4B]/80 [&::-webkit-scrollbar:vertical]:hidden"
|
||||
style={{ maxHeight }}
|
||||
>
|
||||
<table className="min-w-max w-full text-sm">
|
||||
<thead className="bg-[var(--table-header-bg)] sticky top-0 z-10 shadow-sm">
|
||||
<tr className="text-left text-xs uppercase tracking-wider text-[var(--text-secondary)]">
|
||||
{columns.map((c, idx) => (
|
||||
<th
|
||||
key={String(c.key) + idx}
|
||||
className={cn(
|
||||
"whitespace-nowrap px-6 py-3 font-medium bg-[var(--table-header-bg)] text-[var(--text-secondary)]",
|
||||
c.cellClassName
|
||||
)}
|
||||
>
|
||||
{c.header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[var(--table-border)] text-[var(--text-primary)]">
|
||||
{isLoading ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={columns.length}
|
||||
className="px-6 py-24 text-center text-[var(--text-secondary)]"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<svg className="animate-spin h-8 w-8 text-blue-500 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<p>{t('common.loading')}</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : pageRows.length > 0 ? (
|
||||
pageRows.map((row, i) => {
|
||||
const absoluteIndex = start + i;
|
||||
const id = getRowId?.(row, absoluteIndex) ?? `${absoluteIndex}`;
|
||||
const isHighlighted = highlightedId === id;
|
||||
return (
|
||||
<tr
|
||||
key={id}
|
||||
className={cn(
|
||||
"bg-[var(--card-bg)] hover:bg-[var(--table-row-hover)] transition-colors",
|
||||
isHighlighted && highlightClassName
|
||||
)}
|
||||
>
|
||||
{columns.map((c, ci) => {
|
||||
const content = c.render
|
||||
? c.render(row)
|
||||
: (getCellValue(row, c.key) as React.ReactNode);
|
||||
return (
|
||||
<td
|
||||
key={String(c.key) + ci}
|
||||
className={cn(
|
||||
"whitespace-nowrap px-6 py-4 text-[var(--text-primary)]",
|
||||
c.cellClassName
|
||||
)}
|
||||
>
|
||||
{content ?? ""}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={columns.length}
|
||||
className="px-6 py-12 text-center text-[var(--text-secondary)]"
|
||||
>
|
||||
{t('common.noData')}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 bg-[var(--card-bg)] border-t border-[var(--card-border)] rounded-b-lg">
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
{t('common.showing')}{" "}
|
||||
<span className="font-medium text-[var(--text-primary)]">{total === 0 ? 0 : start + 1}</span> -{" "}
|
||||
<span className="font-medium text-[var(--text-primary)]">{start + pageRows.length}</span> {t('common.of')}{" "}
|
||||
<span className="font-medium text-[var(--text-primary)]">{total}</span> {t('common.entries')}
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-[var(--text-secondary)]">{t('common.rowsPerPage')}:</span>
|
||||
<select
|
||||
value={pageSize}
|
||||
onChange={(e) => {
|
||||
const newSize = Number(e.target.value);
|
||||
if (manualPagination && onPageSizeChange) {
|
||||
onPageSizeChange(newSize);
|
||||
} else {
|
||||
setInternalPageSize(newSize);
|
||||
}
|
||||
}}
|
||||
className="rounded-md border border-[var(--card-border)] text-sm py-1.5 px-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-[var(--card-bg)] text-[var(--text-primary)]"
|
||||
>
|
||||
{pageSizeOptions.map((ps) => (
|
||||
<option key={ps} value={ps}>
|
||||
{ps}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
const newPage = Math.max(1, page - 1);
|
||||
if (manualPagination && onPageChange) {
|
||||
onPageChange(newPage);
|
||||
} else {
|
||||
setInternalPage((p: number) => Math.max(1, p - 1));
|
||||
}
|
||||
}}
|
||||
disabled={clampedPage === 1}
|
||||
className="flex items-center justify-center h-9 w-9 text-sm border border-[var(--card-border)] rounded-md hover:bg-[var(--table-row-hover)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-[var(--text-primary)]"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
{t('common.page')} <span className="font-medium text-[var(--text-primary)]">{clampedPage}</span> {t('common.of')}{" "}
|
||||
<span className="font-medium text-[var(--text-primary)]">{totalPages}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
const newPage = Math.min(totalPages, page + 1);
|
||||
if (manualPagination && onPageChange) {
|
||||
onPageChange(newPage);
|
||||
} else {
|
||||
setInternalPage((p: number) => Math.min(totalPages, p + 1));
|
||||
}
|
||||
}}
|
||||
disabled={clampedPage === totalPages}
|
||||
className="flex items-center justify-center h-9 w-9 text-sm border border-[var(--card-border)] rounded-md hover:bg-[var(--table-row-hover)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-[var(--text-primary)]"
|
||||
>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DataTable;
|
||||
@@ -0,0 +1,130 @@
|
||||
import React, { useEffect, useId, useMemo, useState } from "react";
|
||||
|
||||
export type TabItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
content: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
badge?: string | number;
|
||||
icon?: React.ReactNode;
|
||||
};
|
||||
|
||||
interface CustomTabsProps {
|
||||
tabs: TabItem[];
|
||||
value?: string;
|
||||
defaultValue?: string;
|
||||
onChange?: (tabId: string) => void;
|
||||
className?: string;
|
||||
tabListClassName?: string;
|
||||
tabClassName?: string;
|
||||
activeTabClassName?: string;
|
||||
contentClassName?: string;
|
||||
}
|
||||
|
||||
const CustomTabs: React.FC<CustomTabsProps> = ({
|
||||
tabs,
|
||||
value,
|
||||
defaultValue,
|
||||
onChange,
|
||||
className = "",
|
||||
tabListClassName = "",
|
||||
tabClassName = "",
|
||||
activeTabClassName = "",
|
||||
contentClassName = "",
|
||||
}) => {
|
||||
const defaultTabId = tabs[0]?.id || "";
|
||||
const [internalValue, setInternalValue] = useState(defaultValue || defaultTabId);
|
||||
const activeValue = value ?? internalValue;
|
||||
const baseId = useId();
|
||||
|
||||
const activeTab = useMemo(
|
||||
() => tabs.find((tab) => tab.id === activeValue) ?? tabs[0],
|
||||
[tabs, activeValue]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!tabs.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!tabs.some((tab) => tab.id === activeValue)) {
|
||||
setInternalValue(tabs[0].id);
|
||||
}
|
||||
}, [tabs, activeValue]);
|
||||
|
||||
const handleTabClick = (tabId: string, disabled?: boolean) => {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (value === undefined) {
|
||||
setInternalValue(tabId);
|
||||
}
|
||||
|
||||
onChange?.(tabId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`w-full ${className}`}>
|
||||
<div
|
||||
role="tablist"
|
||||
aria-orientation="horizontal"
|
||||
className={`flex overflow-x-auto whitespace-nowrap scrollbar-hide pb-1 items-center gap-2 border-b border-(--card-border) ${tabListClassName}`}
|
||||
>
|
||||
{tabs.map((tab) => {
|
||||
const isActive = tab.id === activeTab?.id;
|
||||
const tabId = `${baseId}-tab-${tab.id}`;
|
||||
const panelId = `${baseId}-panel-${tab.id}`;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
id={tabId}
|
||||
role="tab"
|
||||
type="button"
|
||||
aria-controls={panelId}
|
||||
aria-selected={isActive}
|
||||
disabled={tab.disabled}
|
||||
onClick={() => handleTabClick(tab.id, tab.disabled)}
|
||||
className={`
|
||||
relative inline-flex items-center gap-2 rounded-t-lg border border-transparent px-4 py-2 text-sm font-medium
|
||||
transition-colors duration-200
|
||||
${isActive ? "border-(--card-border) text-(--text-primary)" : "text-(--text-secondary) hover:text-(--text-primary)"}
|
||||
${tab.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}
|
||||
${tabClassName}
|
||||
${isActive ? activeTabClassName : ""}
|
||||
`}
|
||||
>
|
||||
{tab.icon && <span className="text-gray-500">{tab.icon}</span>}
|
||||
<span>{tab.label}</span>
|
||||
{tab.badge !== undefined && tab.badge !== null && (
|
||||
<span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
|
||||
{tab.badge}
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`
|
||||
pointer-events-none absolute -bottom-[1px] left-3 right-3 h-0.5 rounded-full
|
||||
transition-opacity duration-200
|
||||
${isActive ? "bg-current opacity-100" : "bg-transparent opacity-0"}
|
||||
`}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="tabpanel"
|
||||
id={`${baseId}-panel-${activeTab?.id ?? "tab"}`}
|
||||
aria-labelledby={`${baseId}-tab-${activeTab?.id ?? "tab"}`}
|
||||
className={`mt-4 ${contentClassName}`}
|
||||
>
|
||||
{activeTab?.content}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomTabs;
|
||||
@@ -0,0 +1,78 @@
|
||||
import React, { forwardRef } from "react";
|
||||
|
||||
interface CustomTextAreaProps
|
||||
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
||||
label?: string;
|
||||
leftIcon?: React.ReactNode;
|
||||
rightIcon?: React.ReactNode;
|
||||
maxLength?: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
const CustomTextArea = forwardRef<HTMLTextAreaElement, CustomTextAreaProps>(
|
||||
(
|
||||
{
|
||||
label,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
maxLength,
|
||||
disabled,
|
||||
className = "",
|
||||
rows = 4,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-1.5">
|
||||
{label && (
|
||||
<label className="text-sm font-semibold text-gray-700">
|
||||
{label}
|
||||
{props.required && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="relative w-full">
|
||||
{leftIcon && (
|
||||
<span className="absolute left-3 top-3 text-slate-400">
|
||||
{leftIcon}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<textarea
|
||||
ref={ref}
|
||||
rows={rows}
|
||||
maxLength={maxLength}
|
||||
disabled={disabled}
|
||||
className={`
|
||||
w-full rounded-lg
|
||||
bg-(--background) text-(--text-primary) text-sm
|
||||
border ${props.error ? 'border-red-500' : 'border-(--card-border)'}
|
||||
px-3 py-3
|
||||
outline-none
|
||||
transition-all duration-200
|
||||
hover:border-blue-500
|
||||
focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20
|
||||
disabled:bg-(--background-secondary) disabled:text-(--text-secondary) disabled:cursor-not-allowed disabled:border-(--card-border)
|
||||
placeholder-(--text-secondary)/50
|
||||
resize-y
|
||||
${leftIcon ? "pl-10" : ""}
|
||||
${rightIcon ? "pr-10" : ""}
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
{rightIcon && (
|
||||
<span className="absolute right-3 top-3 text-slate-400">
|
||||
{rightIcon}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{props.error && <p className="text-xs text-red-500 mt-1">{props.error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default CustomTextArea;
|
||||
@@ -0,0 +1,48 @@
|
||||
import CustomInput from "./CustomInput";
|
||||
import CustomTextArea from "./CustomTextArea";
|
||||
export { default as CustomBackButton } from "./CustomBackButton";
|
||||
import CustomDropdown from "./CustomDropdown";
|
||||
import CustomSearchableDropdown from "./CustomSearchableDropdown";
|
||||
import CustomMultiSelect from "./CustomMultiSelect";
|
||||
import CustomFileUploader from "./CustomFileUploader";
|
||||
import CustomCheckBox from "./CustomCheckBox";
|
||||
import CustomTable from "./CustomTable";
|
||||
import CustomButton from "./CustomButton";
|
||||
import CustomRadio from "./CustomRadio";
|
||||
import CustomSwitch from "./CustomSwitch";
|
||||
import CustomModal from "./CustomModal";
|
||||
import CustomConfirmationModal from "./CustomConfirmationModal";
|
||||
import CustomDatePicker from "./CustomDatePicker";
|
||||
import CustomDateTimePicker from "./CustomDateTimePicker";
|
||||
import CustomOTPInput from "./CustomOTPInput";
|
||||
import CustomTabs from "./CustomTabs";
|
||||
import CustomIncrement from "./CustomIncrement";
|
||||
import CustomLoader from "./CustomLoader";
|
||||
import CustomActionMenu, { CustomActionItem } from "./CustomActionMenu";
|
||||
import CustomStatus from "./CustomStatus";
|
||||
|
||||
export {
|
||||
CustomInput,
|
||||
CustomTextArea,
|
||||
CustomDropdown,
|
||||
CustomSearchableDropdown,
|
||||
CustomMultiSelect,
|
||||
CustomFileUploader,
|
||||
CustomCheckBox,
|
||||
CustomTable,
|
||||
CustomButton,
|
||||
CustomRadio,
|
||||
CustomSwitch,
|
||||
CustomModal,
|
||||
CustomConfirmationModal,
|
||||
CustomDatePicker,
|
||||
CustomDateTimePicker,
|
||||
CustomOTPInput,
|
||||
CustomTabs,
|
||||
CustomIncrement,
|
||||
CustomLoader,
|
||||
CustomActionMenu,
|
||||
CustomActionItem,
|
||||
CustomStatus,
|
||||
|
||||
};
|
||||
@@ -0,0 +1,201 @@
|
||||
import {
|
||||
Menu,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useSidebar } from "../../context/SidebarContext";
|
||||
import { useAuth } from "../../context/AuthContext";
|
||||
import { authApi } from "../../application/Authentication/AuthApi";
|
||||
import { clearAuthCookies } from "../../lib/authCookies";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const AppHeader: React.FC = () => {
|
||||
const { t } = useTranslation(['profile', 'common']);
|
||||
const navigate = useNavigate();
|
||||
const { user, } = useAuth();
|
||||
const { toggleMobileSidebar } = useSidebar();
|
||||
|
||||
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
|
||||
const userMenuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await authApi.logout();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
clearAuthCookies();
|
||||
navigate("/signin");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (!userMenuRef.current?.contains(event.target as Node)) {
|
||||
setIsUserMenuOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const fullName = user
|
||||
? `${user.first_name || ""} ${user.last_name || ""}`.trim() || t('common:common.loading')
|
||||
: t('common:common.loading');
|
||||
|
||||
const initials =
|
||||
user?.first_name && user?.last_name
|
||||
? `${user.first_name[0]}${user.last_name[0]}`
|
||||
: "U";
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-40 flex w-full bg-[var(--header-bg)] border-b border-[var(--header-border)] transition-colors duration-200">
|
||||
<div className="flex flex-grow items-center gap-4 px-4 py-3 lg:px-6">
|
||||
{/* LEFT: Mobile Toggle & Brand (Mobile only) */}
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
className="flex items-center justify-center p-2 text-[var(--header-text)] hover:bg-[var(--header-border)] rounded-lg lg:hidden transition-colors"
|
||||
onClick={toggleMobileSidebar}
|
||||
aria-label="Toggle Sidebar"
|
||||
>
|
||||
<Menu size={24} />
|
||||
</button>
|
||||
|
||||
<Link to="/" className="lg:hidden flex items-center gap-2">
|
||||
<span className="font-bold text-[var(--header-text)] text-lg">F&L</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Logistics Network Pattern - Multi-layer Design */}
|
||||
<div className="hidden lg:flex items-center overflow-hidden">
|
||||
{/* ... existing SVG content ... */}
|
||||
<svg className="w-80 h-10" viewBox="0 0 320 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Background grid pattern */}
|
||||
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="currentColor" strokeOpacity="0.1" strokeWidth="0.5" className="text-[var(--header-text)]" />
|
||||
</pattern>
|
||||
<rect width="320" height="40" fill="url(#grid)" />
|
||||
|
||||
{/* Multiple route paths */}
|
||||
<path d="M0 30 C40 30, 60 10, 100 10 S160 30, 200 20 S260 10, 320 15" stroke="currentColor" strokeOpacity="0.2" strokeWidth="2" fill="none" className="text-[var(--header-text)]" />
|
||||
<path d="M0 20 C50 15, 80 25, 120 20 S180 10, 220 15 S280 25, 320 20" stroke="currentColor" strokeOpacity="0.3" strokeWidth="1.5" fill="none" className="text-[var(--header-text)]" />
|
||||
<path d="M0 10 C30 15, 70 5, 110 12 S170 20, 210 12 S270 8, 320 12" stroke="currentColor" strokeOpacity="0.4" strokeWidth="1" strokeDasharray="4 2" fill="none" className="text-[var(--header-text)]" />
|
||||
|
||||
{/* Hub nodes with glow effect */}
|
||||
<circle cx="40" cy="25" r="6" fill="currentColor" fillOpacity="0.1" stroke="currentColor" strokeOpacity="0.4" strokeWidth="1.5" className="text-[var(--header-text)]" />
|
||||
<circle cx="40" cy="25" r="3" fill="currentColor" className="text-[var(--primary)]" />
|
||||
|
||||
<circle cx="120" cy="15" r="8" fill="currentColor" fillOpacity="0.1" stroke="currentColor" strokeOpacity="0.5" strokeWidth="2" className="text-[var(--header-text)]" />
|
||||
<circle cx="120" cy="15" r="4" fill="currentColor" className="text-[var(--primary)]" />
|
||||
|
||||
<circle cx="200" cy="18" r="6" fill="currentColor" fillOpacity="0.1" stroke="currentColor" strokeOpacity="0.4" strokeWidth="1.5" className="text-[var(--header-text)]" />
|
||||
<circle cx="200" cy="18" r="3" fill="currentColor" className="text-[var(--primary)]" />
|
||||
|
||||
<circle cx="280" cy="16" r="5" fill="currentColor" fillOpacity="0.1" stroke="currentColor" strokeOpacity="0.3" strokeWidth="1" className="text-[var(--header-text)]" />
|
||||
<circle cx="280" cy="16" r="2.5" fill="currentColor" className="text-[var(--primary)]" />
|
||||
|
||||
{/* Package icons */}
|
||||
<g transform="translate(70, 22)">
|
||||
<rect width="10" height="8" rx="1" fill="currentColor" fillOpacity="0.2" stroke="currentColor" strokeWidth="0.8" className="text-[var(--header-text)]" />
|
||||
<line x1="0" y1="3" x2="10" y2="3" stroke="currentColor" strokeWidth="0.5" className="text-[var(--header-text)]" />
|
||||
<line x1="5" y1="3" x2="5" y2="8" stroke="currentColor" strokeWidth="0.5" className="text-[var(--header-text)]" />
|
||||
</g>
|
||||
|
||||
<g transform="translate(160, 8)">
|
||||
<rect width="10" height="8" rx="1" fill="currentColor" fillOpacity="0.2" stroke="currentColor" strokeWidth="0.8" className="text-(--header-text)" />
|
||||
<line x1="0" y1="3" x2="10" y2="3" stroke="currentColor" strokeWidth="0.5" className="text-(--header-text)" />
|
||||
<line x1="5" y1="3" x2="5" y2="8" stroke="currentColor" strokeWidth="0.5" className="text-(--header-text)" />
|
||||
</g>
|
||||
|
||||
<g transform="translate(240, 20)">
|
||||
<rect width="8" height="6" rx="1" fill="currentColor" fillOpacity="0.2" stroke="currentColor" strokeWidth="0.8" className="text-(--header-text)" />
|
||||
<line x1="0" y1="2" x2="8" y2="2" stroke="currentColor" strokeWidth="0.5" className="text-(--header-text)" />
|
||||
</g>
|
||||
|
||||
{/* Connecting dots */}
|
||||
<circle cx="20" cy="22" r="1.5" fill="currentColor" fillOpacity="0.5" className="text-(--header-text)" />
|
||||
<circle cx="90" cy="12" r="1.5" fill="currentColor" fillOpacity="0.5" className="text-(--header-text)" />
|
||||
<circle cx="150" cy="22" r="1.5" fill="currentColor" fillOpacity="0.5" className="text-(--header-text)" />
|
||||
<circle cx="230" cy="14" r="1.5" fill="currentColor" fillOpacity="0.5" className="text-(--header-text)" />
|
||||
<circle cx="300" cy="18" r="1.5" fill="currentColor" fillOpacity="0.5" className="text-(--header-text)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* RIGHT: Actions */}
|
||||
<div className="flex items-center gap-2 sm:gap-4 ml-auto">
|
||||
|
||||
{/* User Menu */}
|
||||
<div className="relative" ref={userMenuRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsUserMenuOpen((prev) => !prev)}
|
||||
className="
|
||||
flex items-center gap-2
|
||||
pl-2 pr-1 py-1.5
|
||||
rounded-lg
|
||||
hover:bg-(--header-border)
|
||||
transition-colors
|
||||
border border-transparent hover:border-(--header-border)
|
||||
"
|
||||
aria-expanded={isUserMenuOpen}
|
||||
>
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-700 text-sm font-semibold">
|
||||
{initials}
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block text-left mr-1">
|
||||
<p className="text-sm font-medium text-(--header-text) leading-none">{fullName}</p>
|
||||
</div>
|
||||
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={`text-gray-400 transition-transform duration-200 ${isUserMenuOpen ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Dropdown */}
|
||||
{isUserMenuOpen && (
|
||||
<div
|
||||
className="
|
||||
absolute right-0 mt-2 w-56
|
||||
rounded-xl border border-(--card-border)
|
||||
bg-(--card-bg)
|
||||
shadow-md
|
||||
overflow-hidden
|
||||
animate-in fade-in zoom-in-95 duration-150
|
||||
origin-top-right
|
||||
"
|
||||
>
|
||||
<div className="px-4 py-3 border-b border-(--card-border) bg-(--background)">
|
||||
<p className="text-xs text-(--text-secondary) truncate mt-0.5">
|
||||
{user?.email}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="py-1">
|
||||
<Link
|
||||
to="/profile"
|
||||
onClick={() => setIsUserMenuOpen(false)}
|
||||
className="flex w-full items-center gap-2 px-4 py-2 text-sm text-(--text-primary) hover:bg-(--background-secondary) transition-colors"
|
||||
>
|
||||
{t('profile:header.profileSettings')}
|
||||
</Link>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
|
||||
>
|
||||
{t('profile:header.signOut')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppHeader;
|
||||
@@ -0,0 +1,40 @@
|
||||
import { SidebarProvider, useSidebar } from "../../context/SidebarContext";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import AppHeader from "./AppHeader";
|
||||
import AppSidebar from "./AppSidebar";
|
||||
|
||||
const LayoutContent: React.FC = () => {
|
||||
const { isExpanded } = useSidebar();
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--background)] transition-colors duration-200 flex flex-col">
|
||||
<AppSidebar />
|
||||
|
||||
<div
|
||||
className={`
|
||||
flex-1 flex flex-col min-h-screen transition-all duration-300 ease-in-out
|
||||
${isExpanded ? "lg:ltr:ml-[260px] lg:rtl:mr-[260px] lg:rtl:ml-0" : "lg:ltr:ml-[80px] lg:rtl:mr-[80px] lg:rtl:ml-0"}
|
||||
`}
|
||||
>
|
||||
<AppHeader />
|
||||
|
||||
<main className="flex-1 p-4 md:p-6 lg:p-6 animate-fade-in w-full max-w-[1920px] mx-auto">
|
||||
{/* Outlet Container - Ensures content is constrained but responsive */}
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AppLayout: React.FC = () => {
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<LayoutContent />
|
||||
</SidebarProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppLayout;
|
||||
@@ -0,0 +1,396 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
LayoutGrid,
|
||||
Package,
|
||||
UserCog,
|
||||
Building2,
|
||||
UsersRound,
|
||||
X,
|
||||
LogOut,
|
||||
PanelLeft,
|
||||
Palette,
|
||||
Settings,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
|
||||
} from "lucide-react";
|
||||
import { useSidebar } from "../../context/SidebarContext";
|
||||
import { usePermission } from "../../lib/usePermission";
|
||||
import { useAuth } from "../../context/AuthContext";
|
||||
import { authApi } from "../../application/Authentication/AuthApi";
|
||||
import { clearAuthCookies } from "../../lib/authCookies";
|
||||
|
||||
|
||||
interface SubMenuItem {
|
||||
icon: React.ReactNode;
|
||||
name: string;
|
||||
path: string;
|
||||
access?: string;
|
||||
}
|
||||
|
||||
interface NavItem {
|
||||
icon: React.ReactNode;
|
||||
name: string;
|
||||
path: string;
|
||||
access?: string;
|
||||
submenu?: SubMenuItem[];
|
||||
}
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
icon: <LayoutGrid size={22} />,
|
||||
name: "Dashboard",
|
||||
path: "/dashboard",
|
||||
},
|
||||
|
||||
{
|
||||
icon: <Building2 size={22} />,
|
||||
name: "Tenants",
|
||||
path: "/tenants",
|
||||
access: "superadmin.tenant.read",
|
||||
},
|
||||
{
|
||||
icon: <UsersRound size={22} />,
|
||||
name: "Users",
|
||||
path: "/users",
|
||||
access: "admin.user.read",
|
||||
},
|
||||
{
|
||||
icon: <UserCog size={22} />,
|
||||
name: "Roles",
|
||||
path: "/roles",
|
||||
access: "admin.role.read",
|
||||
},
|
||||
{
|
||||
icon: <Palette size={22} />,
|
||||
name: "Themes",
|
||||
path: "/themes",
|
||||
access: "superadmin.palette.read",
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
icon: <Settings size={22} />,
|
||||
name: "Settings",
|
||||
path: "/settings",
|
||||
},
|
||||
];
|
||||
|
||||
const AppSidebar: React.FC = () => {
|
||||
const { t } = useTranslation('common');
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
isExpanded,
|
||||
isMobileOpen,
|
||||
isMobile,
|
||||
toggleSidebar,
|
||||
closeMobileSidebar,
|
||||
} = useSidebar();
|
||||
|
||||
const location = useLocation();
|
||||
const { can } = usePermission();
|
||||
const { user, isLoading } = useAuth();
|
||||
|
||||
const getNavTranslation = (name: string): string => {
|
||||
const keyMap: Record<string, string> = {
|
||||
'Dashboard': 'dashboard',
|
||||
'Orders': 'orders',
|
||||
'Tenants': 'tenants',
|
||||
'Users': 'users',
|
||||
'Roles': 'roles',
|
||||
'Themes': 'themes',
|
||||
'Configuration': 'configuration',
|
||||
'Locations': 'locations',
|
||||
'Packaging': 'packaging',
|
||||
'Dropdowns': 'dropdowns',
|
||||
'Settings': 'settings',
|
||||
};
|
||||
|
||||
const key = keyMap[name];
|
||||
if (!key) {
|
||||
console.warn(`Missing translation key for: ${name}`);
|
||||
return name;
|
||||
}
|
||||
|
||||
return t(`nav.${key}`, name);
|
||||
};
|
||||
|
||||
|
||||
const isActive = useCallback(
|
||||
(path: string) => location.pathname === path || location.pathname.startsWith(path + "/"),
|
||||
[location.pathname]
|
||||
);
|
||||
|
||||
const visibleNavItems = useMemo(
|
||||
() => navItems.filter((item) => {
|
||||
if (!item.access) return true;
|
||||
|
||||
if (item.submenu && item.submenu.length > 0) {
|
||||
return item.submenu.some(subItem => !subItem.access || can(subItem.access));
|
||||
}
|
||||
|
||||
return can(item.access);
|
||||
}),
|
||||
[can]
|
||||
);
|
||||
|
||||
const [openSubmenus, setOpenSubmenus] = useState<Record<string, boolean>>({});
|
||||
|
||||
useEffect(() => {
|
||||
const currentPath = location.pathname;
|
||||
|
||||
setOpenSubmenus(prev => {
|
||||
const newState = { ...prev };
|
||||
|
||||
Object.keys(newState).forEach(menuName => {
|
||||
if (newState[menuName]) {
|
||||
const navItem = navItems.find(item => item.name === menuName);
|
||||
|
||||
if (navItem && navItem.submenu) {
|
||||
const isMatchingSubmenu = navItem.submenu.some(subItem =>
|
||||
currentPath === subItem.path || currentPath.startsWith(subItem.path + "/")
|
||||
);
|
||||
|
||||
if (!isMatchingSubmenu) {
|
||||
newState[menuName] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return newState;
|
||||
});
|
||||
}, [location.pathname]);
|
||||
|
||||
const toggleSubmenu = (name: string) => {
|
||||
if (!isExpanded && !isMobile) {
|
||||
toggleSidebar(); // Auto expand when clicking submenu in collapsed state
|
||||
}
|
||||
setOpenSubmenus(prev => ({ ...prev, [name]: !prev[name] }));
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await authApi.logout();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
clearAuthCookies();
|
||||
navigate("/signin");
|
||||
};
|
||||
|
||||
if (isLoading || !user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Sidebar width logic
|
||||
const sidebarWidth = isExpanded ? "w-[260px]" : "w-[80px]";
|
||||
const mobileClasses = isMobileOpen ? "translate-x-0" : "-translate-x-full";
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Backdrop */}
|
||||
{isMobileOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-40 lg:hidden backdrop-blur-sm transition-opacity duration-300 animate-fade-in"
|
||||
onClick={closeMobileSidebar}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
|
||||
<aside
|
||||
className={`
|
||||
fixed top-0 left-0 z-50 h-screen bg-[var(--sidebar-bg)] text-[var(--sidebar-text)] flex flex-col
|
||||
transition-all duration-300 ease-in-out border-r border-[var(--sidebar-border)]
|
||||
lg:translate-x-0 overflow-x-hidden
|
||||
${isMobile ? "w-[280px]" : sidebarWidth}
|
||||
${isMobile ? mobileClasses : ""}
|
||||
sidebar
|
||||
`}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className={`h-[70px] flex items-center px-4 border-b border-(--sidebar-border)/50 ${!isExpanded && !isMobile ? 'justify-center' : 'justify-between'}`}>
|
||||
{/* Logo - Only show when expanded or mobile */}
|
||||
{(isExpanded || isMobile) && (
|
||||
<Link to="/dashboard" className="flex items-center gap-3 overflow-hidden ml-1" onClick={isMobile ? closeMobileSidebar : undefined}>
|
||||
{user?.role?.accesses?.includes("superadmin.tenant.read") ? (
|
||||
<img
|
||||
src="https://maskantech.netlify.app/maskan_footer1.png"
|
||||
alt="Maskan Tech"
|
||||
className="h-8 w-auto object-contain"
|
||||
/>
|
||||
) : user?.tenant_logo_url ? (
|
||||
<img
|
||||
src={user.tenant_logo_url}
|
||||
alt={user.tenant_name || "Logo"}
|
||||
className="h-8 w-auto object-contain"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="shrink-0 text-blue-400">
|
||||
<Package size={32} />
|
||||
</div>
|
||||
<span className="text-xl font-bold text-(--sidebar-active-text) whitespace-nowrap">
|
||||
F&L
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Desktop Toggle Button */}
|
||||
{!isMobile && (
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className={`p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/10 transition-colors ${!isExpanded ? "" : ""}`}
|
||||
aria-label="Toggle Sidebar"
|
||||
>
|
||||
<PanelLeft size={20} className={!isExpanded ? "rotate-180" : ""} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Mobile Close Button */}
|
||||
{isMobile && (
|
||||
<button onClick={closeMobileSidebar} className="p-1 rounded-md text-slate-400 hover:text-white hover:bg-white/10">
|
||||
<X size={20} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto overflow-x-hidden py-6 px-3 custom-scrollbar">
|
||||
<ul className="space-y-2">
|
||||
{visibleNavItems.map((nav) => {
|
||||
const active = isActive(nav.path);
|
||||
const hasSubmenu = nav.submenu && nav.submenu.length > 0;
|
||||
const isMenuOpen = openSubmenus[nav.name];
|
||||
|
||||
if (hasSubmenu) {
|
||||
return (
|
||||
<li key={nav.name}>
|
||||
<button
|
||||
onClick={() => toggleSubmenu(nav.name)}
|
||||
className={`
|
||||
w-full relative flex items-center gap-3 px-3 py-3 rounded-lg transition-all duration-200 group
|
||||
${isMenuOpen
|
||||
? "bg-white/5 text-(--sidebar-active-text)"
|
||||
: "text-(--sidebar-text) hover:bg-(--sidebar-hover-bg)"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
{nav.icon}
|
||||
</div>
|
||||
|
||||
{(isExpanded || isMobile) && (
|
||||
<>
|
||||
<span className="flex-1 text-left whitespace-nowrap font-medium">
|
||||
{getNavTranslation(nav.name)}
|
||||
</span>
|
||||
<span className="flex-shrink-0 transition-transform duration-200">
|
||||
{isMenuOpen ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{!isExpanded && !isMobile && (
|
||||
<div className="absolute left-full ml-4 px-2 py-1 bg-slate-800 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity z-50 whitespace-nowrap pointer-events-none">
|
||||
{getNavTranslation(nav.name)}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Submenu Items */}
|
||||
<div className={`overflow-hidden transition-all duration-300 ${isMenuOpen && (isExpanded || isMobile) ? "max-h-96 opacity-100 mt-1" : "max-h-0 opacity-0"}`}>
|
||||
<ul className="space-y-1 pl-9">
|
||||
{nav.submenu?.filter(subItem => !subItem.access || can(subItem.access)).map((subItem) => {
|
||||
const subActive = isActive(subItem.path || "");
|
||||
return (
|
||||
<li key={subItem.name}>
|
||||
<Link
|
||||
to={subItem.path || "#"}
|
||||
onClick={isMobile ? closeMobileSidebar : undefined}
|
||||
className={`
|
||||
flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors block
|
||||
${subActive
|
||||
? "bg-(--sidebar-active-bg) text-(--sidebar-active-text) font-medium"
|
||||
: "text-(--sidebar-text-muted) hover:text-(--sidebar-text) hover:bg-(--sidebar-hover-bg)"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{subItem.icon && (
|
||||
<div className="flex-shrink-0 scale-90">
|
||||
{subItem.icon}
|
||||
</div>
|
||||
)}
|
||||
<span className="truncate">{getNavTranslation(subItem.name)}</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<li key={nav.name}>
|
||||
<Link
|
||||
to={nav.path}
|
||||
onClick={isMobile ? closeMobileSidebar : undefined}
|
||||
className={`
|
||||
relative flex items-center gap-3 px-3 py-3 rounded-lg transition-all duration-200 group
|
||||
${active
|
||||
? "bg-(--sidebar-active-bg) text-(--sidebar-active-text)"
|
||||
: "text-(--sidebar-text) hover:bg-(--sidebar-hover-bg)"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
{nav.icon}
|
||||
</div>
|
||||
|
||||
<span
|
||||
className={`
|
||||
whitespace-nowrap font-medium transition-all duration-300
|
||||
${(isExpanded || isMobile) ? "opacity-100 w-auto" : "opacity-0 w-0 hidden"}
|
||||
`}
|
||||
>
|
||||
{getNavTranslation(nav.name)}
|
||||
</span>
|
||||
|
||||
{/* Tooltip for collapsed mode */}
|
||||
{!isExpanded && !isMobile && (
|
||||
<div className="absolute left-full ml-4 px-2 py-1 bg-slate-800 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity z-50 whitespace-nowrap pointer-events-none">
|
||||
{getNavTranslation(nav.name)}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-slate-700/50">
|
||||
{/* Logout */}
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className={`flex items-center gap-3 w-full px-3 py-2 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-lg transition-colors overflow-hidden ${(isExpanded || isMobile) ? "justify-start" : "justify-center"}`}
|
||||
title="Logout"
|
||||
>
|
||||
<LogOut size={20} />
|
||||
{(isExpanded || isMobile) && (
|
||||
<span className="font-medium">{t('actions.signout')}</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppSidebar;
|
||||
@@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
|
||||
export default function AuthLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="relative p-6 bg-slate-900 z-1 sm:p-0">
|
||||
<div className="relative flex flex-col justify-center w-full h-screen lg:flex-row sm:p-0">
|
||||
{children}
|
||||
<div
|
||||
className="items-center hidden w-full h-full lg:w-1/2 lg:grid relative"
|
||||
style={{
|
||||
backgroundImage: "url('/AuthLayout.jpg')",
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 " />
|
||||
<div className="relative flex items-center justify-center z-10">
|
||||
{/* <div className="flex flex-col items-center max-w-xs">
|
||||
<Link to="/" className="block mb-4">
|
||||
<img
|
||||
width={231}
|
||||
height={48}
|
||||
src="/images/logo/auth-logo.svg"
|
||||
alt="Logo"
|
||||
/>
|
||||
</Link>
|
||||
<p className="text-center text-gray-200 mt-2 text-sm font-medium">
|
||||
Streamline your global fulfillment and logistics operations.
|
||||
</p>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { useSidebar } from "../../context/SidebarContext";
|
||||
|
||||
const Backdrop: React.FC = () => {
|
||||
const { isMobileOpen, toggleMobileSidebar } = useSidebar();
|
||||
|
||||
if (!isMobileOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-gray-900/50 lg:hidden"
|
||||
onClick={toggleMobileSidebar}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Backdrop;
|
||||
@@ -0,0 +1,2 @@
|
||||
// Use VITE_API_BASE_URL to match your backend host when working with cookies.
|
||||
export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
|
||||
@@ -0,0 +1,130 @@
|
||||
import React, { createContext, useContext, useState, useEffect } from "react";
|
||||
import type { ReactNode } from "react";
|
||||
import { authApi } from "../application/Authentication/AuthApi";
|
||||
import type {
|
||||
AuthUser,
|
||||
SigninRequest,
|
||||
} from "../application/Authentication/AuthTypes";
|
||||
import {
|
||||
setAuthCookies,
|
||||
getAccessToken,
|
||||
clearAuthCookies,
|
||||
} from "../lib/authCookies";
|
||||
import i18n from "../i18n/config";
|
||||
|
||||
interface AuthContextType {
|
||||
user: AuthUser | null;
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
login: (credentials: SigninRequest, rememberMe?: boolean) => Promise<void>;
|
||||
logout: () => Promise<void>;
|
||||
hasAccess: (accessCode: string) => boolean;
|
||||
refreshUser: () => Promise<void>;
|
||||
updateLanguage: (language: string) => Promise<void>;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||
|
||||
export const AuthProvider: React.FC<{ children: ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [user, setUser] = useState<AuthUser | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Bootstrap auth on app load
|
||||
useEffect(() => {
|
||||
const bootstrapAuth = async () => {
|
||||
const token = getAccessToken();
|
||||
if (!token) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const userData = await authApi.me();
|
||||
setUser(userData);
|
||||
|
||||
if (userData.preferred_language) {
|
||||
i18n.changeLanguage(userData.preferred_language);
|
||||
}
|
||||
} catch {
|
||||
clearAuthCookies();
|
||||
setUser(null);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
bootstrapAuth();
|
||||
}, []);
|
||||
|
||||
const login = async (credentials: SigninRequest, rememberMe = false) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await authApi.signin(credentials);
|
||||
setAuthCookies(response, rememberMe);
|
||||
setUser(response.user);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
clearAuthCookies();
|
||||
setUser(null);
|
||||
window.location.href = "/signin";
|
||||
};
|
||||
|
||||
|
||||
const hasAccess = (accessCode: string): boolean => {
|
||||
if (!user?.role?.accesses) return false;
|
||||
return user.role.accesses.includes(accessCode);
|
||||
};
|
||||
|
||||
const refreshUser = async () => {
|
||||
try {
|
||||
const userData = await authApi.me();
|
||||
setUser(userData);
|
||||
|
||||
if (userData.preferred_language) {
|
||||
i18n.changeLanguage(userData.preferred_language);
|
||||
}
|
||||
} catch {
|
||||
}
|
||||
};
|
||||
|
||||
const updateLanguage = async (language: string) => {
|
||||
if (!user) throw new Error('No user logged in');
|
||||
|
||||
try {
|
||||
const updatedUser = await authApi.updateLanguage(user.id, language);
|
||||
setUser(updatedUser);
|
||||
} catch (error) {
|
||||
console.error('Failed to update language preference:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider
|
||||
value={{
|
||||
user,
|
||||
isAuthenticated: !!user,
|
||||
isLoading,
|
||||
login,
|
||||
logout,
|
||||
hasAccess,
|
||||
refreshUser,
|
||||
updateLanguage,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useAuth = () => {
|
||||
const ctx = useContext(AuthContext);
|
||||
if (!ctx) throw new Error("useAuth must be used within AuthProvider");
|
||||
return ctx;
|
||||
};
|
||||
@@ -0,0 +1,91 @@
|
||||
import { createContext, useContext, useState, useEffect } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
|
||||
type SidebarContextType = {
|
||||
isExpanded: boolean;
|
||||
isMobileOpen: boolean;
|
||||
isHovered: boolean;
|
||||
isMobile: boolean;
|
||||
toggleSidebar: () => void;
|
||||
toggleMobileSidebar: () => void;
|
||||
closeMobileSidebar: () => void;
|
||||
setIsHovered: (isHovered: boolean) => void;
|
||||
};
|
||||
|
||||
const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
|
||||
|
||||
export const useSidebar = () => {
|
||||
const context = useContext(SidebarContext);
|
||||
if (!context) {
|
||||
throw new Error("useSidebar must be used within a SidebarProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
export const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
// Desktop state: defaulting to expanded
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
// Mobile state: defaulting to closed
|
||||
const [isMobileOpen, setIsMobileOpen] = useState(false);
|
||||
// Hover state for collapsed desktop sidebar
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
// Screen size state
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
// Handle Resize
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
const mobile = window.innerWidth < 1024; // lg breakpoint
|
||||
setIsMobile(mobile);
|
||||
if (!mobile) {
|
||||
setIsMobileOpen(false); // Close mobile drawer when switching to desktop
|
||||
}
|
||||
};
|
||||
|
||||
// Initial check
|
||||
handleResize();
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
// Close mobile sidebar on route change
|
||||
useEffect(() => {
|
||||
if (isMobile) {
|
||||
setIsMobileOpen(false);
|
||||
}
|
||||
}, [location.pathname, isMobile]);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
setIsExpanded((prev) => !prev);
|
||||
};
|
||||
|
||||
const toggleMobileSidebar = () => {
|
||||
setIsMobileOpen((prev) => !prev);
|
||||
};
|
||||
|
||||
const closeMobileSidebar = () => {
|
||||
setIsMobileOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider
|
||||
value={{
|
||||
isExpanded,
|
||||
isMobileOpen,
|
||||
isHovered,
|
||||
isMobile,
|
||||
toggleSidebar,
|
||||
toggleMobileSidebar,
|
||||
closeMobileSidebar,
|
||||
setIsHovered,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</SidebarContext.Provider>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,113 @@
|
||||
import React, { createContext, useContext, useEffect, useState } from "react";
|
||||
import { useAuth } from "./AuthContext";
|
||||
import type { ColorPalette } from "../application/theme/ThemeTypes";
|
||||
import { paletteApi } from "../application/theme/PaletteApi";
|
||||
|
||||
interface ThemeContextType {
|
||||
currentPalette: ColorPalette | null;
|
||||
refreshTheme: () => Promise<void>;
|
||||
setTheme: (palette: ColorPalette) => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
|
||||
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const { user } = useAuth();
|
||||
const [currentPalette, setCurrentPalette] = useState<ColorPalette | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Function to apply colors to CSS variables
|
||||
const applyTheme = (palette: ColorPalette) => {
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty("--background", palette.colors.background);
|
||||
root.style.setProperty("--background-secondary", palette.colors.background_secondary);
|
||||
|
||||
root.style.setProperty("--text-primary", palette.colors.text_primary);
|
||||
root.style.setProperty("--text-secondary", palette.colors.text_secondary);
|
||||
|
||||
root.style.setProperty("--card-bg", palette.colors.card_bg);
|
||||
root.style.setProperty("--card-border", palette.colors.card_border);
|
||||
|
||||
root.style.setProperty("--header-bg", palette.colors.header_bg);
|
||||
root.style.setProperty("--header-text", palette.colors.header_text);
|
||||
root.style.setProperty("--header-border", palette.colors.header_border);
|
||||
|
||||
root.style.setProperty("--sidebar-bg", palette.colors.sidebar_bg);
|
||||
root.style.setProperty("--sidebar-text", palette.colors.sidebar_text);
|
||||
root.style.setProperty("--sidebar-active-bg", palette.colors.sidebar_active_bg);
|
||||
root.style.setProperty("--sidebar-active-text", palette.colors.sidebar_active_text);
|
||||
root.style.setProperty("--sidebar-hover-bg", palette.colors.sidebar_hover_bg);
|
||||
root.style.setProperty("--sidebar-border", palette.colors.sidebar_border);
|
||||
|
||||
root.style.setProperty("--primary", palette.colors.primary);
|
||||
root.style.setProperty("--primary-hover", palette.colors.primary_hover);
|
||||
|
||||
root.style.setProperty("--table-header-bg", palette.colors.table_header_bg);
|
||||
root.style.setProperty("--table-row-hover", palette.colors.table_row_hover);
|
||||
root.style.setProperty("--table-border", palette.colors.table_border);
|
||||
};
|
||||
|
||||
const setTheme = async (palette: ColorPalette) => {
|
||||
setCurrentPalette(palette);
|
||||
applyTheme(palette);
|
||||
localStorage.setItem("user_theme_preference", palette.id);
|
||||
};
|
||||
|
||||
const refreshTheme = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
if (!user) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
const palettes = await paletteApi.getAllPalettes();
|
||||
|
||||
let targetPalette: ColorPalette | undefined;
|
||||
|
||||
// 1. Check local storage preference
|
||||
const savedPaletteId = localStorage.getItem("user_theme_preference");
|
||||
if (savedPaletteId) {
|
||||
targetPalette = palettes.find((p) => p.id === savedPaletteId);
|
||||
}
|
||||
|
||||
// 2. If no preference/not found, use default
|
||||
if (!targetPalette) {
|
||||
targetPalette = palettes.find((p) => p.is_default);
|
||||
}
|
||||
|
||||
// 3. Fallback to first available
|
||||
if (!targetPalette && palettes.length > 0) {
|
||||
targetPalette = palettes[0];
|
||||
}
|
||||
|
||||
if (targetPalette) {
|
||||
setCurrentPalette(targetPalette);
|
||||
applyTheme(targetPalette);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("Failed to load theme:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
refreshTheme();
|
||||
}, [user]); // Re-run when user logs in/out
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ currentPalette, refreshTheme, setTheme, isLoading }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useTheme = () => {
|
||||
const context = useContext(ThemeContext);
|
||||
if (context === undefined) {
|
||||
throw new Error("useTheme must be used within a ThemeProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
@@ -0,0 +1,92 @@
|
||||
import i18next from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||
|
||||
import enCommon from './locales/en/common.json';
|
||||
import arCommon from './locales/ar/common.json';
|
||||
import enOrders from './locales/en/orders.json';
|
||||
import arOrders from './locales/ar/orders.json';
|
||||
import enUsers from './locales/en/users.json';
|
||||
import arUsers from './locales/ar/users.json';
|
||||
import enRoles from './locales/en/roles.json';
|
||||
import arRoles from './locales/ar/roles.json';
|
||||
import enPackaging from './locales/en/packaging.json';
|
||||
import arPackaging from './locales/ar/packaging.json';
|
||||
import enLocations from './locales/en/locations.json';
|
||||
import arLocations from './locales/ar/locations.json';
|
||||
import enProfile from './locales/en/profile.json';
|
||||
import arProfile from './locales/ar/profile.json';
|
||||
import enDashboard from './locales/en/dashboard.json';
|
||||
import arDashboard from './locales/ar/dashboard.json';
|
||||
import enDropdowns from './locales/en/dropdowns.json';
|
||||
import arDropdowns from './locales/ar/dropdowns.json';
|
||||
|
||||
export const languages = {
|
||||
en: { name: 'English', dir: 'ltr' },
|
||||
ar: { name: 'العربية', dir: 'rtl' },
|
||||
} as const;
|
||||
|
||||
export type SupportedLanguage = keyof typeof languages;
|
||||
|
||||
const resources = {
|
||||
en: {
|
||||
common: enCommon,
|
||||
orders: enOrders,
|
||||
users: enUsers,
|
||||
roles: enRoles,
|
||||
packaging: enPackaging,
|
||||
locations: enLocations,
|
||||
profile: enProfile,
|
||||
dashboard: enDashboard,
|
||||
dropdowns: enDropdowns,
|
||||
},
|
||||
ar: {
|
||||
common: arCommon,
|
||||
orders: arOrders,
|
||||
users: arUsers,
|
||||
roles: arRoles,
|
||||
packaging: arPackaging,
|
||||
locations: arLocations,
|
||||
profile: arProfile,
|
||||
dashboard: arDashboard,
|
||||
dropdowns: arDropdowns,
|
||||
},
|
||||
};
|
||||
|
||||
i18next
|
||||
.use(LanguageDetector)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
resources,
|
||||
defaultNS: 'common',
|
||||
fallbackLng: 'en',
|
||||
supportedLngs: Object.keys(languages),
|
||||
|
||||
detection: {
|
||||
order: ['localStorage', 'navigator'],
|
||||
caches: ['localStorage'],
|
||||
lookupLocalStorage: 'preferred_language',
|
||||
},
|
||||
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
},
|
||||
|
||||
react: {
|
||||
useSuspense: false,
|
||||
},
|
||||
});
|
||||
|
||||
const updateDirection = (lng: string) => {
|
||||
const dir = languages[lng as SupportedLanguage]?.dir || 'ltr';
|
||||
document.documentElement.setAttribute('dir', dir);
|
||||
document.documentElement.setAttribute('lang', lng);
|
||||
};
|
||||
|
||||
i18next.on('languageChanged', updateDirection);
|
||||
|
||||
if (i18next.language) {
|
||||
updateDirection(i18next.language);
|
||||
}
|
||||
|
||||
export default i18next;
|
||||
@@ -0,0 +1,110 @@
|
||||
{
|
||||
"nav": {
|
||||
"dashboard": "لوحة القيادة",
|
||||
"orders": "الطلبات",
|
||||
"locations": "المواقع",
|
||||
"packaging": "التعبئة والتغليف",
|
||||
"tenants": "المستأجرون",
|
||||
"users": "المستخدمون",
|
||||
"roles": "الأدوار",
|
||||
"themes": "المظاهر",
|
||||
"profile": "الملف الشخصي",
|
||||
"settings": "الإعدادات",
|
||||
"configuration": "التكوين",
|
||||
"dropdowns": "القوائم المنسدلة"
|
||||
},
|
||||
"actions": {
|
||||
"save": "حفظ",
|
||||
"cancel": "إلغاء",
|
||||
"edit": "تعديل",
|
||||
"delete": "حذف",
|
||||
"add": "إضافة",
|
||||
"create": "إنشاء",
|
||||
"update": "تحديث",
|
||||
"search": "بحث",
|
||||
"filter": "تصفية",
|
||||
"export": "تصدير",
|
||||
"import": "استيراد",
|
||||
"reset": "إعادة تعيين",
|
||||
"submit": "إرسال",
|
||||
"close": "إغلاق",
|
||||
"confirm": "تأكيد",
|
||||
"back": "رجوع",
|
||||
"next": "التالي",
|
||||
"previous": "السابق",
|
||||
"view": "عرض",
|
||||
"refresh": "تحديث",
|
||||
"signout": "تسجيل الخروج",
|
||||
"logout": "تسجيل الخروج"
|
||||
},
|
||||
"common": {
|
||||
"yes": "نعم",
|
||||
"no": "لا",
|
||||
"loading": "جاري التحميل...",
|
||||
"error": "خطأ",
|
||||
"success": "نجاح",
|
||||
"warning": "تحذير",
|
||||
"info": "معلومات",
|
||||
"noData": "لا توجد بيانات متاحة",
|
||||
"selectAll": "تحديد الكل",
|
||||
"selected": "محدد",
|
||||
"total": "المجموع",
|
||||
"showing": "عرض",
|
||||
"of": "من",
|
||||
"entries": "إدخالات",
|
||||
"page": "صفحة",
|
||||
"rowsPerPage": "صفوف لكل صفحة",
|
||||
"qty": "الكمية",
|
||||
"volumetricWeight": "الوزن الحجمي"
|
||||
},
|
||||
"columns": {
|
||||
"name": "الاسم",
|
||||
"roleName": "اسم الدور",
|
||||
"tenant": "المستأجر",
|
||||
"created": "تم الإنشاء",
|
||||
"updated": "تم التحديث",
|
||||
"actions": "إجراءات",
|
||||
"email": "البريد الإلكتروني",
|
||||
"phone": "الهاتف",
|
||||
"role": "الدور",
|
||||
"status": "الحالة"
|
||||
},
|
||||
"status": {
|
||||
"active": "نشط",
|
||||
"inactive": "غير نشط",
|
||||
"pending": "قيد الانتظار",
|
||||
"approved": "موافق عليه",
|
||||
"rejected": "مرفوض",
|
||||
"new": "جديد",
|
||||
"inProgress": "قيد التنفيذ",
|
||||
"completed": "مكتمل",
|
||||
"cancelled": "ملغى"
|
||||
},
|
||||
"settings": {
|
||||
"title": "الإعدادات",
|
||||
"language": {
|
||||
"title": "تفضيل اللغة",
|
||||
"description": "اختر لغتك المفضلة لواجهة التطبيق",
|
||||
"label": "اللغة",
|
||||
"selectLabel": "اختار اللغة",
|
||||
"updated": "تم تحديث تفضيل اللغة بنجاح",
|
||||
"confirmTitle": "تغيير اللغة؟",
|
||||
"confirmMessage": "سيتم إعادة تحميل الصفحة لتطبيق إعدادات اللغة الجديدة. هل تريد المتابعة؟"
|
||||
}
|
||||
},
|
||||
"validation": {
|
||||
"required": "هذا الحقل مطلوب",
|
||||
"email": "يرجى إدخال عنوان بريد إلكتروني صالح",
|
||||
"minLength": "يجب أن يكون {{min}} أحرف على الأقل",
|
||||
"maxLength": "يجب ألا يزيد عن {{max}} أحرف",
|
||||
"passwordMatch": "كلمات المرور غير متطابقة"
|
||||
},
|
||||
"messages": {
|
||||
"saveSuccess": "تم الحفظ بنجاح",
|
||||
"updateSuccess": "تم التحديث بنجاح",
|
||||
"deleteSuccess": "تم الحذف بنجاح",
|
||||
"createSuccess": "تم الإنشاء بنجاح",
|
||||
"error": "حدث خطأ. يرجى المحاولة مرة أخرى.",
|
||||
"confirmDelete": "هل أنت متأكد أنك تريد حذف هذا العنصر؟"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"title": "لوحة المعلومات قيد التطوير",
|
||||
"message": "نحن نعمل على إنشاء تجربة لوحة معلومات قوية لمنحك رؤى أفضل. يرجى التحقق مرة أخرى قريبا!"
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"title": "إعدادات القوائم المنسدلة",
|
||||
"noPermission": "ليس لديك صلاحية لعرض أي إعدادات قوائم منسدلة.",
|
||||
"tabs": {
|
||||
"locationTypes": "أنواع المواقع",
|
||||
"packageTypes": "أنواع الطرود",
|
||||
"packageMaterials": "مواد التغليف",
|
||||
"productCategories": "فئات المنتجات"
|
||||
},
|
||||
"locationTypes": {
|
||||
"title": "أنواع المواقع",
|
||||
"addButton": "إضافة نوع موقع",
|
||||
"editTitle": "تعديل نوع الموقع",
|
||||
"addTitle": "إضافة نوع موقع",
|
||||
"deleteTitle": "حذف نوع الموقع؟",
|
||||
"deleteMessage": "هل أنت متأكد أنك تريد حذف نوع الموقع هذا؟ لا يمكن التراجع عن هذا الإجراء.",
|
||||
"name": "الاسم",
|
||||
"namePlaceholder": "أدخل اسم نوع الموقع"
|
||||
},
|
||||
"packageTypes": {
|
||||
"title": "أنواع الطرود",
|
||||
"addButton": "إضافة نوع طرد",
|
||||
"editTitle": "تعديل نوع الطرد",
|
||||
"addTitle": "إضافة نوع طرد",
|
||||
"deleteTitle": "حذف نوع الطرد؟",
|
||||
"deleteMessage": "هل أنت متأكد أنك تريد حذف نوع الطرد هذا؟ لا يمكن التراجع عن هذا الإجراء.",
|
||||
"name": "الاسم",
|
||||
"namePlaceholder": "أدخل اسم نوع الطرد"
|
||||
},
|
||||
"packageMaterials": {
|
||||
"title": "مواد التغليف",
|
||||
"addButton": "إضافة مادة تغليف",
|
||||
"editTitle": "تعديل مادة التغليف",
|
||||
"addTitle": "إضافة مادة تغليف",
|
||||
"deleteTitle": "حذف مادة التغليف؟",
|
||||
"deleteMessage": "هل أنت متأكد أنك تريد حذف مادة التغليف هذه؟ لا يمكن التراجع عن هذا الإجراء.",
|
||||
"name": "الاسم",
|
||||
"namePlaceholder": "أدخل اسم مادة التغليف"
|
||||
},
|
||||
"productCategories": {
|
||||
"title": "فئات المنتجات",
|
||||
"addButton": "إضافة فئة منتج",
|
||||
"editTitle": "تعديل فئة المنتج",
|
||||
"addTitle": "إضافة فئة منتج",
|
||||
"deleteTitle": "حذف فئة المنتج؟",
|
||||
"deleteMessage": "هل أنت متأكد أنك تريد حذف فئة المنتج هذه؟ لا يمكن التراجع عن هذا الإجراء.",
|
||||
"name": "الاسم",
|
||||
"namePlaceholder": "أدخل اسم فئة المنتج"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"title": "المواقع",
|
||||
"subTitle": "إدارة مواقع المستودعات والمراكز الخاصة بك.",
|
||||
"headers": {
|
||||
"addLocation": "إضافة موقع",
|
||||
"addNewLocation": "إضافة موقع جديد",
|
||||
"editLocation": "تعديل الموقع",
|
||||
"noLocationsFound": "لم يتم العثور على مواقع",
|
||||
"viewMap": "عرض الخريطة",
|
||||
"locationOnMap": "الموقع على الخريطة"
|
||||
},
|
||||
"messages": {
|
||||
"noLocationsDescription": "أضف مواقع المستودعات أو المراكز الخاصة بك لإدارة الاستلام بكفاءة.",
|
||||
"deleteConfirmation": "هل أنت متأكد أنك تريد حذف هذا الموقع؟ لا يمكن التراجع عن هذا الإجراء.",
|
||||
"deleteTitle": "حذف الموقع؟",
|
||||
"saveSuccess": "تم حفظ الموقع بنجاح",
|
||||
"fetchError": "فشل جلب المواقع",
|
||||
"fetchDetailsError": "فشل جلب تفاصيل الموقع",
|
||||
"loading": "جارٍ التحميل..."
|
||||
},
|
||||
"fields": {
|
||||
"name": "اسم الموقع",
|
||||
"namePlaceholder": "مثال: المستودع الرئيسي، الوحدة المركزية 1",
|
||||
"type": "نوع الموقع",
|
||||
"locationType": "نوع الموقع",
|
||||
"selectType": "اختر النوع",
|
||||
"active": "نشط",
|
||||
"usedForRouting": "يستخدم للتوجيه",
|
||||
"warehouse": "مستودع",
|
||||
"hub": "مركز",
|
||||
"factory": "مصنع",
|
||||
"capabilities": "القدرات",
|
||||
"capabilitiesPlaceholder": "اختر القدرات...",
|
||||
"country": "الدولة",
|
||||
"zipCode": "الرمز البريدي",
|
||||
"state": "المنطقة / المحافظة",
|
||||
"city": "المدينة",
|
||||
"addressLine1": "العنوان السطر 1",
|
||||
"addressLine1Placeholder": "اسم الشارع، المبنى، إلخ.",
|
||||
"addressLine2": "العنوان السطر 2 (اختياري)",
|
||||
"addressLine2Placeholder": "شقة، جناح، وحدة، إلخ.",
|
||||
"latitude": "خط العرض",
|
||||
"longitude": "خط الطول",
|
||||
"selectState": "ختر المنطقة/المحافظة",
|
||||
"selectCity": "اختر المدينة",
|
||||
"autoFilled": "تعبئة تلقائية",
|
||||
"enterState": "أدخل المنطقة/المحافظة",
|
||||
"enterCity": "أدخل المدينة"
|
||||
},
|
||||
"actions": {
|
||||
"edit": "تعديل",
|
||||
"delete": "حذف",
|
||||
"cancel": "إلغاء",
|
||||
"save": "حفظ الموقع",
|
||||
"saving": "جارٍ الحفظ...",
|
||||
"viewMap": "عرض الخريطة"
|
||||
},
|
||||
"validation": {
|
||||
"nameRequired": "الاسم مطلوب",
|
||||
"typeRequired": "النوع مطلوب",
|
||||
"addressRequired": "العنوان مطلوب",
|
||||
"zipCodeRequired": "الرمز البريدي مطلوب",
|
||||
"cityRequired": "المدينة مطلوبة",
|
||||
"stateRequired": "المنطقة/المحافظة مطلوبة",
|
||||
"countryRequired": "الدولة مطلوبة"
|
||||
},
|
||||
"capabilities": {
|
||||
"coldStorage": "تخزين بارد",
|
||||
"hazardousMaterials": "مواد خطرة",
|
||||
"access247": "وصول 24/7",
|
||||
"loadingDock": "رصيف تحميل",
|
||||
"forkliftAvailable": "رافعة شوكية متاحة",
|
||||
"cctvSurveillance": "مراقبة بالكاميرات",
|
||||
"climateControlled": "تحكم بالمناخ",
|
||||
"bondedWarehouse": "مستودع جمركي",
|
||||
"crossDocking": "توزيع مباشر (Cross Docking)",
|
||||
"orderFulfillment": "تلبية الطلبات",
|
||||
"inventoryManagement": "إدارة المخزون",
|
||||
"lastMileDelivery": "توصيل الميل الأخير",
|
||||
"returnsProcessing": "معالجة المرتجعات",
|
||||
"realTimeTracking": "تتبع في الوقت الفعلي",
|
||||
"fdaApproved": "معتمد من FDA",
|
||||
"customsClearance": "التخليص الجمركي"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
{
|
||||
"tabs": {
|
||||
"all": "الكل",
|
||||
"new": "الطلبات",
|
||||
"picked": "تم التقاط",
|
||||
"packed": "تم التعبئة",
|
||||
"ready": "جاهز للشحن",
|
||||
"pickups": "الاستلام والبيانات",
|
||||
"transit": "قيد النقل",
|
||||
"delivered": "تم التسليم"
|
||||
},
|
||||
"columns": {
|
||||
"order": "الطلب",
|
||||
"manifestId": "رقم البيان",
|
||||
"expectedDelivery": "التسليم المتوقع",
|
||||
"customer": "العميل",
|
||||
"product": "المنتج",
|
||||
"payment": "الدفع",
|
||||
"pickupAddress": "عنوان الاستلام",
|
||||
"courier": "شركة الشحن",
|
||||
"status": "الحالة",
|
||||
"action": "إجراء",
|
||||
"orders": "الطلبات",
|
||||
"totalValue": "القيمة الإجمالية",
|
||||
"pickup": "الاستلام",
|
||||
"deliveryMethod": "طريقة التسليم"
|
||||
},
|
||||
"actions": {
|
||||
"addOrder": "إضافة طلب",
|
||||
"updateOrder": "تحديث الطلب",
|
||||
"cancelOrder": "إلغاء",
|
||||
"createOrder": "إنشاء طلب",
|
||||
"bulkSchedule": "جدولة الاستلام",
|
||||
"bulkShip": "شحن الآن",
|
||||
"schedulePickup": "جدولة الاستلام",
|
||||
"shipNow": "شحن الآن",
|
||||
"markDelivered": "وضع علامة تم التسليم",
|
||||
"viewDetails": "عرض التفاصيل",
|
||||
"viewProof": "عرض الإثبات",
|
||||
"edit": "تعديل",
|
||||
"delete": "حذف",
|
||||
"scheduleShipment": "جدولة الشحنة",
|
||||
"markInTransit": "وضع علامة في النقل",
|
||||
"backToOrders": "العودة للطلبات",
|
||||
"markPacked": "وضع علامة تم التعبئة",
|
||||
"markReady": "وضع علامة جاهز",
|
||||
"readyToPick": "جاهز للالتقاط",
|
||||
"readyToPack": "جاهز للتعبئة",
|
||||
"readyToShip": "جاهز للشحن",
|
||||
"label": "ملصق",
|
||||
"markLabelled": "وضع علامة تم التسمية"
|
||||
},
|
||||
"status": {
|
||||
"new": "جديد",
|
||||
"ready": "جاهز",
|
||||
"readyToShip": "جاهز للشحن",
|
||||
"readyForTransit": "جاهز للنقل",
|
||||
"inTransit": "قيد النقل",
|
||||
"shipped": "تم الشحن",
|
||||
"delivered": "تم التسليم",
|
||||
"pickupScheduled": "تم جدولة الاستلام"
|
||||
},
|
||||
"labels": {
|
||||
"orderId": "رقم الطلب",
|
||||
"orderTime": "وقت الطلب",
|
||||
"customerName": "اسم العميل",
|
||||
"customerPhone": "هاتف العميل",
|
||||
"quantity": "الكمية",
|
||||
"volumetricWeight": "الوزن الحجمي",
|
||||
"cod": "الدفع عند الاستلام",
|
||||
"prepaid": "مدفوع مسبقاً",
|
||||
"trackingNumber": "رقم التتبع",
|
||||
"carrierName": "اسم الناقل",
|
||||
"moreItems": "+ {{count}} عناصر أخرى",
|
||||
"receivedBy": "استلم من قبل",
|
||||
"pickupAddress": "عنوان الاستلام",
|
||||
"selectLocation": "اختر من المواقع المحفوظة",
|
||||
"chooseLocation": "اختر موقعًا...",
|
||||
"deliveryDetails": "تفاصيل التوصيل",
|
||||
"deliveryDetailsSub": "أدخل تفاصيل توصيل العميل الذي تقوم بإنشاء هذا الطلب له",
|
||||
"billingDetails": "تفاصيل الفاتورة",
|
||||
"billingDetailsSub": "أدخل تفاصيل الفاتورة إذا كانت مختلفة عن تفاصيل التوصيل",
|
||||
"mobileNumber": "رقم الجوال",
|
||||
"enterMobile": "أدخل رقم الجوال",
|
||||
"fullName": "الاسم الكامل",
|
||||
"enterFullName": "أدخل الاسم الكامل",
|
||||
"country": "الدولة",
|
||||
"selectCountry": "بحث واختيار الدولة",
|
||||
"postalCode": "الرمز البريدي",
|
||||
"enterPostalCode": "أدخل الرمز البريدي",
|
||||
"state": "المنطقة/المحافظة",
|
||||
"city": "المدينة",
|
||||
"address": "العنوان",
|
||||
"enterAddress": "أدخل العنوان التفصيلي، رقم الشقة، إلخ",
|
||||
"landmark": "علامة مميزة (اختياري)",
|
||||
"enterLandmark": "مثال: بجوار...",
|
||||
"sameAsDelivery": "نفس عنوان التوصيل",
|
||||
"orderSummary": "ملخص الطلب",
|
||||
"orderSummarySub": "أضف المنتجات وتفاصيل الدفع وراجع الإجماليات.",
|
||||
"productDetails": "تفاصيل المنتج",
|
||||
"addProduct": "إضافة منتج",
|
||||
"paymentDetails": "تفاصيل الدفع",
|
||||
"paymentMethod": "طريقة الدفع",
|
||||
"selectPaymentMethod": "اختر طريقة الدفع",
|
||||
"invoiceValue": "قيمة الفاتورة",
|
||||
"enterAmount": "أدخل المبلغ"
|
||||
},
|
||||
"fields": {
|
||||
"productName": "اسم المنتج",
|
||||
"productNamePlaceholder": "مثال: قميص، إلكترونيات",
|
||||
"quantity": "الكمية",
|
||||
"deadWeight": "الوزن الفعلي (كجم)",
|
||||
"volumetricWeight": "الوزن الحجمي (كجم)",
|
||||
"length": "الطول (سم)",
|
||||
"breadth": "العرض (سم)",
|
||||
"height": "الارتفاع (سم)",
|
||||
"category": "فئة العنصر",
|
||||
"categoryPlaceholder": "اختر الفئة"
|
||||
},
|
||||
"messages": {
|
||||
"ordersMarkedReady": "تم وضع علامة {{count}} طلبات كجاهزة للشحن",
|
||||
"manifestCreated": "تم إنشاء بيان لـ {{count}} طلبات",
|
||||
"confirmShipOrder": "هل أنت متأكد أنك تريد وضع علامة على هذا الطلب كجاهز للشحن؟",
|
||||
"confirmBulkShip": "وضع علامة على {{count}} طلبات محددة كجاهزة للشحن؟",
|
||||
"deleteOrderTitle": "حذف الطلب",
|
||||
"confirmDelete": "هل أنت متأكد أنك تريد حذف الطلب {{orderId}}؟ لا يمكن التراجع عن هذا الإجراء.",
|
||||
"moveToReadyTitle": "نقل إلى جاهز للشحن؟",
|
||||
"moveToReadySingle": "سيتم تحديث الطلب {{orderId}} إلى جاهز للشحن.",
|
||||
"moveToReadyBulk": "سيتم تحديث الطلبات المحددة إلى جاهز للشحن.",
|
||||
"moveToReadyBulkCount": "سيتم تحديث {{count}} طلبات محددة إلى جاهز للشحن.",
|
||||
"selectLocationError": "يرجى اختيار أو إنشاء موقع استلام",
|
||||
"validationError": "يرجى التحقق من الأخطاء في النموذج",
|
||||
"moveToPickedTitle": "نقل إلى تم الالتقاط؟",
|
||||
"moveToPickedSingle": "سيتم تحديث الطلب {{orderId}} إلى تم الالتقاط.",
|
||||
"packageLabeled": "تم وضع علامة على الحزمة كـ 'تم التسمية'",
|
||||
"labelError": "فشل في وضع علامة على الحزمة كـ 'تم التسمية'",
|
||||
"packageReadyToShip": "تم وضع علامة على الحزمة كـ 'جاهزة للشحن'",
|
||||
"updateStatusError": "فشل في تحديث حالة الحزمة",
|
||||
"confirmReadyToShip": "هل أنت متأكد أنك تريد وضع علامة على هذه الحزمة كـ 'جاهزة للشحن'؟"
|
||||
},
|
||||
"modal": {
|
||||
"packOrder": "تعبئة الطلب {{orderId}}",
|
||||
"shipOrder": "شحن الطلب {{orderId}}",
|
||||
"scanPack": "امسح رمز الاستجابة السريعة هذا لتأكيد التعبئة ووضع علامة تم التعبئة.",
|
||||
"scanShip": "امسح رمز الاستجابة السريعة هذا لوضع علامة على الطلب كجاهز للشحن.",
|
||||
"suggestedPackaging": "التعبئة المقترحة",
|
||||
"dimensions": "الأبعاد",
|
||||
"capacity": "السعة",
|
||||
"noPackagingSuggestion": "لم يتم العثور على اقتراح تعبئة محدد."
|
||||
},
|
||||
"packingWizard": {
|
||||
"title": "جاهز للتعبئة ({{count}})",
|
||||
"recommendedPackaging": "التغليف الموصى به",
|
||||
"use": "استخدم",
|
||||
"verifyItems": "يرجى التحقق من العناصر للطلبات {{count}} التالية قبل التعبئة",
|
||||
"packOrders": "تعبئة الطلبات",
|
||||
"packageCreated": "تم إنشاء الحزمة!",
|
||||
"successMessage": "تم تعبئة الطلبات بنجاح. الآن قم بإنشاء وإرفاق ملصق الشحن.",
|
||||
"printLabel": "طباعة الملصق",
|
||||
"packSuccess": "تم تعبئة الطلبات بنجاح",
|
||||
"packError": "فشل في تعبئة الطلبات"
|
||||
},
|
||||
"schedulePickup": {
|
||||
"title": "جدولة الشحنة",
|
||||
"generateManifestMessage": "إنشاء بيان وجدولة استلام لـ {{count}} طلب(ات).",
|
||||
"selectedPackages": "الحزم المحددة ({{count}})",
|
||||
"selectedOrders": "الطلبات المحددة",
|
||||
"package": "حزمة: {{id}} ({{count}} طلب(ات))",
|
||||
"noOrdersSelected": "لم يتم تحديد أي طلبات. حدد طلبات جاهزة لإنشاء بيان.",
|
||||
"totalOrderValue": "إجمالي قيمة الطلب",
|
||||
"pickupDateTime": "تاريخ ووقت الاستلام",
|
||||
"deliveryMethod": "طريقة التسليم",
|
||||
"selectDeliveryMethod": "اختر طريقة التسليم",
|
||||
"pickupInstructions": "تعليمات الاستلام (اختياري)",
|
||||
"pickupInstructionsPlaceholder": "أضف أي تعليمات خاصة للاستلام...",
|
||||
"generateManifestButton": "إنشاء البيان والجدولة",
|
||||
"deliveryMethods": {
|
||||
"external_carrier": "ناقل خارجي (Delhivery, BlueDart, إلخ)",
|
||||
"self_delivery": "توصيل ذاتي",
|
||||
"courier_pickup": "استلام عبر شريك البريد السريع"
|
||||
}
|
||||
},
|
||||
"trackingDetails": {
|
||||
"title": "تتبع لـ {{id}}",
|
||||
"titleAdd": "إضافة تتبع",
|
||||
"awb": "رقم بوليصة الشحن/التتبع",
|
||||
"enterAwb": "أدخل رقم التتبع",
|
||||
"carrier": "اسم الناقل",
|
||||
"enterCarrier": "اسم شركة الشحن",
|
||||
"url": "رابط التتبع (اختياري)",
|
||||
"urlPlaceholder": "https://...",
|
||||
"notes": "ملاحظات التتبع (اختياري)",
|
||||
"notesPlaceholder": "أضف أي ملاحظات تتبع...",
|
||||
"expectedDelivery": "تاريخ التوصيل المتوقع",
|
||||
"markInTransit": "وضع علامة في النقل"
|
||||
},
|
||||
"deliveredDetails": {
|
||||
"title": "تم التوصيل - {{id}}",
|
||||
"titleAdd": "وضع علامة تم التوصيل",
|
||||
"deliveredAt": "تم التوصيل في",
|
||||
"receivedBy": "تم الاستلام بواسطة",
|
||||
"receivedByPlaceholder": "اسم المستلم",
|
||||
"proofUrl": "رابط الإثبات",
|
||||
"proofUrlPlaceholder": "https://...",
|
||||
"deliveryNotes": "ملاحظات التوصيل",
|
||||
"deliveryNotesPlaceholder": "أضف ملاحظات التوصيل...",
|
||||
"markDelivered": "وضع علامة تم التوصيل"
|
||||
},
|
||||
"packageLabel": {
|
||||
"title": "ملصق الحزمة",
|
||||
"printLabel": "طباعة الملصق",
|
||||
"scanHint": "امسح لتحديث الحالة أو عرض التفاصيل"
|
||||
},
|
||||
"orderDetails": {
|
||||
"title": "تفاصيل الطلب",
|
||||
"notFound": "الطلب غير موجود",
|
||||
"createdOn": "تم الإنشاء في",
|
||||
"customerDetails": "تفاصيل العميل",
|
||||
"paymentStatus": "الدفع والحالة",
|
||||
"billingDetails": "تفاصيل الفاتورة",
|
||||
"products": "المنتجات",
|
||||
"name": "الاسم",
|
||||
"phone": "الهاتف",
|
||||
"address": "العنوان",
|
||||
"landmark": "علامة مميزة",
|
||||
"totalAmount": "المبلغ الإجمالي",
|
||||
"paymentMethod": "طريقة الدفع",
|
||||
"pickupAddress": "عنوان الاستلام",
|
||||
"productName": "اسم المنتج",
|
||||
"qty": "الكمية",
|
||||
"dimensions": "الأبعاد (الطول × العرض × الارتفاع)",
|
||||
"weights": "الأوزان (الفعلي / الحجمي)"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"title": "التغليف",
|
||||
"subTitle": "إدارة مخزون التغليف وأنواعه.",
|
||||
"actions": {
|
||||
"addPackage": "إضافة تغليف",
|
||||
"editPackage": "تعديل التغليف",
|
||||
"createPackage": "إنشاء تغليف",
|
||||
"updatePackage": "تحديث التغليف",
|
||||
"deletePackage": "حذف التغليف",
|
||||
"cancel": "إلغاء",
|
||||
"edit": "تعديل",
|
||||
"delete": "حذف",
|
||||
"backToPackaging": "العودة إلى التغليف"
|
||||
},
|
||||
"columns": {
|
||||
"name": "الاسم",
|
||||
"type": "النوع",
|
||||
"dimensions": "الأبعاد (طول×عرض×ارتفاع)",
|
||||
"material": "المادة",
|
||||
"cost": "التكلفة",
|
||||
"status": "الحالة",
|
||||
"actions": "إجراءات"
|
||||
},
|
||||
"fields": {
|
||||
"name": "الاسم",
|
||||
"namePlaceholder": "مثال: صندوق صغير",
|
||||
"type": "النوع",
|
||||
"typePlaceholder": "مثال: صندوق، ظرف",
|
||||
"sku": "SKU",
|
||||
"skuPlaceholder": "SKU اختياري",
|
||||
"material": "المادة",
|
||||
"materialPlaceholder": "مثال: الورق المقوى",
|
||||
"length": "الطول (سم)",
|
||||
"width": "العرض (سم)",
|
||||
"height": "الارتفاع (سم)",
|
||||
"weightCapacity": "سعة الوزن (كجم)",
|
||||
"costPerUnit": "التكلفة لكل وحدة",
|
||||
"stockQuantity": "كمية المخزون",
|
||||
"activeStatus": "حالة النشاط"
|
||||
},
|
||||
"status": {
|
||||
"active": "نشط",
|
||||
"inactive": "غير نشط"
|
||||
},
|
||||
"messages": {
|
||||
"deleteConfirmation": "هل أنت متأكد أنك تريد حذف عنصر التغليف هذا؟ لا يمكن التراجع عن هذا الإجراء.",
|
||||
"saveSuccess": "تم حفظ التغليف بنجاح",
|
||||
"deleteSuccess": "تم حذف التغليف بنجاح"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"title": "الملف الشخصي",
|
||||
"subTitle": "عرض تفاصيل حسابك",
|
||||
"sections": {
|
||||
"accountInfo": "معلومات السجل",
|
||||
"appearance": "المظهر",
|
||||
"appearanceDesc": "تخصيص مظهر التطبيق"
|
||||
},
|
||||
"fields": {
|
||||
"firstName": "الاسم الأول",
|
||||
"lastName": "اسم العائلة",
|
||||
"email": "البريد الإلكتروني",
|
||||
"phone": "رقم الهاتف",
|
||||
"tenant": "المستأجر",
|
||||
"role": "الدور",
|
||||
"accountCreated": "تاريخ إنشاء الحساب",
|
||||
"lastUpdated": "آخر تحديث",
|
||||
"unknown": "غير معروف"
|
||||
},
|
||||
"buttons": {
|
||||
"changePassword": "تغيير كلمة المرور",
|
||||
"editProfile": "تعديل الملف الشخصي",
|
||||
"updatePassword": "تحديث كلمة المرور",
|
||||
"saveChanges": "حفظ التغييرات"
|
||||
},
|
||||
"modals": {
|
||||
"changePasswordTitle": "تغيير كلمة المرور",
|
||||
"editProfileTitle": "تعديل الملف الشخصي",
|
||||
"currentPassword": "كلمة المرور الحالية",
|
||||
"newPassword": "كلمة المرور الجديدة",
|
||||
"confirmPassword": "تأكيد كلمة المرور الجديدة",
|
||||
"currentPasswordPlaceholder": "أدخل كلمة المرور الحالية",
|
||||
"newPasswordPlaceholder": "أدخل كلمة المرور الجديدة (8 أحرف على الأقل)",
|
||||
"confirmPasswordPlaceholder": "أعد إدخال كلمة المرور الجديدة",
|
||||
"firstNamePlaceholder": "أدخل اسمك الأول",
|
||||
"lastNamePlaceholder": "أدخل اسم العائلة",
|
||||
"phonePlaceholder": "أدخل رقم هاتفك"
|
||||
},
|
||||
"messages": {
|
||||
"passwordSuccess": "تم تحديث كلمة المرور بنجاح",
|
||||
"profileSuccess": "تم تحديث الملف الشخصي بنجاح",
|
||||
"passwordMismatch": "كلمات المرور الجديدة غير متطابقة",
|
||||
"passwordLength": "يجب أن تكون كلمة المرور الجديدة 8 أحرف على الأقل",
|
||||
"requiredFields": "جميع الحقول مطلوبة",
|
||||
"firstNameRequired": "الاسم الأول مطلوب",
|
||||
"loadError": "تعذر تحميل الملف الشخصي للمستخدم. يرجى محاولة تحديث الصفحة."
|
||||
},
|
||||
"header": {
|
||||
"profileSettings": "إعدادات الملف الشخصي",
|
||||
"signOut": "تسجيل الخروج"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"title": "الأدوار",
|
||||
"add": "إضافة دور",
|
||||
"edit": "تعديل الدور",
|
||||
"delete": "حذف الدور",
|
||||
"details": "تفاصيل الدور",
|
||||
"subTitle": "إنشاء دور جديد وربطه اختياريًا بمستأجر.",
|
||||
"backToRoles": "العودة للأدوار",
|
||||
"columns": {
|
||||
"roleName": "اسم الدور",
|
||||
"tenant": "المستأجر",
|
||||
"created": "تاريخ الإنشاء",
|
||||
"updated": "تاريخ التحديث",
|
||||
"actions": "إجراءات"
|
||||
},
|
||||
"fields": {
|
||||
"roleName": "اسم الدور",
|
||||
"roleNamePlaceholder": "أدخل اسم الدور",
|
||||
"isDefault": "تعيين كدور افتراضي",
|
||||
"accesses": "الصلاحيات",
|
||||
"tenant": "المستأجر",
|
||||
"tenantPlaceholder": "اختر مستأجر (اختياري)",
|
||||
"tenantLoading": "جاري تحميل المستأجرين...",
|
||||
"tenantAssigned": "المستأجر المعين",
|
||||
"loading": "جاري التحميل..."
|
||||
},
|
||||
"actions": {
|
||||
"create": "إنشاء الدور",
|
||||
"update": "حفظ التغييرات",
|
||||
"cancel": "إلغاء",
|
||||
"delete": "حذف الدور",
|
||||
"close": "إغلاق",
|
||||
"view": "عرض التفاصيل",
|
||||
"edit": "تعديل الدور"
|
||||
},
|
||||
"messages": {
|
||||
"deleteConfirm": "سيتم حذف هذا الدور نهائيًا.",
|
||||
"deleteTitle": "حذف الدور؟",
|
||||
"loadError": "تعذر تحميل الأدوار.",
|
||||
"detailsError": "فشل تحميل تفاصيل الدور",
|
||||
"updateError": "فشل تحديث الدور",
|
||||
"deleteError": "فشل حذف الدور",
|
||||
"addError": "تعذر إضافة الدور.",
|
||||
"accessLoadError": "تعذر تحميل خيارات الوصول.",
|
||||
"tenantLoadError": "تعذر تحميل المستأجر.",
|
||||
"tenantsLoadError": "تعذر تحميل المستأجرين.",
|
||||
"confirmDelete": "هل أنت متأكد أنك تريد حذف هذا الدور؟"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
{
|
||||
"title": "المستخدمون",
|
||||
"add": "إضافة مستخدم",
|
||||
"edit": "تعديل المستخدم",
|
||||
"delete": "حذف المستخدم",
|
||||
"details": "تفاصيل المستخدم",
|
||||
"subTitle": "إنشاء مستخدم جديد وتعيين تفاصيل المستأجر والدور.",
|
||||
"backToUsers": "العودة للمستخدمين",
|
||||
"columns": {
|
||||
"name": "الاسم",
|
||||
"email": "البريد الإلكتروني",
|
||||
"phone": "الهاتف",
|
||||
"status": "الحالة",
|
||||
"tenant": "المستأجر",
|
||||
"role": "الدور",
|
||||
"created": "تاريخ الإنشاء",
|
||||
"updated": "تاريخ التحديث",
|
||||
"actions": "إجراءات"
|
||||
},
|
||||
"fields": {
|
||||
"firstName": "الاسم الأول",
|
||||
"firstNamePlaceholder": "أدخل الاسم الأول",
|
||||
"lastName": "اسم العائلة",
|
||||
"lastNamePlaceholder": "أدخل اسم العائلة",
|
||||
"email": "البريد الإلكتروني",
|
||||
"emailPlaceholder": "user@example.com",
|
||||
"phone": "رقم الهاتف",
|
||||
"phonePlaceholder": "أدخل رقم الهاتف",
|
||||
"password": "كلمة المرور",
|
||||
"passwordPlaceholder": "أدخل كلمة المرور",
|
||||
"passwordEditPlaceholder": "اتركه فارغًا للاحتفاظ بالحالية",
|
||||
"role": "الدور",
|
||||
"rolePlaceholder": "اختر الدور",
|
||||
"roleSuperAdminPlaceholder": "اختر دور المشرف العام",
|
||||
"roleFilterPlaceholder": "اختر مستأجر لتصفية الأدوار",
|
||||
"tenant": "المستأجر",
|
||||
"tenantPlaceholder": "ختر مستأجر",
|
||||
"tenantLoading": "جاري تحميل المستأجرين...",
|
||||
"roleLoading": "جاري تحميل الأدوار...",
|
||||
"superAdminUser": "مستخدم مشرف عام",
|
||||
"superAdminNoTenant": "مشرف عام (لا يوجد مستأجر)",
|
||||
"assignedTenant": "المستأجر المعين",
|
||||
"active": "نشط"
|
||||
},
|
||||
"actions": {
|
||||
"create": "إنشاء مستخدم",
|
||||
"update": "حفظ التغييرات",
|
||||
"cancel": "إلغاء",
|
||||
"delete": "حذف المستخدم",
|
||||
"close": "إغلاق",
|
||||
"view": "عرض التفاصيل",
|
||||
"edit": "تعديل المستخدم"
|
||||
},
|
||||
"messages": {
|
||||
"deleteConfirm": "سيتم حذف هذا المستخدم نهائيًا.",
|
||||
"deleteTitle": "حذف المستخدم؟",
|
||||
"updateSuccess": "تم تحديث المستخدم بنجاح",
|
||||
"createSuccess": "تم إنشاء المستخدم بنجاح",
|
||||
"loadError": "تعذر تحميل المستخدمين.",
|
||||
"addError": "تعذر إضافة المستخدم.",
|
||||
"tenantLoadError": "تعذر تحميل المستأجر.",
|
||||
"tenantsLoadError": "تعذر تحميل المستأجرين.",
|
||||
"rolesLoadError": "تعذر تحميل الأدوار.",
|
||||
"confirmDelete": "هل أنت متأكد أنك تريد حذف هذا المستخدم؟"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
{
|
||||
"nav": {
|
||||
"dashboard": "Dashboard",
|
||||
"orders": "Orders",
|
||||
"locations": "Locations",
|
||||
"packaging": "Packaging",
|
||||
"tenants": "Tenants",
|
||||
"users": "Users",
|
||||
"roles": "Roles",
|
||||
"themes": "Themes",
|
||||
"profile": "Profile",
|
||||
"settings": "Settings",
|
||||
"configuration": "Configuration",
|
||||
"dropdowns": "Dropdowns"
|
||||
},
|
||||
"actions": {
|
||||
"save": "Save",
|
||||
"cancel": "Cancel",
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"add": "Add",
|
||||
"create": "Create",
|
||||
"update": "Update",
|
||||
"search": "Search",
|
||||
"filter": "Filter",
|
||||
"export": "Export",
|
||||
"import": "Import",
|
||||
"reset": "Reset",
|
||||
"submit": "Submit",
|
||||
"close": "Close",
|
||||
"confirm": "Confirm",
|
||||
"back": "Back",
|
||||
"next": "Next",
|
||||
"previous": "Previous",
|
||||
"view": "View",
|
||||
"refresh": "Refresh",
|
||||
"signout": "Sign Out",
|
||||
"logout": "Logout"
|
||||
},
|
||||
"common": {
|
||||
"yes": "Yes",
|
||||
"no": "No",
|
||||
"loading": "Loading...",
|
||||
"error": "Error",
|
||||
"success": "Success",
|
||||
"warning": "Warning",
|
||||
"info": "Info",
|
||||
"noData": "No data available",
|
||||
"selectAll": "Select All",
|
||||
"selected": "Selected",
|
||||
"total": "Total",
|
||||
"showing": "Showing",
|
||||
"of": "of",
|
||||
"entries": "entries",
|
||||
"page": "Page",
|
||||
"rowsPerPage": "Rows per page",
|
||||
"qty": "QTY",
|
||||
"volumetricWeight": "Volumetric wt."
|
||||
},
|
||||
"columns": {
|
||||
"name": "Name",
|
||||
"roleName": "Role Name",
|
||||
"tenant": "Tenant",
|
||||
"created": "Created",
|
||||
"updated": "Updated",
|
||||
"actions": "Actions",
|
||||
"email": "Email",
|
||||
"phone": "Phone",
|
||||
"role": "Role",
|
||||
"status": "Status"
|
||||
},
|
||||
"status": {
|
||||
"active": "Active",
|
||||
"inactive": "Inactive",
|
||||
"pending": "Pending",
|
||||
"approved": "Approved",
|
||||
"rejected": "Rejected",
|
||||
"new": "New",
|
||||
"inProgress": "In Progress",
|
||||
"completed": "Completed",
|
||||
"cancelled": "Cancelled"
|
||||
},
|
||||
"settings": {
|
||||
"title": "Settings",
|
||||
"language": {
|
||||
"title": "Language Preference",
|
||||
"description": "Choose your preferred language for the application interface",
|
||||
"label": "Language",
|
||||
"selectLabel": "Select Language",
|
||||
"updated": "Language preference updated successfully",
|
||||
"confirmTitle": "Change Language?",
|
||||
"confirmMessage": "The page will reload to apply the new language settings. Continue?"
|
||||
}
|
||||
},
|
||||
"validation": {
|
||||
"required": "This field is required",
|
||||
"email": "Please enter a valid email address",
|
||||
"minLength": "Must be at least {{min}} characters",
|
||||
"maxLength": "Must be at most {{max}} characters",
|
||||
"passwordMatch": "Passwords do not match"
|
||||
},
|
||||
"messages": {
|
||||
"saveSuccess": "Saved successfully",
|
||||
"updateSuccess": "Updated successfully",
|
||||
"deleteSuccess": "Deleted successfully",
|
||||
"createSuccess": "Created successfully",
|
||||
"error": "An error occurred. Please try again.",
|
||||
"confirmDelete": "Are you sure you want to delete this item?"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"title": "Dashboard in Progress",
|
||||
"message": "We're crafting a powerful dashboard experience to give you better insights. Please check back soon!"
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"title": "Dropdowns Configuration",
|
||||
"noPermission": "You do not have permission to view any dropdown configurations.",
|
||||
"tabs": {
|
||||
"locationTypes": "Location Types",
|
||||
"packageTypes": "Package Types",
|
||||
"packageMaterials": "Package Materials",
|
||||
"productCategories": "Product Categories"
|
||||
},
|
||||
"locationTypes": {
|
||||
"title": "Location Types",
|
||||
"addButton": "Add Location Type",
|
||||
"editTitle": "Edit Location Type",
|
||||
"addTitle": "Add Location Type",
|
||||
"deleteTitle": "Delete Location Type?",
|
||||
"deleteMessage": "Are you sure you want to delete this location type? This action cannot be undone.",
|
||||
"name": "Name",
|
||||
"namePlaceholder": "Enter location type name"
|
||||
},
|
||||
"packageTypes": {
|
||||
"title": "Package Types",
|
||||
"addButton": "Add Package Type",
|
||||
"editTitle": "Edit Package Type",
|
||||
"addTitle": "Add Package Type",
|
||||
"deleteTitle": "Delete Package Type?",
|
||||
"deleteMessage": "Are you sure you want to delete this package type? This action cannot be undone.",
|
||||
"name": "Name",
|
||||
"namePlaceholder": "Enter package type name"
|
||||
},
|
||||
"packageMaterials": {
|
||||
"title": "Package Materials",
|
||||
"addButton": "Add Package Material",
|
||||
"editTitle": "Edit Package Material",
|
||||
"addTitle": "Add Package Material",
|
||||
"deleteTitle": "Delete Package Material?",
|
||||
"deleteMessage": "Are you sure you want to delete this package material? This action cannot be undone.",
|
||||
"name": "Name",
|
||||
"namePlaceholder": "Enter package material name"
|
||||
},
|
||||
"productCategories": {
|
||||
"title": "Product Categories",
|
||||
"addButton": "Add Product Category",
|
||||
"editTitle": "Edit Product Category",
|
||||
"addTitle": "Add Product Category",
|
||||
"deleteTitle": "Delete Product Category?",
|
||||
"deleteMessage": "Are you sure you want to delete this product category? This action cannot be undone.",
|
||||
"name": "Name",
|
||||
"namePlaceholder": "Enter product category name"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"title": "Locations",
|
||||
"subTitle": "Manage your warehouse and hub locations.",
|
||||
"headers": {
|
||||
"addLocation": "Add Location",
|
||||
"addNewLocation": "Add New Location",
|
||||
"editLocation": "Edit Location",
|
||||
"noLocationsFound": "No Locations Found",
|
||||
"viewMap": "View Map",
|
||||
"locationOnMap": "Location on Map"
|
||||
},
|
||||
"messages": {
|
||||
"noLocationsDescription": "Add your warehouse or hub locations to manage pickups efficiently.",
|
||||
"deleteConfirmation": "Are you sure you want to delete this location? This action cannot be undone.",
|
||||
"deleteTitle": "Delete Location?",
|
||||
"saveSuccess": "Location saved successfully",
|
||||
"fetchError": "Failed to fetch locations",
|
||||
"fetchDetailsError": "Failed to fetch location details",
|
||||
"loading": "Loading..."
|
||||
},
|
||||
"fields": {
|
||||
"name": "Location Name",
|
||||
"namePlaceholder": "e.g. Main Warehouse, Hub Unit 1",
|
||||
"type": "Location Type",
|
||||
"locationType": "Location Type",
|
||||
"selectType": "Select Type",
|
||||
"active": "Active",
|
||||
"usedForRouting": "Used for Routing",
|
||||
"warehouse": "Warehouse",
|
||||
"hub": "Hub",
|
||||
"factory": "Factory",
|
||||
"capabilities": "Capabilities",
|
||||
"capabilitiesPlaceholder": "Select capabilities...",
|
||||
"country": "Country",
|
||||
"zipCode": "Pincode/Zip Code",
|
||||
"state": "State",
|
||||
"city": "City",
|
||||
"addressLine1": "Address Line 1",
|
||||
"addressLine1Placeholder": "Street address, building, etc.",
|
||||
"addressLine2": "Address Line 2 (Optional)",
|
||||
"addressLine2Placeholder": "Apartment, suite, unit, etc.",
|
||||
"latitude": "Latitude",
|
||||
"longitude": "Longitude",
|
||||
"selectState": "Select State",
|
||||
"selectCity": "Select City",
|
||||
"autoFilled": "Auto-filled",
|
||||
"enterState": "Enter State",
|
||||
"enterCity": "Enter City"
|
||||
},
|
||||
"actions": {
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"cancel": "Cancel",
|
||||
"save": "Save Location",
|
||||
"saving": "Saving...",
|
||||
"viewMap": "View Map"
|
||||
},
|
||||
"validation": {
|
||||
"nameRequired": "Name is required",
|
||||
"typeRequired": "Type is required",
|
||||
"addressRequired": "Address is required",
|
||||
"zipCodeRequired": "Pincode is required",
|
||||
"cityRequired": "City is required",
|
||||
"stateRequired": "State is required",
|
||||
"countryRequired": "Country is required"
|
||||
},
|
||||
"capabilities": {
|
||||
"coldStorage": "Cold Storage",
|
||||
"hazardousMaterials": "Hazardous Materials",
|
||||
"access247": "24/7 Access",
|
||||
"loadingDock": "Loading Dock",
|
||||
"forkliftAvailable": "Forklift Available",
|
||||
"cctvSurveillance": "CCTV Surveillance",
|
||||
"climateControlled": "Climate Controlled",
|
||||
"bondedWarehouse": "Bonded Warehouse",
|
||||
"crossDocking": "Cross Docking",
|
||||
"orderFulfillment": "Order Fulfillment",
|
||||
"inventoryManagement": "Inventory Management",
|
||||
"lastMileDelivery": "Last Mile Delivery",
|
||||
"returnsProcessing": "Returns Processing",
|
||||
"realTimeTracking": "Real-time Tracking",
|
||||
"fdaApproved": "FDA Approved",
|
||||
"customsClearance": "Customs Clearance"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
{
|
||||
"tabs": {
|
||||
"all": "All",
|
||||
"new": "Orders",
|
||||
"picked": "Picked",
|
||||
"packed": "Packed",
|
||||
"ready": "Ready To Ship",
|
||||
"pickups": "Pickups & Manifests",
|
||||
"transit": "In Transit",
|
||||
"delivered": "Delivered"
|
||||
},
|
||||
"columns": {
|
||||
"order": "Order",
|
||||
"manifestId": "Manifest ID",
|
||||
"expectedDelivery": "Expected Delivery",
|
||||
"customer": "Customer",
|
||||
"product": "Product",
|
||||
"payment": "Payment",
|
||||
"pickupAddress": "Pickup Address",
|
||||
"courier": "Courier",
|
||||
"status": "Status",
|
||||
"action": "Action",
|
||||
"orders": "Orders",
|
||||
"totalValue": "Total Value",
|
||||
"pickup": "Pickup",
|
||||
"deliveryMethod": "Delivery Method"
|
||||
},
|
||||
"actions": {
|
||||
"addOrder": "Add Order",
|
||||
"updateOrder": "Update Order",
|
||||
"cancelOrder": "Cancel",
|
||||
"createOrder": "Create Order",
|
||||
"bulkSchedule": "Schedule Pickup",
|
||||
"bulkShip": "Ship Now",
|
||||
"schedulePickup": "Schedule Pickup",
|
||||
"shipNow": "Ship Now",
|
||||
"markDelivered": "Mark Delivered",
|
||||
"viewDetails": "View Details",
|
||||
"viewProof": "View Proof",
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"scheduleShipment": "Schedule Shipment",
|
||||
"markInTransit": "Mark In Transit",
|
||||
"backToOrders": "Back to Orders",
|
||||
"markPacked": "Mark as Packed",
|
||||
"markReady": "Mark as Ready",
|
||||
"readyToPick": "Ready To Pick",
|
||||
"readyToPack": "Ready To Pack",
|
||||
"readyToShip": "Ready To Ship",
|
||||
"label": "Label",
|
||||
"markLabelled": "Mark as Labeled"
|
||||
},
|
||||
"status": {
|
||||
"new": "New",
|
||||
"ready": "Ready",
|
||||
"readyToShip": "Ready To Ship",
|
||||
"readyForTransit": "Ready For Transit",
|
||||
"inTransit": "In Transit",
|
||||
"shipped": "Shipped",
|
||||
"delivered": "Delivered",
|
||||
"pickupScheduled": "Pickup Scheduled"
|
||||
},
|
||||
"labels": {
|
||||
"orderId": "Order ID",
|
||||
"orderTime": "Order Time",
|
||||
"customerName": "Customer Name",
|
||||
"customerPhone": "Customer Phone",
|
||||
"quantity": "Quantity",
|
||||
"volumetricWeight": "Volumetric wt.",
|
||||
"cod": "COD",
|
||||
"prepaid": "Prepaid",
|
||||
"trackingNumber": "Tracking Number",
|
||||
"carrierName": "Carrier Name",
|
||||
"moreItems": "+ {{count}} more items",
|
||||
"receivedBy": "Received by",
|
||||
"pickupAddress": "Pickup Address",
|
||||
"selectLocation": "Select from Saved Locations",
|
||||
"chooseLocation": "Choose a location...",
|
||||
"deliveryDetails": "Delivery Details",
|
||||
"deliveryDetailsSub": "Enter the Delivery Details of your buyer for whom you are making this order",
|
||||
"billingDetails": "Billing Details",
|
||||
"billingDetailsSub": "Enter Billing Details if different from Delivery Details",
|
||||
"mobileNumber": "Mobile Number",
|
||||
"enterMobile": "Enter mobile number",
|
||||
"fullName": "Full Name",
|
||||
"enterFullName": "Enter Full Name",
|
||||
"country": "Country",
|
||||
"selectCountry": "Search and select country",
|
||||
"postalCode": "Postal/Zip Code",
|
||||
"enterPostalCode": "Enter postal code",
|
||||
"state": "State/Province",
|
||||
"city": "City",
|
||||
"address": "Address",
|
||||
"enterAddress": "Enter detailed address, apart. no, etc",
|
||||
"landmark": "Landmark (Optional)",
|
||||
"enterLandmark": "E.g. near ...",
|
||||
"sameAsDelivery": "Same as Delivery Address",
|
||||
"orderSummary": "Order Summary",
|
||||
"orderSummarySub": "Add products, payment details and review totals.",
|
||||
"productDetails": "Product Details",
|
||||
"addProduct": "Add Product",
|
||||
"paymentDetails": "Payment Details",
|
||||
"paymentMethod": "Payment Method",
|
||||
"selectPaymentMethod": "Select payment method",
|
||||
"invoiceValue": "Invoice Value",
|
||||
"enterAmount": "Enter amount"
|
||||
},
|
||||
"fields": {
|
||||
"productName": "Product Name",
|
||||
"productNamePlaceholder": "E.g. T-Shirt, Electronics",
|
||||
"quantity": "Quantity",
|
||||
"deadWeight": "Dead Weight (kg)",
|
||||
"volumetricWeight": "Volumetric Weight (kg)",
|
||||
"length": "Length (cm)",
|
||||
"breadth": "Breadth (cm)",
|
||||
"height": "Height (cm)",
|
||||
"category": "Item Category",
|
||||
"categoryPlaceholder": "Select category"
|
||||
},
|
||||
"messages": {
|
||||
"ordersMarkedReady": "{{count}} orders marked as Ready to Ship",
|
||||
"manifestCreated": "Manifest created for {{count}} orders",
|
||||
"confirmShipOrder": "Are you sure you want to mark this order as Ready to Ship?",
|
||||
"confirmBulkShip": "Mark {{count}} selected orders as Ready to Ship?",
|
||||
"deleteOrderTitle": "Delete Order",
|
||||
"confirmDelete": "Are you sure you want to delete order {{orderId}}? This action cannot be undone.",
|
||||
"moveToReadyTitle": "Move to Ready To Ship?",
|
||||
"moveToReadySingle": "This will update order {{orderId}} to Ready To Ship.",
|
||||
"moveToReadyBulk": "This will update the selected orders to Ready To Ship.",
|
||||
"moveToReadyBulkCount": "This will update {{count}} selected orders to Ready To Ship.",
|
||||
"selectLocationError": "Please select or create a pickup location",
|
||||
"validationError": "Please check the form for errors",
|
||||
"moveToPickedTitle": "Move to Picked?",
|
||||
"moveToPickedSingle": "This will update order {{orderId}} to Picked.",
|
||||
"packageLabeled": "Package marked as Labeled",
|
||||
"labelError": "Failed to mark package as labeled",
|
||||
"packageReadyToShip": "Package marked Ready To Ship",
|
||||
"updateStatusError": "Failed to update package status",
|
||||
"confirmReadyToShip": "Are you sure you want to mark this package as Ready To Ship?"
|
||||
},
|
||||
"modal": {
|
||||
"packOrder": "Pack Order {{orderId}}",
|
||||
"shipOrder": "Ship Order {{orderId}}",
|
||||
"scanPack": "Scan this QR code to confirm packaging and mark as Packed.",
|
||||
"scanShip": "Scan this QR code to mark the order as Ready to Ship.",
|
||||
"suggestedPackaging": "Suggested Packaging",
|
||||
"dimensions": "Dims",
|
||||
"capacity": "Capacity",
|
||||
"noPackagingSuggestion": "No specific packaging suggestion found."
|
||||
},
|
||||
"packingWizard": {
|
||||
"title": "Ready to Pack ({{count}})",
|
||||
"recommendedPackaging": "Recommended Packaging",
|
||||
"use": "Use",
|
||||
"verifyItems": "Please verify the items for the following {{count}} order(s) before packing",
|
||||
"packOrders": "Pack Orders",
|
||||
"packageCreated": "Package Created!",
|
||||
"successMessage": "The orders have been successfully packed. Now create and attach the shipping label.",
|
||||
"printLabel": "Print Label",
|
||||
"packSuccess": "Orders packed successfully",
|
||||
"packError": "Failed to pack orders"
|
||||
},
|
||||
"schedulePickup": {
|
||||
"title": "Schedule Shipment",
|
||||
"generateManifestMessage": "Generate manifest and schedule pickup for {{count}} order{{plural}}.",
|
||||
"selectedPackages": "Selected Packages ({{count}})",
|
||||
"selectedOrders": "Selected Orders",
|
||||
"package": "Package: {{id}} ({{count}} order{{plural}})",
|
||||
"noOrdersSelected": "No orders selected. Select ready orders to create a manifest.",
|
||||
"totalOrderValue": "Total Order Value",
|
||||
"pickupDateTime": "Pickup Date & Time",
|
||||
"deliveryMethod": "Delivery Method",
|
||||
"selectDeliveryMethod": "Select delivery method",
|
||||
"pickupInstructions": "Pickup Instructions (Optional)",
|
||||
"pickupInstructionsPlaceholder": "Add any special instructions for the pickup...",
|
||||
"generateManifestButton": "Generate Manifest & Schedule",
|
||||
"deliveryMethods": {
|
||||
"external_carrier": "External Carrier (Delhivery, BlueDart, etc.)",
|
||||
"self_delivery": "Self Delivery",
|
||||
"courier_pickup": "Courier Partner Pickup"
|
||||
}
|
||||
},
|
||||
"trackingDetails": {
|
||||
"title": "Tracking for {{id}}",
|
||||
"titleAdd": "Add Tracking",
|
||||
"awb": "AWB/Tracking Number",
|
||||
"enterAwb": "Enter tracking number",
|
||||
"carrier": "Carrier Name",
|
||||
"enterCarrier": "Courier name",
|
||||
"url": "Tracking URL (Optional)",
|
||||
"urlPlaceholder": "https://...",
|
||||
"notes": "Tracking Notes (Optional)",
|
||||
"notesPlaceholder": "Add any tracking notes...",
|
||||
"expectedDelivery": "Expected Delivery Date",
|
||||
"markInTransit": "Mark In Transit"
|
||||
},
|
||||
"deliveredDetails": {
|
||||
"title": "Delivered - {{id}}",
|
||||
"titleAdd": "Mark Delivered",
|
||||
"deliveredAt": "Delivered At",
|
||||
"receivedBy": "Received By",
|
||||
"receivedByPlaceholder": "Receiver name",
|
||||
"proofUrl": "Proof URL",
|
||||
"proofUrlPlaceholder": "https://...",
|
||||
"deliveryNotes": "Delivery Notes",
|
||||
"deliveryNotesPlaceholder": "Add delivery notes...",
|
||||
"markDelivered": "Mark Delivered"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"title": "Packaging",
|
||||
"subTitle": "Manage your packaging inventory and types.",
|
||||
"actions": {
|
||||
"addPackage": "Add Package",
|
||||
"editPackage": "Edit Packaging",
|
||||
"createPackage": "Create Package",
|
||||
"updatePackage": "Update Package",
|
||||
"deletePackage": "Delete Package",
|
||||
"cancel": "Cancel",
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"backToPackaging": "Back to Packaging"
|
||||
},
|
||||
"columns": {
|
||||
"name": "Name",
|
||||
"type": "Type",
|
||||
"dimensions": "Dimensions (LxWxH)",
|
||||
"material": "Material",
|
||||
"cost": "Cost",
|
||||
"status": "Status",
|
||||
"actions": "Actions"
|
||||
},
|
||||
"fields": {
|
||||
"name": "Name",
|
||||
"namePlaceholder": "e.g. Small Box",
|
||||
"type": "Type",
|
||||
"typePlaceholder": "e.g. Box, Envelope",
|
||||
"sku": "SKU",
|
||||
"skuPlaceholder": "Optional SKU",
|
||||
"material": "Material",
|
||||
"materialPlaceholder": "e.g. Cardboard",
|
||||
"length": "Length (cm)",
|
||||
"width": "Width (cm)",
|
||||
"height": "Height (cm)",
|
||||
"weightCapacity": "Weight Capacity (kg)",
|
||||
"costPerUnit": "Cost Per Unit",
|
||||
"stockQuantity": "Stock Quantity",
|
||||
"activeStatus": "Active Status"
|
||||
},
|
||||
"status": {
|
||||
"active": "Active",
|
||||
"inactive": "Inactive"
|
||||
},
|
||||
"messages": {
|
||||
"deleteConfirmation": "Are you sure you want to delete this packaging item? This action cannot be undone.",
|
||||
"saveSuccess": "Packaging saved successfully",
|
||||
"deleteSuccess": "Packaging deleted successfully"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"title": "Profile",
|
||||
"subTitle": "View your account details",
|
||||
"sections": {
|
||||
"accountInfo": "Account Information",
|
||||
"appearance": "Appearance",
|
||||
"appearanceDesc": "Customize the look and feel of the application."
|
||||
},
|
||||
"fields": {
|
||||
"firstName": "First Name",
|
||||
"lastName": "Last Name",
|
||||
"email": "Email Address",
|
||||
"phone": "Phone Number",
|
||||
"tenant": "Tenant",
|
||||
"role": "Role",
|
||||
"accountCreated": "Account Created",
|
||||
"lastUpdated": "Last Updated",
|
||||
"unknown": "Unknown"
|
||||
},
|
||||
"buttons": {
|
||||
"changePassword": "Change Password",
|
||||
"editProfile": "Edit Profile",
|
||||
"updatePassword": "Update Password",
|
||||
"saveChanges": "Save Changes"
|
||||
},
|
||||
"modals": {
|
||||
"changePasswordTitle": "Change Password",
|
||||
"editProfileTitle": "Edit Profile",
|
||||
"currentPassword": "Current Password",
|
||||
"newPassword": "New Password",
|
||||
"confirmPassword": "Confirm New Password",
|
||||
"currentPasswordPlaceholder": "Enter your current password",
|
||||
"newPasswordPlaceholder": "Enter new password (min 8 characters)",
|
||||
"confirmPasswordPlaceholder": "Re-enter new password",
|
||||
"firstNamePlaceholder": "Enter your first name",
|
||||
"lastNamePlaceholder": "Enter your last name",
|
||||
"phonePlaceholder": "Enter your phone number"
|
||||
},
|
||||
"messages": {
|
||||
"passwordSuccess": "Password updated successfully",
|
||||
"profileSuccess": "Profile updated successfully",
|
||||
"passwordMismatch": "New passwords do not match",
|
||||
"passwordLength": "New password must be at least 8 characters",
|
||||
"requiredFields": "All fields are required",
|
||||
"firstNameRequired": "First name is required",
|
||||
"loadError": "Unable to load user profile. Please try refreshing the page."
|
||||
},
|
||||
"header": {
|
||||
"profileSettings": "Profile Settings",
|
||||
"signOut": "Sign out"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"title": "Roles",
|
||||
"add": "Add Role",
|
||||
"edit": "Edit Role",
|
||||
"delete": "Delete Role",
|
||||
"details": "Role Details",
|
||||
"subTitle": "Create a new role and optionally associate it with a tenant.",
|
||||
"backToRoles": "Back to Roles",
|
||||
"columns": {
|
||||
"roleName": "Role Name",
|
||||
"tenant": "Tenant",
|
||||
"created": "Created",
|
||||
"updated": "Updated",
|
||||
"actions": "Actions"
|
||||
},
|
||||
"fields": {
|
||||
"roleName": "Role Name",
|
||||
"roleNamePlaceholder": "Enter role name",
|
||||
"isDefault": "Set as Default Role",
|
||||
"accesses": "Accesses",
|
||||
"tenant": "Tenant",
|
||||
"tenantPlaceholder": "Select tenant (optional)",
|
||||
"tenantLoading": "Loading tenants...",
|
||||
"tenantAssigned": "Assigned tenant",
|
||||
"loading": "Loading..."
|
||||
},
|
||||
"actions": {
|
||||
"create": "Create Role",
|
||||
"update": "Save Changes",
|
||||
"cancel": "Cancel",
|
||||
"delete": "Delete Role",
|
||||
"close": "Close",
|
||||
"view": "View Details",
|
||||
"edit": "Edit Role"
|
||||
},
|
||||
"messages": {
|
||||
"deleteConfirm": "This role will be permanently removed.",
|
||||
"deleteTitle": "Delete role?",
|
||||
"loadError": "Unable to load roles.",
|
||||
"detailsError": "Failed to load role details",
|
||||
"updateError": "Failed to update role",
|
||||
"deleteError": "Failed to delete role",
|
||||
"addError": "Unable to add role.",
|
||||
"accessLoadError": "Unable to load access options.",
|
||||
"tenantLoadError": "Unable to load tenant.",
|
||||
"tenantsLoadError": "Unable to load tenants.",
|
||||
"confirmDelete": "Are you sure you want to delete this role?"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
{
|
||||
"title": "Users",
|
||||
"add": "Add User",
|
||||
"edit": "Edit User",
|
||||
"delete": "Delete User",
|
||||
"details": "User Details",
|
||||
"subTitle": "Create a new user and assign tenant and role details.",
|
||||
"backToUsers": "Back to Users",
|
||||
"columns": {
|
||||
"name": "Name",
|
||||
"email": "Email",
|
||||
"phone": "Phone",
|
||||
"status": "Status",
|
||||
"tenant": "Tenant",
|
||||
"role": "Role",
|
||||
"created": "Created At",
|
||||
"updated": "Updated At",
|
||||
"actions": "Actions"
|
||||
},
|
||||
"fields": {
|
||||
"firstName": "First Name",
|
||||
"firstNamePlaceholder": "Enter first name",
|
||||
"lastName": "Last Name",
|
||||
"lastNamePlaceholder": "Enter last name",
|
||||
"email": "Email",
|
||||
"emailPlaceholder": "user@example.com",
|
||||
"phone": "Mobile Number",
|
||||
"phonePlaceholder": "Enter phone number",
|
||||
"password": "Password",
|
||||
"passwordPlaceholder": "Enter password",
|
||||
"passwordEditPlaceholder": "Leave blank to keep current",
|
||||
"role": "Role",
|
||||
"rolePlaceholder": "Select role",
|
||||
"roleSuperAdminPlaceholder": "Select super admin role",
|
||||
"roleFilterPlaceholder": "Select tenant to filter roles",
|
||||
"tenant": "Tenant",
|
||||
"tenantPlaceholder": "Select tenant",
|
||||
"tenantLoading": "Loading tenants...",
|
||||
"roleLoading": "Loading roles...",
|
||||
"superAdminUser": "Super Admin User",
|
||||
"superAdminNoTenant": "Super admin (no tenant)",
|
||||
"assignedTenant": "Assigned tenant",
|
||||
"active": "Active"
|
||||
},
|
||||
"actions": {
|
||||
"create": "Create User",
|
||||
"update": "Save Changes",
|
||||
"cancel": "Cancel",
|
||||
"delete": "Delete User",
|
||||
"close": "Close",
|
||||
"view": "View Details",
|
||||
"edit": "Edit User"
|
||||
},
|
||||
"messages": {
|
||||
"deleteConfirm": "This user will be permanently removed.",
|
||||
"deleteTitle": "Delete user?",
|
||||
"updateSuccess": "User updated successfully",
|
||||
"createSuccess": "User created successfully",
|
||||
"loadError": "Unable to load users.",
|
||||
"addError": "Unable to add user.",
|
||||
"tenantLoadError": "Unable to load tenant.",
|
||||
"tenantsLoadError": "Unable to load tenants.",
|
||||
"rolesLoadError": "Unable to load roles.",
|
||||
"confirmDelete": "Are you sure you want to delete this user?"
|
||||
}
|
||||
}
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
|
||||
@import "tailwindcss";
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Default Palette (Navy) - fallback */
|
||||
--primary: #3B82F6;
|
||||
--primary-hover: #2563EB;
|
||||
|
||||
--sidebar-bg: #1D2A4B;
|
||||
--sidebar-text: #F1F5F9;
|
||||
--sidebar-text-muted: #94A3B8;
|
||||
--sidebar-active-bg: #0077FF;
|
||||
--sidebar-active-text: #FFFFFF;
|
||||
--sidebar-hover-bg: rgba(255,255,255,0.2);
|
||||
--sidebar-border: #334155;
|
||||
|
||||
--header-bg: #FFFFFF;
|
||||
--header-text: #1F2937;
|
||||
--header-border: #E5E7EB;
|
||||
|
||||
--background: #F9FAFB;
|
||||
--background-secondary: #FFFFFF;
|
||||
|
||||
--table-header-bg: #F8FAFC;
|
||||
--table-row-hover: #F1F5F9;
|
||||
--table-border: #E2E8F0;
|
||||
|
||||
/* Missing defaults */
|
||||
--text-primary: #1F2937;
|
||||
--text-secondary: #64748B;
|
||||
--card-bg: #FFFFFF;
|
||||
--card-border: #E2E8F0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: "Outfit", sans-serif;
|
||||
@apply text-base antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Hide number input arrows/spinners */
|
||||
.no-spinner::-webkit-inner-spin-button,
|
||||
.no-spinner::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.no-spinner {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
/* Hide Scrollbar but keep functionality */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
/* RTL Support */
|
||||
[dir="rtl"] {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
[dir="ltr"] {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/* RTL-aware padding and margin utilities */
|
||||
[dir="rtl"] .rtl\:text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir="rtl"] .rtl\:text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Mirror flex direction for RTL */
|
||||
[dir="rtl"] .rtl\:flex-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/* Sidebar adjustments for RTL */
|
||||
[dir="rtl"] .sidebar {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .main-content {
|
||||
margin-right: 240px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Table RTL alignment */
|
||||
[dir="rtl"] table {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir="rtl"] th,
|
||||
[dir="rtl"] td {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
import { toast } from "react-toastify";
|
||||
import { API_BASE_URL } from "../constant";
|
||||
import { AUTH_COOKIE_KEYS, clearAuthCookies, getCookie } from "./authCookies";
|
||||
import { isTokenExpired } from "./jwt";
|
||||
|
||||
type ApiRequestOptions = Omit<RequestInit, "body"> & {
|
||||
body?: unknown;
|
||||
toast?: boolean;
|
||||
/** Optional custom success message to show in a toast */
|
||||
successMessage?: string;
|
||||
/** Optional custom error message to show in a toast */
|
||||
errorMessage?: string;
|
||||
/** If true, silences all toast notifications for this request */
|
||||
silent?: boolean;
|
||||
};
|
||||
|
||||
let isRefreshing = false;
|
||||
let refreshQueue: (() => void)[] = [];
|
||||
const API_TOAST_OPTIONS = { autoClose: 2000 };
|
||||
|
||||
const hardLogout = () => {
|
||||
clearAuthCookies();
|
||||
toast.error(
|
||||
"Your session has expired. Please sign in again.",
|
||||
API_TOAST_OPTIONS
|
||||
);
|
||||
window.location.href = "/signin";
|
||||
};
|
||||
|
||||
const refreshAccessToken = async () => {
|
||||
const refreshToken = getCookie(AUTH_COOKIE_KEYS.refresh);
|
||||
if (!refreshToken) throw new Error("No refresh token");
|
||||
|
||||
const res = await fetch(`${API_BASE_URL}/api/auth/refresh`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ refresh_token: refreshToken }),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error("Refresh failed");
|
||||
return res.json();
|
||||
};
|
||||
|
||||
const request = async <T>(
|
||||
path: string,
|
||||
options: ApiRequestOptions = {}
|
||||
): Promise<T> => {
|
||||
const {
|
||||
body,
|
||||
headers,
|
||||
toast: shouldToast = true,
|
||||
successMessage,
|
||||
errorMessage,
|
||||
silent = false,
|
||||
...rest
|
||||
} = options;
|
||||
|
||||
const showToast = shouldToast && !silent;
|
||||
|
||||
const accessToken = getCookie(AUTH_COOKIE_KEYS.access);
|
||||
|
||||
if (accessToken && isTokenExpired(accessToken)) {
|
||||
try {
|
||||
if (!isRefreshing) {
|
||||
isRefreshing = true;
|
||||
await refreshAccessToken();
|
||||
isRefreshing = false;
|
||||
refreshQueue.forEach((cb) => cb());
|
||||
refreshQueue = [];
|
||||
} else {
|
||||
await new Promise<void>((resolve) => refreshQueue.push(resolve));
|
||||
}
|
||||
} catch {
|
||||
hardLogout();
|
||||
throw new Error("Session expired");
|
||||
}
|
||||
}
|
||||
|
||||
const requestHeaders = new Headers(headers);
|
||||
let requestBody: BodyInit | undefined;
|
||||
|
||||
if (body !== undefined) {
|
||||
if (body instanceof FormData) {
|
||||
requestBody = body;
|
||||
} else {
|
||||
requestHeaders.set("Content-Type", "application/json");
|
||||
requestBody = JSON.stringify(body);
|
||||
}
|
||||
}
|
||||
|
||||
const url = path.startsWith("http")
|
||||
? path
|
||||
: `${API_BASE_URL.replace(/\/$/, "")}${path.startsWith("/") ? path : `/${path}`
|
||||
}`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
...rest,
|
||||
headers: requestHeaders,
|
||||
credentials: "include",
|
||||
body: requestBody,
|
||||
});
|
||||
|
||||
// Global 401 handler - ignore for signin requests as they just mean invalid credentials
|
||||
if (response.status === 401 && !url.includes("/api/auth/signin")) {
|
||||
hardLogout();
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
|
||||
const contentType = response.headers.get("content-type") || "";
|
||||
const data =
|
||||
response.status === 204
|
||||
? null
|
||||
: contentType.includes("application/json")
|
||||
? await response.json()
|
||||
: await response.text();
|
||||
|
||||
if (!response.ok) {
|
||||
// Extract the specific error message from the backend response
|
||||
const backendError =
|
||||
typeof data === "object" && data !== null
|
||||
? (data as any).detail || (data as any).message
|
||||
: undefined;
|
||||
|
||||
// Prioritize backend error, then the custom errorMessage option, then a default
|
||||
const finalErrorMessage = backendError || errorMessage || "Request failed";
|
||||
|
||||
if (showToast) {
|
||||
toast.error(finalErrorMessage, API_TOAST_OPTIONS);
|
||||
}
|
||||
|
||||
// Throw the actual message so the caller (e.g., SignInForm) can display it
|
||||
throw new Error(finalErrorMessage);
|
||||
}
|
||||
|
||||
const method = String(rest.method || "GET").toUpperCase();
|
||||
|
||||
if (showToast && method !== "GET") {
|
||||
const defaultSuccess =
|
||||
method === "POST"
|
||||
? "Created successfully"
|
||||
: method === "PUT" || method === "PATCH"
|
||||
? "Updated successfully"
|
||||
: method === "DELETE"
|
||||
? "Deleted successfully"
|
||||
: "Action successful";
|
||||
|
||||
const msg =
|
||||
(successMessage as string) ?? (data?.message as string) ?? defaultSuccess;
|
||||
toast.success(msg, API_TOAST_OPTIONS);
|
||||
}
|
||||
|
||||
return data as T;
|
||||
};
|
||||
|
||||
export const apiClient = {
|
||||
get: <T>(path: string, options?: ApiRequestOptions) =>
|
||||
request<T>(path, { ...options, method: "GET" }),
|
||||
|
||||
post: <T>(path: string, body?: unknown, options?: ApiRequestOptions) =>
|
||||
request<T>(path, { ...options, method: "POST", body }),
|
||||
|
||||
put: <T>(path: string, body?: unknown, options?: ApiRequestOptions) =>
|
||||
request<T>(path, { ...options, method: "PUT", body }),
|
||||
|
||||
patch: <T>(path: string, body?: unknown, options?: ApiRequestOptions) =>
|
||||
request<T>(path, { ...options, method: "PATCH", body }),
|
||||
|
||||
delete: <T>(path: string, options?: ApiRequestOptions) =>
|
||||
request<T>(path, { ...options, method: "DELETE" }),
|
||||
};
|
||||
@@ -0,0 +1,59 @@
|
||||
import {type TokenResponse } from "../application/Authentication/AuthTypes";
|
||||
|
||||
export const AUTH_COOKIE_KEYS = {
|
||||
access: "access_token",
|
||||
refresh: "refresh_token",
|
||||
};
|
||||
|
||||
const ACCESS_MAX_AGE_SECONDS = 60 * 60; // 1 hour
|
||||
const REFRESH_MAX_AGE_SECONDS = 60 * 60 * 24 * 7; // 7 days
|
||||
|
||||
const buildCookieOptions = (maxAgeSeconds?: number) => {
|
||||
const options = ["path=/", "samesite=lax"];
|
||||
|
||||
if (typeof maxAgeSeconds === "number") {
|
||||
options.push(`max-age=${maxAgeSeconds}`);
|
||||
}
|
||||
|
||||
if (window.location.protocol === "https:") {
|
||||
options.push("secure");
|
||||
}
|
||||
|
||||
return options.join("; ");
|
||||
};
|
||||
|
||||
const setCookie = (name: string, value: string, maxAgeSeconds?: number) => {
|
||||
const encodedValue = encodeURIComponent(value);
|
||||
document.cookie = `${name}=${encodedValue}; ${buildCookieOptions(maxAgeSeconds)}`;
|
||||
};
|
||||
|
||||
const deleteCookie = (name: string) => {
|
||||
document.cookie = `${name}=; ${buildCookieOptions(0)}`;
|
||||
};
|
||||
|
||||
export const getCookie = (name: string) => {
|
||||
const cookies = document.cookie.split(";").map((cookie) => cookie.trim());
|
||||
const match = cookies.find((cookie) => cookie.startsWith(`${name}=`));
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
const rawValue = match.substring(name.length + 1);
|
||||
return decodeURIComponent(rawValue);
|
||||
};
|
||||
|
||||
export const setAuthCookies = (tokens: TokenResponse, rememberMe = false) => {
|
||||
// Store tokens in cookies so they can be reused across page refreshes.
|
||||
const accessMaxAge = rememberMe ? ACCESS_MAX_AGE_SECONDS : undefined;
|
||||
const refreshMaxAge = rememberMe ? REFRESH_MAX_AGE_SECONDS : undefined;
|
||||
|
||||
setCookie(AUTH_COOKIE_KEYS.access, tokens.access_token, accessMaxAge);
|
||||
setCookie(AUTH_COOKIE_KEYS.refresh, tokens.refresh_token, refreshMaxAge);
|
||||
};
|
||||
|
||||
export const clearAuthCookies = () => {
|
||||
// Clear both cookies on logout or auth failure.
|
||||
deleteCookie(AUTH_COOKIE_KEYS.access);
|
||||
deleteCookie(AUTH_COOKIE_KEYS.refresh);
|
||||
};
|
||||
|
||||
export const getAccessToken = () => getCookie(AUTH_COOKIE_KEYS.access);
|
||||
@@ -0,0 +1,9 @@
|
||||
export const isTokenExpired = (token: string): boolean => {
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split(".")[1]));
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
return payload.exp < now;
|
||||
} catch {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
export const usePermission = () => {
|
||||
const { hasAccess, isLoading } = useAuth();
|
||||
|
||||
return {
|
||||
can: (accessCode: string) => {
|
||||
if (isLoading) return false;
|
||||
return hasAccess(accessCode);
|
||||
},
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Navigate } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { CustomLoader } from "../components/custom";
|
||||
import AppLayout from "../components/layout/AppLayout";
|
||||
|
||||
const ProtectedRoutes = () => {
|
||||
const { isAuthenticated, isLoading } = useAuth();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-gray-50">
|
||||
<CustomLoader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Block access to protected pages when the user is not signed in.
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to="/signin" replace />;
|
||||
}
|
||||
|
||||
return <AppLayout />;
|
||||
};
|
||||
|
||||
export default ProtectedRoutes;
|
||||
@@ -0,0 +1,32 @@
|
||||
import { Route, Routes, Navigate } from "react-router-dom";
|
||||
|
||||
import SignInPage from "../application/Authentication/SignInPage";
|
||||
import SignUpPage from "../application/Authentication/SignUpPage";
|
||||
import ResetPasswordPage from "../application/Authentication/ResetPasswordPage";
|
||||
import Dashboard from "../application/dashboard/Dashboard";
|
||||
import ProfilePage from "../application/profile/ProfilePage";
|
||||
import ProtectedRoutes from "./ProtectedRoutes";
|
||||
|
||||
const AppRoutes = () => {
|
||||
return (
|
||||
<Routes>
|
||||
{/* Public Routes */}
|
||||
<Route path="/signin" element={<SignInPage />} />
|
||||
<Route path="/signup" element={<SignUpPage />} />
|
||||
<Route path="/reset-password" element={<ResetPasswordPage />} />
|
||||
|
||||
{/* Protected Routes */}
|
||||
<Route element={<ProtectedRoutes />}>
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/profile" element={<ProfilePage />} />
|
||||
{/* Redirect root to dashboard if logged in (ProtectedRoutes handles auth check usually, or we redirect to signin if not) */}
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
</Route>
|
||||
|
||||
{/* Catch all - Redirect to dashboard which will handle auth or show dashboard */}
|
||||
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppRoutes;
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(),tailwindcss()],
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user