feat: Implement admin backup export and import functionality

- Added new endpoints for exporting and importing instance-level backups.
- Introduced user interface components for backup management in the web app.
- Enhanced import/export logic to handle attachments and provide detailed summaries.
- Updated localization files to include new strings related to backup features.
- Improved styling for backup-related UI elements.

webapp/src/components/ImportPage.tsx

@@ -2,7 +2,7 @@
 import { argon2idAsync } from '@noble/hashes/argon2.js';
 import { strFromU8, unzipSync } from 'fflate';
 import { BlobReader, Uint8ArrayWriter, ZipReader, configure as configureZipJs } from '@zip.js/zip.js';
-import { Archive, ArrowLeftRight, Download, FileJson, FileUp } from 'lucide-preact';
+import { Download, FileUp } from 'lucide-preact';
 import ConfirmDialog from '@/components/ConfirmDialog';
 import type { CiphersImportPayload } from '@/lib/api';
 import {
@@ -55,6 +55,9 @@ export interface ImportResultSummary {
   totalItems: number;
   folderCount: number;
   typeCounts: Array<{ label: string; count: number }>;
+  attachmentCount: number;
+  importedAttachmentCount: number;
+  failedAttachments: Array<{ fileName: string; reason: string }>;
 }
 
 interface BitwardenPasswordProtectedInput extends BitwardenJsonInput {
@@ -582,46 +585,10 @@ export default function ImportPage({ onImport, onImportEncryptedRaw, accountKeys
 
   return (
     <div className="import-export-page">
-      <section className="card import-export-hero">
-        <h3>{t('txt_import_export_title')}</h3>
-        <p className="import-export-hero-sub">{t('txt_import_export_feature_intro')}</p>
-        <div className="import-export-feature-grid">
-          <article className="import-export-feature-item">
-            <span className="import-export-feature-icon">
-              <Archive size={16} />
-            </span>
-            <div>
-              <strong>{t('txt_import_export_feature_bw_zip_title')}</strong>
-              <p>{t('txt_import_export_feature_bw_zip_desc')}</p>
-            </div>
-          </article>
-          <article className="import-export-feature-item">
-            <span className="import-export-feature-icon">
-              <FileJson size={16} />
-            </span>
-            <div>
-              <strong>{t('txt_import_export_feature_nodewarden_json_title')}</strong>
-              <p>{t('txt_import_export_feature_nodewarden_json_desc')}</p>
-            </div>
-          </article>
-          <article className="import-export-feature-item">
-            <span className="import-export-feature-icon">
-              <ArrowLeftRight size={16} />
-            </span>
-            <div>
-              <strong>{t('txt_import_export_feature_compat_title')}</strong>
-              <p>{t('txt_import_export_feature_compat_desc')}</p>
-            </div>
-          </article>
-        </div>
-      </section>
-
       <div className="import-export-panels">
       <section className="card import-export-panel">
         <h3>{t('txt_import')}</h3>
-        <p className="muted" style={{ textAlign: 'left', marginBottom: 12 }}>
-          {t('txt_import_vault_data_hint')}
-        </p>
+        <p className="backup-inline-note">{t('txt_import_vault_data_hint')}</p>
         <div className="field-grid">
           <label className="field field-span-2">
             <span>{t('txt_format')}</span>
@@ -702,9 +669,7 @@ export default function ImportPage({ onImport, onImportEncryptedRaw, accountKeys
 
       <section className="card import-export-panel">
         <h3>{t('txt_export')}</h3>
-        <p className="muted" style={{ textAlign: 'left', marginBottom: 12 }}>
-          {t('txt_export_vault_data_hint')}
-        </p>
+        <p className="backup-inline-note">{t('txt_export_vault_data_hint')}</p>
         <div className="field-grid">
           <label className="field field-span-2">
             <span>{t('txt_format')}</span>
@@ -862,6 +827,29 @@ export default function ImportPage({ onImport, onImportEncryptedRaw, accountKeys
             </button>
             <h3 className="dialog-title">{t('txt_import_success')}</h3>
             <div className="dialog-message">{t('txt_import_success_number_of_items', { count: importSummary.totalItems })}</div>
+            {importSummary.attachmentCount > 0 && (
+              <div className="dialog-message">
+                {t('txt_import_attachment_summary', {
+                  imported: String(importSummary.importedAttachmentCount),
+                  total: String(importSummary.attachmentCount),
+                })}
+              </div>
+            )}
+            {importSummary.failedAttachments.length > 0 && (
+              <div className="import-summary-failed-list">
+                <div className="import-summary-failed-title">
+                  {t('txt_import_failed_attachments_title', { count: String(importSummary.failedAttachments.length) })}
+                </div>
+                <ul>
+                  {importSummary.failedAttachments.map((row, index) => (
+                    <li key={`${row.fileName}-${index}`}>
+                      <strong>{row.fileName}</strong>
+                      {`: ${row.reason}`}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
             <div className="import-summary-table-wrap">
               <table className="import-summary-table">
                 <thead>