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.
Enhance Template and Object Management with Resource Support
2026-09-13 19:34:34 +01:00 · 2026-09-13 19:26:04 +01:00 · 2026-09-13 18:58:11 +01:00
16 changed files with 369 additions and 84 deletions
--- a/src/codemirror/fcTemplateLang/index.js
+++ b/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)
  ])
--- a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
+++ b/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
-                title='Document Template Information'
-                icon={<InfoCircleIcon />}
-                active={collapseState.info}
-                onToggle={(expanded) => updateCollapseState('info', expanded)}
-                collapseKey='info'
+              <ObjectForm
+                id={documentTemplateId}
+                type='documentTemplate'
+                style={{ height: '100%' }}
+                ref={objectFormRef}
+                setCurrentObject={true}
+                onStateChange={(state) => {
+                  setEditFormState((prev) => ({ ...prev, ...state }))
+                }}
              >
-                <ObjectForm
-                  id={documentTemplateId}
-                  type='documentTemplate'
-                  style={{ height: '100%' }}
-                  ref={objectFormRef}
-                  setCurrentObject={true}
-                  onStateChange={(state) => {
-                    setEditFormState((prev) => ({ ...prev, ...state }))
-                  }}
-                >
-                  {({ loading, isEditing, objectData }) => {
-                    return (
+                {({ loading, isEditing, objectData }) => (
+                  <Flex vertical gap={'large'}>
+                    <InfoCollapse
+                      title='Document Template Information'
+                      icon={<InfoCircleIcon />}
+                      active={collapseState.info}
+                      onToggle={(expanded) =>
+                        updateCollapseState('info', expanded)
+                      }
+                      collapseKey='info'
+                    >
                      <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'
                      />
-                    )
-                  }}
-                </ObjectForm>
-              </InfoCollapse>
+                    </InfoCollapse>
+                    <InfoCollapse
+                      title='Resources'
+                      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:
-                        getModelByName('documentTemplate').prefix +
-                        ':' +
-                        documentTemplateId
+                    parent:
+                      getModelByName('documentTemplate').prefix +
+                      ':' +
+                      documentTemplateId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Management/EmailMessages/EmailMessageInfo.jsx
+++ b/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}
--- a/src/components/Dashboard/Management/EmailTemplates/EmailTemplateInfo.jsx
+++ b/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 />}
--- a/src/components/Dashboard/Management/Files/FileInfo.jsx
+++ b/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:
-                        getModelByName('file').prefix +
-                        ':' +
-                        fileId
+                    parent: getModelByName('file').prefix + ':' + fileId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/common/CodeBlockEditor.jsx
+++ b/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
--- a/src/components/Dashboard/common/FilePreview.jsx
+++ b/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
--- a/src/components/Dashboard/common/ObjectProperty.jsx
+++ b/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,
--- a/src/components/Dashboard/common/PDFPreview.jsx
+++ b/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
--- a/src/components/Dashboard/common/TemplateEditor.jsx
+++ b/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}
--- a/src/components/Dashboard/common/codeBlockEditorUtils.js
+++ b/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':
--- a/src/components/Dashboard/context/ApiServerContext.jsx
+++ b/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)
--- a/src/database/models/DocumentTemplate.js
+++ b/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',
--- a/src/database/models/EmailMessage.js
+++ b/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,
--- a/src/database/models/EmailTemplate.js
+++ b/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',
--- a/src/database/models/File.js
+++ b/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',