Add prev/next navigation buttons to edit pages

- Filament, spool, and vendor edit pages now have Prev/Next buttons
- Navigate between items without returning to the list
- Buttons are disabled at the beginning/end of the list

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

client/public/locales/en/common.json

@@ -27,6 +27,10 @@
         "unArchive": "Unarchive",
         "hideArchived": "Hide Archived",
         "showArchived": "Show Archived",
+        "prev": "Prev",
+        "next": "Next",
+        "yes": "Yes",
+        "no": "No",
         "notAccessTitle": "You don't have permission to access",
         "hideColumns": "Hide Columns",
         "clearFilters": "Clear Filters"

client/src/pages/filaments/edit.tsx

@@ -1,9 +1,11 @@
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 import { Edit, useForm, useSelect } from "@refinedev/antd";
-import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
-import { Alert, ColorPicker, DatePicker, Form, Input, InputNumber, message, Radio, Select, Space, Typography } from "antd";
+import { HttpError, IResourceComponentsProps, useList, useTranslate } from "@refinedev/core";
+import { Alert, Button, ColorPicker, DatePicker, Form, Input, InputNumber, message, Radio, Select, Space, Typography } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import dayjs from "dayjs";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
 import { MultiColorPicker } from "../../components/multiColorPicker";
 import { formatNumberOnUserInput, numberParser, numberParserAllowEmpty } from "../../utils/parsing";
@@ -21,13 +23,21 @@ the form's onFinish method. Form.Item's normalize should do this, but it doesn't
 
 export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
+  const navigate = useNavigate();
   const [messageApi, contextHolder] = message.useMessage();
   const [hasChanged, setHasChanged] = useState(false);
   const extraFields = useGetFields(EntityType.filament);
   const currency = useCurrency();
   const [colorType, setColorType] = useState<"single" | "multi">("single");
 
