components/table.js

class CustomTable extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                table {
                    width: 100%;
                    border-collapse: collapse;
                    min-width: 600px;
                }
                th {
                    background-color: #F9FAFB;
                    color: #6B7280;
                    font-weight: 500;
                    text-align: left;
                    padding: 0.75rem 1.5rem;
                    text-transform: uppercase;
                    font-size: 0.75rem;
                    letter-spacing: 0.05em;
                }
                td {
                    padding: 1rem 1.5rem;
                    border-bottom: 1px solid #E5E7EB;
                    white-space: nowrap;
                    color: #1F2937;
                }
                tr:last-child td {
                    border-bottom: none;
                }
                .status {
                    display: inline-flex;
                    align-items: center;
                    padding: 0.25rem 0.75rem;
                    border-radius: 9999px;
                    font-size: 0.75rem;
                    font-weight: 500;
                }
                .status-delivered {
                    background-color: #D1FAE5;
                    color: #065F46;
                }
                .status-pending {
                    background-color: #FEF3C7;
                    color: #92400E;
                }
                .status-failed {
                    background-color: #FEE2E2;
                    color: #991B1B;
                }
                .actions {
                    display: flex;
                    gap: 0.5rem;
                }
                .action-btn {
                    padding: 0.25rem;
                    border-radius: 0.25rem;
                    color: #6B7280;
                    cursor: pointer;
                }
                .action-btn:hover {
                    background-color: #F3F4F6;
                }
            </style>
            <table>
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Recipient</th>
                        <th>Location</th>
                        <th>Delivery Date</th>
                        <th>Status</th>
                        <th>Amount</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>#181314523</td>
                        <td>MAHBUB HASAN</td>
                        <td>Dhaka Cantonment</td>
                        <td>2025-10-15</td>
                        <td><span class="status status-delivered">Delivered</span></td>
                        <td>₹350</td>
                        <td>
                            <div class="actions">
                                <i class="action-btn" data-feather="eye"></i>
                                <i class="action-btn" data-feather="printer"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>#181314526</td>
                        <td>শামসুল ইসলাম শিহাব</td>
                        <td>Mirpur 10, Dhaka</td>
                        <td>2025-10-15</td>
                        <td><span class="status status-delivered">Delivered</span></td>
                        <td>₹350</td>
                        <td>
                            <div class="actions">
                                <i class="action-btn" data-feather="eye"></i>
                                <i class="action-btn" data-feather="printer"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>#181315268</td>
                        <td>MD. ABDUL MASUD KHAN</td>
                        <td>Tejgaon I/A, Dhaka</td>
                        <td>2025-10-15</td>
                        <td><span class="status status-delivered">Delivered</span></td>
                        <td>₹350</td>
                        <td>
                            <div class="actions">
                                <i class="action-btn" data-feather="eye"></i>
                                <i class="action-btn" data-feather="printer"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>#181315273</td>
                        <td>A.B.M.MOTAHAR HOSSAIN</td>
                        <td>Uttara, Dhaka</td>
                        <td>2025-10-15</td>
                        <td><span class="status status-delivered">Delivered</span></td>
                        <td>₹350</td>
                        <td>
                            <div class="actions">
                                <i class="action-btn" data-feather="eye"></i>
                                <i class="action-btn" data-feather="printer"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>#181315275</td>
                        <td>জিয়াউল আহসান</td>
                        <td>Kashipur, Barishal</td>
                        <td>2025-10-17</td>
                        <td><span class="status status-delivered">Delivered</span></td>
                        <td>₹350</td>
                        <td>
                            <div class="actions">
                                <i class="action-btn" data-feather="eye"></i>
                                <i class="action-btn" data-feather="printer"></i>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <script>feather.replace();</script>
        `;
    }
}

customElements.define('custom-table', CustomTable);