components/task-card.js

class CustomTaskCard extends HTMLElement {
    connectedCallback() {
        const title = this.getAttribute('title') || 'Untitled Task';
        const po = this.getAttribute('po') || '#00000';
        const status = this.getAttribute('status') || 'To Do';
        const due = this.getAttribute('due') || 'No due date';
        const priority = this.getAttribute('priority') || 'Medium';
        const assignee = this.getAttribute('assignee') || 'Unassigned';
        
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .task-card {
                    transition: all 0.2s ease;
                    cursor: pointer;
                    background-color: var(--surface);
                    box-shadow: var(--shadow-sm);
                    padding: 1.5rem;
                    position: relative;
                    border-radius: var(--radius);
                    border: 1px solid var(--border);
                }
.task-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    margin-bottom: 1rem;
                }
                
                .task-title {
                    font-weight: 600;
                    color: #1f2937;
                    margin: 0;
                    flex: 1;
                }
                
                .task-meta {
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    margin-bottom: 1rem;
                }
                
                .meta-item {
                    display: flex;
                    align-items: center;
                    font-size: 0.875rem;
                    color: #6b7280;
                }
                
                .meta-icon {
                    margin-right: 0.5rem;
                    color: #9ca3af;
                }
                
                .task-footer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 1rem;
                    padding-top: 1rem;
                    border-top: 1px solid #f3f4f6;
                }
                
                .view-btn {
                    color: #3b82f6;
                    font-size: 0.875rem;
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                }
                
                .view-btn:hover {
                    color: #2563eb;
                }
            </style>
            <div class="task-card ${'priority-' + priority.toLowerCase()}">
<div class="flex justify-between items-start mb-2">
                    <h3 class="font-semibold text-gray-800">${title}</h3>
                    <custom-status-badge status="${status.toLowerCase().replace(' ', '-')}" text="${status}"></custom-status-badge>
</div>
                <div class="text-sm text-gray-600 mb-3">
                    <div class="flex items-center mb-1">
                        <i data-feather="file-text" class="w-4 h-4 mr-2"></i>
                        <span>${po}</span>
                    </div>
                    <div class="flex items-center mb-1">
                        <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
                        <span>Due: ${due}</span>
                    </div>
                    <div class="flex items-center">
                        <i data-feather="user" class="w-4 h-4 mr-2"></i>
                        <span>${assignee}</span>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-xs font-medium ${priority === 'High' ? 'text-red-500' : priority === 'Medium' ? 'text-yellow-500' : 'text-green-500'}">
                        ${priority} Priority
                    </span>
                    <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                        View Details
                    </button>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-task-card', CustomTaskCard);