From ac5e2817fcf5a68508f0a24708b23b007674b039 Mon Sep 17 00:00:00 2001
From: itsmegood <ishersingh16@gmail.com>
Date: Sun, 4 Feb 2024 11:45:11 +0530
Subject: [PATCH] make themeSwitcher independent component

---
 app/components/layout/header.tsx             |  2 +-
 app/components/theme-switcher.tsx            | 63 ++++++++++++++++
 app/components/ui/button.tsx                 |  2 +-
 app/root.tsx                                 | 64 ++++------------
 app/routes/c.$companyId+/_layout_company.tsx | 18 +++--
 app/routes/c.$companyId+/index.tsx           |  2 +-
 app/routes/c.$companyId.sales+/index.tsx     |  2 +-
 app/routes/studio+/c.new.tsx                 | 19 +++++
 app/routes/studio+/index.tsx                 | 79 +++++++++++++-------
 package-lock.json                            | 24 +++---
 package.json                                 |  6 +-
 11 files changed, 179 insertions(+), 102 deletions(-)
 create mode 100644 app/components/theme-switcher.tsx

diff --git a/app/components/layout/header.tsx b/app/components/layout/header.tsx
index 1436892..5b74c1a 100644
--- a/app/components/layout/header.tsx
+++ b/app/components/layout/header.tsx
@@ -60,7 +60,7 @@ export function HeaderNav({
 			// 		: 'shadow-sm'
 			// }
 			>
-				<nav className="flex w-full items-center justify-between p-6">
+				<nav className="container flex justify-between p-6">
 					<div className="flex items-center justify-between gap-2 md:w-1/4">
 						{mobileNavItems && <MobileNav menuItems={mobileNavItems} />}
 
diff --git a/app/components/theme-switcher.tsx b/app/components/theme-switcher.tsx
new file mode 100644
index 0000000..24d6a8c
--- /dev/null
+++ b/app/components/theme-switcher.tsx
@@ -0,0 +1,63 @@
+import { getFormProps, useForm } from '@conform-to/react'
+import { useFetcher } from '@remix-run/react'
+import {
+	type action,
+	useOptimisticThemeMode,
+	useRootLoaderData,
+} from '#app/root'
+import { type Theme } from '#app/utils/theme.server'
+import { Icon } from './ui/icon'
+
+// export function ThemeSwitch({
+// 	userPreference,
+// }: {
+// 	userPreference?: Theme | null
+// }) {
+export function ThemeSwitch() {
+	const { requestInfo } = useRootLoaderData()
+
+	const userPreference: Theme | null = requestInfo.userPrefs.theme
+
+	const fetcher = useFetcher<typeof action>()
+
+	const [form] = useForm({
+		id: 'theme-switch',
+		lastResult: fetcher.data?.result,
+	})
+
+	const optimisticMode = useOptimisticThemeMode()
+	const mode = optimisticMode ?? userPreference ?? 'system'
+	const nextMode =
+		mode === 'system' ? 'light' : mode === 'light' ? 'dark' : 'system'
+	const modeLabel = {
+		light: (
+			<Icon name="sun">
+				<span className="sr-only">Light</span>
+			</Icon>
+		),
+		dark: (
+			<Icon name="moon">
+				<span className="sr-only">Dark</span>
+			</Icon>
+		),
+		system: (
+			<Icon name="laptop">
+				<span className="sr-only">System</span>
+			</Icon>
+		),
+	}
+
+	return (
+		<fetcher.Form method="POST" action="/" {...getFormProps(form)}>
+			<input type="hidden" name="theme" value={nextMode} />
+			<div className="flex gap-2">
+				<button
+					type="submit"
+					className="flex h-8 w-8 cursor-pointer items-center justify-center"
+				>
+					{modeLabel[mode]}
+				</button>
+			</div>
+		</fetcher.Form>
+	)
+}
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index 2a4e0b9..17e8398 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -15,7 +15,7 @@ const buttonVariants = cva(
 				outline:
 					'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
 				outline_2:
-					'border border-input bg-background hover:bg-primary hover:text-primary-foreground',
+					'border border-primary text-primary bg-background hover:bg-primary hover:text-primary-foreground',
 				secondary:
 					'bg-secondary text-secondary-foreground hover:bg-secondary/80',
 				ghost: 'hover:bg-accent hover:text-accent-foreground',
diff --git a/app/root.tsx b/app/root.tsx
index c00273d..34b6b37 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,4 +1,3 @@
-import { getFormProps, useForm } from '@conform-to/react'
 import { parseWithZod } from '@conform-to/zod'
 import { invariantResponse } from '@epic-web/invariant'
 import { cssBundleHref } from '@remix-run/css-bundle'
@@ -18,17 +17,18 @@ import {
 	Outlet,
 	Scripts,
 	ScrollRestoration,
-	useFetcher,
 	useFetchers,
 	useLoaderData,
+	useRouteLoaderData,
 } from '@remix-run/react'
 import { withSentry } from '@sentry/remix'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
 import { EpicProgress } from './components/progress-bar.tsx'
+import { ThemeSwitch } from './components/theme-switcher.tsx'
 import { useToast } from './components/toaster.tsx'
-import { Icon, href as iconsHref } from './components/ui/icon.tsx'
+import { href as iconsHref } from './components/ui/icon.tsx'
 import { EpicToaster } from './components/ui/sonner.tsx'
 import tailwindStyleSheetUrl from './styles/tailwind.css'
 import { getUserId, logout } from './utils/auth.server.ts'
@@ -215,9 +215,12 @@ function App() {
 			<div className="flex h-screen flex-col justify-between">
 				<Outlet />
 
-				<div className="container flex justify-between p-6">
-					<Logo />
-					<ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
+				<div>
+					<hr className="border-primary" />
+					<div className="container flex justify-between p-6">
+						<Logo />
+						<ThemeSwitch />
+					</div>
 				</div>
 			</div>
 			<EpicToaster closeButton position="top-center" theme={theme} />
@@ -250,6 +253,10 @@ function AppWithProviders() {
 
 export default withSentry(AppWithProviders)
 
+export function useRootLoaderData() {
+	return useRouteLoaderData<typeof loader>('root')!
+}
+
 /**
  * @returns the user's theme preference, or the client hint theme if the user
  * has not set a preference.
@@ -283,51 +290,6 @@ export function useOptimisticThemeMode() {
 	}
 }
 
-function ThemeSwitch({ userPreference }: { userPreference?: Theme | null }) {
-	const fetcher = useFetcher<typeof action>()
-
-	const [form] = useForm({
-		id: 'theme-switch',
-		lastResult: fetcher.data?.result,
-	})
-
-	const optimisticMode = useOptimisticThemeMode()
-	const mode = optimisticMode ?? userPreference ?? 'system'
-	const nextMode =
-		mode === 'system' ? 'light' : mode === 'light' ? 'dark' : 'system'
-	const modeLabel = {
-		light: (
-			<Icon name="sun">
-				<span className="sr-only">Light</span>
-			</Icon>
-		),
-		dark: (
-			<Icon name="moon">
-				<span className="sr-only">Dark</span>
-			</Icon>
-		),
-		system: (
-			<Icon name="laptop">
-				<span className="sr-only">System</span>
-			</Icon>
-		),
-	}
-
-	return (
-		<fetcher.Form method="POST" {...getFormProps(form)}>
-			<input type="hidden" name="theme" value={nextMode} />
-			<div className="flex gap-2">
-				<button
-					type="submit"
-					className="flex h-8 w-8 cursor-pointer items-center justify-center"
-				>
-					{modeLabel[mode]}
-				</button>
-			</div>
-		</fetcher.Form>
-	)
-}
-
 export function ErrorBoundary() {
 	// the nonce doesn't rely on the loader so we can access that
 	const nonce = useNonce()
diff --git a/app/routes/c.$companyId+/_layout_company.tsx b/app/routes/c.$companyId+/_layout_company.tsx
index be5a28d..c2173a4 100644
--- a/app/routes/c.$companyId+/_layout_company.tsx
+++ b/app/routes/c.$companyId+/_layout_company.tsx
@@ -1,4 +1,5 @@
-import { NavLink, Outlet } from '@remix-run/react'
+import { Link, NavLink, Outlet } from '@remix-run/react'
+import { ThemeSwitch } from '#app/components/theme-switcher'
 
 const companyRoutes = [
 	{
@@ -21,9 +22,14 @@ const companyRoutes = [
 
 export default function LayoutCompany() {
 	return (
-		<div className="flex h-full flex-col lg:flex-row">
+		<div className="relative flex min-h-full flex-col lg:flex-row">
 			<nav className="border-r bg-muted p-4 lg:w-2/12">
-				<h1 className="px-2 text-h3 text-primary">BookBreeze</h1>
+				<Link
+					to="/"
+					className="px-2 text-h5 font-semibold text-primary md:text-h4"
+				>
+					䷸ Book<span className="text-sky-400">Breeze</span>
+				</Link>
 				<ul className="my-10 text-lg font-semibold">
 					<li>
 						<NavLink
@@ -50,12 +56,10 @@ export default function LayoutCompany() {
 						</li>
 					))}
 				</ul>
+				<ThemeSwitch />
 			</nav>
 
-			<section className="p-4 lg:w-10/12">
-				<header className="bg-gray-200 p-4">
-					<h2 className="text-xl font-semibold">Header</h2>
-				</header>
+			<section className="overflow-y-auto bg-red-400 p-4 lg:w-10/12">
 				<Outlet />
 			</section>
 		</div>
diff --git a/app/routes/c.$companyId+/index.tsx b/app/routes/c.$companyId+/index.tsx
index 191de7c..43e5429 100644
--- a/app/routes/c.$companyId+/index.tsx
+++ b/app/routes/c.$companyId+/index.tsx
@@ -1,6 +1,6 @@
 export default function CompanyIndex() {
 	return (
-		<div>
+		<div className="h-[1500px] overflow-y-auto">
 			<h1>Company Route</h1>
 		</div>
 	)
diff --git a/app/routes/c.$companyId.sales+/index.tsx b/app/routes/c.$companyId.sales+/index.tsx
index 03bf4fb..2dc3f73 100644
--- a/app/routes/c.$companyId.sales+/index.tsx
+++ b/app/routes/c.$companyId.sales+/index.tsx
@@ -1,6 +1,6 @@
 export default function CompanySalesOverview() {
 	return (
-		<div>
+		<div className="">
 			<h1>Overview Route</h1>
 		</div>
 	)
diff --git a/app/routes/studio+/c.new.tsx b/app/routes/studio+/c.new.tsx
index b626f8a..bf05031 100644
--- a/app/routes/studio+/c.new.tsx
+++ b/app/routes/studio+/c.new.tsx
@@ -10,6 +10,7 @@ import { Field } from '#app/components/forms'
 import { requireUserId } from '#app/utils/auth.server'
 import { prisma } from '#app/utils/db.server'
 import { redirectWithToast } from '#app/utils/toast.server'
+import { PLATFORM_STATUS } from '#app/utils/constants/platform-status'
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	await requireUserId(request)
@@ -73,8 +74,26 @@ export async function action({ request }: ActionFunctionArgs) {
 				create: {
 					userId: userId,
 					isOwner: true,
+
+					// ! Play with roles
+					// Role: {
+					// 	connect: {
+					// 		name: 'company',
+					// 		permissions: {
+					// 			some: {
+					// 				access: {
+					// 					contains: 'own',
+					// 				},
+					// 				action: {
+					// 					contains: '',
+					// 				},
+					// 			},
+					// 		},
+					// 	},
+					// },
 				},
 			},
+			platformStatusKey: PLATFORM_STATUS.ACTIVE.KEY,
 		},
 		select: {
 			id: true,
diff --git a/app/routes/studio+/index.tsx b/app/routes/studio+/index.tsx
index 7709aba..071793f 100644
--- a/app/routes/studio+/index.tsx
+++ b/app/routes/studio+/index.tsx
@@ -1,9 +1,8 @@
 import { type LoaderFunctionArgs, json } from '@remix-run/node'
 import { Link, useLoaderData } from '@remix-run/react'
+import { Button } from '#app/components/ui/button'
 import { logoutAndRedirect, requireUserId } from '#app/utils/auth.server'
 import { prisma } from '#app/utils/db.server'
-import { Button } from '#app/components/ui/button'
-import { Spacer } from '#app/components/spacer'
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	const userId = await requireUserId(request)
@@ -48,35 +47,65 @@ export default function StudioIndex() {
 			<h2 className="text-h3 md:text-h2">Studio</h2>
 
 			<div className="grid grid-cols-2 gap-6 text-center xl:grid-cols-4">
-				<Link to="hello" className="h-full rounded-md border border-primary">
+				<Link to="c" className="h-20">
 					<Button variant="outline_2" size="full">
-						Hello
+						Company Route
 					</Button>
 				</Link>
-				<div className="rounded-md border border-primary p-10">Hello</div>
-				<div className="rounded-md border border-primary p-10">Hello</div>
-				<div className="rounded-md border border-primary p-10">Hello</div>
+				<div>Maybe add statistics from all companies or just define routes</div>
 			</div>
 
-			<div>
-				{data.user.userCompanies.map(userCompany => (
-					<div key={userCompany.id}>
-						{userCompany.company.name} :{' '}
-						{userCompany.isOwner ? 'true' : 'false'} :{' '}
-						{userCompany.Role.map(role => (
-							<div key={role.name}>
-								{role.name} :{' '}
-								{role.permissions.map(permission => (
-									<div key={permission.entity}>
-										{permission.entity} : {permission.action} :{' '}
-										{permission.access}
-									</div>
-								))}
-							</div>
-						))}
-					</div>
-				))}
+			<div className="flex items-center justify-between">
+				<h3 className="text-h5 md:text-h4">Companies ~</h3>
+				<Link to="c/new">
+					<Button>Add Firm</Button>
+				</Link>
 			</div>
+
+			<table className="min-w-full divide-y">
+				<thead>
+					<tr>
+						<th
+							scope="col"
+							className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold sm:pl-0"
+						>
+							Name
+						</th>
+						<th
+							scope="col"
+							className="hidden px-3 py-3.5 text-left text-sm font-semibold lg:table-cell"
+						>
+							Role
+						</th>
+						<th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-0">
+							<span className="sr-only">Edit</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody className="divide-y">
+					{data.user.userCompanies.map(userCompany => (
+						<tr key={userCompany.company.id} className="text-sm">
+							<td className="w-full max-w-0 py-4 pl-4 pr-3 font-medium sm:w-auto sm:max-w-none sm:pl-0">
+								{userCompany.company.name}
+								<dl className="font-normal lg:hidden">
+									<dt className="sr-only sm:hidden">Role</dt>
+									<dd className="mt-1 truncate sm:hidden">
+										{userCompany.isOwner ? 'Owner' : 'Employee'}
+									</dd>
+								</dl>
+							</td>
+							<td className="hidden px-3 py-4 sm:table-cell">
+								{userCompany.isOwner ? 'Owner' : 'Employee'}
+							</td>
+							<td className="py-4 pl-3 pr-4 text-right font-medium sm:pr-0">
+								<Link to={`/c/${userCompany.company.id}`}>
+									<Button variant="link">View</Button>
+								</Link>
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
 		</>
 	)
 }
diff --git a/package-lock.json b/package-lock.json
index f95cd31..c485429 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
         "address": "^2.0.1",
         "autoprefixer": "^10.4.17",
         "bcryptjs": "^2.4.3",
-        "better-sqlite3": "^9.3.0",
+        "better-sqlite3": "^9.4.0",
         "chalk": "^5.3.0",
         "class-variance-authority": "^0.7.0",
         "close-with-grace": "^1.2.0",
@@ -97,7 +97,7 @@
         "@types/morgan": "^1.9.9",
         "@types/node": "^20.11.16",
         "@types/qrcode": "^1.5.5",
-        "@types/react": "^18.2.51",
+        "@types/react": "^18.2.52",
         "@types/react-dom": "^18.2.18",
         "@types/set-cookie-parser": "^2.4.7",
         "@types/source-map-support": "^0.5.10",
@@ -113,7 +113,7 @@
         "msw": "2.1.5",
         "node-html-parser": "^6.1.12",
         "npm-run-all": "^4.1.5",
-        "prettier": "^3.2.4",
+        "prettier": "^3.2.5",
         "prettier-plugin-sql": "^0.18.0",
         "prettier-plugin-tailwindcss": "^0.5.11",
         "prisma": "^5.9.1",
@@ -5650,9 +5650,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.51",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.51.tgz",
-      "integrity": "sha512-XeoMaU4CzyjdRr3c4IQQtiH7Rpo18V07rYZUucEZQwOUEtGgTXv7e6igQiQ+xnV6MbMe1qjEmKdgMNnfppnXfg==",
+      "version": "18.2.52",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.52.tgz",
+      "integrity": "sha512-E/YjWh3tH+qsLKaUzgpZb5AY0ChVa+ZJzF7ogehVILrFpdQk6nC/WXOv0bfFEABbXbgNxLBGU7IIZByPKb6eBw==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -7603,9 +7603,9 @@
       "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ=="
     },
     "node_modules/better-sqlite3": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-9.3.0.tgz",
-      "integrity": "sha512-ww73jVpQhRRdS9uMr761ixlkl4bWoXi8hMQlBGhoN6vPNlUHpIsNmw4pKN6kjknlt/wopdvXHvLk1W75BI+n0Q==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-9.4.0.tgz",
+      "integrity": "sha512-5kynxekMxSjCMiFyUBLHggFcJkCmiZi6fUkiGz/B5GZOvdRWQJD0klqCx5/Y+bm2AKP7I/DHbSFx26AxjruWNg==",
       "hasInstallScript": true,
       "dependencies": {
         "bindings": "^1.5.0",
@@ -15451,9 +15451,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
-      "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
diff --git a/package.json b/package.json
index e6a1318..6703536 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "address": "^2.0.1",
     "autoprefixer": "^10.4.17",
     "bcryptjs": "^2.4.3",
-    "better-sqlite3": "^9.3.0",
+    "better-sqlite3": "^9.4.0",
     "chalk": "^5.3.0",
     "class-variance-authority": "^0.7.0",
     "close-with-grace": "^1.2.0",
@@ -129,7 +129,7 @@
     "@types/morgan": "^1.9.9",
     "@types/node": "^20.11.16",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.2.51",
+    "@types/react": "^18.2.52",
     "@types/react-dom": "^18.2.18",
     "@types/set-cookie-parser": "^2.4.7",
     "@types/source-map-support": "^0.5.10",
@@ -145,7 +145,7 @@
     "msw": "2.1.5",
     "node-html-parser": "^6.1.12",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "prettier-plugin-sql": "^0.18.0",
     "prettier-plugin-tailwindcss": "^0.5.11",
     "prisma": "^5.9.1",