@controleonline/ui-default 1.0.270 → 1.0.273

package/src/react/components/upload/DefaultUpload.js

@@ -0,0 +1,406 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {
+  ActivityIndicator,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {MaterialCommunityIcons} from '@expo/vector-icons';
+import {useStore} from '@store';
+import DefaultUploadAttachmentsList from './DefaultUploadAttachmentsList';
+import DefaultUploadManagerModal from './DefaultUploadManagerModal';
+import {defaultUploadStyles as styles} from './DefaultUpload.styles';
+import {selectFile, uploadFileToApi, toFileIri, extractFileId} from './fileUpload';
+import {
+  DEFAULT_LIBRARY_CONTEXTS,
+  getEntityId,
+  normalizeAttachmentRelation,
+  getRelationFileId,
+  getFileName,
+  dedupeFiles,
+} from './defaultUploadHelpers';
+import {fetchLibraryFiles} from './defaultUploadLibrary';
+
+const DefaultUpload = ({
+  relationStoreName,
+  relationField,
+  relationResource,
+  attachments = [],
+  entityId,
+  companyId,
+  context = 'products',
+  libraryContexts = DEFAULT_LIBRARY_CONTEXTS,
+  fileStoreName = 'file',
+  onChanged,
+  coverRelationId,
+  onCoverChanged,
+  title = 'Imagens anexas',
+  triggerLabel = 'Gerenciar imagens',
+  managerTitle = 'Gerenciador de imagens',
+  searchPlaceholder = 'Buscar imagem',
+  uploadButtonLabel = 'Enviar nova',
+  loadingText = 'Carregando arquivos...',
+  emptyAttachmentLabel = 'Nenhum arquivo anexado.',
+  emptyLibraryLabel = 'Nenhum arquivo encontrado.',
+  saveBeforeLabel = 'Salve o registro antes de anexar arquivos.',
+  uploadSuccessMessage = 'Arquivo enviado e anexado.',
+  attachSuccessMessage = 'Arquivo anexado com sucesso.',
+  removeSuccessMessage = 'Arquivo removido.',
+  attachedLabel = 'Anexado',
+  fileType = 'image',
+  acceptedTypes = 'image/*',
+  fileTypeLabel = 'arquivo',
+  onBeforeOpen = null,
+  onUploadFile = null,
+  onAttachFile = null,
+  onRemoveAttachment = null,
+  renderTrigger = null,
+  requireEntity = true,
+  showInlineContent = true,
+  uploadResultAlreadyAttached = false,
+  knownFileIds = [],
+}) => {
+  const relationStore = useStore(relationStoreName);
+  const fileStore = useStore(fileStoreName);
+  const themeStore = useStore('theme');
+  const relationActions = relationStore?.actions || {};
+  const fileActions = fileStore?.actions || {};
+  const themeColors = themeStore?.getters?.colors || {};
+
+  const buttonPalette = useMemo(
+    () => ({
+      buttonBackground: themeColors.buttonBackground,
+      buttonBorder: themeColors.buttonBorder,
+      buttonText: themeColors.buttonText,
+      buttonIcon: themeColors.buttonIcon || themeColors.buttonText,
+      buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
+      buttonBorderSecondary: themeColors.buttonBorderSecondary,
+      buttonTextSecondary: themeColors.buttonTextSecondary,
+      buttonIconSecondary: themeColors.buttonIconSecondary || themeColors.buttonTextSecondary,
+      iconSuccess: themeColors.iconSuccess,
+      iconDanger: themeColors.iconDanger,
+      iconActive: themeColors.iconActive,
+      textDanger: themeColors.textDanger,
+      cardBackground: themeColors.cardBackground,
+      cardBorder: themeColors.cardBorder,
+    }),
+    [
+      themeColors.buttonBackground,
+      themeColors.buttonBackgroundSecondary,
+      themeColors.buttonBorder,
+      themeColors.buttonBorderSecondary,
+      themeColors.buttonIcon,
+      themeColors.buttonIconSecondary,
+      themeColors.buttonText,
+      themeColors.buttonTextSecondary,
+      themeColors.iconActive,
+      themeColors.iconDanger,
+      themeColors.iconSuccess,
+      themeColors.textDanger,
+      themeColors.cardBackground,
+      themeColors.cardBorder,
+    ],
+  );
+
+  const attachmentRows = Array.isArray(attachments) ? attachments : [];
+  const resolvedKnownIds = useMemo(() => {
+    const fromProp = Array.isArray(knownFileIds) ? knownFileIds : [knownFileIds];
+    const fromAttachments = attachmentRows.map(getRelationFileId);
+    return [...fromProp, ...fromAttachments].map(extractFileId).filter(Boolean);
+  }, [attachmentRows, knownFileIds]);
+  const resolvedKnownIdsKey = resolvedKnownIds.join('|');
+  const libraryContextsKey = Array.isArray(libraryContexts)
+    ? libraryContexts.join('|')
+    : String(libraryContexts || '');
+
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState('');
+  const [status, setStatus] = useState('');
+  const [coverId, setCoverId] = useState(coverRelationId || null);
+  const [managerOpen, setManagerOpen] = useState(false);
+  const [libraryFiles, setLibraryFiles] = useState([]);
+  const [libraryLoading, setLibraryLoading] = useState(false);
+  const [libraryError, setLibraryError] = useState('');
+  const [librarySearch, setLibrarySearch] = useState('');
+  const [savingFileId, setSavingFileId] = useState(null);
+
+  const sortedAttachments = useMemo(() => {
+    if (!coverId) return attachmentRows;
+    const index = attachmentRows.findIndex(item => String(item.id) === String(coverId));
+    if (index < 0) return attachmentRows;
+    const copy = [...attachmentRows];
+    const [selected] = copy.splice(index, 1);
+    copy.unshift(selected);
+    return copy;
+  }, [attachmentRows, coverId]);
+
+  const attachedFileIds = useMemo(
+    () =>
+      new Set(
+        [...attachmentRows.map(getRelationFileId), ...resolvedKnownIds]
+          .filter(Boolean)
+          .map(String),
+      ),
+    [attachmentRows, resolvedKnownIds],
+  );
+
+  const filteredLibraryFiles = useMemo(() => {
+    const query = String(librarySearch || '').trim().toLowerCase();
+    if (!query) return libraryFiles;
+    return libraryFiles.filter(file => {
+      const name = getFileName(file).toLowerCase();
+      const fileContext = String(file?.context || '').toLowerCase();
+      const type = String(file?.fileType || '').toLowerCase();
+      const label = String(fileTypeLabel || '').toLowerCase();
+      return name.includes(query) || fileContext.includes(query) || type.includes(query) || label.includes(query);
+    });
+  }, [fileTypeLabel, libraryFiles, librarySearch]);
+
+  useEffect(() => {
+    setCoverId(coverRelationId || null);
+  }, [coverRelationId]);
+
+  const peopleActionsForLibrary =
+    relationStoreName === 'people' && typeof relationActions?.getPeopleMedia === 'function'
+      ? relationActions
+      : null;
+
+  const loadLibrary = useCallback(async (extraFiles = []) => {
+    setLibraryLoading(true);
+    setLibraryError('');
+    try {
+      const files = await fetchLibraryFiles({
+        fileActions,
+        companyId,
+        fileType,
+        libraryContexts: libraryContexts || DEFAULT_LIBRARY_CONTEXTS,
+        peopleActions: peopleActionsForLibrary,
+        knownFileIds: resolvedKnownIds,
+      });
+      setLibraryFiles(dedupeFiles([...(Array.isArray(extraFiles) ? extraFiles : []), ...files]));
+    } catch (e) {
+      setLibraryError(e?.message || 'Falha ao carregar biblioteca de arquivos.');
+      setLibraryFiles(dedupeFiles(extraFiles));
+    } finally {
+      setLibraryLoading(false);
+    }
+  }, [companyId, fileActions, fileType, libraryContextsKey, peopleActionsForLibrary, resolvedKnownIdsKey]);
+
+  useEffect(() => {
+    if (managerOpen) {
+      if (typeof onBeforeOpen === 'function') onBeforeOpen();
+      void loadLibrary();
+    }
+  }, [loadLibrary, managerOpen, onBeforeOpen]);
+
+  const attachFileToEntity = useCallback(
+    async (fileObj, options = {}) => {
+      const {successMessage = attachSuccessMessage, closeManager = false} = options;
+      setError('');
+      setStatus('');
+      if (requireEntity && !entityId) {
+        setError(saveBeforeLabel);
+        return null;
+      }
+      const fileIri = toFileIri(fileObj);
+      if (!fileIri) throw new Error('Arquivo sem identificador.');
+      const fileId = extractFileId(fileObj);
+      if (fileId && attachedFileIds.has(String(fileId))) {
+        setStatus('Arquivo ja anexado.');
+        return null;
+      }
+      if (typeof onAttachFile === 'function') {
+        const savedRelation = await onAttachFile(fileObj);
+        setStatus(successMessage);
+        if (onChanged) await onChanged();
+        if (closeManager) setManagerOpen(false);
+        return savedRelation;
+      }
+      if (typeof relationActions.save !== 'function') {
+        throw new Error('Fluxo de vinculo indisponivel.');
+      }
+      try {
+        const savedRelation = await relationActions.save({
+          [relationField]: `/${relationResource}/${entityId}`,
+          file: fileIri,
+        });
+        setStatus(successMessage);
+        if (onChanged) await onChanged();
+        if (closeManager) setManagerOpen(false);
+        return savedRelation;
+      } catch (e) {
+        const message = String(e?.message || e?.response?.data?.detail || '');
+        if (/unique|duplicate|duplic/i.test(message)) {
+          setStatus('Arquivo ja anexado.');
+          if (onChanged) await onChanged();
+          return null;
+        }
+        throw e;
+      }
+    },
+    [attachSuccessMessage, attachedFileIds, entityId, onChanged, relationActions, relationField, relationResource, saveBeforeLabel, onAttachFile, requireEntity],
+  );
+
+  const handleUpload = useCallback(async () => {
+    setError('');
+    setStatus('');
+    if (requireEntity && !entityId) {
+      setError(saveBeforeLabel);
+      return;
+    }
+    const file = await selectFile(acceptedTypes);
+    if (!file) return;
+    try {
+      setUploading(true);
+      const uploadedFile =
+        typeof onUploadFile === 'function'
+          ? await onUploadFile({acceptedTypes, companyId, context, entityId, file})
+          : await uploadFileToApi({file, context, peopleId: companyId, entityId});
+      setLibraryFiles(current => dedupeFiles([uploadedFile, ...current]));
+      if (uploadResultAlreadyAttached) {
+        setStatus(uploadSuccessMessage);
+        if (onChanged) await onChanged();
+        await loadLibrary([uploadedFile]);
+        return;
+      }
+      await attachFileToEntity(uploadedFile, {successMessage: uploadSuccessMessage});
+      await loadLibrary([uploadedFile]);
+    } catch (e) {
+      setError(e?.message || 'Falha ao anexar arquivo.');
+    } finally {
+      setUploading(false);
+    }
+  }, [acceptedTypes, attachFileToEntity, companyId, context, entityId, loadLibrary, onChanged, onUploadFile, requireEntity, saveBeforeLabel, uploadSuccessMessage, uploadResultAlreadyAttached]);
+
+  const handleAttachExisting = useCallback(
+    async file => {
+      const fileId = extractFileId(file) || getFileName(file);
+      try {
+        setSavingFileId(fileId);
+        await attachFileToEntity(file, {successMessage: attachSuccessMessage, closeManager: true});
+      } catch (e) {
+        setError(e?.message || 'Falha ao anexar arquivo.');
+      } finally {
+        setSavingFileId(null);
+      }
+    },
+    [attachFileToEntity, attachSuccessMessage],
+  );
+
+  const handleRemove = useCallback(
+    async relation => {
+      try {
+        setError('');
+        setStatus('');
+        const attachmentRelation = normalizeAttachmentRelation(relation);
+        if (typeof onRemoveAttachment === 'function') {
+          await onRemoveAttachment(attachmentRelation);
+          const relationId = getEntityId(attachmentRelation);
+          if (String(coverId) === String(relationId)) setCoverId(null);
+          setStatus(removeSuccessMessage);
+          if (onChanged) await onChanged();
+          return;
+        }
+        const relationId = getEntityId(attachmentRelation);
+        if (!relationId) throw new Error('Anexo sem identificador para remocao.');
+        if (typeof relationActions.remove !== 'function') {
+          throw new Error('Fluxo de remocao indisponivel.');
+        }
+        await relationActions.remove(relationId);
+        if (String(coverId) === String(relationId)) setCoverId(null);
+        setStatus(removeSuccessMessage);
+        if (onChanged) await onChanged();
+      } catch (e) {
+        setError(e?.message || 'Falha ao remover arquivo.');
+      }
+    },
+    [coverId, onChanged, onRemoveAttachment, relationActions, removeSuccessMessage],
+  );
+
+  const handleSetCover = useCallback(
+    async row => {
+      setCoverId(row.id);
+      if (onCoverChanged) await onCoverChanged(row);
+    },
+    [onCoverChanged],
+  );
+
+  const openManager = () => setManagerOpen(true);
+  const triggerContent =
+    typeof renderTrigger === 'function'
+      ? renderTrigger({disabled: uploading, openManager, uploading})
+      : (
+        <TouchableOpacity
+          onPress={openManager}
+          disabled={uploading}
+          style={[styles.attachmentsTrigger, {backgroundColor: buttonPalette.buttonBackground, borderColor: buttonPalette.buttonBorder, borderWidth: 1}, uploading && styles.disabledButton]}>
+          <View style={styles.headerButtonContent}>
+            <MaterialCommunityIcons name="folder-image" size={16} color={buttonPalette.buttonIcon} />
+            <Text style={[styles.attachmentsTriggerText, {color: buttonPalette.buttonText}]}>{uploading ? 'Enviando...' : triggerLabel}</Text>
+          </View>
+        </TouchableOpacity>
+      );
+
+  const managerModal = (
+    <DefaultUploadManagerModal
+      visible={managerOpen}
+      onClose={() => setManagerOpen(false)}
+      managerTitle={managerTitle}
+      context={context}
+      buttonPalette={buttonPalette}
+      librarySearch={librarySearch}
+      setLibrarySearch={setLibrarySearch}
+      searchPlaceholder={searchPlaceholder}
+      handleUpload={handleUpload}
+      uploading={uploading}
+      uploadButtonLabel={uploadButtonLabel}
+      libraryLoading={libraryLoading}
+      loadLibrary={loadLibrary}
+      attachLabel={attachedLabel}
+      savingFileId={savingFileId}
+      loadingText={loadingText}
+      libraryError={libraryError}
+      filteredLibraryFiles={filteredLibraryFiles}
+      attachedFileIds={attachedFileIds}
+      handleAttachExisting={handleAttachExisting}
+      attachmentRows={attachmentRows}
+      sortedAttachments={sortedAttachments}
+      coverId={coverId}
+      handleSetCover={handleSetCover}
+      handleRemove={handleRemove}
+      emptyLibraryLabel={emptyLibraryLabel}
+      emptyAttachmentsLabel={emptyAttachmentLabel}
+      status={status}
+      error={error}
+    />
+  );
+
+  if (!showInlineContent) {
+    return (
+      <View>
+        {triggerContent}
+        {managerModal}
+      </View>
+    );
+  }
+
+  return (
+    <DefaultUploadAttachmentsList
+      title={title}
+      triggerContent={triggerContent}
+      status={status}
+      error={error}
+      sortedAttachments={sortedAttachments}
+      emptyAttachmentLabel={emptyAttachmentLabel}
+      coverId={coverId}
+      handleSetCover={handleSetCover}
+      handleRemove={handleRemove}
+      buttonPalette={buttonPalette}
+      managerModal={managerModal}
+      company={company}
+      showAttachmentActions={showAttachmentActions}
+    />
+  );
+};
+
+export default DefaultUpload;

package/src/react/components/upload/DefaultUpload.styles.js

@@ -0,0 +1,153 @@
+export const defaultUploadStyles = {
+  disabledButton: {opacity: 0.65},
+  headerButtonContent: {flexDirection: 'row', alignItems: 'center', gap: 6},
+  modalContainer: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    paddingBottom: 24,
+    maxHeight: '86%',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    paddingHorizontal: 18,
+    paddingTop: 18,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+  },
+  modalTitle: {color: '#0F172A', fontSize: 17, fontWeight: '800'},
+  modalSubtitle: {color: '#64748B', fontSize: 12, marginTop: 3},
+  iconButton: {padding: 4},
+  toolbar: {flexDirection: 'row', alignItems: 'center', gap: 8, padding: 14},
+  searchBox: {
+    flex: 1,
+    minHeight: 42,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: '#F8FAFC',
+  },
+  searchInput: {flex: 1, minWidth: 80, color: '#0F172A', fontSize: 14},
+  uploadButton: {
+    minHeight: 42,
+    borderRadius: 10,
+    backgroundColor: '#0F172A',
+    paddingHorizontal: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  uploadButtonText: {color: '#fff', fontWeight: '700', fontSize: 13},
+  refreshButton: {
+    width: 42,
+    height: 42,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+  },
+  modalError: {color: '#B91C1C', fontSize: 13, marginHorizontal: 16, marginBottom: 8},
+  loadingState: {minHeight: 170, alignItems: 'center', justifyContent: 'center', gap: 8},
+  loadingText: {color: '#64748B', fontSize: 13},
+  emptyState: {minHeight: 170, alignItems: 'center', justifyContent: 'center', padding: 20, gap: 8},
+  emptyText: {color: '#64748B', fontSize: 13, textAlign: 'center'},
+  modalList: {maxHeight: 520},
+  libraryGrid: {flexDirection: 'row', flexWrap: 'wrap', gap: 10, paddingHorizontal: 14, paddingBottom: 18},
+  fileCard: {
+    width: 320,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 8,
+    backgroundColor: '#fff',
+    overflow: 'hidden',
+  },
+  fileCardAttached: {borderColor: '#86EFAC', backgroundColor: '#F0FDF4'},
+  fileThumb: {width: 320, height: 320, backgroundColor: '#F1F5F9', alignItems: 'center', justifyContent: 'center'},
+  fileThumbFallback: {alignItems: 'center', justifyContent: 'center', gap: 6, height: '100%', width: '100%', backgroundColor: '#EEF2FF'},
+  fileExtBadge: {
+    color: '#312E81',
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 0.6,
+    backgroundColor: '#E0E7FF',
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 999,
+    overflow: 'hidden',
+  },
+  fileImage: {width: '100%', height: '100%'},
+  fileInfo: {padding: 9, minHeight: 74},
+  fileName: {color: '#0F172A', fontSize: 12, fontWeight: '700', lineHeight: 16},
+  mediaTypesLine: {color: '#64748B', fontSize: 11, fontWeight: '600', lineHeight: 14, marginTop: 3},
+  fileMetaRow: {flexDirection: 'row', flexWrap: 'wrap', gap: 5, marginTop: 7},
+  contextBadge: {
+    color: '#475569',
+    backgroundColor: '#E2E8F0',
+    borderRadius: 999,
+    overflow: 'hidden',
+    paddingHorizontal: 7,
+    paddingVertical: 3,
+    fontSize: 10,
+    fontWeight: '700',
+  },
+  attachedBadge: {
+    color: '#15803D',
+    backgroundColor: '#DCFCE7',
+    borderRadius: 999,
+    overflow: 'hidden',
+    paddingHorizontal: 7,
+    paddingVertical: 3,
+    fontSize: 10,
+    fontWeight: '700',
+  },
+  fileAction: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: 'rgba(255,255,255,0.92)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  attachmentsTitleRow: {width: '100%', marginTop: 8},
+  attachmentsHeader: {flexDirection: 'row', alignItems: 'center', marginBottom: 8},
+  attachmentsTitle: {flex: 1, fontWeight: '600'},
+  attachmentsTrigger: {backgroundColor: '#000', paddingVertical: 8, paddingHorizontal: 12, borderRadius: 6},
+  attachmentsTriggerText: {color: '#fff'},
+  attachmentsStatus: {color: '#1b7f34', marginBottom: 6},
+  attachmentsError: {color: '#b00020', marginBottom: 6},
+  attachmentsEmpty: {borderWidth: 1, borderColor: '#ddd', borderRadius: 8, padding: 10},
+  attachmentsEmptyText: {color: '#666'},
+  attachmentsList: {flexDirection: 'row', gap: 10},
+  attachmentCard: {width: 320, borderWidth: 1, borderColor: '#ddd', borderRadius: 8, padding: 0, overflow: 'hidden', backgroundColor: '#fff'},
+  attachmentThumb: {width: 320, height: 320, backgroundColor: '#f5f5f5', overflow: 'hidden', alignItems: 'center', justifyContent: 'center'},
+  attachmentImage: {width: 320, height: 320},
+  attachmentActionsRow: {flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 8, marginTop: 2},
+  attachmentIconButton: {width: 36, height: 36, borderRadius: 8, alignItems: 'center', justifyContent: 'center'},
+  attachmentRemoveButton: {backgroundColor: '#b00020', paddingVertical: 6, borderRadius: 4},
+  attachmentRemoveText: {textAlign: 'center', color: '#fff', fontSize: 12},
+};
+
+export const getAttachmentCoverButtonStyle = (coverId, row) => ({
+  backgroundColor: String(coverId) === String(row.id) ? '#00695c' : '#efefef',
+  paddingVertical: 6,
+  borderRadius: 4,
+  marginBottom: 6,
+});
+
+export const getAttachmentCoverTextStyle = (coverId, row) => ({
+  textAlign: 'center',
+  color: String(coverId) === String(row.id) ? '#fff' : '#111',
+  fontSize: 12,
+});

package/src/react/components/upload/DefaultUploadAttachmentsList.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import {ScrollView, Text, TouchableOpacity, View} from 'react-native';
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import DefaultFile from '@controleonline/ui-default/src/react/components/files/DefaultFile';
+import {extractFileId} from './fileUpload';
+import {defaultUploadStyles as styles} from './DefaultUpload.styles';
+
+/** Inline attachment cards for DefaultUpload (app-community#296 / #385). */
+export default function DefaultUploadAttachmentsList({
+  title,
+  triggerContent,
+  status,
+  error,
+  sortedAttachments,
+  emptyAttachmentLabel,
+  coverId,
+  handleSetCover,
+  handleRemove,
+  buttonPalette,
+  managerModal,
+  company = null,
+  showAttachmentActions = true,
+}) {
+  const iconDanger =
+    buttonPalette?.iconDanger ||
+    buttonPalette?.textDanger ||
+    '#B91C1C';
+  const iconActive =
+    buttonPalette?.iconActive ||
+    buttonPalette?.buttonBackground ||
+    '#0F172A';
+  const iconIdle =
+    buttonPalette?.buttonIcon ||
+    buttonPalette?.buttonTextSecondary ||
+    '#64748B';
+  const actionBg =
+    buttonPalette?.buttonBackgroundSecondary ||
+    buttonPalette?.cardBackground ||
+    '#F8FAFC';
+  const actionBorder =
+    buttonPalette?.buttonBorderSecondary ||
+    buttonPalette?.cardBorder ||
+    '#E2E8F0';
+
+  return (
+    <View style={styles.attachmentsTitleRow}>
+      <View style={styles.attachmentsHeader}>
+        <Text style={styles.attachmentsTitle}>{title}</Text>
+        {triggerContent}
+      </View>
+
+      {!!status && <Text style={styles.attachmentsStatus}>{status}</Text>}
+      {!!error && <Text style={styles.attachmentsError}>{error}</Text>}
+
+      {sortedAttachments.length === 0 ? (
+        <View style={styles.attachmentsEmpty}>
+          <Text style={styles.attachmentsEmptyText}>{emptyAttachmentLabel}</Text>
+        </View>
+      ) : (
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View style={styles.attachmentsList}>
+            {sortedAttachments.map((row, index) => {
+              // people_media rows must use nested file only — never the relation as file
+              // (relation id would be mistaken for file id and break the preview).
+              const rawFile = row?.file;
+              const fileId = extractFileId(rawFile);
+              const file =
+                rawFile && typeof rawFile === 'object' && !Array.isArray(rawFile)
+                  ? rawFile
+                  : fileId
+                    ? {id: fileId, '@id': `/files/${fileId}`}
+                    : null;
+              const isCover = String(coverId) === String(row.id);
+              return (
+                <View
+                  key={row.id || fileId || index}
+                  style={[
+                    styles.attachmentCard,
+                    // app-community#813: card principal 320x320
+                    {width: 320, padding: 0, overflow: 'hidden'},
+                  ]}>
+                  <View
+                    style={[
+                      styles.attachmentThumb,
+                      {width: 320, height: 320, marginBottom: 0},
+                    ]}>
+                    {file ? (
+                      <DefaultFile
+                        file={file}
+                        company={company}
+                        resizeMode="cover"
+                        style={{width: 320, height: 320}}
+                      />
+                    ) : null}
+                  </View>
+                  {showAttachmentActions ? (
+                    <View style={styles.attachmentActionsRow}>
+                      <TouchableOpacity
+                        onPress={() => handleSetCover(row)}
+                        accessibilityLabel={
+                          isCover ? 'Capa selecionada' : 'Definir como capa'
+                        }
+                        style={[
+                          styles.attachmentIconButton,
+                          {
+                            backgroundColor: actionBg,
+                            borderColor: isCover ? iconActive : actionBorder,
+                            borderWidth: 1,
+                          },
+                        ]}>
+                        <FeatherIcon
+                          name="star"
+                          size={16}
+                          color={isCover ? iconActive : iconIdle}
+                        />
+                      </TouchableOpacity>
+                      <TouchableOpacity
+                        onPress={() => handleRemove(row)}
+                        accessibilityLabel="Remover"
+                        style={[
+                          styles.attachmentIconButton,
+                          {
+                            backgroundColor: actionBg,
+                            borderColor: actionBorder,
+                            borderWidth: 1,
+                          },
+                        ]}>
+                        <FeatherIcon
+                          name="trash-2"
+                          size={16}
+                          color={iconDanger}
+                        />
+                      </TouchableOpacity>
+                    </View>
+                  ) : null}
+                </View>
+              );
+            })}
+          </View>
+        </ScrollView>
+      )}
+
+      {managerModal}
+    </View>
+  );
+}