car_mms/app/root.tsx
2025-09-11 14:22:27 +03:00

85 lines
2.2 KiB
TypeScript

import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useLoaderData,
} from "@remix-run/react";
import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { getAppSettings, initializeDefaultSettings } from "~/lib/settings-management.server";
import { SettingsProvider } from "~/contexts/SettingsContext";
import "./tailwind.css";
export const links: LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
crossOrigin: "anonymous",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap",
},
];
export async function loader({ request }: LoaderFunctionArgs) {
try {
// Initialize default settings if needed
await initializeDefaultSettings();
const settings = await getAppSettings();
return json({ settings });
} catch (error) {
console.error('Root loader error:', error);
// Return default settings if there's an error
return json({
settings: {
dateFormat: 'ar-SA' as const,
currency: 'JOD',
numberFormat: 'ar-SA' as const,
currencySymbol: 'د.أ',
dateDisplayFormat: 'dd/MM/yyyy'
}
});
}
}
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="ar" dir="rtl">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body className="font-arabic">
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
const { settings } = useLoaderData<typeof loader>();
return (
<SettingsProvider settings={settings}>
<Outlet />
</SettingsProvider>
);
}