Moved help stuff to a new dedicated Help page

Also added some cool stats on home page

client/public/locales/en/common.json

@@ -237,6 +237,9 @@
     "home": {
         "home": "Home"
     },
+    "help": {
+        "help": "Help"
+    },
     "table": {
         "actions": "Actions"
     },
@@ -246,6 +249,9 @@
         "home": {
             "list": "Home | Spoolman"
         },
+        "help": {
+            "list": "Help | Spoolman"
+        },
         "filament": {
             "list": "Filaments | Spoolman",
             "show": "#{{id}} Show Filament | Spoolman",

client/src/App.tsx

@@ -10,7 +10,7 @@ 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, HomeOutlined, UserOutlined } from "@ant-design/icons";
+import { FileOutlined, HighlightOutlined, HomeOutlined, QuestionOutlined, UserOutlined } from "@ant-design/icons";
 import { ConfigProvider } from "antd";
 import React from "react";
 import { Locale } from "antd/es/locale";
@@ -139,6 +139,14 @@ function App() {
                     icon: <UserOutlined />,
                   },
                 },
+                {
+                  name: "help",
+                  list: "/help",
+                  meta: {
+                    canDelete: false,
+                    icon: <QuestionOutlined />,
+                  },
+                },
               ]}
               options={{
                 syncWithLocation: true,
@@ -194,6 +202,7 @@ function App() {
                     <Route path="edit/:id" element={<LoadableResourcePage resource="vendors" page="edit" />} />
                     <Route path="show/:id" element={<LoadableResourcePage resource="vendors" page="show" />} />
                   </Route>
+                  <Route path="/help" element={<LoadablePage name="help" />} />
                   <Route path="*" element={<ErrorComponent />} />
                 </Route>
               </Routes>

client/src/pages/help/index.tsx

@@ -0,0 +1,85 @@
+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 { List, theme } from "antd";
+import Title from "antd/es/typography/Title";
+import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons";
+import { Link } from "react-router-dom";
+
+dayjs.extend(utc);
+
+const { useToken } = theme;
+
+export const Help: React.FC<IResourceComponentsProps> = () => {
+  const { token } = useToken();
+  // const t = useTranslate();
+
+  return (
+    <Content
+      style={{
+        padding: 20,
+        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>Help</Title>
+      <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 <Link to="/filament/create">Filament</Link>{" "}
+        object for it. Once that is done, you can then create a <Link to="/spool/create">Spool</Link> 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 <Link to="/vendor/create">Vendor</Link> 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>
+    </Content>
+  );
+};
+
+export default Help;

client/src/pages/home/index.tsx

@@ -1,12 +1,14 @@
-import React from "react";
+import React, { ReactNode } from "react";
-import { IResourceComponentsProps } from "@refinedev/core";
+import { IResourceComponentsProps, useList, useTranslate } 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 { Card, Col, Row, Statistic, theme } from "antd";
 import Title from "antd/es/typography/Title";
 import Logo from "../../icon.svg?react";
-import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons";
+import { FileOutlined, HighlightOutlined, PlusOutlined, UnorderedListOutlined, UserOutlined } from "@ant-design/icons";
+import { ISpool } from "../spools/model";
+import { Link } from "react-router-dom";
 
 dayjs.extend(utc);
 
@@ -14,14 +16,47 @@ const { useToken } = theme;
 
 export const Home: React.FC<IResourceComponentsProps> = () => {
   const { token } = useToken();
-  // const t = useTranslate();
+  const t = useTranslate();
+
+  const spools = useList<ISpool>({
+    resource: "spool",
+    pagination: { pageSize: 1 },
+  });
+  const filaments = useList<ISpool>({
+    resource: "filament",
+    pagination: { pageSize: 1 },
+  });
+  const vendors = useList<ISpool>({
+    resource: "vendor",
+    pagination: { pageSize: 1 },
+  });
+
+  const hasSpools = !spools.data || spools.data.data.length > 0;
+
+  const ResourceStatsCard = (props: { loading: boolean; value: number; resource: string; icon: ReactNode }) => (
+    <Col xs={12} md={6}>
+      <Card
+        loading={props.loading}
+        actions={[
+          <Link to={`/${props.resource}`}>
+            <UnorderedListOutlined />
+          </Link>,
+          <Link to={`/${props.resource}/create`}>
+            <PlusOutlined />
+          </Link>,
+        ]}
+      >
+        <Statistic title={t(`${props.resource}.${props.resource}`)} value={props.value} prefix={props.icon} />
+      </Card>
+    </Col>
+  );
 
   return (
     <Content
       style={{
-        padding: 8,
+        padding: "2em 20px",
         minHeight: 280,
-        maxWidth: 1000,
+        maxWidth: 800,
         margin: "0 auto",
         backgroundColor: token.colorBgContainer,
         borderRadius: token.borderRadiusLG,
@@ -36,15 +71,13 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          margin: "1em 0",
+          fontSize: token.fontSizeHeading1,
-          fontSize: token.fontSizeHeading1 + 8,
         }}
       >
         <div
           style={{
             display: "inline-block",
             height: "1.5em",
-            float: "left",
             marginRight: "0.5em",
           }}
         >
@@ -52,68 +85,35 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
         </div>
         Spoolman
       </Title>
-      <Collapse
+      <Row justify="center" gutter={[16, 16]} style={{ marginTop: "3em" }}>
-        className="site-collapse-custom-collapse"
+        <ResourceStatsCard
-        items={[
+          resource="spool"
-          {
+          value={spools.data?.total || 0}
-            key: "1",
+          loading={spools.isLoading}
-            label: <span style={{ fontSize: "200%" }}>Getting Started</span>,
+          icon={<FileOutlined />}
-            children: (
+        />
-              <>
+        <ResourceStatsCard
-                <p>Here are some tips to get you started.</p>
+          resource="filament"
-                <p>Spoolman holds 3 different types of data:</p>
+          value={filaments.data?.total || 0}
-                <List
+          loading={filaments.isLoading}
-                  itemLayout="horizontal"
+          icon={<HighlightOutlined />}
-                  size="large"
+        />
-                  dataSource={[
+        <ResourceStatsCard
-                    {
+          resource="vendor"
-                      title: "Filaments",
+          value={vendors.data?.total || 0}
-                      description:
+          loading={vendors.isLoading}
-                        "Brands of filament. They have properties such as name, material, color, diameter, and more.",
+          icon={<UserOutlined />}
-                      icon: <HighlightOutlined />,
+        />
-                    },
+      </Row>
-                    {
+      {!hasSpools && (
-                      title: "Spools",
+        <>
-                      description: "Individual physical spools of a specific filament.",
+          <p style={{ marginTop: 32 }}>Welcome to your Spoolman instance!</p>
-                      icon: <FileOutlined />,
+          <p>
-                    },
+            It looks like you haven't added any spools yet. See the <Link to="/help">Help page</Link> for help getting
-                    {
+            started.
-                      title: "Vendors",
+          </p>
-                      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>
   );
 };