feat: enhance form descriptions with dynamic tick calculations and validations

- Replace static descriptions in admin fields with dynamic `TickDurationDescription` components.
- Add minimum and maximum constraints to duration fields in various schemas.
- Update `TickDurationDescription` to use `useField` hook for better form integration.

src/app/(payload)/admin/importMap.js

@@ -21,8 +21,8 @@ import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93
 import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { default as default_2d468cc5cf0b647ffca3201592c20825 } from '@/components/static/WarningMessage'
 import { default as default_0edde40a6ccd30c893b1227360f69360 } from '@/components/static/TickDurationDescription'
+import { default as default_2d468cc5cf0b647ffca3201592c20825 } from '@/components/static/WarningMessage'
 import { default as default_2f6c866ab4d4d51b3789f090b84b85c7 } from '@/components/static/VersionOverlay'
 import { default as default_508743824696caae2894ebf34c2e68bb } from '@/components/graphics/AppIcon'
 import { default as default_e752fee78378294ff03f91dba0a75a04 } from '@/components/graphics/AppLogo'
@@ -52,8 +52,8 @@ export const importMap = {
   "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@/components/static/WarningMessage#default": default_2d468cc5cf0b647ffca3201592c20825,
   "@/components/static/TickDurationDescription#default": default_0edde40a6ccd30c893b1227360f69360,
+  "@/components/static/WarningMessage#default": default_2d468cc5cf0b647ffca3201592c20825,
   "@/components/static/VersionOverlay#default": default_2f6c866ab4d4d51b3789f090b84b85c7,
   "@/components/graphics/AppIcon#default": default_508743824696caae2894ebf34c2e68bb,
   "@/components/graphics/AppLogo#default": default_e752fee78378294ff03f91dba0a75a04,

src/collections/intelligence/Missions.ts

@@ -141,7 +141,6 @@ export const Missions: CollectionConfig = {
                   label: "Estimated Duration (in minutes)",
                   defaultValue: 60 * 4, // Usually about 4 hours
                   required: true,
-
                 },
               ],
             },

src/collections/intelligence/Technologies.ts

@@ -128,9 +128,17 @@ export const Technologies: CollectionConfig = {
               name: "minimumResearchDuration",
               type: "number",
               admin: {
-                description:
-                  "The minimum amount of time in minutes that it takes to research this technology. If no maximum duration is provided, this technology will be researched in an amount of time exactly equal to this number.",
+                components: {
+                  Description: {
+                    path: "@/components/static/TickDurationDescription",
+                    clientProps: {
+                      task: "research this technology",
+                    },
+                  },
+                },
               },
+              min: 1,
+              max: 10000,
               required: true,
               defaultValue: 0,
             },
@@ -138,9 +146,25 @@ export const Technologies: CollectionConfig = {
               name: "maximumResearchDuration",
               type: "number",
               admin: {
-                description:
-                  "The maximum amount of time in minutes that it takes to research this technology.",
+                components: {
+                  Description: {
+                    path: "@/components/static/TickDurationDescription",
+                    clientProps: {
+                      task: "research this technology",
+                      field: "maximumResearchDuration",
+                    },
+                  },
+                },
               },
+              min: 1,
+              max: 10000,
+              /*validate: (value: number, { data, siblingData }: { data: any; siblingData: any }) => {
+                const minDuration = siblingData?.minimumResearchDuration;
+                if (value !== undefined && minDuration !== undefined && value < minDuration) {
+                  return `Maximum research duration must be at least ${minDuration} (the minimum research duration)`;
+                }
+                return true;
+              },*/
             },
           ],
         },

src/collections/logistics/Assets.ts

@@ -412,9 +412,20 @@ export const Assets: CollectionConfig = {
                     {
                       name: "craftingTimePerUnit",
                       type: "number",
-                      label: "Crafting Time per Unit (minutes)",
-                      required: true,
+                      label: "Crafting Time per Unit",
                       defaultValue: 1,
+                      min: 1,
+                      required: true,
+                      admin: {
+                        components: {
+                          Description: {
+                            path: "@/components/static/TickDurationDescription",
+                            clientProps: {
+                              task: "complete production of one unit of this asset",
+                            },
+                          },
+                        },
+                      },
                     },
                     {
                       name: "byproducts",

src/components/static/TickDurationDescription.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useFormFields } from "@payloadcms/ui";
+import { useField, useFormFields } from "@payloadcms/ui";
 
 const calculateTicks = (value: number) => {
   const totalMinutes = value * 10;
@@ -11,18 +11,16 @@ const calculateTicks = (value: number) => {
 };
 
 export const TickDurationDescription = ({ task }: { task: string }) => {
-  const ticks = useFormFields(([fields, dispatch]) => fields.constructionTime);
+  const { value, setValue } = useField();
 
-  return ticks && typeof ticks?.value === "number" ? (
+  return value && typeof value === "number" ? (
     <p className="field-description">
       The number of ticks (<code className="px-1">10</code> minutes *{" "}
-      <code className="px-1">{ticks.value}</code> ={" "}
-      <strong className="px-1">{calculateTicks(ticks.value)}</strong>) it takes to {task}.
+      <code className="px-1">{value}</code> ={" "}
+      <strong className="px-1">{calculateTicks(value)}</strong>) it takes to {task}.
     </p>
   ) : (
-    <p className="field-description">
-      The number of ticks it takes to {task}.
-    </p>
+    <p className="field-description">The number of ticks it takes to {task}.</p>
   );
 };
 

src/payload-types.ts

@@ -561,13 +561,7 @@ export interface Technology {
           id?: string | null;
         }[]
       | null;
-    /**
-     * The minimum amount of time in minutes that it takes to research this technology. If no maximum duration is provided, this technology will be researched in an amount of time exactly equal to this number.
-     */
     minimumResearchDuration: number;
-    /**
-     * The maximum amount of time in minutes that it takes to research this technology.
-     */
     maximumResearchDuration?: number | null;
   };
   updatedAt: string;