components/quick-actions.js

class QuickActions extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin: 1rem 0;
        }
        .actions-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
          gap: 1rem;
        }
        .action-card {
          background: white;
          border: 1px solid #e5e7eb;
          border-radius: 0.5rem;
          padding: 1.5rem;
          text-align: center;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        .action-card:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
          border-color: #3b82f6;
        }
        .action-icon {
          width: 2.5rem;
          height: 2.5rem;
          margin: 0 auto 0.75rem;
          background: #eff6ff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #3b82f6;
        }
        .action-title {
          font-weight: 600;
          color: #111827;
          margin-bottom: 0.25rem;
        }
        .action-desc {
          font-size: 0.875rem;
          color: #6b7280;
        }
      </style>
      <div class="actions-grid">
        <div class="action-card">
          <div class="action-icon">
            <i data-feather="plus"></i>
          </div>
          <h3 class="action-title">Add Production</h3>
          <p class="action-desc">Record new production batch</p>
        </div>
        <div class="action-card">
          <div class="action-icon">
            <i data-feather="shopping-cart"></i>
          </div>
          <h3 class="action-title">Record Sale</h3>
          <p class="action-desc">Create new invoice</p>
        </div>
        <div class="action-card">
          <div class="action-icon">
            <i data-feather="dollar-sign"></i>
          </div>
          <h3 class="action-title">Add Expense</h3>
          <p class="action-desc">Track factory costs</p>
        </div>
        <div class="action-card">
          <div class="action-icon">
            <i data-feather="users"></i>
          </div>
          <h3 class="action-title">Add Customer</h3>
          <p class="action-desc">Create new customer profile</p>
        </div>
      </div>
    `;
  }
}

customElements.define('quick-actions', QuickActions);