Tomerg7898/annotateflow-data-annotation-command-center

1class ClientCard extends HTMLElement {2    constructor() {3        super();4        this.attachShadow({ mode: 'open' });5    }6 7    connectedCallback() {8        this.render();9    }10 11    static get observedAttributes() {12        return ['name', 'projects', 'active', 'contact', 'last-active', 'avatar'];13    }14 15    attributeChangedCallback(name, oldValue, newValue) {16        if (oldValue !== newValue) {17            this.render();18        }19    }20 21    render() {22        this.shadowRoot.innerHTML = `23            <style>24                .client-card {25                    background: white;26                    border-radius: 0.75rem;27                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);28                    transition: all 0.2s ease;29                    overflow: hidden;30                }31                .client-card:hover {32                    transform: translateY(-2px);33                    box-shadow: 0 4px 12px rgba(0,0,0,0.1);34                }35                .client-header {36                    padding: 1.5rem;37                    border-bottom: 1px solid #f3f4f6;38                }39                .client-avatar {40                    width: 48px;41                    height: 48px;42                    border-radius: 50%;43                    object-fit: cover;44                }45                .client-name {46                    font-weight: 600;47                    color: #111827;48                }49                .client-stats {50                    display: grid;51                    grid-template-columns: 1fr 1fr;52                    gap: 1rem;53                    padding: 1rem 1.5rem;54                }55                .stat-item {56                    display: flex;57                    flex-direction: column;58                }59                .stat-value {60                    font-weight: 700;61                    color: #111827;62                }63                .stat-label {64                    font-size: 0.75rem;65                    color: #6b7280;66                }67                .client-footer {68                    padding: 1rem 1.5rem;69                    background: #f9fafb;70                    display: flex;71                    justify-content: space-between;72                    align-items: center;73                }74                .contact-info {75                    display: flex;76                    align-items: center;77                    gap: 0.5rem;78                }79                .contact-name {80                    font-size: 0.875rem;81                    color: #4b5563;82                }83                .last-active {84                    font-size: 0.75rem;85                    color: #9ca3af;86                }87            </style>88            89            <div class="client-card">90                <div class="client-header flex items-center gap-4">91                    <img src="${this.getAttribute('avatar') || 'http://static.photos/business/200x200/1'}" 92                         class="client-avatar" 93                         alt="${this.getAttribute('name')} logo">94                    <div>95                        <h3 class="client-name">${this.getAttribute('name') || 'Client'}</h3>96                    </div>97                </div>98                99                <div class="client-stats">100                    <div class="stat-item">101                        <span class="stat-value">${this.getAttribute('projects') || '0'}</span>102                        <span class="stat-label">Projects</span>103                    </div>104                    <div class="stat-item">105                        <span class="stat-value">${this.getAttribute('active') || '0'}</span>106                        <span class="stat-label">Active</span>107                    </div>108                </div>109                110                <div class="client-footer">111                    <div class="contact-info">112                        <i data-feather="user" class="w-4 h-4 text-gray-400"></i>113                        <span class="contact-name">${this.getAttribute('contact') || 'No contact'}</span>114                    </div>115                    <span class="last-active">${this.getAttribute('last-active') || 'Unknown'}</span>116                </div>117            </div>118        `;119        feather.replace();120    }121}122 123customElements.define('client-card', ClientCard);