From 66511e2b015c6edab354cd2e2d2ac117b0c60514 Mon Sep 17 00:00:00 2001
From: ct <charlesteh90@gmail.com>
Date: Tue, 15 Jul 2025 04:21:15 +0800
Subject: [PATCH] Update

---
 app/Http/Controllers/FrontHomeController.php  |  2 +-
 .../js/pages/home/{home.tsx => index.tsx}     |  0
 resources/js/ssr.tsx                          | 96 ++++++++++---------
 3 files changed, 52 insertions(+), 46 deletions(-)
 rename resources/js/pages/home/{home.tsx => index.tsx} (100%)

diff --git a/app/Http/Controllers/FrontHomeController.php b/app/Http/Controllers/FrontHomeController.php
index 3e5b6f1..5eb32fc 100644
--- a/app/Http/Controllers/FrontHomeController.php
+++ b/app/Http/Controllers/FrontHomeController.php
@@ -24,7 +24,7 @@ public function index()
             ];
         });
 
-        return Inertia::render('home/home', [
+        return Inertia::render('home', [
             'stats' => $stats,
         ]);
     }
diff --git a/resources/js/pages/home/home.tsx b/resources/js/pages/home/index.tsx
similarity index 100%
rename from resources/js/pages/home/home.tsx
rename to resources/js/pages/home/index.tsx
diff --git a/resources/js/ssr.tsx b/resources/js/ssr.tsx
index 73f7a00..cfb6d95 100644
--- a/resources/js/ssr.tsx
+++ b/resources/js/ssr.tsx
@@ -1,56 +1,62 @@
-import '../css/app.css';
-
 import { createInertiaApp } from '@inertiajs/react';
+import createServer from '@inertiajs/react/server';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
-import { hydrateRoot } from 'react-dom/client';
+import ReactDOMServer from 'react-dom/server';
 import { ErrorBoundary } from 'react-error-boundary';
-
-import { GA4Provider } from '@/plugins/GA4Context.jsx'; // Updated import
-import DetailedErrorFallback from './components/custom/detailed-error-fallback'; // Import your component
-import { Toaster } from './components/ui/sonner';
+import { Toaster } from 'sonner';
+import { type RouteName, route } from 'ziggy-js';
 import { AxiosProvider } from './plugins/AxiosContext';
+import { GA4Provider } from './plugins/GA4Context';
 import { MittProvider } from './plugins/MittContext';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
-createInertiaApp({
-    title: (title) => `${title} - ${appName}`,
-    resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
-    setup({ el, App, props }) {
-        const root = hydrateRoot(el);
+createServer((page) =>
+    createInertiaApp({
+        page,
+        render: ReactDOMServer.renderToString,
+        title: (title) => `${title} - ${appName}`,
+        resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
+        setup: ({ App, props }) => {
+            /* eslint-disable */
+            // @ts-expect-error
+            global.route<RouteName> = (name, params, absolute) =>
+                route(name, params as any, absolute, {
+                    // @ts-expect-error
+                    ...page.props.ziggy,
+                    // @ts-expect-error
+                    location: new URL(page.props.ziggy.location),
+                });
+            /* eslint-enable */
 
-        const app = (
-            <ErrorBoundary
-                FallbackComponent={DetailedErrorFallback}
-                onError={(error, errorInfo) => {
-                    // Log to console for debugging
-                    console.error('Error caught by boundary:', error, errorInfo);
+            const app = (
+                <ErrorBoundary
+                    FallbackComponent={DetailedErrorFallback}
+                    onError={(error, errorInfo) => {
+                        // Log to console for debugging
+                        console.error('Error caught by boundary:', error, errorInfo);
 
-                    // You could also send to an error reporting service here
-                    // e.g., Sentry, LogRocket, etc.
-                }}
-                onReset={() => {
-                    // Optional: Clear any error state in your app
-                    console.log('Error boundary reset');
-                }}
-            >
-                <GA4Provider>
-                    <MittProvider>
-                        <AxiosProvider>
-                            <Toaster position="top-right" />
-                            {/*  <AuthDialog /> */}
-                            <App {...props} />
-                        </AxiosProvider>
-                    </MittProvider>
-                </GA4Provider>
-            </ErrorBoundary>
-        );
+                        // You could also send to an error reporting service here
+                        // e.g., Sentry, LogRocket, etc.
+                    }}
+                    onReset={() => {
+                        // Optional: Clear any error state in your app
+                        console.log('Error boundary reset');
+                    }}
+                >
+                    <GA4Provider>
+                        <MittProvider>
+                            <AxiosProvider>
+                                <Toaster position="top-right" />
+                                {/*  <AuthDialog /> */}
+                                <App {...props} />
+                            </AxiosProvider>
+                        </MittProvider>
+                    </GA4Provider>
+                </ErrorBoundary>
+            );
 
-        root.render(app);
-    },
-    progress: {
-        color: '#4B5563',
-    },
-});
-
-// Theme is now handled by useTheme hook in components
+            return app;
+        },
+    }),
+);