-  const { formProps, saveButtonProps } = useForm<IFilament, HttpError, IFilament, IFilament>({
+  // Get all filament IDs for prev/next navigation
+  const { data: allFilaments } = useList<IFilament>({
+    resource: "filament",
+    pagination: { mode: "off" },
+    sorters: [{ field: "id", order: "asc" }],
+  });
+
+  const { formProps, saveButtonProps, id } = useForm<IFilament, HttpError, IFilament, IFilament>({
     liveMode: "manual",
     onLiveEvent() {
       // Warn the user if the filament has been updated since the form was opened
@@ -36,6 +46,17 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
     },
   });
 
+  // Calculate prev/next IDs for navigation
+  const { prevId, nextId } = useMemo(() => {
+    if (!allFilaments?.data || !id) return { prevId: null, nextId: null };
+    const ids = allFilaments.data.map((f) => f.id);
+    const currentIndex = ids.indexOf(Number(id));
+    return {
+      prevId: currentIndex > 0 ? ids[currentIndex - 1] : null,
+      nextId: currentIndex < ids.length - 1 ? ids[currentIndex + 1] : null,
+    };
+  }, [allFilaments?.data, id]);
+
   // Get vendor selection options
   const { selectProps } = useSelect<IVendor>({
     resource: "vendor",
@@ -76,7 +97,28 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
   };
 
   return (
-    <Edit saveButtonProps={saveButtonProps}>
+    <Edit
+      saveButtonProps={saveButtonProps}
+      headerButtons={({ defaultButtons }) => (
+        <>
+          <Button
+            icon={<LeftOutlined />}
+            disabled={!prevId}
+            onClick={() => prevId && navigate(`/filament/edit/${prevId}`)}
+          >
+            {t("buttons.prev")}
+          </Button>
+          <Button
+            icon={<RightOutlined />}
+            disabled={!nextId}
+            onClick={() => nextId && navigate(`/filament/edit/${nextId}`)}
+          >
+            {t("buttons.next")}
+          </Button>
+          {defaultButtons}
+        </>
+      )}
+    >
       {contextHolder}
       <Form {...formProps} layout="vertical">
         <Form.Item

client/src/pages/spools/edit.tsx

@@ -1,6 +1,7 @@
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 import { Edit, useForm } from "@refinedev/antd";
-import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
-import { Alert, DatePicker, Divider, Form, Input, InputNumber, Radio, Select, Typography } from "antd";
+import { HttpError, IResourceComponentsProps, useList, useTranslate } from "@refinedev/core";
+import { Alert, Button, DatePicker, Divider, Form, Input, InputNumber, Radio, Select, Typography } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { message } from "antd/lib";
 import dayjs from "dayjs";
@@ -37,7 +38,14 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
   const [searchParams, _] = useSearchParams();
   const navigate = useNavigate();
 
-  const { form, formProps, saveButtonProps } = useForm<ISpool, HttpError, ISpoolRequest, ISpool>({
+  // Get all spool IDs for prev/next navigation
+  const { data: allSpools } = useList<ISpool>({
+    resource: "spool",
+    pagination: { mode: "off" },
+    sorters: [{ field: "id", order: "asc" }],
+  });
+
+  const { form, formProps, saveButtonProps, id } = useForm<ISpool, HttpError, ISpoolRequest, ISpool>({
     liveMode: "manual",
     onLiveEvent() {
       // Warn the user if the spool has been updated since the form was opened
@@ -60,6 +68,17 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
   const initialWeightValue = Form.useWatch("initial_weight", form);
   const spoolWeightValue = Form.useWatch("spool_weight", form);
 
+  // Calculate prev/next IDs for navigation
+  const { prevId, nextId } = useMemo(() => {
+    if (!allSpools?.data || !id) return { prevId: null, nextId: null };
+    const ids = allSpools.data.map((s) => s.id);
+    const currentIndex = ids.indexOf(Number(id));
+    return {
+      prevId: currentIndex > 0 ? ids[currentIndex - 1] : null,
+      nextId: currentIndex < ids.length - 1 ? ids[currentIndex + 1] : null,
+    };
+  }, [allSpools?.data, id]);
+
   // Add the filament_id field to the form
   if (formProps.initialValues) {
     formProps.initialValues["filament_id"] = formProps.initialValues["filament"].id;
@@ -231,7 +250,28 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
   }, [initialUsedWeight]);
 
   return (
-    <Edit saveButtonProps={saveButtonProps}>
+    <Edit
+      saveButtonProps={saveButtonProps}
+      headerButtons={({ defaultButtons }) => (
+        <>
+          <Button
+            icon={<LeftOutlined />}
+            disabled={!prevId}
+            onClick={() => prevId && navigate(`/spool/edit/${prevId}`)}
+          >
+            {t("buttons.prev")}
+          </Button>
+          <Button
+            icon={<RightOutlined />}
+            disabled={!nextId}
+            onClick={() => nextId && navigate(`/spool/edit/${nextId}`)}
+          >
+            {t("buttons.next")}
+          </Button>
+          {defaultButtons}
+        </>
+      )}
+    >
       {contextHolder}
       <Form {...formProps} layout="vertical">
         <Form.Item

client/src/pages/vendors/edit.tsx

@@ -1,9 +1,11 @@
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 import { Edit, useForm } from "@refinedev/antd";
-import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
-import { Alert, DatePicker, Form, Input, InputNumber, message, Typography } from "antd";
+import { HttpError, IResourceComponentsProps, useList, useTranslate } from "@refinedev/core";
+import { Alert, Button, DatePicker, Form, Input, InputNumber, message, Typography } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import dayjs from "dayjs";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { IVendor, IVendorParsedExtras } from "./model";
@@ -17,11 +19,19 @@ the form's onFinish method. Form.Item's normalize should do this, but it doesn't
 
 export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
+  const navigate = useNavigate();
   const [messageApi, contextHolder] = message.useMessage();
   const [hasChanged, setHasChanged] = useState(false);
   const extraFields = useGetFields(EntityType.vendor);
 
-  const { formProps, saveButtonProps } = useForm<IVendor, HttpError, IVendor, IVendor>({
+  // Get all vendor IDs for prev/next navigation
+  const { data: allVendors } = useList<IVendor>({
+    resource: "vendor",
+    pagination: { mode: "off" },
+    sorters: [{ field: "id", order: "asc" }],
+  });
+
+  const { formProps, saveButtonProps, id } = useForm<IVendor, HttpError, IVendor, IVendor>({
     liveMode: "manual",
     onLiveEvent() {
       // Warn the user if the vendor has been updated since the form was opened
@@ -30,6 +40,17 @@ export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
     },
   });
 
+  // Calculate prev/next IDs for navigation
+  const { prevId, nextId } = useMemo(() => {
+    if (!allVendors?.data || !id) return { prevId: null, nextId: null };
+    const ids = allVendors.data.map((v) => v.id);
+    const currentIndex = ids.indexOf(Number(id));
+    return {
+      prevId: currentIndex > 0 ? ids[currentIndex - 1] : null,
+      nextId: currentIndex < ids.length - 1 ? ids[currentIndex + 1] : null,
+    };
+  }, [allVendors?.data, id]);
+
   // Parse the extra fields from string values into real types
   if (formProps.initialValues) {
     formProps.initialValues = ParsedExtras(formProps.initialValues);
@@ -49,7 +70,28 @@ export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
   };
 
   return (
-    <Edit saveButtonProps={saveButtonProps}>
+    <Edit
+      saveButtonProps={saveButtonProps}
+      headerButtons={({ defaultButtons }) => (
+        <>
+          <Button
+            icon={<LeftOutlined />}
+            disabled={!prevId}
+            onClick={() => prevId && navigate(`/vendor/edit/${prevId}`)}
+          >
+            {t("buttons.prev")}
+          </Button>
+          <Button
+            icon={<RightOutlined />}
+            disabled={!nextId}
+            onClick={() => nextId && navigate(`/vendor/edit/${nextId}`)}
+          >
+            {t("buttons.next")}
+          </Button>
+          {defaultButtons}
+        </>
+      )}
+    >
       {contextHolder}
       <Form {...formProps} layout="vertical">
         <Form.Item