add some ui

package.json

@@ -26,6 +26,7 @@
     "@electron-forge/maker-zip": "^7.2.0",
     "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
     "@electron-forge/plugin-vite": "^7.2.0",
+    "@iconify/react": "^4.1.1",
     "@types/better-sqlite3": "^7.6.9",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.54",
@@ -45,7 +46,9 @@
     "typescript": "~4.5.4"
   },
   "dependencies": {
-    "@nextui-org/react": "^2.2.9",
+    "@heroicons/react": "^2.1.3",
+    "@nextui-org/react": "^2.3.3",
+    "@supabase-cache-helpers/postgrest-react-query": "^1.6.2",
     "@supabase/supabase-js": "^2.39.7",
     "@tanstack/react-query": "^5.24.1",
     "better-sqlite3": "^9.4.0",

src/main/main.ts

@@ -14,8 +14,9 @@ if (require("electron-squirrel-startup")) {
 const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    width: 800,
+    width: 1000,
     height: 600,
+    titleBarStyle: 'hiddenInset',
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
     },

src/renderer/App.css

@@ -2,46 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-
 #root {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 2rem;
-    text-align: center;
-  }
-
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
-  }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-  }
-  .logo.react:hover {
-    filter: drop-shadow(0 0 2em #61dafbaa);
-  }
-
-  @keyframes logo-spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    a:nth-of-type(2) .logo {
-      animation: logo-spin infinite 20s linear;
-    }
-  }
-
-  .card {
-    padding: 2em;
-  }
-
-  .read-the-docs {
-    color: #888;
-  }
+  /* max-width: 1280px; */
+  /* margin: 0 auto; */
+  /* padding: 2rem; */
+  /* text-align: center; */
+}

src/renderer/components/Layout/MainLayout.tsx

@@ -0,0 +1,96 @@
+import React, { FC, useState } from 'react';
+import {
+  Card,
+  CardBody,
+  Button,
+  Image,
+  Progress,
+  CardProps,
+  Slider,
+  CardFooter,
+  Link,
+  Tabs,
+  Tab,
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+  Navbar,
+  NavbarContent,
+  NavbarItem,
+  ButtonProps,
+  LinkProps,
+  Breadcrumbs as NBreadcrumbs,
+  BreadcrumbItem as NBreadcrumbItem,
+} from '@nextui-org/react';
+import clsx from 'clsx';
+import { Icon } from '@iconify/react';
+
+import { NavLink, NavLinkProps, useLocation, useNavigate, useParams } from 'react-router-dom';
+
+interface ISideBarItemProps {
+  icon?: React.ReactNode;
+  to: string;
+}
+
+const SideBarItem = (props: ButtonProps & NavLinkProps) => {
+  return (
+    <NavLink to={props.to} className='w-full'>
+      {({ isActive }) => (
+        <Button
+          startContent={<Icon icon='solar:home-2-broken' />}
+          variant='light'
+          className='justify-start'
+          fullWidth
+          {...props}
+        ></Button>
+      )}
+    </NavLink>
+  );
+};
+
+const SideBar = () => {
+  return (
+    <Card className='flex flex-shrink-0 pt-10'>
+      <CardBody className='py-[10vh flex w-32 overflow-y-auto p-0'>
+        <div className='relative flex w-full list-none flex-col gap-1 p-1'>
+          <div className='flex w-full flex-col items-center gap-0.5 outline-none'>
+            <SideBarItem to='/parts'>parts</SideBarItem>
+            <SideBarItem to='/products'>Products</SideBarItem>
+            <SideBarItem to='/test'>Home</SideBarItem>
+          </div>
+        </div>
+      </CardBody>
+      <CardFooter>
+        <div>card footer</div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+const Breadcrumbs = () => {
+  return (
+    <NBreadcrumbs>
+      <NBreadcrumbItem>Home</NBreadcrumbItem>
+      <NBreadcrumbItem>Tast</NBreadcrumbItem>
+    </NBreadcrumbs>
+  );
+  // return
+};
+
+type IMainLayoutProps = {
+  children: React.ReactNode;
+};
+
+export const MainLayout = ({ children }: IMainLayoutProps) => {
+  return (
+    <div className='relative flex h-screen overflow-hidden bg-background text-foreground dark'>
+      <SideBar />
+
+      <main className='relative flex w-full flex-1 flex-col gap-y-4 p-4'>
+        <Breadcrumbs />
+        {children}
+      </main>
+    </div>
+  );
+};

src/renderer/components/Layout/index.ts

@@ -0,0 +1 @@
+export * from './MainLayout';

src/renderer/features/parts/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useGetPartsList';

src/renderer/features/parts/hooks/useGetPartsList.tsx

@@ -0,0 +1,34 @@
+import { QueryResult, QueryData, QueryError } from '@supabase/supabase-js';
+
+import { Tables } from '@/types/database.types';
+
+import { supabase } from '@/lib/supabase';
+import { useQuery } from '@supabase-cache-helpers/postgrest-react-query';
+import { TypedSupabaseClient } from '@/types';
+// import { useQuery } from '@tanstack/react-query';
+
+export type IPartsList = Tables<'parts'>[];
+
+export const getParts = (client: TypedSupabaseClient, id: number) => {
+  return client.from('parts').select(`id,name`, { count: 'exact' }).eq('id', id).throwOnError();
+};
+
+export const useGetPartsList = () => {
+  return useQuery(getParts(supabase, 1));
+};
+
+// import { QueryResult, QueryData, QueryError } from '@supabase/supabase-js'
+
+// const countriesWithCitiesQuery = supabase.from('countries').select(`
+//   id,
+//   name,
+//   cities (
+//     id,
+//     name
+//   )
+// `)
+// type CountriesWithCities = QueryData<typeof countriesWithCitiesQuery>
+
+// const { data, error } = await countriesWithCitiesQuery
+// if (error) throw error
+// const countriesWithCities: CountriesWithCities = data

src/renderer/features/parts/index.ts

@@ -0,0 +1 @@
+export * from './routes';

src/renderer/features/parts/routes/PartsList.tsx

@@ -0,0 +1,11 @@
+import { useQuery } from '@supabase-cache-helpers/postgrest-react-query';
+import { getParts, useGetPartsList } from '../hooks';
+import { supabase } from '@/lib/supabase';
+
+export const PartsList = () => {
+  const { data, isLoading } = useGetPartsList();
+
+  if (isLoading) return <div>loading</div>;
+
+  return <div>{data?.map((x) => <div key={x.id}>{x.name}</div>)}</div>;
+};

src/renderer/features/parts/routes/index.tsx

@@ -0,0 +1,11 @@
+import { Route, Routes } from 'react-router-dom';
+
+import { PartsList } from './PartsList';
+
+export const PartsRoutes = () => {
+  return (
+    <Routes>
+      <Route path='' element={<PartsList />} />
+    </Routes>
+  );
+};

src/renderer/features/products/index.ts

@@ -0,0 +1 @@
+export * from './routes';

src/renderer/features/products/routes/ProductsList.tsx

@@ -0,0 +1,3 @@
+export const ProductsList = () => {
+  return <div>Products list</div>;
+};

src/renderer/features/products/routes/index.tsx

@@ -0,0 +1,11 @@
+import { Route, Routes } from 'react-router-dom';
+
+import { ProductsList } from './ProductsList';
+
+export const ProductsRoutes = () => {
+  return (
+    <Routes>
+      <Route path='' element={<ProductsList />} />
+    </Routes>
+  );
+};

src/renderer/features/users/routes/users.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
 import { useGetUserList } from '../hooks/useGetUserList';
-import { useGetCountryList } from '../hooks/useGetCountryList';
 
 export const Users = () => {
   const { data, isLoading } = useGetUserList();
-  const { data: countryList } = useGetCountryList();
-  console.log(countryList, 'countryList');
 
   return (
     <div className='flex flex-col'>
@@ -16,11 +13,6 @@ export const Users = () => {
           </div>
         );
       })}
-      {/* <ul>
-        {(countryList || []).map((country) => (
-          <li key={country.name}>{country.name}</li>
-        ))}
-      </ul> */}
     </div>
   );
 };

