Added pricing field for single spool

client/src/pages/spools/create.tsx

@@ -201,7 +201,20 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             }}
           />
         </Form.Item>
-
+        <Form.Item
+          label={t("filament.fields.price")}
+          help={t("filament.fields_help.price")}
+          name={["price"]}
+          rules={[
+            {
+              required: false,
+              type: "number",
+              min: 0,
+            },
+          ]}
+        >
+                    <InputNumber precision={2} formatter={numberFormatter} parser={numberParser} />
+        </Form.Item>
         <Form.Item hidden={true} name={["used_weight"]} initialValue={0}>
           <InputNumber value={usedWeight} />
         </Form.Item>

client/src/pages/spools/edit.tsx

@@ -181,6 +181,20 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
             }}
           />
         </Form.Item>
+        <Form.Item
+          label={t("spool.fields.price")}
+          help={t("spool.fields_help.price")}
+          name={["price"]}
+          rules={[
+            {
+              required: false,
+              type: "number",
+              min: 0,
+            },
+          ]}
+        >
+          <InputNumber precision={2} formatter={numberFormatter} parser={numberParser} />
+        </Form.Item>
         <Form.Item hidden={true} name={["used_weight"]} initialValue={0}>
           <InputNumber value={usedWeight} />
         </Form.Item>

client/src/pages/spools/list.tsx

@@ -73,6 +73,7 @@ const allColumns: (keyof ISpoolCollapsed & string)[] = [
   "id",
   "combined_name",
   "filament.material",
+  "price",
   "used_weight",
   "remaining_weight",
   "used_length",
@@ -312,6 +313,14 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             filterValueQuery: useSpoolmanMaterials(),
             width: 120,
           }),
+          SortedColumn({
+            id: "price",
+            i18ncat: "spool",
+            actions,
+            dataSource,
+            tableState,
+            width: 80,
+          }),
           NumberColumn({
             id: "used_weight",
             i18ncat: "spool",

client/src/pages/spools/model.tsx

@@ -6,6 +6,7 @@ export interface ISpool {
   first_used?: string;
   last_used?: string;
   filament: IFilament;
+  price?: number;
   remaining_weight?: number;
   used_weight: number;
   remaining_length?: number;

client/src/pages/spools/show.tsx

@@ -58,6 +58,8 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
       <NumberField value={record?.id ?? ""} />
       <Title level={5}>{t("spool.fields.filament")}</Title>
       <TextField value={record ? filamentURL(record?.filament) : ""} />
+      <Title level={5}>{t("spool.fields.price")}</Title>
+      <NumberField value={record?.price ?? ""} />
       <Title level={5}>{t("spool.fields.registered")}</Title>
       <DateField
         value={dayjs.utc(record?.registered).local()}