From d1842364bcc3754c96b6ec3fcbd9e747254ea93e Mon Sep 17 00:00:00 2001
From: Jake Turner <jturner@cosmistack.com>
Date: Tue, 2 Dec 2025 08:39:58 -0800
Subject: [PATCH] fix: hide query devtools in prod

---
 admin/config/inertia.ts                |  1 +
 admin/inertia/app/app.tsx              |  5 +++-
 admin/inertia/components/Footer.tsx    |  3 ++-
 admin/inertia/components/Providers.tsx | 32 ++++++++++++++++++++++++++
 admin/inertia/layouts/AppLayout.tsx    | 17 ++++----------
 admin/types/system.ts                  |  1 +
 6 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 admin/inertia/components/Providers.tsx

diff --git a/admin/config/inertia.ts b/admin/config/inertia.ts
index 2bedb92..0e4b4cf 100644
--- a/admin/config/inertia.ts
+++ b/admin/config/inertia.ts
@@ -13,6 +13,7 @@ const inertiaConfig = defineConfig({
    */
   sharedData: {
     appVersion: () => SystemService.getAppVersion(),
+    environment: process.env.NODE_ENV || 'production',
   },
 
   /**
diff --git a/admin/inertia/app/app.tsx b/admin/inertia/app/app.tsx
index 3b5911e..318fa8d 100644
--- a/admin/inertia/app/app.tsx
+++ b/admin/inertia/app/app.tsx
@@ -11,6 +11,7 @@ import { generateUUID } from '~/lib/util'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import NotificationsProvider from '~/providers/NotificationProvider'
+import { UsePageProps } from '../../types/system'
 
 const appName = import.meta.env.VITE_APP_NAME || 'Project N.O.M.A.D.'
 const queryClient = new QueryClient()
@@ -33,13 +34,15 @@ createInertiaApp({
   },
 
   setup({ el, App, props }) {
+    const environment = (props.initialPage.props as unknown as UsePageProps).environment
+    const showDevtools = ['development', 'staging'].includes(environment)
     createRoot(el).render(
       <QueryClientProvider client={queryClient}>
         <TransmitProvider baseUrl={window.location.origin} enableLogging={true}>
           <NotificationsProvider>
             <ModalsProvider>
               <App {...props} />
-              <ReactQueryDevtools initialIsOpen={false} />
+              {showDevtools && <ReactQueryDevtools initialIsOpen={false} />}
             </ModalsProvider>
           </NotificationsProvider>
         </TransmitProvider>
diff --git a/admin/inertia/components/Footer.tsx b/admin/inertia/components/Footer.tsx
index 0ed8507..78765f7 100644
--- a/admin/inertia/components/Footer.tsx
+++ b/admin/inertia/components/Footer.tsx
@@ -1,7 +1,8 @@
 import { usePage } from '@inertiajs/react'
+import { UsePageProps } from '../../types/system'
 
 export default function Footer() {
-  const { appVersion } = usePage().props as unknown as { appVersion: string }
+  const { appVersion } = usePage().props as unknown as UsePageProps
   return (
     <footer className="">
       <div className="flex justify-center border-t border-gray-900/10 py-4">
diff --git a/admin/inertia/components/Providers.tsx b/admin/inertia/components/Providers.tsx
new file mode 100644
index 0000000..acdb929
--- /dev/null
+++ b/admin/inertia/components/Providers.tsx
@@ -0,0 +1,32 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { TransmitProvider } from 'react-adonis-transmit'
+import ModalsProvider from '~/providers/ModalProvider'
+import NotificationsProvider from '~/providers/NotificationProvider'
+import { UsePageProps } from '../../types/system'
+import { usePage } from '@inertiajs/react'
+
+export default function Providers({
+  children,
+  queryClient,
+}: {
+  children: React.ReactNode
+  queryClient: QueryClient
+}) {
+  const { environment } = usePage().props as unknown as UsePageProps
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TransmitProvider baseUrl={window.location.origin} enableLogging={true}>
+        <NotificationsProvider>
+          <ModalsProvider>
+            {children}
+            {['development', 'staging'].includes(environment) && (
+              <ReactQueryDevtools initialIsOpen={false} />
+            )}
+          </ModalsProvider>
+        </NotificationsProvider>
+      </TransmitProvider>
+    </QueryClientProvider>
+  )
+}
diff --git a/admin/inertia/layouts/AppLayout.tsx b/admin/inertia/layouts/AppLayout.tsx
index a31e3b1..e724f3a 100644
--- a/admin/inertia/layouts/AppLayout.tsx
+++ b/admin/inertia/layouts/AppLayout.tsx
@@ -1,24 +1,17 @@
-import Footer from "~/components/Footer";
+import Footer from '~/components/Footer'
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="min-h-screen flex flex-col">
-      <div className="p-2 flex gap-2 flex-col items-center justify-center cursor-pointer" onClick={() => window.location.href = '/home'}>
+      <div
+        className="p-2 flex gap-2 flex-col items-center justify-center cursor-pointer"
+        onClick={() => (window.location.href = '/home')}
+      >
         <img src="/project_nomad_logo.png" alt="Project Nomad Logo" className="h-40 w-40" />
         <h1 className="text-5xl font-bold text-desert-green">Command Center</h1>
       </div>
       <hr className="text-desert-green font-semibold h-[1.5px] bg-desert-green border-none" />
       <div className="flex-1 w-full bg-desert">{children}</div>
-      {/* <TanStackRouterDevtools /> */}
-      {/* <hr className="text-desert-green font-semibold h-[1.5px] bg-desert-green border-none" />
-      <div className="p-2 flex flex-col items-center justify-center ">
-        <p className="text-sm text-gray-900 italic">
-          Sapientia ianua vitae | Wisdom is the gateway to life
-        </p>
-        <p
-        className="text-desert-orange font-semibold text-sm italic"
-        >A project by Crosstalk Solutions</p>
-      </div> */}
       <Footer />
     </div>
   )
diff --git a/admin/types/system.ts b/admin/types/system.ts
index f7b1721..4a67774 100644
--- a/admin/types/system.ts
+++ b/admin/types/system.ts
@@ -14,4 +14,5 @@ export type SystemInformationResponse = {
 // Type inferrence is not working properly with usePage and shared props, so we define this type manually
 export type UsePageProps = {
     appVersion: string
+    environment: string
 }
\ No newline at end of file