Added beginnings of a home page

client/src/App.tsx

@@ -5,16 +5,12 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ErrorComponent } from "@refinedev/antd";
 import "@refinedev/antd/dist/reset.css";
 
-import routerBindings, {
-  DocumentTitleHandler,
-  NavigateToResource,
-  UnsavedChangesNotifier,
-} from "@refinedev/react-router-v6";
+import routerBindings, { DocumentTitleHandler, UnsavedChangesNotifier } from "@refinedev/react-router-v6";
 import dataProvider from "./components/dataProvider";
 import { useTranslation } from "react-i18next";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 import { ColorModeContextProvider } from "./contexts/color-mode";
-import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons";
+import { FileOutlined, HighlightOutlined, HomeOutlined, UserOutlined } from "@ant-design/icons";
 import { ConfigProvider } from "antd";
 import React from "react";
 import { Locale } from "antd/es/locale";
@@ -24,15 +20,27 @@ import SpoolmanNotificationProvider from "./components/notificationProvider";
 import { SpoolmanLayout } from "./components/layout";
 import liveProvider from "./components/liveProvider";
 
-interface PageProps {
+interface ResourcePageProps {
   resource: "spools" | "filaments" | "vendors";
   page: "list" | "create" | "edit" | "show";
   mode?: "create" | "clone";
 }
 
-const LoadablePage = loadable((props: PageProps) => import(`./pages/${props.resource}/${props.page}.tsx`), {
+const LoadableResourcePage = loadable(
+  (props: ResourcePageProps) => import(`./pages/${props.resource}/${props.page}.tsx`),
+  {
+    fallback: <div>Page is Loading...</div>,
+    cacheKey: (props: ResourcePageProps) => `${props.resource}-${props.page}-${props.mode ?? ""}`,
+  }
+);
+
+interface LoadablePageProps {
+  name: string;
+}
+
+const LoadablePage = loadable((props: LoadablePageProps) => import(`./pages/${props.name}/index.tsx`), {
   fallback: <div>Page is Loading...</div>,
-  cacheKey: (props: PageProps) => `${props.resource}-${props.page}-${props.mode ?? ""}`,
+  cacheKey: (props: LoadablePageProps) => `page-${props.name}`,
 });
 
 function App() {
@@ -87,6 +95,14 @@ function App() {
               routerProvider={routerBindings}
               liveProvider={liveProvider(import.meta.env.VITE_APIURL)}
               resources={[
+                {
+                  name: "home",
+                  list: "/",
+                  meta: {
+                    canDelete: false,
+                    icon: <HomeOutlined />,
+                  },
+                },
                 {
                   name: "spool",
                   list: "/spool",
@@ -138,30 +154,45 @@ function App() {
                     </SpoolmanLayout>
                   }
                 >
-                  <Route index element={<NavigateToResource resource="spool" />} />
+                  <Route index element={<LoadablePage name="home" />} />
                   <Route path="/spool">
-                    <Route index element={<LoadablePage resource="spools" page="list" />} />
-                    <Route path="create" element={<LoadablePage resource="spools" page="create" mode="create" />} />
-                    <Route path="clone/:id" element={<LoadablePage resource="spools" page="create" mode="clone" />} />
-                    <Route path="edit/:id" element={<LoadablePage resource="spools" page="edit" />} />
-                    <Route path="show/:id" element={<LoadablePage resource="spools" page="show" />} />
-                  </Route>
-                  <Route path="/filament">
-                    <Route index element={<LoadablePage resource="filaments" page="list" />} />
-                    <Route path="create" element={<LoadablePage resource="filaments" page="create" mode="create" />} />
+                    <Route index element={<LoadableResourcePage resource="spools" page="list" />} />
+                    <Route
+                      path="create"
+                      element={<LoadableResourcePage resource="spools" page="create" mode="create" />}
+                    />
                     <Route
                       path="clone/:id"
-                      element={<LoadablePage resource="filaments" page="create" mode="clone" />}
+                      element={<LoadableResourcePage resource="spools" page="create" mode="clone" />}
                     />
-                    <Route path="edit/:id" element={<LoadablePage resource="filaments" page="edit" />} />
-                    <Route path="show/:id" element={<LoadablePage resource="filaments" page="show" />} />
+                    <Route path="edit/:id" element={<LoadableResourcePage resource="spools" page="edit" />} />
+                    <Route path="show/:id" element={<LoadableResourcePage resource="spools" page="show" />} />
+                  </Route>
+                  <Route path="/filament">
+                    <Route index element={<LoadableResourcePage resource="filaments" page="list" />} />
+                    <Route
+                      path="create"
+                      element={<LoadableResourcePage resource="filaments" page="create" mode="create" />}
+                    />
+                    <Route
+                      path="clone/:id"
+                      element={<LoadableResourcePage resource="filaments" page="create" mode="clone" />}
+                    />
+                    <Route path="edit/:id" element={<LoadableResourcePage resource="filaments" page="edit" />} />
+                    <Route path="show/:id" element={<LoadableResourcePage resource="filaments" page="show" />} />
                   </Route>
                   <Route path="/vendor">
-                    <Route index element={<LoadablePage resource="vendors" page="list" />} />
-                    <Route path="create" element={<LoadablePage resource="vendors" page="create" mode="create" />} />
-                    <Route path="clone/:id" element={<LoadablePage resource="vendors" page="create" mode="clone" />} />
-                    <Route path="edit/:id" element={<LoadablePage resource="vendors" page="edit" />} />
-                    <Route path="show/:id" element={<LoadablePage resource="vendors" page="show" />} />
+                    <Route index element={<LoadableResourcePage resource="vendors" page="list" />} />
+                    <Route
+                      path="create"
+                      element={<LoadableResourcePage resource="vendors" page="create" mode="create" />}
+                    />
+                    <Route
+                      path="clone/:id"
+                      element={<LoadableResourcePage resource="vendors" page="create" mode="clone" />}
+                    />
+                    <Route path="edit/:id" element={<LoadableResourcePage resource="vendors" page="edit" />} />
+                    <Route path="show/:id" element={<LoadableResourcePage resource="vendors" page="show" />} />
                   </Route>
                   <Route path="*" element={<ErrorComponent />} />
                 </Route>

client/src/pages/home/index.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { IResourceComponentsProps } from "@refinedev/core";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import { Content } from "antd/es/layout/layout";
+import { Collapse, List, theme } from "antd";
+import Title from "antd/es/typography/Title";
+import Logo from "../../icon.svg?react";
+import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons";
+
+dayjs.extend(utc);
+
+const { useToken } = theme;
+
+export const Home: React.FC<IResourceComponentsProps> = () => {
+  const { token } = useToken();
+  // const t = useTranslate();
+
+  return (
+    <Content
+      style={{
+        padding: 8,
+        minHeight: 280,
+        maxWidth: 1000,
+        margin: "0 auto",
+        backgroundColor: token.colorBgContainer,
+        borderRadius: token.borderRadiusLG,
+        color: token.colorText,
+        fontFamily: token.fontFamily,
+        fontSize: token.fontSizeLG,
+        lineHeight: 1.5,
+      }}
+    >
+      <Title
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          margin: "1em 0",
+          fontSize: token.fontSizeHeading1 + 8,
+        }}
+      >
+        <div
+          style={{
+            display: "inline-block",
+            height: "1.5em",
+            float: "left",
+            marginRight: "0.5em",
+          }}
+        >
+          <Logo />
+        </div>
+        Spoolman
+      </Title>
+      <Collapse
+        className="site-collapse-custom-collapse"
+        items={[
+          {
+            key: "1",
+            label: <span style={{ fontSize: "200%" }}>Getting Started</span>,
+            children: (
+              <>
+                <p>Here are some tips to get you started.</p>
+                <p>Spoolman holds 3 different types of data:</p>
+                <List
+                  itemLayout="horizontal"
+                  size="large"
+                  dataSource={[
+                    {
+                      title: "Filaments",
+                      description:
+                        "Brands of filament. They have properties such as name, material, color, diameter, and more.",
+                      icon: <HighlightOutlined />,
+                    },
+                    {
+                      title: "Spools",
+                      description: "Individual physical spools of a specific filament.",
+                      icon: <FileOutlined />,
+                    },
+                    {
+                      title: "Vendors",
+                      description: "The companies that make the filament.",
+                      icon: <UserOutlined />,
+                    },
+                  ]}
+                  renderItem={(item) => (
+                    <List.Item>
+                      <List.Item.Meta avatar={item.icon} title={item.title} description={item.description} />
+                    </List.Item>
+                  )}
+                />
+                <p>
+                  To enter a new spool into the database, you first need to create a <strong>Filament</strong> object
+                  for it. Once that is done, you can then create a <strong>Spool</strong> object for that individual
+                  spool. If you then purchase additional spools of the same filament, you can just create additional
+                  Spool objects, and re-use the same Filament object.
+                </p>
+                <p>
+                  You can optionally also create a <strong>Vendor</strong> object for the company that makes the
+                  filament, if you want to track that information.
+                </p>
+                <p>
+                  You can connect other 3D printer services to Spoolman, such as Moonraker, which can then automatically
+                  track filament usage and update the Spool objects for you. See the{" "}
+                  <a href="https://github.com/Donkie/Spoolman#integration-status" target="_blank">
+                    Spoolman README
+                  </a>{" "}
+                  for how to do that.
+                </p>
+              </>
+            ),
+          },
+        ]}
+        bordered={false}
+        ghost
+      />
+    </Content>
+  );
+};
+
+export default Home;