@dssp/supervision 1.0.0-alpha.7 → 1.0.0-alpha.74

package/dist-client/pages/building-inspection-grid/component/grid-inspection-list-layer.js

@@ -0,0 +1,205 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { BUILDING_INSPECTION_STATUS_DISPLAY, BUILDING_INSPECTION_RE_STATUS_DISPLAY } from '../../building-inspection/building-inspection-list';
+let GridInspectionListLayer = class GridInspectionListLayer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.direction = 'down';
+        // 내부 계산값
+        this.left = 0;
+        this.top = 0;
+        this._onWindowChanged = () => {
+            this._reposition();
+        };
+        this._onGlobalMouseDown = (ev) => {
+            const path = (ev.composedPath && ev.composedPath()) || [];
+            const containsSelf = path.includes(this);
+            if (!containsSelf) {
+                this._requestClose();
+            }
+        };
+        this._onKeyDown = (ev) => {
+            if (ev.key === 'Escape') {
+                this._requestClose();
+            }
+        };
+    }
+    render() {
+        return html `
+      <div container>
+        ${this.items.map(item => {
+            var _a, _b;
+            const status = (item.failCount > 0 ? BUILDING_INSPECTION_RE_STATUS_DISPLAY : BUILDING_INSPECTION_STATUS_DISPLAY)[item.status];
+            const title = `${((_a = item === null || item === void 0 ? void 0 : item.checklist) === null || _a === void 0 ? void 0 : _a.constructionType) || ''} / ${((_b = item === null || item === void 0 ? void 0 : item.checklist) === null || _b === void 0 ? void 0 : _b.constructionDetailType) || ''}`;
+            return html `<div item @click=${() => this._select(item.id)}>
+            <span status class=${item.status.toLowerCase()}>${status}</span>
+            <span title=${title}>${title}</span>
+          </div>`;
+        })}
+      </div>
+    `;
+    }
+    _select(id) {
+        this.dispatchEvent(new CustomEvent('select', { detail: { id }, bubbles: true, composed: true }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._reposition();
+        window.addEventListener('mousedown', this._onGlobalMouseDown, { capture: true });
+        window.addEventListener('keydown', this._onKeyDown, { capture: true });
+        window.addEventListener('resize', this._onWindowChanged);
+        window.addEventListener('scroll', this._onWindowChanged, true);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('mousedown', this._onGlobalMouseDown, { capture: true });
+        window.removeEventListener('keydown', this._onKeyDown, { capture: true });
+        window.removeEventListener('resize', this._onWindowChanged);
+        window.removeEventListener('scroll', this._onWindowChanged, true);
+        super.disconnectedCallback();
+    }
+    _requestClose() {
+        this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    }
+    _reposition() {
+        const anchor = this.anchorEl;
+        const container = this.containerEl;
+        if (!anchor || !container)
+            return;
+        const anchorRect = anchor.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const estimatedItemHeight = 40;
+        const padding = 8;
+        const estimatedHeight = Math.min(this.items.length, 10) * estimatedItemHeight + padding * 2;
+        let direction = 'down';
+        let top = anchorRect.bottom - containerRect.top + 4;
+        let left = anchorRect.left - containerRect.left + 4;
+        if (anchorRect.bottom + estimatedHeight > window.innerHeight) {
+            direction = 'up';
+            top = anchorRect.top - containerRect.top - estimatedHeight - 4;
+        }
+        this.direction = direction;
+        this.left = left;
+        this.top = top;
+        this.style.left = `${left}px`;
+        this.style.top = `${top}px`;
+    }
+};
+GridInspectionListLayer.styles = [
+    css `
+      :host {
+        display: block;
+        position: absolute;
+        background: #fff;
+        border: 1px solid #cccccc80;
+        border-radius: 6px;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+        min-width: 260px;
+        max-width: 360px;
+        max-height: 420px; /* 약 10개 기준 */
+        overflow-y: auto;
+        z-index: 10;
+      }
+
+      div[container] {
+        display: flex;
+        flex-direction: column;
+        padding: 8px;
+        gap: 6px;
+      }
+
+      div[item] {
+        display: grid;
+        grid-template-columns: 70px 1fr;
+        gap: 10px;
+        align-items: center;
+        padding: 8px 10px;
+        border-radius: 6px;
+        cursor: pointer;
+        border: 1px solid transparent;
+      }
+      div[item]:hover {
+        background: #f5fbff;
+        border-color: #cfeeff;
+      }
+
+      span[status] {
+        font-weight: 700;
+        font-size: 12px;
+        color: #ffffff;
+        background: #eef3f8;
+        border-radius: 4px;
+        padding: 4px 6px;
+        text-align: center;
+      }
+      span[status].wait,
+      span[status].overall_wait,
+      span[status].request,
+      span[status].overall_request {
+        background: #4e5055;
+      }
+      span[status].pass {
+        background: #4bbb4a;
+      }
+      span[status].fail {
+        background: #ff4444;
+      }
+
+      span[title] {
+        font-size: 13px;
+        color: #4e5055;
+        white-space: nowrap;
+      }
+
+      :host([direction='up'])::after,
+      :host([direction='down'])::after {
+        content: '';
+        position: absolute;
+        left: 12px;
+        width: 10px;
+        height: 10px;
+        background: #fff;
+        border-left: 1px solid #cccccc80;
+        border-top: 1px solid #cccccc80;
+        transform: rotate(45deg);
+      }
+      :host([direction='down'])::after {
+        top: -6px;
+      }
+      :host([direction='up'])::after {
+        bottom: -6px;
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], GridInspectionListLayer.prototype, "items", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], GridInspectionListLayer.prototype, "direction", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", HTMLElement)
+], GridInspectionListLayer.prototype, "anchorEl", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", HTMLElement
+    // 내부 계산값
+    )
+], GridInspectionListLayer.prototype, "containerEl", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], GridInspectionListLayer.prototype, "left", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], GridInspectionListLayer.prototype, "top", void 0);
+GridInspectionListLayer = __decorate([
+    customElement('grid-inspection-list-layer')
+], GridInspectionListLayer);
+export { GridInspectionListLayer };
+//# sourceMappingURL=grid-inspection-list-layer.js.map

package/dist-client/pages/building-inspection-grid/component/grid-inspection-list-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-inspection-list-layer.js","sourceRoot":"","sources":["../../../../client/pages/building-inspection-grid/component/grid-inspection-list-layer.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { BUILDING_INSPECTION_STATUS_DISPLAY, BUILDING_INSPECTION_RE_STATUS_DISPLAY } from '../../building-inspection/building-inspection-list'\n\n@customElement('grid-inspection-list-layer')\nexport class GridInspectionListLayer extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: absolute;\n        background: #fff;\n        border: 1px solid #cccccc80;\n        border-radius: 6px;\n        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);\n        min-width: 260px;\n        max-width: 360px;\n        max-height: 420px; /* 약 10개 기준 */\n        overflow-y: auto;\n        z-index: 10;\n      }\n\n      div[container] {\n        display: flex;\n        flex-direction: column;\n        padding: 8px;\n        gap: 6px;\n      }\n\n      div[item] {\n        display: grid;\n        grid-template-columns: 70px 1fr;\n        gap: 10px;\n        align-items: center;\n        padding: 8px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        border: 1px solid transparent;\n      }\n      div[item]:hover {\n        background: #f5fbff;\n        border-color: #cfeeff;\n      }\n\n      span[status] {\n        font-weight: 700;\n        font-size: 12px;\n        color: #ffffff;\n        background: #eef3f8;\n        border-radius: 4px;\n        padding: 4px 6px;\n        text-align: center;\n      }\n      span[status].wait,\n      span[status].overall_wait,\n      span[status].request,\n      span[status].overall_request {\n        background: #4e5055;\n      }\n      span[status].pass {\n        background: #4bbb4a;\n      }\n      span[status].fail {\n        background: #ff4444;\n      }\n\n      span[title] {\n        font-size: 13px;\n        color: #4e5055;\n        white-space: nowrap;\n      }\n\n      :host([direction='up'])::after,\n      :host([direction='down'])::after {\n        content: '';\n        position: absolute;\n        left: 12px;\n        width: 10px;\n        height: 10px;\n        background: #fff;\n        border-left: 1px solid #cccccc80;\n        border-top: 1px solid #cccccc80;\n        transform: rotate(45deg);\n      }\n      :host([direction='down'])::after {\n        top: -6px;\n      }\n      :host([direction='up'])::after {\n        bottom: -6px;\n      }\n    `\n  ]\n\n  @property({ type: Array }) items: any[] = []\n  @property({ type: String, reflect: true }) direction: 'down' | 'up' = 'down'\n\n  // 포지셔닝 입력\n  @property({ attribute: false }) anchorEl?: HTMLElement\n  @property({ attribute: false }) containerEl?: HTMLElement\n\n  // 내부 계산값\n  @property({ type: Number }) left: number = 0\n  @property({ type: Number }) top: number = 0\n\n  render() {\n    return html`\n      <div container>\n        ${this.items.map(item => {\n          const status = (item.failCount > 0 ? BUILDING_INSPECTION_RE_STATUS_DISPLAY : BUILDING_INSPECTION_STATUS_DISPLAY)[item.status]\n          const title = `${item?.checklist?.constructionType || ''} / ${item?.checklist?.constructionDetailType || ''}`\n          return html`<div item @click=${() => this._select(item.id)}>\n            <span status class=${item.status.toLowerCase()}>${status}</span>\n            <span title=${title}>${title}</span>\n          </div>`\n        })}\n      </div>\n    `\n  }\n\n  private _select(id: string) {\n    this.dispatchEvent(new CustomEvent('select', { detail: { id }, bubbles: true, composed: true }))\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this._reposition()\n    window.addEventListener('mousedown', this._onGlobalMouseDown, { capture: true })\n    window.addEventListener('keydown', this._onKeyDown, { capture: true })\n    window.addEventListener('resize', this._onWindowChanged)\n    window.addEventListener('scroll', this._onWindowChanged, true)\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener('mousedown', this._onGlobalMouseDown as any, { capture: true } as any)\n    window.removeEventListener('keydown', this._onKeyDown as any, { capture: true } as any)\n    window.removeEventListener('resize', this._onWindowChanged as any)\n    window.removeEventListener('scroll', this._onWindowChanged as any, true)\n    super.disconnectedCallback()\n  }\n\n  private _onWindowChanged = () => {\n    this._reposition()\n  }\n\n  private _onGlobalMouseDown = (ev: MouseEvent) => {\n    const path = (ev.composedPath && ev.composedPath()) || []\n    const containsSelf = path.includes(this)\n    if (!containsSelf) {\n      this._requestClose()\n    }\n  }\n\n  private _onKeyDown = (ev: KeyboardEvent) => {\n    if (ev.key === 'Escape') {\n      this._requestClose()\n    }\n  }\n\n  private _requestClose() {\n    this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))\n  }\n\n  private _reposition() {\n    const anchor = this.anchorEl\n    const container = this.containerEl\n    if (!anchor || !container) return\n\n    const anchorRect = anchor.getBoundingClientRect()\n    const containerRect = container.getBoundingClientRect()\n\n    const estimatedItemHeight = 40\n    const padding = 8\n    const estimatedHeight = Math.min(this.items.length, 10) * estimatedItemHeight + padding * 2\n\n    let direction: 'down' | 'up' = 'down'\n    let top = anchorRect.bottom - containerRect.top + 4\n    let left = anchorRect.left - containerRect.left + 4\n\n    if (anchorRect.bottom + estimatedHeight > window.innerHeight) {\n      direction = 'up'\n      top = anchorRect.top - containerRect.top - estimatedHeight - 4\n    }\n\n    this.direction = direction\n    this.left = left\n    this.top = top\n\n    this.style.left = `${left}px`\n    this.style.top = `${top}px`\n  }\n}\n"]}

package/dist-client/pages/checklist/attachment-list-popup.d.ts

@@ -1,2 +1,3 @@
 import '@material/web/icon/icon.js';
 import './file-preview-popup';
+import '../building-inspection/component/image-preview-popup';

package/dist-client/pages/checklist/attachment-list-popup.js

@@ -3,20 +3,22 @@ import '@material/web/icon/icon.js';
 import gql from 'graphql-tag';
 import { client } from '@operato/graphql';
 import { css, html, LitElement } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
 import { notify } from '@operato/layout';
-import { store, User } from '@operato/shell';
-import { connect } from 'pwa-helpers/connect-mixin.js';
+import { store, User, connect } from '@operato/shell';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { openPopup } from '@operato/layout';
 import './file-preview-popup';
+import '../building-inspection/component/image-preview-popup';
 import { BuildingInspectionStatus } from '../building-inspection/building-inspection-list';
+import { ifDefined } from 'lit/directives/if-defined.js';
 let AttachmentListPopup = class AttachmentListPopup extends connect(store)(LitElement) {
     constructor() {
         super(...arguments);
         this.checklistItemId = '';
         this.status = BuildingInspectionStatus.WAIT;
+        this.mode = "VIEWER" /* ChecklistMode.VIEWER */;
         this.item = { count: 0 };
         this.checklistItemAttachments = [];
         this.checklistItemAttachmentCount = 0;
@@ -24,36 +26,79 @@ let AttachmentListPopup = class AttachmentListPopup extends connect(store)(LitEl
     }
     render() {
         return html `
-      <div body>
-        <h3>제품검사에 대한 파일: ${this.checklistItemAttachmentCount || 0}건</h3>
+      <h3>제품검사에 대한 파일: ${this.checklistItemAttachmentCount || 0}건</h3>
 
-        <div attachment-container>
-          ${this.checklistItemAttachments.map(attachment => {
-            return html `
-              <div attachment-row>
-                <div creator-container>
-                  <span creator><md-icon slot="icon">account_circle</md-icon> ${attachment.creator.name}</span>
-                  <span createdAt>
-                    <md-icon slot="icon">schedule</md-icon> ${this._formatDate(attachment.createdAt)}
-                    ${attachment.creator.email === this.user.email && this.status != BuildingInspectionStatus.PASS
-                ? html ` <md-icon delete slot="icon" @click=${() => this._deleteAttachment(attachment.id)}>delete</md-icon>`
-                : ''}
-                    <a button-download href=${attachment.fullpath} download=${attachment.name}>
-                      <md-icon slot="icon">download</md-icon></a
-                    >
-                  </span>
+      <div body>
+        <div file-list-container>
+          ${this.checklistItemAttachments.length > 0
+            ? this.checklistItemAttachments.map(attachment => {
+                var _a, _b;
+                return html `
+                  <div file-item @click=${() => this._onClickPreview(attachment.fullpath)}>
+                    <div file-info>
+                      <div file-icon>
+                        <md-icon>description</md-icon>
+                      </div>
+                      <div file-details>
+                        <span file-name>${attachment.name || ''}</span>
+                        <div file-meta>
+                          <span file-creator>
+                            <md-icon style="--md-icon-size: 12px;">account_circle</md-icon>
+                            ${((_a = attachment.creator) === null || _a === void 0 ? void 0 : _a.name) || ''}
+                          </span>
+                          <span file-date>
+                            <md-icon style="--md-icon-size: 12px;">schedule</md-icon>
+                            ${this._formatDate(attachment.createdAt)}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div action-buttons>
+                      <md-icon
+                        title="미리보기"
+                        @click=${(e) => {
+                    e.stopPropagation();
+                    this._onClickPreview(attachment.fullpath);
+                }}
+                        >visibility</md-icon
+                      >
+                      <a
+                        href=${ifDefined(attachment.fullpath)}
+                        download=${ifDefined(attachment.name)}
+                        @click=${(e) => e.stopPropagation()}
+                      >
+                        <md-icon title="다운로드" style="color: #2196f3;">download</md-icon>
+                      </a>
+                      ${((_b = attachment.creator) === null || _b === void 0 ? void 0 : _b.email) === this.user.email &&
+                    this.status != BuildingInspectionStatus.PASS &&
+                    this.mode == "EDITOR" /* ChecklistMode.EDITOR */
+                    ? html `<md-icon
+                            delete
+                            title="삭제"
+                            @click=${(e) => {
+                        e.stopPropagation();
+                        this._deleteAttachment(attachment.id);
+                    }}
+                            >delete</md-icon
+                          >`
+                    : ''}
+                    </div>
+                  </div>
+                `;
+            })
+            : html `
+                <div empty-state>
+                  <md-icon>insert_drive_file</md-icon>
+                  <div>첨부된 파일이 없습니다.</div>
                 </div>
-                <a attachment @click=${() => this._onClickPreview(attachment.fullpath)}>${attachment.name}</a>
-              </div>
-            `;
-        })}
+              `}
         </div>
 
         <ox-input-file
           accept="*/*"
           multiple="true"
           hide-filelist
-          ?disabled=${this.status == BuildingInspectionStatus.PASS}
+          ?disabled=${this.status == BuildingInspectionStatus.PASS || this.mode == "VIEWER" /* ChecklistMode.VIEWER */}
           @change=${this.onCreateAttachment.bind(this)}
         ></ox-input-file>
 
@@ -163,7 +208,7 @@ let AttachmentListPopup = class AttachmentListPopup extends connect(store)(LitEl
       `,
             variables: {
                 attachments: files.map(file => {
-                    return { file, refBy: checklistItemId, refType: 'ChecklistItem' };
+                    return { file, refBy: checklistItemId, refType: 'ChecklistItem', description: this.status };
                 })
             },
             context: {
@@ -181,14 +226,63 @@ let AttachmentListPopup = class AttachmentListPopup extends connect(store)(LitEl
         const day = String(_date.getDate()).padStart(2, '0');
         const hours = String(_date.getHours()).padStart(2, '0');
         const minutes = String(_date.getMinutes()).padStart(2, '0');
-        const seconds = String(_date.getSeconds()).padStart(2, '0');
-        return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+        return `${year}.${month}.${day} ${hours}:${minutes}`;
     }
     // 첨부 자료 변경 이벤트 디스패치
     _dispatchEvent() {
         this.dispatchEvent(new CustomEvent('change-attachment', { detail: { checklistItemId: this.checklistItemId } }));
     }
     _onClickPreview(filepath) {
+        if (!filepath) {
+            return;
+        }
+        // 파일 확장자로 타입 판단
+        const fileExtension = filepath.toLowerCase().split('.').pop();
+        const isImage = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(fileExtension || '');
+        const isPdf = fileExtension === 'pdf';
+        if (isImage) {
+            this._openImagePreview(filepath);
+        }
+        else if (isPdf) {
+            this._openPdfPreview(filepath);
+        }
+        else {
+            // 기타 파일은 기존 file-preview-popup 사용
+            this._openGenericPreview(filepath);
+        }
+    }
+    _openImagePreview(filepath) {
+        const imageData = this.checklistItemAttachments.filter(attachment => {
+            var _a;
+            const fileExtension = (_a = attachment.fullpath) === null || _a === void 0 ? void 0 : _a.toLowerCase().split('.').pop();
+            return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(fileExtension || '');
+        });
+        const currentIndex = imageData.findIndex(attachment => attachment.fullpath === filepath);
+        openPopup(html ` <image-preview-popup .images=${imageData} .currentIndex=${Math.max(0, currentIndex)}></image-preview-popup> `, { backdrop: true, size: 'large', title: '이미지 미리보기' });
+    }
+    _openPdfPreview(filepath) {
+        openPopup(html `
+        <div style="display: flex; flex-direction: column;">
+          <div style="flex: 1; overflow: hidden; touch-action: pan-x pan-y;">
+            <iframe
+              src="${filepath}#toolbar=1&navpanes=0&scrollbar=1&zoom=page-fit"
+              style="
+                width: 100%; 
+                height: 100%; 
+                border: none; 
+                touch-action: pan-x pan-y;
+              "
+              @error=${() => {
+            // PDF 로드 실패시 새 탭에서 열기
+            window.open(filepath, '_blank');
+        }}
+            ></iframe>
+          </div>
+        </div>
+      `, { backdrop: true, size: 'large', title: '[PDF 미리보기]' });
+    }
+    // 기타 파일 타입은 기존 방식 사용
+    _openGenericPreview(filepath) {
         openPopup(html ` <file-preview-popup .filepath=${filepath}></file-preview-popup> `, {
             backdrop: true,
             size: 'large',
@@ -203,60 +297,155 @@ AttachmentListPopup.styles = [
       :host {
         display: flex;
         flex-direction: column;
-        padding: 15px 20px;
-        background-color: var(--md-sys-color-surface);
+        background-color: #fff;
+        width: 100%;
+        max-height: 80vh;
       }
 
       div[body] {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-      }
-
-      div[attachment-container] {
-        overflow-y: auto;
-        gap: 10px;
-        display: flex;
-        flex-direction: column;
         flex: 1;
+        overflow-y: auto;
+        padding: 20px;
 
-        div[attachment-row] {
+        div[file-list-container] {
           display: flex;
           flex-direction: column;
+          gap: 15px;
+          background-color: #f7f7f7;
+          padding: 20px;
+          border-radius: 8px;
+          margin-bottom: 20px;
 
-          div[creator-container] {
+          div[file-item] {
             display: flex;
-            justify-content: space-between;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            background-color: #fff;
+            border-radius: 6px;
+            border: 1px solid #ddd;
+            cursor: pointer;
+            transition: all 0.2s ease;
+
+            &:hover {
+              background-color: #e3f2fd;
+              border-color: #2196f3;
+              transform: translateY(-1px);
+              box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
+            }
 
-            span[creator] {
-              font-weight: 600;
+            div[file-info] {
+              flex: 1;
               display: flex;
               align-items: center;
-              gap: 3px;
+              gap: 12px;
+
+              div[file-icon] {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 40px;
+                height: 40px;
+                border-radius: 8px;
+
+                md-icon {
+                  --md-icon-size: 24px;
+                  color: #666;
+                }
+              }
+
+              div[file-details] {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+
+                span[file-name] {
+                  font-size: 14px;
+                  font-weight: 500;
+                  color: #333;
+                  line-height: 1.2;
+                }
+
+                div[file-meta] {
+                  display: flex;
+                  gap: 15px;
+                  margin-top: 2px;
+
+                  span[file-creator] {
+                    font-size: 11px;
+                    color: #666;
+                    display: flex;
+                    align-items: center;
+                    gap: 3px;
+                  }
+
+                  span[file-date] {
+                    font-size: 11px;
+                    color: #666;
+                    display: flex;
+                    align-items: center;
+                    gap: 3px;
+                  }
+                }
+              }
             }
-            span[createdAt] {
+
+            div[action-buttons] {
               display: flex;
+              gap: 8px;
               align-items: center;
-              gap: 3px;
 
-              md-icon[delete] {
+              md-icon {
+                --md-icon-size: 20px;
+                color: #2196f3;
                 cursor: pointer;
+                padding: 4px;
+                border-radius: 4px;
+                transition: background-color 0.2s;
+
+                &:hover {
+                  background-color: rgba(33, 150, 243, 0.1);
+                }
+              }
+
+              md-icon[delete] {
+                color: #f44336;
+
+                &:hover {
+                  background-color: rgba(244, 67, 54, 0.1);
+                }
               }
 
-              a[button-download] {
+              a {
+                text-decoration: none;
+                color: inherit;
                 display: flex;
-                color: #000;
+                align-items: center;
               }
             }
           }
+        }
+
+        div[empty-state] {
+          text-align: center;
+          color: #666;
+          padding: 40px;
 
-          a[attachment] {
-            margin-left: 20px;
-            text-decoration: none;
-            color: #000;
+          md-icon {
+            --md-icon-size: 48px;
+            color: #ccc;
+            margin-bottom: 16px;
           }
         }
+
+        div[button-container] {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 10px;
+          margin-top: 20px;
+        }
       }
 
       h3 {
@@ -264,15 +453,8 @@ AttachmentListPopup.styles = [
         color: rgb(5, 149, 229);
         font-size: 17px;
         font-weight: 700;
-        background-color: var(--md-sys-color-surface);
-        margin-top: 0px;
-        margin-bottom: 5px;
-      }
-
-      div[button-container] {
-        display: flex;
-        justify-content: flex-end;
-        gap: 10px;
+        margin: 0px 20px 10px 20px;
+        padding-top: 20px;
       }
     `
 ];
@@ -284,6 +466,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], AttachmentListPopup.prototype, "status", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AttachmentListPopup.prototype, "mode", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -300,10 +486,6 @@ __decorate([
     state(),
     __metadata("design:type", User)
 ], AttachmentListPopup.prototype, "user", void 0);
-__decorate([
-    query('div[attachment-container]'),
-    __metadata("design:type", HTMLDivElement)
-], AttachmentListPopup.prototype, "attachmentContainer", void 0);
 AttachmentListPopup = __decorate([
     customElement('attachment-list-popup')
 ], AttachmentListPopup);