Refactor DocumentTemplateInfo and Model Definitions for Consistency and Clarity

- Adjusted formatting in DocumentTemplateInfo component for improved readability and consistency.
- Updated DocumentTemplate and EmailTemplate models to include 'updatedAt' field with appropriate properties for better data tracking.
- Refined file field definitions in both models to enhance clarity and functionality, including master filters and thumbnail support.

src/codemirror/fcTemplateLang/index.js

@@ -4,7 +4,8 @@ import {
   indentNodeProp,
   delimitedIndent,
   foldNodeProp,
-  foldInside
+  foldInside,
+  syntaxTree
 } from '@codemirror/language'
 import { styleTags, tags as t } from '@lezer/highlight'
 import { parseMixed } from '@lezer/common'
@@ -81,13 +82,64 @@ function buildJsScope(autoCompleteObject, templateType) {
   return typed
 }
 
+function isResourceValueContext(state, position) {
+  let node = syntaxTree(state).resolveInner(position, -1)
+  let insideTemplateInterpolation = false
+
+  while (node) {
+    if (node.name === 'Interpolation') {
+      insideTemplateInterpolation = true
+    }
+    if (node.name === 'AttributeValue' || node.name === 'String') {
+      return true
+    }
+    if (node.name === 'TemplateString') {
+      return !insideTemplateInterpolation
+    }
+    node = node.parent
+  }
+
+  return false
+}
+
+function resourceCompletionSource(resourceNames) {
+  const options = [...new Set(resourceNames)]
+    .filter((name) => typeof name === 'string' && name.length > 0)
+    .map((name) => ({
+      label: `@[${name}]`,
+      apply: `@[${name}]`,
+      type: 'variable',
+      detail: 'Template resource'
+    }))
+
+  return (context) => {
+    if (options.length === 0) return null
+
+    const before = context.state.sliceDoc(0, context.pos)
+    const match = before.match(/@(?:\[[^\]\r\n]*)?$/)
+    if (!match || !isResourceValueContext(context.state, context.pos)) {
+      return null
+    }
+
+    return {
+      from: context.pos - match[0].length,
+      options
+    }
+  }
+}
+
 /**
  * Language support for FarmControl EJS+XML document templates.
- * @param {{ autoCompleteObject?: object|string, templateType?: string }} [options]
+ * @param {{ autoCompleteObject?: object|string, templateType?: string, resourceNames?: string[] }} [options]
  */
 export function fcTemplateLang(options = {}) {
-  const { autoCompleteObject, templateType = 'documentTemplate' } = options
+  const {
+    autoCompleteObject,
+    templateType = 'documentTemplate',
+    resourceNames = []
+  } = options
   const jsScope = buildJsScope(autoCompleteObject, templateType)
+  const completeResources = resourceCompletionSource(resourceNames)
 
   return new LanguageSupport(fcTemplateLanguage, [
     xmlLanguage.data.of({
@@ -96,6 +148,8 @@ export function fcTemplateLang(options = {}) {
         fcTemplateAttributes
       )
     }),
+    xmlLanguage.data.of({ autocomplete: completeResources }),
+    javascriptLanguage.data.of({ autocomplete: completeResources }),
     autoCloseTags,
     ...javascriptCompletionSupport(jsScope)
   ])

src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx

@@ -8,10 +8,12 @@ import useCollapseState from '../../hooks/useCollapseState.jsx'
 import NotesPanel from '../../common/NotesPanel.jsx'
 import InfoCollapse from '../../common/InfoCollapse.jsx'
 import ObjectInfo from '../../common/ObjectInfo.jsx'
+import ObjectProperty from '../../common/ObjectProperty.jsx'
 import ViewButton from '../../common/ViewButton.jsx'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
+import FileIcon from '../../../Icons/FileIcon.jsx'
 import ObjectForm from '../../common/ObjectForm.jsx'
 import EditButtons from '../../common/EditButtons.jsx'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
@@ -23,7 +25,10 @@ import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
-import { getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelByName,
+  getModelProperty
+} from '../../../../database/ObjectModels.js'
 import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('DocumentTemplateInfo')
@@ -40,6 +45,7 @@ const DocumentTemplateInfo = () => {
     'DocumentTemplateInfo',
     {
       info: true,
+      resources: true,
       stocks: true,
       notes: true,
       auditLogs: false
@@ -99,7 +105,7 @@ const DocumentTemplateInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='documentTemplate'
-              pageName='info'
+                pageName='info'
                 id={documentTemplateId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}
@@ -108,6 +114,7 @@ const DocumentTemplateInfo = () => {
                 disabled={objectFormState.loading}
                 items={[
                   { key: 'info', label: 'DocumentTemplate Information' },
+                  { key: 'resources', label: 'Resources' },
                   { key: 'notes', label: 'Notes' },
                   { key: 'auditLogs', label: 'Audit Logs' }
                 ]}
@@ -161,25 +168,27 @@ const DocumentTemplateInfo = () => {
               loading={objectFormState.loading}
               ref={actionHandlerRef}
             >
-              <InfoCollapse
+              <ObjectForm
-                title='Document Template Information'
+                id={documentTemplateId}
-                icon={<InfoCircleIcon />}
+                type='documentTemplate'
-                active={collapseState.info}
+                style={{ height: '100%' }}
-                onToggle={(expanded) => updateCollapseState('info', expanded)}
+                ref={objectFormRef}
-                collapseKey='info'
+                setCurrentObject={true}
+                onStateChange={(state) => {
+                  setEditFormState((prev) => ({ ...prev, ...state }))
+                }}
               >
-                <ObjectForm
+                {({ loading, isEditing, objectData }) => (
-                  id={documentTemplateId}
+                  <Flex vertical gap={'large'}>
-                  type='documentTemplate'
+                    <InfoCollapse
-                  style={{ height: '100%' }}
+                      title='Document Template Information'
-                  ref={objectFormRef}
+                      icon={<InfoCircleIcon />}
-                  setCurrentObject={true}
+                      active={collapseState.info}
-                  onStateChange={(state) => {
+                      onToggle={(expanded) =>
-                    setEditFormState((prev) => ({ ...prev, ...state }))
+                        updateCollapseState('info', expanded)
-                  }}
+                      }
-                >
+                      collapseKey='info'
-                  {({ loading, isEditing, objectData }) => {
+                    >
-                    return (
                       <ObjectInfo
                         loading={loading}
                         indicator={<LoadingOutlined />}
@@ -188,14 +197,32 @@ const DocumentTemplateInfo = () => {
                         objectData={objectData}
                         visibleProperties={{
                           content: false,
-                          testObject: false
+                          testObject: false,
+                          resources: false
                         }}
-                        labelWidth='190px'
+                        labelWidth='210px'
                       />
-                    )
+                    </InfoCollapse>
-                  }}
+                    <InfoCollapse
-                </ObjectForm>
+                      title='Resources'
-              </InfoCollapse>
+                      icon={<FileIcon />}
+                      active={collapseState.resources}
+                      onToggle={(expanded) =>
+                        updateCollapseState('resources', expanded)
+                      }
+                      collapseKey='resources'
+                    >
+                      <ObjectProperty
+                        {...getModelProperty('documentTemplate', 'resources')}
+                        isEditing={isEditing}
+                        objectData={objectData}
+                        loading={loading}
+                        size='medium'
+                      />
+                    </InfoCollapse>
+                  </Flex>
+                )}
+              </ObjectForm>
             </ActionHandler>
 
             <InfoCollapse
@@ -210,7 +237,10 @@ const DocumentTemplateInfo = () => {
                 indicator={<LoadingOutlined />}
               >
                 <Card>
-                <NotesPanel _id={documentTemplateId} type='documentTemplate' />
+                  <NotesPanel
+                    _id={documentTemplateId}
+                    type='documentTemplate'
+                  />
                 </Card>
               </Spin>
             </InfoCollapse>
@@ -230,10 +260,10 @@ const DocumentTemplateInfo = () => {
                 <ObjectTable
                   type='auditLog'
                   masterFilter={{
-                      parent:
+                    parent:
-                        getModelByName('documentTemplate').prefix +
+                      getModelByName('documentTemplate').prefix +
-                        ':' +
+                      ':' +
-                        documentTemplateId
+                      documentTemplateId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

src/components/Dashboard/Management/EmailMessages/EmailMessageInfo.jsx

@@ -158,7 +158,9 @@ const EmailMessageInfo = () => {
                       spinning={objectFormState.loading}
                       indicator={<LoadingOutlined />}
                     >
-                      <Card>
+                      <Card
+                        styles={{ body: { height: 'calc(100vh - 218px)' } }}
+                      >
                         <TemplatePreview
                           template={objectData?.template}
                           content={objectData?.content}

src/components/Dashboard/Management/EmailTemplates/EmailTemplateInfo.jsx

@@ -42,6 +42,7 @@ const EmailTemplateInfo = () => {
     'EmailTemplateInfo',
     {
       info: true,
+      resources: true,
       attachments: true,
       notes: true,
       auditLogs: false
@@ -107,6 +108,7 @@ const EmailTemplateInfo = () => {
                 disabled={objectFormState.loading}
                 items={[
                   { key: 'info', label: 'Email Template Information' },
+                  { key: 'resources', label: 'Resources' },
                   { key: 'attachments', label: 'Attachments' },
                   { key: 'notes', label: 'Notes' },
                   { key: 'auditLogs', label: 'Audit Logs' }
@@ -191,11 +193,29 @@ const EmailTemplateInfo = () => {
                         visibleProperties={{
                           content: false,
                           testObject: false,
+                          resources: false,
                           attachments: false
                         }}
                         labelWidth='210px'
                       />
                     </InfoCollapse>
+                    <InfoCollapse
+                      title='Resources'
+                      icon={<FileIcon />}
+                      active={collapseState.resources}
+                      onToggle={(expanded) =>
+                        updateCollapseState('resources', expanded)
+                      }
+                      collapseKey='resources'
+                    >
+                      <ObjectProperty
+                        {...getModelProperty('emailTemplate', 'resources')}
+                        isEditing={isEditing}
+                        objectData={objectData}
+                        loading={loading}
+                        size='medium'
+                      />
+                    </InfoCollapse>
                     <InfoCollapse
                       title='Attachments'
                       icon={<FileIcon />}

src/components/Dashboard/Management/Files/FileInfo.jsx

@@ -30,7 +30,10 @@ import { ApiServerContext } from '../../context/ApiServerContext.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import JsonObjectIcon from '../../../Icons/JsonObjectIcon.jsx'
 import ObjectProperty from '../../common/ObjectProperty.jsx'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'
 
 const log = loglevel.getLogger('FileInfo')
 log.setLevel(config.logLevel)
@@ -87,7 +90,7 @@ const FileInfo = () => {
     download: () => {
       fetchFileContent(objectFormState?.objectData, true)
       return true
-    },
+    }
   }
 
   return (
@@ -102,7 +105,7 @@ const FileInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='file'
-              pageName='info'
+                pageName='info'
                 id={fileId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}
@@ -203,7 +206,7 @@ const FileInfo = () => {
               collapseKey='preview'
             >
               {objectFormState?.objectData?._id ? (
-                <Card>
+                <Card styles={{ body: { minHeight: 'calc(100vh - 218px)' } }}>
                   <FilePreview
                     file={objectFormState?.objectData}
                     style={{ width: '100%', height: '100%' }}
@@ -243,7 +246,7 @@ const FileInfo = () => {
                 indicator={<LoadingOutlined />}
               >
                 <Card>
-                <NotesPanel _id={fileId} type='file' />
+                  <NotesPanel _id={fileId} type='file' />
                 </Card>
               </Spin>
             </InfoCollapse>
@@ -262,10 +265,7 @@ const FileInfo = () => {
                 <ObjectTable
                   type='auditLog'
                   masterFilter={{
-                      parent:
+                    parent: getModelByName('file').prefix + ':' + fileId
-                        getModelByName('file').prefix +
-                        ':' +
-                        fileId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

src/components/Dashboard/common/CodeBlockEditor.jsx

@@ -166,6 +166,7 @@ export default function CodeBlockEditor({
   disabled = false,
   minimal = false,
   autoCompleteObject = null,
+  resourceNames = [],
   errorLines = [],
   templateType,
   onCursorChange = null
@@ -181,8 +182,14 @@ export default function CodeBlockEditor({
   }, [onCursorChange])
 
   const languageExtension = useMemo(
-    () => getCodeLanguageExtension(language, autoCompleteObject, templateType),
+    () =>
-    [language, autoCompleteObject, templateType]
+      getCodeLanguageExtension(
+        language,
+        autoCompleteObject,
+        templateType,
+        resourceNames
+      ),
+    [language, autoCompleteObject, templateType, resourceNames]
   )
 
   const errorLineExtension = useMemo(() => {
@@ -326,6 +333,7 @@ CodeBlockEditor.propTypes = {
   disabled: PropTypes.bool,
   minimal: PropTypes.bool,
   autoCompleteObject: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  resourceNames: PropTypes.arrayOf(PropTypes.string),
   errorLines: PropTypes.arrayOf(PropTypes.number),
   templateType: PropTypes.string,
   onCursorChange: PropTypes.func

src/components/Dashboard/common/FilePreview.jsx

@@ -11,12 +11,14 @@ import {
 import LoadingPlaceholder from './LoadingPlaceholder'
 import GCodePreview from './GCodePreview'
 import ThreeDPreview from './ThreeDPreview'
+import PDFPreview from './PDFPreview'
 import { AuthContext } from '../context/AuthContext'
 
+const hasExplicitPreviewHeight = (height) =>
+  typeof height === 'number' ||
+  (typeof height === 'string' && height !== '100%' && height !== 'auto')
+
 const FilePreview = ({ file, style = {} }) => {
-  useEffect(() => {
-    console.log('FILEPREVIEWFILE', file)
-  }, [file])
   const { token } = useContext(AuthContext)
   const { fetchFileContent } = useContext(ApiServerContext)
 
@@ -26,6 +28,13 @@ const FilePreview = ({ file, style = {} }) => {
 
   const currentId = useRef(null)
 
+  const extension = (file?.extension || '').toLowerCase()
+  const isGcode = ['.g', '.gcode'].includes(extension)
+  const is3DModel = ['.stl', '.3mf'].includes(extension)
+  const isImage = file?.type?.startsWith('image/') || false
+  const isPdf =
+    file?.type?.startsWith('application/pdf') || extension === '.pdf'
+
   const fetchPreview = useCallback(async () => {
     if (error != null) {
       return
@@ -49,6 +58,25 @@ const FilePreview = ({ file, style = {} }) => {
     }
   }, [file._id, file?.type, fetchPreview, token])
 
+  if (isPdf) {
+    if (error != null) {
+      return <div style={{ color: 'red' }}>{error}</div>
+    }
+
+    return (
+      <PDFPreview
+        file={fileObjectUrl}
+        loading={loading}
+        style={{
+          ...style,
+          height: hasExplicitPreviewHeight(style.height)
+            ? style.height
+            : '72vh'
+        }}
+      />
+    )
+  }
+
   if (loading == true || !file?.type) {
     return <LoadingPlaceholder message={'Loading file preview...'} />
   }
@@ -57,14 +85,6 @@ const FilePreview = ({ file, style = {} }) => {
     return <div style={{ color: 'red' }}>{error}</div>
   }
 
-  const isGcode =
-    ['.g', '.gcode'].includes((file?.extension || '').toLowerCase()) || false
-
-  const is3DModel =
-    ['.stl', '.3mf'].includes((file?.extension || '').toLowerCase()) || false
-
-  const isImage = file?.type.startsWith('image/')
-
   if (isGcode && fileObjectUrl) {
     return (
       <GCodePreview

src/components/Dashboard/common/ObjectProperty.jsx

@@ -116,6 +116,7 @@ const ObjectProperty = ({
   height = 'auto',
   minimal = false,
   autoCompleteObject = null,
+  resourceNames = [],
   errorLines = [],
   templateType,
   onCursorChange,
@@ -437,6 +438,7 @@ const ObjectProperty = ({
                 readOnly={true}
                 minimal={minimal}
                 autoCompleteObject={autoCompleteObject}
+                resourceNames={resourceNames}
                 errorLines={errorLines}
                 templateType={templateType}
                 onCursorChange={onCursorChange}
@@ -990,6 +992,7 @@ const ObjectProperty = ({
               height={height}
               minimal={minimal}
               autoCompleteObject={autoCompleteObject}
+              resourceNames={resourceNames}
               errorLines={errorLines}
               templateType={templateType}
               onCursorChange={onCursorChange}
@@ -1145,6 +1148,7 @@ ObjectProperty.propTypes = {
   name: PropTypes.string,
   language: PropTypes.string,
   autoCompleteObject: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  resourceNames: PropTypes.arrayOf(PropTypes.string),
   errorLines: PropTypes.arrayOf(PropTypes.number),
   templateType: PropTypes.string,
   onCursorChange: PropTypes.func,

src/components/Dashboard/common/PDFPreview.jsx

@@ -35,16 +35,9 @@ const PDFPreview = ({ file, loading = false, style }) => {
           }}
           disabled={loading}
         />
-        <Button
-          icon={<MinusIcon />}
-          onClick={() => {
-            setPreviewScale((prev) => clampPreviewScale(prev - 0.05))
-          }}
-          disabled={loading}
-        />
         <Button
           readOnly={true}
-          style={{ width: '65px' }}
+          style={{ minWidth: '70px' }}
           disabled={loading}
           onClick={() => {
             setPreviewScale(1)
@@ -52,6 +45,13 @@ const PDFPreview = ({ file, loading = false, style }) => {
         >
           {previewScale.toFixed(2)}x
         </Button>
+        <Button
+          icon={<MinusIcon />}
+          onClick={() => {
+            setPreviewScale((prev) => clampPreviewScale(prev - 0.05))
+          }}
+          disabled={loading}
+        />
       </Flex>
 
       <div

src/components/Dashboard/common/TemplateEditor.jsx

@@ -94,6 +94,16 @@ const parseEjsErrorLines = (message) => {
   return [...lines]
 }
 
+const normalizeResourceNames = (resources) => {
+  if (!Array.isArray(resources)) return []
+
+  return resources
+    .map((resource) =>
+      typeof resource === 'string' ? resource : resource?.name
+    )
+    .filter((name) => typeof name === 'string' && name.length > 0)
+}
+
 const TemplateEditor = ({
   objectData,
   template,
@@ -118,11 +128,15 @@ const TemplateEditor = ({
   const [errorLines, setErrorLines] = useState([])
   const [formatLoading, setFormatLoading] = useState(false)
   const [intellisense, setIntellisense] = useState(null)
+  const [responseResources, setResponseResources] = useState(null)
   const intellisenseRequestIdRef = useRef(0)
   const intellisenseTimerRef = useRef(null)
+  const resourceNames =
+    responseResources ?? normalizeResourceNames(currentTemplate?.resources)
 
   useEffect(() => {
     setIntellisense(null)
+    setResponseResources(null)
   }, [currentTemplate?._id])
 
   useEffect(() => {
@@ -168,6 +182,9 @@ const TemplateEditor = ({
                 setIntellisense(result.intellisense)
               }
             }
+            if (Array.isArray(result?.resources)) {
+              setResponseResources(normalizeResourceNames(result.resources))
+            }
           }
         )
       }, 200)
@@ -369,6 +386,7 @@ const TemplateEditor = ({
                       autoCompleteObject={
                         intellisense ?? currentTemplate?.testObject
                       }
+                      resourceNames={resourceNames}
                       errorLines={errorLines}
                       templateType={templateType}
                       onCursorChange={handleCursorChange}

src/components/Dashboard/common/codeBlockEditorUtils.js

@@ -26,7 +26,8 @@ export function toEditorCode(code, language = 'javascript') {
 export function getCodeLanguageExtension(
   language = 'javascript',
   autoCompleteObject = null,
-  templateType
+  templateType,
+  resourceNames = []
 ) {
   const lang = Array.isArray(language) ? language[0] : language
 
@@ -43,7 +44,11 @@ export function getCodeLanguageExtension(
       return xml()
     case 'fctemplatelang':
     case 'ejs':
-      return fcTemplateLang({ autoCompleteObject, templateType })
+      return fcTemplateLang({
+        autoCompleteObject,
+        templateType,
+        resourceNames
+      })
     case 'html':
       return html()
     case 'css':

src/components/Dashboard/context/ApiServerContext.jsx

@@ -2240,12 +2240,14 @@ const ApiServerProvider = ({ children }) => {
     } catch (err) {
       const error = getTemplateErrorFromResponse(err)
       const intellisense = err?.response?.data?.intellisense
+      const resources = err?.response?.data?.resources
       logger.error('Error fetching template intellisense:', error)
       const payload = {
         error,
         ...(intellisense != null && typeof intellisense === 'object'
           ? { intellisense }
-          : {})
+          : {}),
+        ...(Array.isArray(resources) ? { resources } : {})
       }
       if (typeof callback === 'function') {
         callback(payload)

src/database/models/DocumentTemplate.js

@@ -22,6 +22,34 @@ import ListIcon from '../../components/Icons/ListIcon'
 import DuplicateIcon from '../../components/Icons/DuplicateIcon'
 import BinIcon from '../../components/Icons/BinIcon'
 
+const computeTemplateResources = (resources) => {
+  if (!Array.isArray(resources)) return []
+
+  const usedNames = new Set()
+  const nextSuffix = new Map()
+
+  return resources.map((resource) => {
+    const filename = resource?.file?.filename || resource?.file?.name || ''
+    const baseName =
+      filename
+        .replace(/\.[^.]*$/, '')
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '') || 'resource'
+    let name = baseName
+    let suffix = nextSuffix.get(baseName) || 1
+
+    while (usedNames.has(name)) {
+      name = `${baseName}-${suffix}`
+      suffix += 1
+    }
+
+    usedNames.add(name)
+    nextSuffix.set(baseName, suffix)
+    return { ...resource, name }
+  })
+}
+
 export const DocumentTemplate = {
   name: 'documentTemplate',
   label: 'Document Template',
@@ -194,6 +222,13 @@ export const DocumentTemplate = {
       readOnly: true,
       columnWidth: 180
     },
+    {
+      name: 'updatedAt',
+      label: 'Updated At',
+      type: 'dateTime',
+      readOnly: true,
+      columnWidth: 200
+    },
     {
       name: 'name',
       label: 'Name',
@@ -202,13 +237,7 @@ export const DocumentTemplate = {
       columnWidth: 200,
       columnFixed: 'left'
     },
-    {
+
-      name: 'updatedAt',
-      label: 'Updated At',
-      type: 'dateTime',
-      readOnly: true,
-      columnWidth: 200
-    },
     {
       name: 'objectType',
       label: 'Object Type',
@@ -288,6 +317,38 @@ export const DocumentTemplate = {
       type: 'codeBlock',
       language: 'fcTemplateLang'
     },
+    {
+      name: 'resources',
+      label: 'Resources',
+      type: 'objectChildren',
+      required: false,
+      canAddRemove: true,
+      size: 'medium',
+      columns: ['name', 'file'],
+      value: (documentTemplate) =>
+        computeTemplateResources(documentTemplate?.resources),
+      properties: [
+        {
+          name: 'name',
+          label: 'Name',
+          type: 'text',
+          required: true,
+          readOnly: true,
+          columnWidth: 200
+        },
+        {
+          name: 'file',
+          required: true,
+          type: 'file',
+          label: 'File',
+          showPreview: false,
+          showHyperlink: true,
+          masterFilter: ['.pdf', '.jpeg', '.png', '.svg', '.gif'],
+          thumbnail: true,
+          columnWidth: 200
+        }
+      ]
+    },
     {
       name: 'testObject',
       label: 'Test Object',

src/database/models/EmailMessage.js

@@ -242,7 +242,7 @@ export const EmailMessage = {
     },
     {
       name: 'recipientEmail',
-      label: 'Recipient',
+      label: 'Recipient Email',
       type: 'email',
       required: true,
       readOnly: readOnlyAfterCreate,
@@ -278,7 +278,7 @@ export const EmailMessage = {
     },
     {
       name: 'recipient',
-      label: 'Recipient Object',
+      label: 'Recipient',
       type: 'object',
       objectType: (data) => data?.recipientType,
       readOnly: readOnlyAfterCreate,

src/database/models/EmailTemplate.js

@@ -22,6 +22,34 @@ import EmailTemplateIcon from '../../components/Icons/EmailTemplateIcon'
 import DuplicateIcon from '../../components/Icons/DuplicateIcon'
 import BinIcon from '../../components/Icons/BinIcon'
 
+const computeTemplateResources = (resources) => {
+  if (!Array.isArray(resources)) return []
+
+  const usedNames = new Set()
+  const nextSuffix = new Map()
+
+  return resources.map((resource) => {
+    const filename = resource?.file?.filename || resource?.file?.name || ''
+    const baseName =
+      filename
+        .replace(/\.[^.]*$/, '')
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '') || 'resource'
+    let name = baseName
+    let suffix = nextSuffix.get(baseName) || 1
+
+    while (usedNames.has(name)) {
+      name = `${baseName}-${suffix}`
+      suffix += 1
+    }
+
+    usedNames.add(name)
+    nextSuffix.set(baseName, suffix)
+    return { ...resource, name }
+  })
+}
+
 export const EmailTemplate = {
   name: 'emailTemplate',
   label: 'Email Template',
@@ -270,6 +298,38 @@ export const EmailTemplate = {
       objectType: (data) => data?.objectType,
       showHyperlink: true
     },
+    {
+      name: 'resources',
+      label: 'Resources',
+      type: 'objectChildren',
+      required: false,
+      canAddRemove: true,
+      size: 'medium',
+      columns: ['name', 'file'],
+      value: (emailTemplate) =>
+        computeTemplateResources(emailTemplate?.resources),
+      properties: [
+        {
+          name: 'name',
+          label: 'Name',
+          type: 'text',
+          required: true,
+          readOnly: true,
+          columnWidth: 200
+        },
+        {
+          name: 'file',
+          required: true,
+          label: 'File',
+          type: 'file',
+          showPreview: false,
+          showHyperlink: true,
+          masterFilter: ['.pdf', '.jpeg', '.png', '.svg', '.gif'],
+          thumbnail: true,
+          columnWidth: 200
+        }
+      ]
+    },
     {
       name: 'attachments',
       label: 'Attachments',

src/database/models/File.js

@@ -156,6 +156,13 @@ export const File = {
       readOnly: true,
       columnWidth: 180
     },
+    {
+      name: 'updatedAt',
+      label: 'Updated At',
+      type: 'dateTime',
+      readOnly: true,
+      columnWidth: 200
+    },
     {
       name: 'name',
       label: 'Name',
@@ -164,13 +171,7 @@ export const File = {
       type: 'text',
       columnWidth: 200
     },
-    {
+
-      name: 'updatedAt',
-      label: 'Updated At',
-      type: 'dateTime',
-      readOnly: true,
-      columnWidth: 200
-    },
     {
       name: 'type',
       label: 'Type',