src/renderer/routes/index.tsx

@@ -18,25 +18,10 @@ import { protectedRoutes } from './protected';
 import { useEffect, useState } from 'react';
 import { Session } from '@supabase/supabase-js';
 
-const routesMap = [
-  {
-    path: '/',
-    element: <div>test</div>,
-    exact: true,
-  },
-  {
-    path: '/two',
-    element: <Users />,
-    exact: true,
-  },
-];
-
 export const AppRoutes = () => {
-  // const routes = auth.user ? protectedRoutes : publicRoutes;
-
-  const routes = false ? protectedRoutes : publicRoutes;
+  const routes = true ? protectedRoutes : publicRoutes;
 
-  const element = useRoutes([...publicRoutes]);
+  const element = useRoutes([...protectedRoutes]);
   const navigate = useNavigate();
 
   const handleBtnClick = async () => {

src/renderer/routes/protected.tsx

@@ -1 +1,39 @@
-export const protectedRoutes = [];
+import { Suspense } from 'react';
+import { Outlet, RouteObject } from 'react-router-dom';
+
+import { MainLayout } from '@/components/Layout';
+import { lazyImport } from '@/utils';
+
+const { PartsRoutes } = lazyImport(() => import('@/features/parts'), 'PartsRoutes');
+const { ProductsRoutes } = lazyImport(() => import('@/features/products'), 'ProductsRoutes');
+
+const App = () => {
+  return (
+    <MainLayout>
+      <Suspense>
+        <Outlet></Outlet>
+      </Suspense>
+    </MainLayout>
+  );
+};
+
+export const protectedRoutes: RouteObject[] = [
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      {
+        path: '/test',
+        element: <div>test</div>,
+      },
+      {
+        path: '/parts',
+        element: <PartsRoutes />,
+      },
+      {
+        path: '/products',
+        element: <ProductsRoutes />,
+      },
+    ],
+  },
+];