melabidi/carmanagement
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

unfied style

Browse Source
This commit is contained in:
root
2026-05-23 04:35:47 -04:00
parent fd10d0db6a
commit 07fba16ff2
57 changed files with 565 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin/src/app/dashboard/layout.tsx
+11 -11
View File
@@ -11,7 +11,7 @@ import {
import { resolveBrowserAppUrl } from '@/lib/appUrls'
function buildUnifiedLoginUrl(nextPath: string) {
const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard')
const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
const params = new URLSearchParams({
portal: 'admin',
next: nextPath || '/dashboard',
@@ -50,18 +50,18 @@ export default function AdminDashboardLayout({ children }: { children: React.Rea
if (!ready) {
return (
<div className="flex h-screen items-center justify-center bg-zinc-950">
<div className="h-6 w-6 rounded-full border-2 border-emerald-500 border-t-transparent animate-spin" aria-label={dict.loading} />
<div className="flex h-screen items-center justify-center bg-[linear-gradient(180deg,#f8f5ef_0%,#f4efe6_28%,#fffdf8_58%,#ffffff_100%)] dark:bg-[linear-gradient(180deg,#14110f_0%,#17120d_35%,#0c0a09_100%)]">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-amber-500 border-t-transparent" aria-label={dict.loading} />
</div>
)
}
return (
<div className="flex h-screen bg-zinc-950 text-zinc-100 transition-colors">
<aside className="w-60 flex-shrink-0 flex flex-col border-r border-zinc-800 bg-zinc-900 transition-colors">
<div className="flex h-screen bg-[linear-gradient(180deg,#f8f5ef_0%,#f4efe6_28%,#fffdf8_58%,#ffffff_100%)] text-stone-900 transition-colors dark:bg-[linear-gradient(180deg,#14110f_0%,#17120d_35%,#0c0a09_100%)] dark:text-stone-100">
<aside className="flex w-60 flex-shrink-0 flex-col border-r border-stone-200/80 bg-white/78 backdrop-blur-xl transition-colors dark:border-stone-800 dark:bg-stone-950/78">
<Link href="/" className="block px-5 py-6">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-400">{dict.admin}</p>
<p className="mt-0.5 text-sm font-semibold text-zinc-100">RentalDriveGo</p>
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-amber-700 dark:text-amber-300">{dict.admin}</p>
<p className="mt-0.5 text-sm font-semibold text-stone-950 dark:text-stone-100">RentalDriveGo</p>
</Link>
<nav className="flex-1 px-3 space-y-0.5">
{navLinks.map((link) => {
@@ -71,7 +71,7 @@ export default function AdminDashboardLayout({ children }: { children: React.Rea
key={link.href}
href={link.href}
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors ${
active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50'
active ? 'bg-stone-900 text-white dark:bg-amber-400 dark:text-stone-950' : 'text-stone-500 hover:text-stone-950 hover:bg-stone-100 dark:text-stone-400 dark:hover:text-white dark:hover:bg-stone-800'
}`}
>
<svg className="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
@@ -85,20 +85,20 @@ export default function AdminDashboardLayout({ children }: { children: React.Rea
<div className="px-3 py-4">
<button
onClick={handleLogout}
className="flex w-full items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-zinc-500 transition-colors hover:bg-zinc-800/50 hover:text-red-400"
className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-stone-500 transition-colors hover:bg-stone-100 hover:text-red-500 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-red-300"
>
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
{dict.logout}
</button>
<div className="mt-4 flex flex-col items-center gap-3 border-t border-zinc-800 pt-4">
<div className="mt-4 flex flex-col items-center gap-3 border-t border-stone-200/80 pt-4 dark:border-stone-800">
<AdminLanguageSwitcher />
<AdminThemeSwitcher />
</div>
</div>
</aside>
<main className="flex-1 overflow-y-auto bg-zinc-950 transition-colors">{children}</main>
<main className="flex-1 overflow-y-auto transition-colors">{children}</main>
</div>
)
}
apps/admin/src/app/forgot-password/page.tsx
+4 -4
View File
@@ -35,7 +35,7 @@ export default function AdminForgotPasswordPage() {
<main className="flex flex-1 items-center justify-center px-4">
<div className="w-full max-w-md">
<div className="mb-8 text-center">
<Link href="/" className="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-400">RentalDriveGo</Link>
<Link href="/" className="text-xs font-semibold uppercase tracking-[0.2em] text-amber-700 dark:text-amber-300">RentalDriveGo</Link>
<h1 className="mt-3 text-3xl font-black tracking-tight">Forgot password</h1>
<p className="mt-1 text-sm text-zinc-400">Enter your admin email to receive a reset link.</p>
</div>
@@ -57,20 +57,20 @@ export default function AdminForgotPasswordPage() {
<div className="rounded-xl border border-red-900/50 bg-red-950/50 px-4 py-3 text-sm text-red-400">{error}</div>
)}
<div>
<label className="block text-sm font-medium text-zinc-300 mb-1.5">Email</label>
<label className="mb-1.5 block text-sm font-medium text-zinc-300">Email</label>
<input
type="email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="admin@rentaldrivego.com"
className="w-full px-3 py-2.5 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 placeholder:text-zinc-500 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full py-2.5 px-4 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold transition-colors disabled:opacity-50"
className="inline-flex w-full justify-center rounded-full bg-stone-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-stone-700 disabled:opacity-50 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300"
>
{loading ? 'Sending…' : 'Send reset link'}
</button>
apps/admin/src/app/globals.css
+109 -13
View File
@@ -11,7 +11,9 @@ html.dark {
}
body {
@apply bg-zinc-950 text-zinc-50 antialiased transition-colors;
@apply text-stone-900 antialiased transition-colors dark:text-stone-100;
background-image:
linear-gradient(180deg, #f8f5ef 0%, #f4efe6 28%, #fffdf8 58%, #ffffff 100%);
}
.shell {
@@ -19,17 +21,111 @@ body {
}
.panel {
@apply rounded-2xl border border-zinc-800 bg-zinc-900 shadow-sm;
@apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.26)];
border-color: rgb(231 229 228 / 0.8);
background-color: rgb(255 255 255 / 0.82);
}
html.dark body {
background-image:
linear-gradient(180deg, #14110f 0%, #17120d 35%, #0c0a09 100%);
}
html.dark .panel {
border-color: rgb(41 37 36 / 0.96);
background-color: rgb(28 25 23 / 0.72);
}
@layer utilities {
.light body {
background-color: rgb(248 250 252);
color: rgb(15 23 42);
color: rgb(28 25 23);
}
.bg-zinc-950 {
background-color: rgb(12 10 9);
}
.bg-zinc-950\/90 {
background-color: rgb(28 25 23 / 0.9);
}
.bg-zinc-900 {
background-color: rgb(28 25 23);
}
.bg-zinc-800,
.bg-zinc-800\/50 {
background-color: rgb(41 37 36);
}
.border-zinc-800,
.border-zinc-700 {
border-color: rgb(68 64 60);
}
.text-zinc-100,
.text-zinc-200 {
color: rgb(250 250 249);
}
.text-zinc-500 {
color: rgb(168 162 158);
}
.text-zinc-400,
.text-zinc-300 {
color: rgb(120 113 108);
}
.hover\:bg-zinc-800:hover,
.hover\:bg-zinc-800\/50:hover {
background-color: rgb(68 64 60);
}
.hover\:text-zinc-200:hover {
color: rgb(250 250 249);
}
.text-emerald-400 {
color: rgb(252 211 77);
}
.bg-emerald-600 {
background-color: rgb(28 25 23);
}
.hover\:bg-emerald-500:hover {
background-color: rgb(68 64 60);
}
.dark .bg-emerald-600 {
background-color: rgb(251 191 36);
}
.dark .hover\:bg-emerald-500:hover {
background-color: rgb(252 211 77);
}
.bg-emerald-900\/30,
.bg-emerald-950\/40,
.bg-emerald-950\/50 {
background-color: rgb(120 53 15 / 0.32);
}
.border-emerald-500 {
border-color: rgb(245 158 11);
}
.focus\:ring-emerald-500:focus {
--tw-ring-color: rgb(217 119 6 / 0.45);
}
.hover\:bg-emerald-900\/50:hover {
background-color: rgb(146 64 14 / 0.42);
}
.light .bg-zinc-950 {
background-color: rgb(248 250 252);
background-color: rgb(255 253 248);
}
.light .bg-zinc-950\/90 {
@@ -37,39 +133,39 @@ body {
}
.light .bg-zinc-900 {
background-color: rgb(255 255 255);
background-color: rgb(255 255 255 / 0.82);
}
.light .bg-zinc-800,
.light .bg-zinc-800\/50 {
background-color: rgb(241 245 249);
background-color: rgb(245 245 244);
}
.light .border-zinc-800,
.light .border-zinc-700 {
border-color: rgb(226 232 240);
border-color: rgb(231 229 228);
}
.light .text-zinc-100,
.light .text-zinc-200 {
color: rgb(15 23 42);
color: rgb(28 25 23);
}
.light .text-zinc-500 {
color: rgb(100 116 139);
color: rgb(120 113 108);
}
.light .text-zinc-400,
.light .text-zinc-300 {
color: rgb(71 85 105);
color: rgb(87 83 78);
}
.light .hover\:bg-zinc-800:hover,
.light .hover\:bg-zinc-800\/50:hover {
background-color: rgb(241 245 249);
background-color: rgb(245 245 244);
}
.light .hover\:text-zinc-200:hover {
color: rgb(15 23 42);
color: rgb(28 25 23);
}
}
apps/admin/src/app/layout.tsx
+2 -2
View File
@@ -9,12 +9,12 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className="dark" suppressHydrationWarning>
<html lang="en" className="light" suppressHydrationWarning>
<head>
<script
dangerouslySetInnerHTML={{
__html:
"(function(){try{var theme=localStorage.getItem('admin-theme');if(theme!=='light'&&theme!=='dark'){theme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}document.documentElement.classList.remove('light','dark');document.documentElement.classList.add(theme);document.documentElement.style.colorScheme=theme}catch(e){}})();",
"(function(){try{var m=document.cookie.match(/(?:^|; )rentaldrivego-theme=([^;]+)/);var theme=m?decodeURIComponent(m[1]):(localStorage.getItem('rentaldrivego-theme')||localStorage.getItem('admin-theme'));if(theme!=='light'&&theme!=='dark'){theme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}document.documentElement.classList.remove('light','dark');document.documentElement.classList.add(theme);document.documentElement.style.colorScheme=theme;document.body&&document.body.setAttribute('data-theme',theme)}catch(e){}})();",
}}
/>
</head>
apps/admin/src/app/login/page.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { resolveServerAppUrl } from '@/lib/appUrls'
export default function AdminLoginPage() {
const requestHeaders = headers()
const dashboardUrl = resolveServerAppUrl(
process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard',
process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
requestHeaders.get('host'),
requestHeaders.get('x-forwarded-proto'),
)
apps/admin/src/app/reset-password/page.tsx
+7 -7
View File
@@ -77,7 +77,7 @@ function AdminResetPasswordContent() {
<button
type="button"
onClick={() => router.push('/login')}
className="mt-2 w-full py-2.5 px-4 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold transition-colors"
className="mt-2 inline-flex w-full justify-center rounded-full bg-stone-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-stone-700 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300"
>
Sign in
</button>
@@ -93,7 +93,7 @@ function AdminResetPasswordContent() {
<div className="rounded-xl border border-red-900/50 bg-red-950/50 px-4 py-3 text-sm text-red-400">{error}</div>
)}
<div>
<label className="block text-sm font-medium text-zinc-300 mb-1.5">New password</label>
<label className="mb-1.5 block text-sm font-medium text-zinc-300">New password</label>
<input
type="password"
required
@@ -101,11 +101,11 @@ function AdminResetPasswordContent() {
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
className="w-full px-3 py-2.5 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100"
/>
</div>
<div>
<label className="block text-sm font-medium text-zinc-300 mb-1.5">Confirm password</label>
<label className="mb-1.5 block text-sm font-medium text-zinc-300">Confirm password</label>
<input
type="password"
required
@@ -113,13 +113,13 @@ function AdminResetPasswordContent() {
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
placeholder="••••••••"
className="w-full px-3 py-2.5 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full py-2.5 px-4 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold transition-colors disabled:opacity-50"
className="inline-flex w-full justify-center rounded-full bg-stone-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-stone-700 disabled:opacity-50 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300"
>
{loading ? 'Resetting…' : 'Reset password'}
</button>
@@ -140,7 +140,7 @@ function AdminResetShell({ children }: { children: React.ReactNode }) {
<main className="flex flex-1 items-center justify-center px-4">
<div className="w-full max-w-md">
<div className="mb-8 text-center">
<Link href="/" className="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-400">RentalDriveGo</Link>
<Link href="/" className="text-xs font-semibold uppercase tracking-[0.2em] text-amber-700 dark:text-amber-300">RentalDriveGo</Link>
<h1 className="mt-3 text-3xl font-black tracking-tight">Reset password</h1>
</div>
<div className="panel p-8">{children}</div>
apps/admin/src/components/I18nProvider.tsx
+11 -10
View File
@@ -87,6 +87,8 @@ const languageMeta = {
ar: { flag: '🇲🇦', shortLabel: 'AR' },
} as const
const SHARED_THEME_KEY = 'rentaldrivego-theme'
type AdminI18nContext = {
language: AdminLanguage
setLanguage: (value: AdminLanguage) => void
@@ -99,14 +101,14 @@ const Context = createContext<AdminI18nContext | null>(null)
export function AdminI18nProvider({ children }: { children: React.ReactNode }) {
const [language, setLanguage] = useState<AdminLanguage>('en')
const [theme, setTheme] = useState<AdminTheme>('dark')
const [theme, setTheme] = useState<AdminTheme>('light')
// Skip the very first write so we don't overwrite a stored preference with
// the default 'en' value before the hydration read-effect has applied it.
const skipFirstLangWrite = useRef(true)
useEffect(() => {
const stored = window.localStorage.getItem('admin-language')
const storedTheme = window.localStorage.getItem('admin-theme')
const storedTheme = window.localStorage.getItem(SHARED_THEME_KEY) ?? window.localStorage.getItem('admin-theme')
if (stored === 'en' || stored === 'fr' || stored === 'ar') {
setLanguage(stored)
}
@@ -136,6 +138,8 @@ export function AdminI18nProvider({ children }: { children: React.ReactNode }) {
document.documentElement.classList.add(theme)
document.documentElement.style.colorScheme = theme
document.body.dataset.theme = theme
document.cookie = `${SHARED_THEME_KEY}=${encodeURIComponent(theme)}; path=/; max-age=31536000; SameSite=Lax`
window.localStorage.setItem(SHARED_THEME_KEY, theme)
window.localStorage.setItem('admin-theme', theme)
}, [theme])
@@ -163,8 +167,8 @@ export function AdminLanguageSwitcher() {
if (embedded) return null
return (
<div className="flex items-center gap-1 rounded-full border border-zinc-700 bg-zinc-900 px-2 py-1 shadow-sm transition-colors">
<span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-zinc-500">{dict.language}</span>
<div className="flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2 py-1 shadow-sm transition-colors dark:border-stone-700 dark:bg-stone-900/85">
<span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-stone-500 dark:text-stone-400">{dict.language}</span>
{(['en', 'fr', 'ar'] as AdminLanguage[]).map((value) => {
const active = value === language
const meta = languageMeta[value]
@@ -174,7 +178,7 @@ export function AdminLanguageSwitcher() {
type="button"
onClick={() => setLanguage(value)}
className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
active ? 'bg-zinc-100 text-zinc-950' : 'text-zinc-300 hover:bg-zinc-800'
active ? 'bg-stone-900 text-white dark:bg-amber-400 dark:text-stone-950' : 'text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800'
}`}
>
<span className="inline-flex items-center gap-1.5">
@@ -199,10 +203,7 @@ export function AdminThemeSwitcher() {
if (embedded) return null
return (
<div className="flex items-center gap-1 rounded-full border border-zinc-700 bg-zinc-900 px-2 py-1 shadow-sm transition-colors">
<span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-zinc-500">
{dict.theme}
</span>
<div className="flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2 py-1 shadow-sm transition-colors dark:border-stone-700 dark:bg-stone-900/85">
{(['light', 'dark'] as AdminTheme[]).map((value) => {
const active = value === theme
return (
@@ -211,7 +212,7 @@ export function AdminThemeSwitcher() {
type="button"
onClick={() => setTheme(value)}
className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
active ? 'bg-zinc-100 text-zinc-950' : 'text-zinc-300 hover:bg-zinc-800'
active ? 'bg-stone-900 text-white dark:bg-amber-400 dark:text-stone-950' : 'text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800'
}`}
>
{value === 'light' ? dict.light : dict.dark}
apps/admin/src/components/PublicFooter.tsx
+3 -3
View File
@@ -28,11 +28,11 @@ export default function PublicFooter() {
}[language]
return (
<footer className="border-t border-stone-200 bg-white/90 px-4 py-4 backdrop-blur-md transition-colors dark:border-zinc-800 dark:bg-zinc-950/90">
<footer className="border-t border-stone-200/80 bg-white/72 px-4 py-4 backdrop-blur-xl transition-colors dark:border-stone-800 dark:bg-stone-950/72">
<div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 lg:flex-row">
<div className="flex items-center gap-3 text-xs font-medium uppercase tracking-[0.16em] text-stone-400 dark:text-zinc-500">
<div className="flex items-center gap-3 text-xs font-medium uppercase tracking-[0.16em] text-stone-400 dark:text-stone-500">
<p>{dict.preferences}</p>
<span className="inline-flex items-center gap-1 rounded-full border border-zinc-700 bg-zinc-900 px-2.5 py-1 text-zinc-200">
<span className="inline-flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2.5 py-1 text-stone-700 dark:border-stone-700 dark:bg-stone-900/85 dark:text-stone-200">
<span aria-hidden="true">{currentLanguage.flag}</span>
<span>{currentLanguage.shortLabel}</span>
</span>
apps/admin/src/components/PublicHeader.tsx
+5 -5
View File
@@ -28,18 +28,18 @@ export default function PublicHeader() {
}[language]
return (
<header className="sticky top-0 z-30 border-b border-zinc-800 bg-zinc-950/90 backdrop-blur-md transition-colors">
<header className="sticky top-0 z-30 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl transition-colors dark:border-stone-800 dark:bg-stone-950/76">
<div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4">
<Link href="/" className="flex items-center gap-3">
<span className="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-400">RentalDriveGo</span>
<span className="hidden text-sm font-semibold text-zinc-400 sm:inline">{dict.admin}</span>
<span className="text-xs font-semibold uppercase tracking-[0.24em] text-amber-700 dark:text-amber-300">RentalDriveGo</span>
<span className="hidden text-sm font-semibold text-stone-500 dark:text-stone-400 sm:inline">{dict.admin}</span>
</Link>
<nav className="flex items-center gap-2">
<span className="inline-flex min-w-[3.5rem] items-center justify-center gap-1 rounded-full border border-zinc-700 bg-zinc-900 px-2.5 py-2 text-xs font-semibold text-zinc-200">
<span className="inline-flex min-w-[3.5rem] items-center justify-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2.5 py-2 text-xs font-semibold text-stone-700 dark:border-stone-700 dark:bg-stone-900/85 dark:text-stone-200">
<span aria-hidden="true">{currentLanguage.flag}</span>
<span>{currentLanguage.shortLabel}</span>
</span>
<Link href="/login" className="rounded-full bg-zinc-100 px-4 py-2 text-sm font-semibold text-zinc-950 transition hover:bg-zinc-300">
<Link href="/login" className="rounded-full bg-stone-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-stone-700 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300">
{dict.signIn}
</Link>
</nav>
apps/admin/src/components/PublicShell.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import PublicHeader from '@/components/PublicHeader'
export default function PublicShell({ children }: { children: React.ReactNode }) {
return (
<div className="flex min-h-screen flex-col bg-zinc-950 text-zinc-100 transition-colors">
<div className="flex min-h-screen flex-col bg-[linear-gradient(180deg,#f8f5ef_0%,#f4efe6_28%,#fffdf8_58%,#ffffff_100%)] text-stone-900 transition-colors dark:bg-[linear-gradient(180deg,#14110f_0%,#17120d_35%,#0c0a09_100%)] dark:text-stone-100">
<PublicHeader />
<div className="flex flex-1 flex-col">{children}</div>
<PublicFooter />
apps/api/src/app.ts
+2 -6
View File
@@ -31,13 +31,9 @@ const v1 = '/api/v1'
const defaultCorsOrigins = [
'http://localhost:3000',
'http://localhost:3001',
'http://localhost:3002',
'http://localhost:3003',
'http://localhost:4000',
'http://127.0.0.1:3000',
'http://127.0.0.1:3001',
'http://127.0.0.1:3002',
'http://127.0.0.1:3003',
'http://127.0.0.1:4000',
]
export const corsOrigins = process.env.CORS_ORIGINS
apps/api/src/lib/storage.ts
+1 -1
View File
@@ -59,7 +59,7 @@ function getDashboardBase(): string {
return (
process.env.DASHBOARD_URL ??
process.env.NEXT_PUBLIC_DASHBOARD_URL ??
'http://localhost:3001/dashboard'
'http://localhost:3000/dashboard'
).replace(/\/$/, '')
}
apps/api/src/modules/admin/admin.service.test.ts
+1 -1
View File
@@ -18,7 +18,7 @@ describe('admin.service forgotPassword', () => {
beforeEach(() => {
vi.clearAllMocks()
process.env.ADMIN_URL = 'http://localhost:3002'
process.env.ADMIN_URL = 'http://localhost:3000/admin'
})
afterAll(() => {
apps/api/src/modules/admin/admin.service.ts
+1 -1
View File
@@ -88,7 +88,7 @@ export async function forgotPassword(email: string) {
await repo.setAdminPasswordReset(admin.id, rawToken, expiresAt)
const adminUrl = ensureAdminBasePath(
process.env.ADMIN_URL ?? process.env.NEXT_PUBLIC_ADMIN_URL ?? 'http://localhost:3002/admin',
process.env.ADMIN_URL ?? process.env.NEXT_PUBLIC_ADMIN_URL ?? 'http://localhost:3000/admin',
)
const resetUrl = `${adminUrl}/reset-password?token=${rawToken}`
apps/api/src/modules/auth/auth.employee.service.test.ts
+1 -1
View File
@@ -18,7 +18,7 @@ describe('auth.employee.service forgotPassword', () => {
beforeEach(() => {
vi.clearAllMocks()
process.env.DASHBOARD_URL = 'http://localhost:3001'
process.env.DASHBOARD_URL = 'http://localhost:3000/dashboard'
})
afterAll(() => {
apps/api/src/modules/auth/auth.employee.service.ts
+1 -1
View File
@@ -72,7 +72,7 @@ export async function forgotPassword(email: string) {
await repo.setPasswordResetToken(employee.id, rawToken, expiresAt)
const dashboardUrl = ensureDashboardBasePath(
process.env.DASHBOARD_URL ?? process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard',
process.env.DASHBOARD_URL ?? process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
)
const resetUrl = `${dashboardUrl}/reset-password?token=${rawToken}`
const lang = (employee.preferredLanguage as Lang) ?? 'fr'
apps/api/src/modules/customers/customer.test.ts
+2 -2
View File
@@ -10,7 +10,7 @@ vi.mock('../../lib/storage', () => ({
uploadImage: vi.fn().mockResolvedValue('http://localhost:4000/storage/test.jpg'),
deleteImage: vi.fn().mockResolvedValue(undefined),
resolveStoredFilePath: vi.fn().mockReturnValue('/tmp/license.jpg'),
getProtectedCustomerLicenseImageUrl: vi.fn((customerId: string) => `http://localhost:3001/dashboard/api/v1/customers/${customerId}/license-image`),
getProtectedCustomerLicenseImageUrl: vi.fn((customerId: string) => `http://localhost:3000/dashboard/api/v1/customers/${customerId}/license-image`),
}))
const mockCustomer = {
@@ -106,7 +106,7 @@ describe('customer.service', () => {
vi.mocked(repo.findByIdSimple).mockResolvedValue(mockCustomer as any)
vi.mocked(repo.updateById).mockResolvedValue({ ...mockCustomer, licenseImageUrl: 'http://localhost:4000/storage/test.jpg' } as any)
const result = await service.uploadLicenseImage('cust_1', 'comp_1', { buffer: Buffer.from(''), mimetype: 'image/jpeg' } as any)
expect(result.licenseImageUrl).toBe('http://localhost:3001/dashboard/api/v1/customers/cust_1/license-image')
expect(result.licenseImageUrl).toBe('http://localhost:3000/dashboard/api/v1/customers/cust_1/license-image')
})
it('resolves a stored file path for protected downloads', async () => {
apps/api/src/modules/reservations/reservation.presenter.test.ts
+1 -1
View File
@@ -15,6 +15,6 @@ describe('serializeReservationForDashboard', () => {
},
})
expect(result.customer?.licenseImageUrl).toBe('http://localhost:3001/dashboard/api/v1/customers/customer-1/license-image')
expect(result.customer?.licenseImageUrl).toBe('http://localhost:3000/dashboard/api/v1/customers/customer-1/license-image')
})
})
apps/api/src/services/teamService.test.ts
+3 -3
View File
@@ -27,7 +27,7 @@ describe('teamService inviteEmployee', () => {
beforeEach(() => {
vi.clearAllMocks()
process.env.DASHBOARD_URL = 'http://localhost:3001'
process.env.DASHBOARD_URL = 'http://localhost:3000/dashboard'
process.env.NEXT_PUBLIC_DASHBOARD_URL = ''
vi.spyOn(crypto, 'randomBytes').mockReturnValue(Buffer.from('token-123'))
@@ -62,8 +62,8 @@ describe('teamService inviteEmployee', () => {
expect(sendTransactionalEmail).toHaveBeenCalledWith(
expect.objectContaining({
to: 'aya@example.com',
html: expect.stringContaining('http://localhost:3001/dashboard/reset-password?token=746f6b656e2d313233'),
text: expect.stringContaining('http://localhost:3001/dashboard/reset-password?token=746f6b656e2d313233'),
html: expect.stringContaining('http://localhost:3000/dashboard/reset-password?token=746f6b656e2d313233'),
text: expect.stringContaining('http://localhost:3000/dashboard/reset-password?token=746f6b656e2d313233'),
}),
)
})
apps/api/src/services/teamService.ts
+1 -1
View File
@@ -97,7 +97,7 @@ export async function inviteEmployee(companyId: string, inviterId: string, paylo
})
const dashboardUrl = ensureDashboardBasePath(
process.env.DASHBOARD_URL ?? process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard',
process.env.DASHBOARD_URL ?? process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
)
const resetUrl = `${dashboardUrl}/reset-password?token=${rawToken}`
const message = buildInviteEmail(resetUrl, company.name, payload.firstName, payload.role)
apps/dashboard/src/app/(dashboard)/layout.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import { DashboardLanguageSwitcher, DashboardThemeSwitcher } from '@/components/
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
return (
<div className="flex min-h-screen bg-slate-50 transition-colors dark:bg-slate-950 print:block print:min-h-0 print:bg-white">
<div className="flex min-h-screen bg-[linear-gradient(180deg,#f8f5ef_0%,#f4efe6_28%,#fffdf8_58%,#ffffff_100%)] transition-colors dark:bg-[linear-gradient(180deg,#14110f_0%,#17120d_35%,#0c0a09_100%)] print:block print:min-h-0 print:bg-white">
<div className="print:hidden">
<Sidebar />
</div>
@@ -13,9 +13,9 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
<TopBar />
</div>
<main className="flex-1 overflow-y-auto p-6 print:p-0 print:overflow-visible">{children}</main>
<footer className="border-t border-stone-200 bg-white/90 px-6 py-4 backdrop-blur-md transition-colors dark:border-slate-800 dark:bg-slate-950/90 print:hidden">
<footer className="border-t border-stone-200/80 bg-white/72 px-6 py-4 backdrop-blur-xl transition-colors dark:border-stone-800 dark:bg-stone-950/72 print:hidden">
<div className="flex flex-col items-center justify-between gap-3 lg:flex-row">
<p className="text-xs font-medium uppercase tracking-[0.16em] text-stone-400 dark:text-slate-500">
<p className="text-xs font-medium uppercase tracking-[0.16em] text-stone-400 dark:text-stone-500">
Workspace preferences
</p>
<div className="flex flex-col items-center gap-3 sm:flex-row">
apps/dashboard/src/app/globals.css
+72 -22
View File
@@ -25,7 +25,9 @@ html.dark {
}
body {
@apply bg-slate-50 text-slate-900 antialiased transition-colors dark:bg-slate-950 dark:text-slate-100;
@apply text-stone-900 antialiased transition-colors dark:text-stone-100;
background-image:
linear-gradient(180deg, #f8f5ef 0%, #f4efe6 28%, #fffdf8 58%, #ffffff 100%);
}
h1, h2, h3, h4, h5, h6 {
@@ -33,49 +35,61 @@ html.dark {
}
}
html.dark body {
background-image:
linear-gradient(180deg, #14110f 0%, #17120d 35%, #0c0a09 100%);
}
@layer components {
.btn-primary {
@apply inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
@apply inline-flex items-center gap-2 rounded-full bg-stone-950 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300;
}
.btn-secondary {
@apply inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800;
@apply inline-flex items-center gap-2 rounded-full border border-stone-300 bg-white/85 px-5 py-2.5 text-sm font-semibold text-stone-700 transition hover:border-stone-950 hover:text-stone-950 dark:border-stone-700 dark:bg-stone-950/30 dark:text-stone-200 dark:hover:border-stone-200 dark:hover:text-white;
}
.btn-danger {
@apply inline-flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50;
@apply inline-flex items-center gap-2 rounded-full bg-red-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-red-700 disabled:opacity-50;
}
.input-field {
@apply w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition-colors placeholder:text-slate-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500;
@apply w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100 dark:placeholder:text-stone-500;
}
.card {
@apply rounded-xl border border-slate-200 bg-white shadow-sm transition-colors dark:border-slate-800 dark:bg-slate-900;
@apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.26)];
border-color: rgb(231 229 228 / 0.8);
background-color: rgb(255 255 255 / 0.82);
}
html.dark .card {
border-color: rgb(41 37 36 / 0.96);
background-color: rgb(28 25 23 / 0.72);
}
.badge-green {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700;
@apply inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300;
}
.badge-blue {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700;
@apply inline-flex items-center rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-950/40 dark:text-amber-300;
}
.badge-amber {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700;
@apply inline-flex items-center rounded-full bg-orange-100 px-2.5 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-950/40 dark:text-orange-300;
}
.badge-red {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700;
@apply inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-700 dark:bg-red-950/40 dark:text-red-300;
}
.badge-gray {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600;
@apply inline-flex items-center rounded-full bg-stone-100 px-2.5 py-0.5 text-xs font-medium text-stone-600 dark:bg-stone-800 dark:text-stone-300;
}
.badge-purple {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-700;
@apply inline-flex items-center rounded-full bg-teal-100 px-2.5 py-0.5 text-xs font-medium text-teal-700 dark:bg-teal-950/40 dark:text-teal-300;
}
}
@@ -92,46 +106,82 @@ html.dark {
@layer utilities {
.dark .bg-slate-50 {
background-color: rgb(2 6 23);
background-color: rgb(12 10 9);
}
.dark .bg-white {
background-color: rgb(15 23 42);
background-color: rgb(28 25 23);
}
.dark .bg-white\/90 {
background-color: rgb(15 23 42 / 0.9);
background-color: rgb(28 25 23 / 0.9);
}
.dark .border-slate-200,
.dark .border-stone-200 {
border-color: rgb(30 41 59);
border-color: rgb(41 37 36);
}
.dark .text-slate-900 {
color: rgb(241 245 249);
color: rgb(250 250 249);
}
.dark .text-slate-700 {
color: rgb(203 213 225);
color: rgb(231 229 228);
}
.dark .text-slate-600,
.dark .text-stone-500 {
color: rgb(148 163 184);
color: rgb(168 162 158);
}
.dark .text-slate-500,
.dark .text-slate-400,
.dark .text-stone-400 {
color: rgb(100 116 139);
color: rgb(120 113 108);
}
.dark .hover\:bg-slate-100:hover {
background-color: rgb(30 41 59);
background-color: rgb(41 37 36);
}
.dark .hover\:text-slate-900:hover {
color: rgb(248 250 252);
color: rgb(250 250 249);
}
.bg-blue-600 {
background-color: rgb(217 119 6);
}
.hover\:bg-blue-700:hover {
background-color: rgb(180 83 9);
}
.bg-blue-500 {
background-color: rgb(245 158 11);
}
.bg-blue-50 {
background-color: rgb(255 251 235);
}
.text-blue-600 {
color: rgb(180 83 9);
}
.text-blue-800 {
color: rgb(154 52 18);
}
.border-blue-200 {
border-color: rgb(253 230 138);
}
.ring-blue-400 {
--tw-ring-color: rgb(251 191 36 / 0.6);
}
.focus\:ring-blue-500:focus {
--tw-ring-color: rgb(217 119 6 / 0.45);
}
}
apps/dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx
+22 -19
View File
@@ -141,14 +141,17 @@ export default function SignInPageClient({ embedded = false }: { embedded?: bool
width={104}
height={104}
priority
className="h-24 w-24 rounded-[1.75rem] border border-blue-100 bg-white p-1.5 shadow-sm transition-colors dark:border-slate-700 dark:bg-slate-900"
className="h-24 w-24 rounded-[1.75rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm transition-colors dark:border-stone-700 dark:bg-stone-900/80"
/>
</a>
</div>
<h1 className="mt-4 text-3xl font-black tracking-tight text-slate-900 dark:text-slate-100">
<p className="mt-5 text-xs font-bold uppercase tracking-[0.28em] text-amber-700 dark:text-amber-300">
RentalDriveGo
</p>
<h1 className="mt-3 text-3xl font-black tracking-[-0.03em] text-stone-950 dark:text-stone-50">
{dict.brandName}
</h1>
<p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
<p className="mt-2 text-sm text-stone-600 dark:text-stone-300">
{dict.subtitle}
</p>
<div className="mt-4 flex items-center justify-center gap-2">
@@ -157,10 +160,10 @@ export default function SignInPageClient({ embedded = false }: { embedded?: bool
key={lang}
type="button"
onClick={() => setLanguage(lang)}
className={`rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wider transition-colors text-blue-600 dark:text-amber-400 ${
className={`rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wider transition-colors text-amber-700 dark:text-amber-300 ${
language === lang
? 'ring-1 ring-current opacity-100'
: 'opacity-40 hover:opacity-80'
: 'opacity-45 hover:opacity-80'
}`}
>
{lang}
@@ -169,7 +172,7 @@ export default function SignInPageClient({ embedded = false }: { embedded?: bool
</div>
</div>
<section className="rounded-[2rem] border border-slate-200 bg-white p-8 shadow-sm transition-colors dark:border-slate-800 dark:bg-slate-900/90">
<section className="rounded-[2rem] border border-stone-200/80 bg-white/82 p-8 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:border-stone-800 dark:bg-stone-900/78 dark:shadow-[0_30px_80px_rgba(0,0,0,0.26)]">
<LocalSignInForm dict={dict} />
</section>
</div>
@@ -305,7 +308,7 @@ function LocalSignInForm({
return (
<>
{error ? (
<div className="mb-5 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
<div className="mb-5 rounded-[1.5rem] border border-red-200/80 bg-red-50/90 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300">
{error}
</div>
) : null}
@@ -313,19 +316,19 @@ function LocalSignInForm({
{step === 'credentials' ? (
<form onSubmit={handleCredentials} className="space-y-5">
<div>
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.email}</label>
<label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">{dict.email}</label>
<input
type="email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="owner@company.com"
className="input-field"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
/>
</div>
<div>
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.password}</label>
<label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">{dict.password}</label>
<div className="relative">
<input
type={showPassword ? 'text' : 'password'}
@@ -333,12 +336,12 @@ function LocalSignInForm({
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
className="input-field pr-10"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 pr-10 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
/>
<button
type="button"
onClick={() => setShowPassword((v) => !v)}
className="absolute inset-y-0 right-3 flex items-center text-slate-400 hover:text-slate-600"
className="absolute inset-y-0 right-3 flex items-center text-stone-400 hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-200"
tabIndex={-1}
>
{showPassword ? (
@@ -358,25 +361,25 @@ function LocalSignInForm({
<button
type="submit"
disabled={loading}
className="btn-primary w-full justify-center disabled:cursor-not-allowed disabled:opacity-60"
className="inline-flex w-full justify-center rounded-full bg-stone-950 px-6 py-3 text-sm font-semibold text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300"
>
{loading ? dict.signingIn : dict.signIn}
</button>
<div className="text-center">
<Link href="/forgot-password" className="text-sm text-slate-500 underline decoration-slate-300 underline-offset-4 hover:text-slate-700">
<Link href="/forgot-password" className="text-sm text-stone-500 underline decoration-stone-300 underline-offset-4 hover:text-stone-900 dark:text-stone-400 dark:decoration-stone-600 dark:hover:text-stone-100">
{dict.forgotPassword}
</Link>
</div>
</form>
) : (
<form onSubmit={handleTotp} className="space-y-5">
<div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-center text-sm text-slate-600">
<div className="rounded-[1.5rem] border border-stone-200/80 bg-stone-50/90 px-4 py-4 text-center text-sm text-stone-600 dark:border-stone-700 dark:bg-stone-950/50 dark:text-stone-300">
{dict.enterCode}
</div>
<div>
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.authCode}</label>
<label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">{dict.authCode}</label>
<input
type="text"
inputMode="numeric"
@@ -386,14 +389,14 @@ function LocalSignInForm({
value={totpCode}
onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, ''))}
placeholder="000000"
className="input-field text-center text-xl tracking-[0.45em]"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-center text-xl tracking-[0.45em] text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
/>
</div>
<button
type="submit"
disabled={loading}
className="btn-primary w-full justify-center disabled:cursor-not-allowed disabled:opacity-60"
className="inline-flex w-full justify-center rounded-full bg-stone-950 px-6 py-3 text-sm font-semibold text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300"
>
{loading ? dict.verifying : dict.verify}
</button>
@@ -405,7 +408,7 @@ function LocalSignInForm({
setTotpCode('')
setError(null)
}}
className="w-full text-sm text-slate-500 hover:text-slate-700"
className="w-full text-sm text-stone-500 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100"
>
{dict.back}
</button>
apps/dashboard/src/app/sign-in/[[...sign-in]]/page.tsx
+24
View File
@@ -1,3 +1,5 @@
import { headers } from 'next/headers'
import { redirect } from 'next/navigation'
import SignInPageClient from './SignInPageClient'
export default async function SignInPage({
@@ -8,5 +10,27 @@ export default async function SignInPage({
const params = await searchParams
const embedded = params.embedded === '1'
if (!embedded) {
const requestHeaders = headers()
const host = requestHeaders.get('host')
const proto = requestHeaders.get('x-forwarded-proto') ?? 'http'
const query = new URLSearchParams()
for (const [key, value] of Object.entries(params)) {
if (value === undefined) continue
if (Array.isArray(value)) {
for (const item of value) query.append(key, item)
} else {
query.set(key, value)
}
}
const destination = host
? `${proto}://${host}/sign-in${query.size ? `?${query.toString()}` : ''}`
: `${process.env.NEXT_PUBLIC_MARKETPLACE_URL ?? 'http://localhost:3000'}/sign-in${query.size ? `?${query.toString()}` : ''}`
redirect(destination)
}
return <SignInPageClient embedded={embedded} />
}
apps/dashboard/src/components/I18nProvider.tsx
+7 -10
View File
@@ -1513,8 +1513,8 @@ export function DashboardLanguageSwitcher() {
}
return (
<div className="flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-1 shadow-sm transition-colors dark:border-slate-700 dark:bg-slate-900">
<span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">
<div className="flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2 py-1 shadow-sm transition-colors dark:border-stone-700 dark:bg-stone-900/85">
<span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-stone-500 dark:text-stone-400">
{dict.language}
</span>
{(['en', 'fr', 'ar'] as DashboardLanguage[]).map((value) => {
@@ -1526,8 +1526,8 @@ export function DashboardLanguageSwitcher() {
onClick={() => handleLanguageChange(value)}
className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
active
? 'bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-950'
: 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'
? 'bg-stone-900 text-white dark:bg-amber-400 dark:text-stone-950'
: 'text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800'
}`}
>
{value.toUpperCase()}
@@ -1549,10 +1549,7 @@ export function DashboardThemeSwitcher() {
if (embedded) return null
return (
<div className="flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-1 shadow-sm transition-colors dark:border-slate-700 dark:bg-slate-900">
<span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
{dict.theme}
</span>
<div className="flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2 py-1 shadow-sm transition-colors dark:border-stone-700 dark:bg-stone-900/85">
{(['light', 'dark'] as DashboardTheme[]).map((value) => {
const active = value === theme
return (
@@ -1562,8 +1559,8 @@ export function DashboardThemeSwitcher() {
onClick={() => setTheme(value)}
className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
active
? 'bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-950'
: 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'
? 'bg-stone-900 text-white dark:bg-amber-400 dark:text-stone-950'
: 'text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800'
}`}
>
{value === 'light' ? dict.light : dict.dark}
apps/dashboard/src/components/layout/PublicFooter.tsx
+2 -2
View File
@@ -105,7 +105,7 @@ export default function PublicFooter() {
}, [])
return (
<footer className="border-t border-stone-200 bg-white/90 px-4 py-8 text-stone-600 transition-colors dark:border-white/5 dark:bg-[#111111] dark:text-stone-300">
<footer className="border-t border-stone-200/80 bg-white/72 px-4 py-8 text-stone-600 backdrop-blur-xl transition-colors dark:border-stone-800 dark:bg-stone-950/72 dark:text-stone-300">
<div className="mx-auto flex max-w-7xl flex-col items-center gap-5 px-0 text-center sm:px-2 lg:px-0">
<nav className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
{footerContent.primary.map((item, index) => (
@@ -129,7 +129,7 @@ export default function PublicFooter() {
<button
type="button"
onClick={() => setLocaleMenuOpen((open) => !open)}
className="inline-flex items-center gap-2 text-sky-600 transition hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300"
className="inline-flex items-center gap-2 text-amber-700 transition hover:text-stone-950 dark:text-amber-300 dark:hover:text-stone-100"
aria-expanded={localeMenuOpen}
aria-haspopup="menu"
>
apps/dashboard/src/components/layout/PublicHeader.tsx
+5 -12
View File
@@ -35,7 +35,6 @@ export default function PublicHeader() {
createAccount: 'Create Agency Space',
theme: 'Theme',
light: 'Light',
medium: 'Medium',
dark: 'Dark',
},
fr: {
@@ -45,7 +44,6 @@ export default function PublicHeader() {
createAccount: 'Créer un espace d’agence',
theme: 'Mode',
light: 'Clair',
medium: 'Moyen',
dark: 'Sombre',
},
ar: {
@@ -55,13 +53,11 @@ export default function PublicHeader() {
createAccount: 'إنشاء مساحة الوكالة',
theme: 'الوضع',
light: 'فاتح',
medium: 'متوسط',
dark: 'داكن',
},
}[language]
const themeOptions = [
{ value: 'light' as const, label: dict.light },
{ value: 'medium' as const, label: dict.medium },
{ value: 'dark' as const, label: dict.dark },
]
const currentTheme = themeOptions.find((option) => option.value === theme) ?? themeOptions[0]
@@ -101,7 +97,7 @@ export default function PublicHeader() {
const redirect = searchParams.get('redirect')
if (next) signInParams.set('next', next)
if (redirect) signInParams.set('redirect', redirect)
const signInHref = `/sign-in?${signInParams.toString()}`
const signInHref = `${marketplaceUrl}/sign-in?${signInParams.toString()}`
const signUpParams = new URLSearchParams()
signUpParams.set('lang', language)
@@ -109,7 +105,7 @@ export default function PublicHeader() {
const signUpHref = `/sign-up?${signUpParams.toString()}`
return (
<header className="sticky top-0 z-30 border-b border-stone-200 bg-white shadow-[0_10px_30px_rgba(15,23,42,0.06)] transition-colors dark:border-stone-800 dark:bg-stone-950 dark:shadow-[0_10px_30px_rgba(0,0,0,0.28)]">
<header className="sticky top-0 z-30 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.06)] transition-colors dark:border-stone-800 dark:bg-stone-950/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.28)]">
<div className="mx-auto flex max-w-7xl flex-col gap-1.5 px-4 py-1.5 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:gap-3 lg:px-8 lg:py-2">
<a href={marketplaceUrl} className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-stone-900 dark:text-stone-100 sm:text-sm sm:tracking-[0.2em]">
<Image
@@ -131,9 +127,9 @@ export default function PublicHeader() {
<a href={`${marketplaceUrl}/explore`} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
{dict.marketplace}
</a>
<Link href={signInHref} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
<a href={signInHref} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
{dict.signIn}
</Link>
</a>
<Link href={signUpHref} className="ml-1 rounded-full bg-stone-900 px-3 py-1 text-[12px] font-semibold text-white transition hover:bg-stone-700 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300 sm:ml-2 sm:px-5 sm:py-2 sm:text-sm">
{dict.createAccount}
</Link>
@@ -176,13 +172,10 @@ export default function PublicHeader() {
<button
type="button"
onClick={toggleThemeMenu}
className="inline-flex items-center gap-1.5 rounded-full px-1.5 py-1 transition hover:bg-stone-100 dark:hover:bg-stone-800 sm:gap-2 sm:px-2 sm:py-1.5"
className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 dark:hover:bg-stone-800 sm:px-2.5 sm:py-1.5"
aria-expanded={themeMenuOpen}
aria-haspopup="menu"
>
<span className="px-1.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-stone-500 dark:text-stone-400 sm:px-2 sm:text-[11px] sm:tracking-[0.2em]">
{dict.theme}
</span>
<span className="rounded-full bg-stone-900 px-3 py-1 text-[11px] font-semibold text-white dark:bg-amber-400 dark:text-stone-950 sm:px-3.5 sm:py-1.5 sm:text-xs">
{currentTheme.label}
</span>
apps/dashboard/src/components/layout/PublicShell.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export default function PublicShell({
embedded?: boolean
}) {
return (
<div className="flex min-h-screen flex-col bg-[radial-gradient(circle_at_top,#dbeafe,transparent_35%),linear-gradient(180deg,#f8fafc,white)] transition-colors dark:bg-[radial-gradient(circle_at_top,rgba(37,99,235,0.18),transparent_35%),linear-gradient(180deg,#020617,#0f172a)] dark:text-slate-100">
<div className="flex min-h-screen flex-col bg-[linear-gradient(180deg,#f8f5ef_0%,#f4efe6_28%,#fffdf8_58%,#ffffff_100%)] text-stone-900 transition-colors dark:bg-[linear-gradient(180deg,#14110f_0%,#17120d_35%,#0c0a09_100%)] dark:text-stone-100">
{embedded ? null : <PublicHeader />}
<div className="flex flex-1 flex-col">{children}</div>
{embedded ? null : <PublicFooter />}
apps/dashboard/src/components/layout/Sidebar.tsx
+13 -13
View File
@@ -180,7 +180,7 @@ export default function Sidebar() {
onClick={() => setOpen(true)}
aria-label="Open sidebar"
className={[
'fixed top-1/2 z-50 -translate-y-1/2 flex items-center justify-center w-6 h-14 bg-slate-900 text-white shadow-lg lg:hidden',
'fixed top-1/2 z-50 flex h-14 w-6 -translate-y-1/2 items-center justify-center bg-stone-950 text-white shadow-lg lg:hidden',
isRtl ? 'right-0 rounded-l-lg' : 'left-0 rounded-r-lg',
].join(' ')}
>
@@ -190,19 +190,19 @@ export default function Sidebar() {
<aside
className={[
'fixed inset-y-0 z-40 flex w-64 flex-col bg-slate-900 transition-transform duration-300',
'fixed inset-y-0 z-40 flex w-64 flex-col border-r border-stone-800/80 bg-stone-950/94 backdrop-blur-xl transition-transform duration-300',
isRtl ? 'right-0' : 'left-0',
'lg:translate-x-0',
open ? 'translate-x-0' : (isRtl ? 'translate-x-full' : '-translate-x-full'),
].join(' ')}
>
<a href={marketplaceUrl} target="_top" className="flex items-center gap-3 border-b border-slate-800 px-6 py-5">
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-500 overflow-hidden">
<a href={marketplaceUrl} target="_top" className="flex items-center gap-3 border-b border-stone-800/80 px-6 py-5">
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-amber-400">
{brand?.logoUrl ? (
// eslint-disable-next-line @next/next/no-img-element
<img src={brand.logoUrl} alt={brand.displayName} className="h-8 w-8 object-cover" />
) : (
<Car className="h-4 w-4 text-white" />
<Car className="h-4 w-4 text-stone-950" />
)}
</div>
<span className="truncate text-sm font-bold tracking-wide text-white">
@@ -219,8 +219,8 @@ export default function Sidebar() {
key={item.href}
href={item.href}
className={[
'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
active ? 'bg-blue-600 text-white' : 'text-slate-400 hover:bg-slate-800 hover:text-white',
'flex items-center gap-3 rounded-2xl px-3 py-2.5 text-sm font-medium transition-colors',
active ? 'bg-amber-400 text-stone-950' : 'text-stone-400 hover:bg-stone-800 hover:text-white',
].join(' ')}
>
<Icon className="h-4 w-4 flex-shrink-0" />
@@ -230,19 +230,19 @@ export default function Sidebar() {
})}
</nav>
<div className="border-t border-slate-800 px-3 py-4">
<div className="flex items-center gap-3 rounded-lg px-3 py-2">
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-xs font-semibold text-white">
<div className="border-t border-stone-800/80 px-3 py-4">
<div className="flex items-center gap-3 rounded-2xl px-3 py-2">
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-xs font-semibold text-stone-950">
{user.initials}
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-white">{user.displayName}</p>
<p className="truncate text-xs text-slate-400">{user.subtitle}</p>
<p className="truncate text-xs text-stone-400">{user.subtitle}</p>
</div>
</div>
<button
onClick={signOut}
className="mt-2 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-400 transition-colors hover:bg-slate-800 hover:text-white"
className="mt-2 flex w-full items-center gap-3 rounded-2xl px-3 py-2 text-sm text-stone-400 transition-colors hover:bg-stone-800 hover:text-white"
>
<LogOut className="h-4 w-4" />
{dict.signOut}
@@ -254,7 +254,7 @@ export default function Sidebar() {
onClick={() => setOpen(false)}
aria-label="Close sidebar"
className={[
'absolute top-1/2 z-10 -translate-y-1/2 flex items-center justify-center w-5 h-14 bg-slate-900 text-white shadow-lg lg:hidden',
'absolute top-1/2 z-10 flex h-14 w-5 -translate-y-1/2 items-center justify-center bg-stone-950 text-white shadow-lg lg:hidden',
isRtl ? '-left-5 rounded-l-lg' : '-right-5 rounded-r-lg',
].join(' ')}
>
apps/dashboard/src/components/layout/TopBar.tsx
+12 -12
View File
@@ -143,14 +143,14 @@ export default function TopBar() {
}
return (
<header className="flex h-16 items-center justify-between border-b border-slate-200 bg-white px-6 transition-colors dark:border-slate-800 dark:bg-slate-950">
<h1 className="text-lg font-semibold text-slate-900 dark:text-slate-100">{title}</h1>
<header className="flex h-16 items-center justify-between border-b border-stone-200/80 bg-white/78 px-6 backdrop-blur-xl transition-colors dark:border-stone-800 dark:bg-stone-950/76">
<h1 className="text-lg font-semibold text-stone-950 dark:text-stone-50">{title}</h1>
<div className="flex items-center gap-3">
<div className="relative">
<button
onClick={() => setShowNotifs(!showNotifs)}
className="relative rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
className="relative rounded-2xl p-2 text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100"
>
<Bell className="h-5 w-5" />
{unreadCount > 0 ? (
@@ -161,22 +161,22 @@ export default function TopBar() {
</button>
{showNotifs ? (
<div className="absolute right-0 top-full z-50 mt-2 w-80 rounded-xl border border-slate-200 bg-white p-4 shadow-lg dark:border-slate-700 dark:bg-slate-900">
<div className="absolute right-0 top-full z-50 mt-2 w-80 rounded-[1.75rem] border border-stone-200/80 bg-white/95 p-4 shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-stone-800 dark:bg-stone-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
<div className="mb-2 flex items-center justify-between gap-2">
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">{dict.notifications}</p>
<p className="text-sm font-medium text-stone-950 dark:text-stone-100">{dict.notifications}</p>
<button
type="button"
onClick={() => openNotificationsInbox()}
className="text-xs font-medium text-blue-600 hover:text-blue-700"
className="text-xs font-medium text-amber-700 hover:text-stone-950 dark:text-amber-300 dark:hover:text-white"
>
View all
</button>
</div>
{loadingNotifs ? (
<p className="text-sm text-slate-500 dark:text-slate-400">Loading…</p>
<p className="text-sm text-stone-500 dark:text-stone-400">Loading…</p>
) : notifications.length === 0 ? (
<p className="text-sm text-slate-500 dark:text-slate-400">
<p className="text-sm text-stone-500 dark:text-stone-400">
{unreadCount === 0 ? dict.noNewNotifications : dict.unreadNotifications(unreadCount)}
</p>
) : (
@@ -187,14 +187,14 @@ export default function TopBar() {
type="button"
onClick={() => openNotificationsInbox(notification.id)}
className={[
'w-full rounded-lg px-3 py-2 text-left transition-colors hover:bg-slate-100 dark:hover:bg-slate-800',
'w-full rounded-2xl px-3 py-2 text-left transition-colors hover:bg-stone-100 dark:hover:bg-stone-800',
notification.readAt ? 'opacity-80' : '',
].join(' ')}
>
<p className="truncate text-sm font-medium text-slate-900 dark:text-slate-100">
<p className="truncate text-sm font-medium text-stone-950 dark:text-stone-100">
{notification.title}
</p>
<p className="truncate text-xs text-slate-500 dark:text-slate-400">
<p className="truncate text-xs text-stone-500 dark:text-stone-400">
{notification.body}
</p>
</button>
@@ -205,7 +205,7 @@ export default function TopBar() {
) : null}
</div>
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-xs font-semibold text-white">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-400 text-xs font-semibold text-stone-950">
{userInitials}
</div>
</div>
apps/dashboard/src/components/ui/StatCard.tsx
+9 -9
View File
@@ -16,8 +16,8 @@ export default function StatCard({
change,
vsLastMonthLabel = 'vs last month',
icon: Icon,
iconColor = 'text-blue-600',
iconBg = 'bg-blue-50',
iconColor = 'text-amber-700 dark:text-amber-300',
iconBg = 'bg-amber-50 dark:bg-amber-950/30',
}: StatCardProps) {
const isPositive = change !== undefined && change >= 0
const isNegative = change !== undefined && change < 0
@@ -26,24 +26,24 @@ export default function StatCard({
<div className="card p-6">
<div className="flex items-start justify-between">
<div>
<p className="text-sm text-slate-500 font-medium">{title}</p>
<p className="text-2xl font-bold text-slate-900 mt-1">{value}</p>
<p className="text-sm font-medium text-stone-500 dark:text-stone-400">{title}</p>
<p className="mt-1 text-2xl font-bold text-stone-950 dark:text-stone-50">{value}</p>
{change !== undefined && (
<div className="flex items-center gap-1 mt-2">
<div className="mt-2 flex items-center gap-1">
<span
className={[
'text-xs font-medium',
isPositive ? 'text-green-600' : isNegative ? 'text-red-600' : 'text-slate-500',
isPositive ? 'text-emerald-600 dark:text-emerald-300' : isNegative ? 'text-red-600 dark:text-red-300' : 'text-stone-500 dark:text-stone-400',
].join(' ')}
>
{isPositive ? '+' : ''}{change.toFixed(1)}%
</span>
<span className="text-xs text-slate-400">{vsLastMonthLabel}</span>
<span className="text-xs text-stone-400 dark:text-stone-500">{vsLastMonthLabel}</span>
</div>
)}
</div>
<div className={`w-12 h-12 rounded-xl ${iconBg} flex items-center justify-center flex-shrink-0`}>
<Icon className={`w-6 h-6 ${iconColor}`} />
<div className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-[1.25rem] ${iconBg}`}>
<Icon className={`h-6 w-6 ${iconColor}`} />
</div>
</div>
</div>
apps/dashboard/src/lib/urls.ts
+1 -1
View File
@@ -14,5 +14,5 @@ export const marketplaceUrl = toAppBase(
)
export const adminUrl = toAppBase(
resolveBrowserAppUrl(process.env.NEXT_PUBLIC_ADMIN_URL ?? 'http://localhost:3002/admin'),
resolveBrowserAppUrl(process.env.NEXT_PUBLIC_ADMIN_URL ?? 'http://localhost:3000/admin'),
)
apps/marketplace/next.config.js
+23
View File
@@ -4,6 +4,29 @@ const nextConfig = {
domains: ['res.cloudinary.com'],
},
transpilePackages: ['@rentaldrivego/types'],
async rewrites() {
const dashboardOrigin = process.env.DASHBOARD_INTERNAL_URL ?? 'http://dashboard:3001'
const adminOrigin = process.env.ADMIN_INTERNAL_URL ?? 'http://admin:3002'
return [
{
source: '/dashboard',
destination: `${dashboardOrigin}/dashboard`,
},
{
source: '/dashboard/:path*',
destination: `${dashboardOrigin}/dashboard/:path*`,
},
{
source: '/admin',
destination: `${adminOrigin}/admin`,
},
{
source: '/admin/:path*',
destination: `${adminOrigin}/admin/:path*`,
},
]
},
}
module.exports = nextConfig
apps/marketplace/src/app/(public)/HomeContent.tsx
+3 -3
View File
@@ -17,7 +17,7 @@ export default function HomeContent() {
const [content, setContent] = useState<MarketplaceHomepageConfig>(cloneMarketplaceHomepageContent())
const dict = content[language]
const sections = resolveMarketplaceHomepageSections(dict.sections)
const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard')
const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
const starterSignupHref = `${dashboardUrl}/sign-up?plan=STARTER&billing=MONTHLY&currency=MAD`
useEffect(() => {
@@ -46,9 +46,9 @@ export default function HomeContent() {
}
return (
<main className="min-h-screen overflow-hidden bg-[linear-gradient(180deg,#f8f5ef_0%,#f4efe6_28%,#fffdf8_58%,#ffffff_100%)] dark:bg-[linear-gradient(180deg,#14110f_0%,#17120d_35%,#0c0a09_100%)]">
<main className="min-h-screen overflow-hidden bg-transparent">
<section className="relative">
<div className="absolute inset-x-0 top-0 h-[38rem] bg-[radial-gradient(circle_at_top_left,rgba(217,119,6,0.24),transparent_34%),radial-gradient(circle_at_top_right,rgba(15,118,110,0.18),transparent_26%)] dark:bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.16),transparent_34%),radial-gradient(circle_at_top_right,rgba(45,212,191,0.14),transparent_26%)]" />
<div className="site-glow absolute inset-x-0 top-0 h-[38rem]" />
<div className="shell relative py-10 sm:py-14 lg:py-20">
<div className={`grid gap-8 ${hasSection('hero') && hasSection('surface') ? 'lg:grid-cols-[minmax(0,1.15fr)_24rem] lg:items-stretch xl:grid-cols-[minmax(0,1.2fr)_28rem]' : ''}`}>
{hasSection('hero') ? (
apps/marketplace/src/app/(public)/explore/[slug]/page.tsx
+4 -4
View File
@@ -82,8 +82,8 @@ export default async function CompanyProfilePage({ params }: { params: { slug: s
if (!company) {
return (
<main className="min-h-screen bg-stone-50 dark:bg-stone-950 py-10">
<div className="shell">
<main className="site-page">
<div className="site-section">
<section className="card p-8">
<p className="text-sm uppercase tracking-[0.18em] text-amber-700 dark:text-amber-400">{dict.unavailable}</p>
<h1 className="mt-3 text-3xl font-black text-stone-900 dark:text-stone-100">{dict.unavailableTitle}</h1>
@@ -98,8 +98,8 @@ export default async function CompanyProfilePage({ params }: { params: { slug: s
}
return (
<main className="min-h-screen bg-stone-50 dark:bg-stone-950 py-10">
<div className="shell space-y-8">
<main className="site-page">
<div className="site-section space-y-8">
<section className="card p-8">
<p className="text-sm uppercase tracking-[0.18em] text-amber-700 dark:text-amber-400">{company.brand?.publicCity ?? dict.partner}</p>
<h1 className="mt-3 text-4xl font-black text-stone-900 dark:text-stone-100">{company.brand?.displayName ?? company.name}</h1>
apps/marketplace/src/app/(public)/explore/[slug]/vehicles/[id]/page.tsx
+4 -4
View File
@@ -107,8 +107,8 @@ export default async function VehicleDetailPage({ params }: { params: { slug: st
if (!vehicle) {
return (
<main className="min-h-screen bg-stone-50 dark:bg-stone-950 py-10">
<div className="shell">
<main className="site-page">
<div className="site-section">
<section className="card p-8">
<p className="text-sm uppercase tracking-[0.18em] text-amber-700 dark:text-amber-400">{dict.unavailable}</p>
<h1 className="mt-3 text-3xl font-black text-stone-900 dark:text-stone-100">{dict.unavailableTitle}</h1>
@@ -130,8 +130,8 @@ export default async function VehicleDetailPage({ params }: { params: { slug: st
const [heroPhoto, ...galleryPhotos] = vehicle.photos
return (
<main className="min-h-screen bg-stone-50 dark:bg-stone-950 py-10">
<div className="shell space-y-8">
<main className="site-page">
<div className="site-section space-y-8">
{/* Breadcrumb */}
<nav className="flex items-center gap-2 text-sm text-stone-500 dark:text-stone-400">
apps/marketplace/src/app/(public)/explore/page.tsx
+4 -4
View File
@@ -237,10 +237,10 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
).sort((left, right) => left.localeCompare(right))
return (
<main className="min-h-screen bg-stone-50 dark:bg-stone-950 py-10">
<div className="shell space-y-10">
<section className="rounded-[2rem] bg-[linear-gradient(135deg,#1c1917,#57534e)] dark:bg-[linear-gradient(135deg,#0c0a09,#292524)] px-8 py-12 text-white">
<p className="text-sm uppercase tracking-[0.2em] text-amber-300">{dict.kicker}</p>
<main className="site-page">
<div className="site-section space-y-10">
<section className="site-panel-contrast bg-[linear-gradient(135deg,#1c1917,#57534e)] dark:bg-[linear-gradient(135deg,#0c0a09,#292524)] px-8 py-12">
<p className="site-kicker text-amber-300 dark:text-amber-300">{dict.kicker}</p>
<h1 className="mt-4 text-4xl font-black tracking-tight">{dict.title}</h1>
<p className="mt-4 max-w-2xl text-stone-300">{dict.body}</p>
<ExploreSearchForm
apps/marketplace/src/app/(public)/features/page.tsx
+6 -6
View File
@@ -6,7 +6,7 @@ const copy = {
en: {
kicker: 'Features',
title: 'Operations, marketplace discovery, and branded booking.',
body: 'RentalDriveGo combines company-only operations with a public marketplace that sends renters to each company's own payment flow.',
body: "RentalDriveGo combines company-only operations with a public marketplace that sends renters to each company's own payment flow.",
cards: [
['Private dashboard', 'Fleet, reservations, CRM, team permissions, billing, and reports stay isolated per company.'],
['Marketplace discovery', 'Published vehicles and public offers appear on `/explore` for cross-company browsing.'],
@@ -49,12 +49,12 @@ export default function FeaturesPage() {
const dict = copy[language]
return (
<main className="min-h-screen bg-stone-50 dark:bg-stone-950">
<div className="shell space-y-12 py-16">
<main className="site-page">
<div className="site-section space-y-12">
<div className="max-w-3xl">
<p className="text-sm font-semibold uppercase tracking-[0.24em] text-amber-700 dark:text-amber-400">{dict.kicker}</p>
<h1 className="mt-4 text-5xl font-black tracking-tight text-stone-900 dark:text-stone-100">{dict.title}</h1>
<p className="mt-5 text-lg leading-8 text-stone-600 dark:text-stone-400">{dict.body}</p>
<p className="site-kicker">{dict.kicker}</p>
<h1 className="site-title">{dict.title}</h1>
<p className="site-lead">{dict.body}</p>
</div>
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
apps/marketplace/src/app/(public)/layout.tsx
+2 -2
View File
@@ -7,13 +7,13 @@ import { resolveBrowserAppUrl } from '@/lib/appUrls'
export default function PublicLayout({ children }: { children: React.ReactNode }) {
const { language, theme, dict, companyName, setLanguage, setTheme } = useMarketplacePreferences()
const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard')
const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
const footerContent = getFooterContent(language)
const available = localeOptions.filter((o) => o.value !== language)
const current = localeOptions.find((o) => o.value === language) ?? localeOptions[0]
return (
<div className="flex min-h-screen flex-col bg-stone-50 text-stone-900 transition-colors dark:bg-stone-950 dark:text-stone-100">
<div className="site-page flex min-h-screen flex-col">
<MarketplaceHeader
dict={dict}
theme={theme}
apps/marketplace/src/app/(public)/pricing/PricingClient.tsx
+1 -1
View File
@@ -125,7 +125,7 @@ export default function PricingClient() {
const dict = copy[language]
const [currency, setCurrency] = useState<Currency>('MAD')
const [billing, setBilling] = useState<Billing>('monthly')
const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard')
const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
const savings = annualSavingsPct('STARTER', currency)
apps/marketplace/src/app/(public)/pricing/PricingPageContent.tsx
+6 -6
View File
@@ -47,19 +47,19 @@ export default function PricingPageContent() {
const dict = copy[language]
return (
<main className="min-h-screen bg-stone-50 dark:bg-stone-950">
<div className="shell py-20">
<main className="site-page">
<div className="site-section">
<div className="mx-auto max-w-2xl text-center">
<p className="text-sm font-semibold uppercase tracking-[0.24em] text-amber-700 dark:text-amber-400">{dict.kicker}</p>
<h1 className="mt-4 text-5xl font-black tracking-tight text-stone-900 dark:text-stone-100">{dict.title}</h1>
<p className="mt-5 text-lg leading-8 text-stone-600 dark:text-stone-400">{dict.body}</p>
<p className="site-kicker">{dict.kicker}</p>
<h1 className="site-title">{dict.title}</h1>
<p className="site-lead">{dict.body}</p>
</div>
<div className="mt-16">
<PricingClient />
</div>
<div className="mx-auto mt-24 max-w-3xl divide-y divide-stone-200 dark:divide-stone-800">
<div className="site-panel mx-auto mt-24 max-w-3xl divide-y divide-stone-200/80 dark:divide-stone-800">
<h2 className="pb-8 text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.faq}</h2>
{dict.items.map(([q, a]) => (
<div key={q} className="py-6">
apps/marketplace/src/app/(public)/review/page.tsx
+6 -6
View File
@@ -101,7 +101,7 @@ function ReviewPageContent() {
if (loadState === 'loading') {
return (
<main className="flex min-h-screen items-center justify-center bg-stone-50 dark:bg-stone-950 p-6">
<main className="site-page flex min-h-screen items-center justify-center p-6">
<p className="text-sm text-stone-500 dark:text-stone-400">Loading…</p>
</main>
)
@@ -109,7 +109,7 @@ function ReviewPageContent() {
if (loadState === 'invalid') {
return (
<main className="flex min-h-screen items-center justify-center bg-stone-50 dark:bg-stone-950 p-6">
<main className="site-page flex min-h-screen items-center justify-center p-6">
<div className="card w-full max-w-md space-y-3 p-8 text-center">
<p className="text-2xl font-black text-stone-900 dark:text-stone-100">Link not found</p>
<p className="text-sm text-stone-500 dark:text-stone-400">This review link is invalid or has already been used.</p>
@@ -120,7 +120,7 @@ function ReviewPageContent() {
if (loadState === 'already_reviewed') {
return (
<main className="flex min-h-screen items-center justify-center bg-stone-50 dark:bg-stone-950 p-6">
<main className="site-page flex min-h-screen items-center justify-center p-6">
<div className="card w-full max-w-md space-y-3 p-8 text-center">
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/50">
<svg className="h-7 w-7 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
@@ -134,7 +134,7 @@ function ReviewPageContent() {
if (submitState === 'done') {
return (
<main className="flex min-h-screen items-center justify-center bg-stone-50 dark:bg-stone-950 p-6">
<main className="site-page flex min-h-screen items-center justify-center p-6">
<div className="card w-full max-w-md space-y-4 p-8 text-center">
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/50">
<svg className="h-8 w-8 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
@@ -147,7 +147,7 @@ function ReviewPageContent() {
}
return (
<main className="flex min-h-screen items-center justify-center bg-stone-50 dark:bg-stone-950 p-6">
<main className="site-page flex min-h-screen items-center justify-center p-6">
<div className="card w-full max-w-lg overflow-hidden">
{/* Header */}
<div className="flex items-center gap-4 border-b border-stone-200 dark:border-stone-800 p-6">
@@ -201,7 +201,7 @@ export default function ReviewPage() {
return (
<Suspense
fallback={
<main className="flex min-h-screen items-center justify-center bg-stone-50 dark:bg-stone-950 p-6">
<main className="site-page flex min-h-screen items-center justify-center p-6">
<p className="text-sm text-stone-500 dark:text-stone-400">Loading…</p>
</main>
}
apps/marketplace/src/app/globals.css
+88 -1
View File
@@ -11,6 +11,93 @@ body {
}
.card {
@apply rounded-2xl border border-stone-200 bg-white shadow-sm transition-colors dark:border-stone-800 dark:bg-stone-900;
@apply rounded-[2rem] border p-0 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.26)];
border-color: rgb(231 229 228 / 0.8);
background-color: rgb(255 255 255 / 0.82);
}
html.dark .card {
border-color: rgb(41 37 36 / 0.96);
background-color: rgb(28 25 23 / 0.72);
}
.site-page {
@apply min-h-screen overflow-hidden text-stone-900;
background-image:
linear-gradient(180deg, #f8f5ef 0%, #f4efe6 28%, #fffdf8 58%, #ffffff 100%);
}
html.dark .site-page {
@apply text-stone-100;
background-image:
linear-gradient(180deg, #14110f 0%, #17120d 35%, #0c0a09 100%);
}
.site-glow {
background-image:
radial-gradient(circle at top left, rgba(217, 119, 6, 0.24), transparent 34%),
radial-gradient(circle at top right, rgba(15, 118, 110, 0.18), transparent 26%);
}
html.dark .site-glow {
background-image:
radial-gradient(circle at top left, rgba(251, 191, 36, 0.16), transparent 34%),
radial-gradient(circle at top right, rgba(45, 212, 191, 0.14), transparent 26%);
}
.site-section {
@apply shell py-10 sm:py-14 lg:py-16;
}
.site-panel {
@apply rounded-[2rem] border p-7 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors sm:p-8;
border-color: rgb(231 229 228 / 0.8);
background-color: rgb(255 255 255 / 0.82);
}
html.dark .site-panel {
border-color: rgb(41 37 36 / 0.96);
background-color: rgb(28 25 23 / 0.72);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.26);
}
.site-panel-muted {
@apply rounded-[2rem] border p-7 transition-colors sm:p-8;
border-color: rgb(231 229 228 / 0.8);
background-image: linear-gradient(160deg, #fffdf8 0%, #f1ebe1 100%);
}
html.dark .site-panel-muted {
border-color: rgb(41 37 36 / 0.96);
background-image: linear-gradient(160deg, #17120d 0%, #221a14 100%);
}
.site-panel-contrast {
@apply rounded-[2rem] border p-7 text-white shadow-[0_30px_80px_rgba(28,25,23,0.18)] transition-colors sm:p-8;
border-color: rgb(231 229 228 / 0.8);
background-color: rgb(12 10 9);
}
html.dark .site-panel-contrast {
border-color: rgb(68 64 60);
}
.site-kicker {
@apply text-xs font-bold uppercase tracking-[0.28em] text-amber-700 dark:text-amber-300;
}
.site-title {
@apply mt-4 text-4xl font-black tracking-[-0.04em] text-stone-950 dark:text-stone-50 sm:text-5xl;
}
.site-lead {
@apply mt-5 text-base leading-8 text-stone-600 dark:text-stone-300 sm:text-lg;
}
.site-link-primary {
@apply rounded-full bg-stone-950 px-6 py-3 text-sm font-semibold text-white transition hover:bg-stone-800 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300;
}
.site-link-secondary {
@apply rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-stone-950 hover:text-stone-950 dark:border-stone-700 dark:bg-stone-950/30 dark:text-stone-200 dark:hover:border-stone-200 dark:hover:text-white;
}
apps/marketplace/src/app/layout.tsx
+2 -1
View File
@@ -21,7 +21,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
{/* Runs before hydration to prevent flash of wrong theme */}
<script
dangerouslySetInnerHTML={{
__html: `(function(){try{var t=document.cookie.split(';').map(function(c){return c.trim()}).find(function(c){return c.startsWith('rentaldrivego-theme=')});if(t)t=t.split('=')[1];if(!t)t=localStorage.getItem('rentaldrivego-theme');if(t==='dark'){document.documentElement.classList.add('dark');document.documentElement.style.colorScheme='dark';}}catch(e){}})()`,
__html:
"(function(){try{var m=document.cookie.match(/(?:^|; )rentaldrivego-theme=([^;]+)/);var theme=m?decodeURIComponent(m[1]):(localStorage.getItem('rentaldrivego-theme')||localStorage.getItem('marketplace-theme'));if(theme!=='light'&&theme!=='dark'){theme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}document.documentElement.classList.toggle('dark',theme==='dark');document.documentElement.style.colorScheme=theme;document.body&&document.body.setAttribute('data-theme',theme)}catch(e){}})();",
}}
/>
</head>
apps/marketplace/src/app/renter/sign-in/page.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { resolveServerAppUrl } from '@/lib/appUrls'
export default function RenterSignInPage() {
const requestHeaders = headers()
const dashboardUrl = resolveServerAppUrl(
process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard',
process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
requestHeaders.get('host'),
requestHeaders.get('x-forwarded-proto'),
)
apps/marketplace/src/app/renter/sign-up/page.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { resolveServerAppUrl } from '@/lib/appUrls'
export default function RenterSignUpPage() {
const requestHeaders = headers()
const dashboardUrl = resolveServerAppUrl(
process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard',
process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
requestHeaders.get('host'),
requestHeaders.get('x-forwarded-proto'),
)
apps/marketplace/src/components/FooterContentPage.tsx
+7 -7
View File
@@ -28,14 +28,14 @@ export default function FooterContentPage({ slug }: { slug: FooterPageSlug }) {
const isArabic = language === 'ar'
return (
<main className="min-h-screen bg-stone-50 dark:bg-stone-950">
<div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
<section className="overflow-hidden rounded-[2rem] border border-stone-200 dark:border-stone-800 bg-white dark:bg-stone-900 shadow-[0_30px_80px_rgba(12,18,28,0.08)]">
<div className="bg-stone-50 dark:bg-stone-900 px-6 py-10 sm:px-10 sm:py-14 border-b border-stone-100 dark:border-stone-800">
<p className="text-sm font-semibold uppercase tracking-[0.24em] text-amber-700 dark:text-amber-400">
<main className="site-page">
<div className="site-section mx-auto max-w-4xl">
<section className="site-panel overflow-hidden p-0">
<div className="site-panel-muted rounded-none border-0 border-b border-stone-100/80 px-6 py-10 sm:px-10 sm:py-14 dark:border-stone-800">
<p className="site-kicker">
{meta.kicker}
</p>
<h1 className="mt-4 text-4xl font-black tracking-tight text-stone-900 dark:text-stone-100 sm:text-5xl">
<h1 className="site-title">
{content.title}
</h1>
</div>
@@ -47,7 +47,7 @@ export default function FooterContentPage({ slug }: { slug: FooterPageSlug }) {
</p>
))}
<div className="rounded-3xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/30 px-6 py-5">
<div className="rounded-3xl border border-amber-200 bg-amber-50 px-6 py-5 dark:border-amber-800 dark:bg-amber-950/30">
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-amber-800 dark:text-amber-400">
{meta.cta}
</p>
apps/marketplace/src/components/MarketplaceFooter.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function MarketplaceFooter({
}, [])
return (
<footer className="border-t border-stone-200 bg-white/90 px-4 py-8 text-stone-600 transition-colors dark:border-white/5 dark:bg-[#111111] dark:text-stone-300">
<footer className="border-t border-stone-200/80 bg-white/72 px-4 py-8 text-stone-600 backdrop-blur-xl transition-colors dark:border-stone-800 dark:bg-stone-950/72 dark:text-stone-300">
<div className="shell flex flex-col items-center gap-5 text-center">
<nav className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
{primaryItems.map((item, index) => (
apps/marketplace/src/components/MarketplaceHeader.tsx
+2 -5
View File
@@ -82,7 +82,7 @@ export default function MarketplaceHeader({
}
return (
<header className="sticky top-0 z-50 border-b border-stone-200 bg-white shadow-[0_10px_30px_rgba(15,23,42,0.08)] transition-colors dark:border-stone-800 dark:bg-stone-950 dark:shadow-[0_10px_30px_rgba(0,0,0,0.32)]">
<header className="sticky top-0 z-50 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.08)] transition-colors dark:border-stone-800 dark:bg-stone-950/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.32)]">
<div className="shell flex min-h-14 flex-col gap-1.5 py-1.5 lg:flex-row lg:items-center lg:justify-between lg:gap-3 lg:py-2">
<div className="flex items-center justify-between gap-3">
<Link href="/" className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-stone-900 dark:text-stone-100 sm:text-sm sm:tracking-[0.2em]">
@@ -174,13 +174,10 @@ export default function MarketplaceHeader({
<button
type="button"
onClick={toggleThemeMenu}
className="inline-flex items-center gap-1.5 rounded-full px-1.5 py-1 transition hover:bg-stone-100 dark:hover:bg-stone-800 sm:gap-2 sm:px-2 sm:py-1.5"
className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 dark:hover:bg-stone-800 sm:px-2.5 sm:py-1.5"
aria-expanded={themeMenuOpen}
aria-haspopup="menu"
>
<span className="px-1.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-stone-500 dark:text-stone-400 sm:px-2 sm:text-[11px] sm:tracking-[0.2em]">
{dict.theme}
</span>
<span className="rounded-full bg-stone-900 px-3 py-1 text-[11px] font-semibold text-white dark:bg-amber-400 dark:text-stone-950 sm:px-3.5 sm:py-1.5 sm:text-xs">
{currentTheme.label}
</span>
apps/marketplace/src/components/RenterShell.tsx
+3 -3
View File
@@ -100,7 +100,7 @@ export default function RenterShell({ children }: { children: React.ReactNode })
const pageTitle = activeNav ? (dict[activeNav.key as keyof typeof dict] as string) : dict.dashboard
return (
<div className="flex min-h-screen bg-stone-50 dark:bg-stone-950">
<div className="site-page flex min-h-screen">
{open && (
<div
className="fixed inset-0 z-30 bg-black/50 lg:hidden"
@@ -201,7 +201,7 @@ export default function RenterShell({ children }: { children: React.ReactNode })
isRtl ? 'lg:mr-64' : 'lg:ml-64',
].join(' ')}
>
<header className="flex h-16 items-center justify-between border-b border-stone-200 bg-white px-6 transition-colors dark:border-stone-800 dark:bg-stone-950">
<header className="flex h-16 items-center justify-between border-b border-stone-200/80 bg-white/80 px-6 backdrop-blur transition-colors dark:border-stone-800 dark:bg-stone-900/70">
<h1 className="text-lg font-semibold text-stone-900 dark:text-stone-100">{pageTitle}</h1>
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-500 text-xs font-semibold text-white">
{userInitials}
@@ -212,7 +212,7 @@ export default function RenterShell({ children }: { children: React.ReactNode })
{children}
</main>
<footer className="border-t border-stone-200 bg-white/90 px-6 py-4 transition-colors dark:border-stone-800 dark:bg-stone-950/90">
<footer className="border-t border-stone-200/80 bg-white/80 px-6 py-4 backdrop-blur transition-colors dark:border-stone-800 dark:bg-stone-900/70">
<p className="text-center text-xs text-stone-400 dark:text-stone-500">
&copy; {new Date().getFullYear()} RentalDriveGo. {dict.rights}
</p>
apps/marketplace/src/components/WorkspaceFrame.tsx
+21 -14
View File
@@ -9,7 +9,7 @@ type FrameId = 'sign-in'
const frameConfig: Record<FrameId, { label: string; appUrl: string; path: string }> = {
'sign-in': {
label: 'Sign in',
appUrl: process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard',
appUrl: process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
path: '/dashboard/sign-in',
},
}
@@ -84,19 +84,26 @@ export default function WorkspaceFrame({ target }: { target: FrameId }) {
}, [config.appUrl, framePath, language, theme])
return (
<main className="bg-stone-950" style={{ minHeight: FRAME_HEIGHT }}>
{src ? (
<iframe
title={config.label}
src={src}
className="w-full border-0 bg-white"
style={{ height: FRAME_HEIGHT }}
/>
) : (
<div className="flex items-center justify-center text-sm text-stone-300" style={{ height: FRAME_HEIGHT }}>
{loadingLabel} {config.label}…
</div>
)}
<main className="site-page">
<div className="site-section py-6 sm:py-8 lg:py-10">
<section className="site-panel overflow-hidden p-0">
{src ? (
<iframe
title={config.label}
src={src}
className="w-full border-0 bg-white dark:bg-stone-950"
style={{ height: FRAME_HEIGHT }}
/>
) : (
<div
className="flex items-center justify-center text-sm text-stone-500 dark:text-stone-300"
style={{ height: FRAME_HEIGHT }}
>
{loadingLabel} {config.label}…
</div>
)}
</section>
</div>
</main>
)
}
apps/marketplace/src/components/WorkspaceTabs.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { resolveBrowserAppUrl } from '@/lib/appUrls'
export default function WorkspaceTabs() {
const { language, theme } = useMarketplacePreferences()
const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard')
const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
const copy = {
en: {