sdga-ui 1.0.8 → 1.0.9

package/demo-angular/src/app/views/home/home.component.scss

@@ -1,35 +0,0 @@
-.hero-section {
-  padding: 4rem 0;
-}
-
-.components-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 2rem;
-  margin-top: 3rem;
-}
-
-.component-card {
-  padding: 2rem;
-  background: white;
-  border-radius: 1rem;
-  text-decoration: none;
-  color: inherit;
-  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
-  transition: all 0.3s ease;
-  
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 16px -4px rgba(16, 24, 40, 0.15), 0 4px 8px -4px rgba(16, 24, 40, 0.1);
-  }
-  
-  h3 {
-    margin-bottom: 0.5rem;
-    color: var(--dga-primary);
-  }
-  
-  p {
-    margin: 0;
-    color: var(--dga-neutral);
-  }
-}

package/demo-angular/src/app/views/home/home.component.ts

@@ -1,12 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-  selector: 'app-home',
-  imports: [RouterLink, TranslateModule],
-  templateUrl: './home.component.html',
-  styleUrl: './home.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class HomeComponent {}

package/demo-angular/src/app/views/links/links.component.html

@@ -1,21 +0,0 @@
-<div class="container py-5">
-  <h1 class="display-4 mb-4">{{ 'links.title' | translate }}</h1>
-  <p class="lead mb-5">{{ 'links.subtitle' | translate }}</p>
-
-  <section class="demo-section mb-5">
-    <h2>{{ 'links.section_basic' | translate }}</h2>
-    <div class="d-flex flex-column gap-3 component-showcase">
-      <!-- Primary link -->
-      <a href="javascript:void(0);" class="link-primary link-offset-2">{{ 'links.primary_link' | translate }}</a>
-      <!-- Neutral link -->
-      <a href="javascript:void(0);" class="link-neutral link-offset-2">{{ 'links.neutral_link' | translate }}</a>
-      <!-- On-color link displayed on a primary background -->
-      <div class="p-3 on-primary rounded-2" style="width:max-content;">
-        <a href="javascript:void(0);" class="link-neutral link-offset-2">{{ 'links.neutral_link' | translate }}</a>
-      </div>
-      <!-- Disabled link (non-interactive) -->
-      <a href="javascript:void(0);" class="link-primary disabled link-offset-2" aria-disabled="true" tabindex="-1">{{ 'links.disabled_link' | translate }}</a>
-    </div>
-    <app-code-example [htmlCode]="basicLinksCode"></app-code-example>
-  </section>
-</div>

package/demo-angular/src/app/views/links/links.component.scss

@@ -1,11 +0,0 @@
-// Links Component Styles
-
-.demo-section {
-  margin-bottom: 3rem;
-
-  h2 {
-    margin-bottom: 1.5rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid var(--dga-border-color);
-  }
-}

package/demo-angular/src/app/views/links/links.component.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
-
-@Component({
-  selector: 'app-links',
-  imports: [CommonModule, TranslateModule, CodeExampleComponent],
-  templateUrl: './links.component.html',
-  styleUrl: './links.component.scss'
-})
-export class LinksComponent {
-  // Basic link variants (primary, neutral, on-color, disabled)
-  basicLinksCode = `<a href=\"javascript:void(0);\" class=\"link-primary link-offset-2\">Primary link</a>
-<a href=\"javascript:void(0);\" class=\"link-neutral link-offset-2\">Neutral link</a>
-<div class=\"p-3 on-primary rounded-2\"><a href=\"javascript:void(0);\" class=\"link-neutral link-offset-2\">Neutral link</a></div>
-<a href=\"javascript:void(0);\" class=\"link-primary disabled link-offset-2\" aria-disabled=\"true\" tabindex=\"-1\">Disabled link</a>`;
-
-}

package/demo-angular/src/app/views/tables/tables.component.html

@@ -1,289 +0,0 @@
-<div class="container py-5">
-  <h1 class="display-4 mb-4">{{ 'tables.title' | translate }}</h1>
-  <p class="lead mb-5">{{ 'tables.subtitle' | translate }}</p>
-
-  <section class="demo-section">
-    <h2>{{ 'tables.section_default' | translate }}</h2>
-    <p class="mb-4">Default table with checkboxes and link integration. The table includes checkbox inputs in the first column for row selection and links in data cells.</p>
-    
-    <div class="table-responsive">
-      <table class="table">
-        <thead>
-          <tr>
-            <th scope="col" style="width: 3.25rem;"><input type="checkbox"
-                class="form-check-input form-check-input-sm ripple" id="chkDemoMd"></th>
-            <th scope="col">First</th>
-            <th scope="col">Last</th>
-            <th scope="col">Handle</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple"
-                id="chkNeutralMd"></th>
-            <td><a href="javascript:void(0);">Mark</a></td>
-            <td>Otto</td>
-            <td>@mdo</td>
-          </tr>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
-            </th>
-            <td><a href="javascript:void(0);">Jacob</a></td>
-            <td>Thornton</td>
-            <td>@fat</td>
-          </tr>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
-            </th>
-            <td><a href="javascript:void(0);">John</a></td>
-            <td>Doe</td>
-            <td>@social</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <app-code-example [htmlCode]="defaultTableCode" title="Default Table with Checkboxes"></app-code-example>
-  </section>
-
-  <section class="demo-section">
-    <h2>Side-Borderless Table</h2>
-    <p class="mb-4">Table without left and right borders using the <code>side-borderless</code> class. This creates a cleaner look by removing the side borders while maintaining horizontal dividers.</p>
-    
-    <div class="table-responsive">
-      <table class="table side-borderless">
-        <thead>
-          <tr>
-            <th scope="col" style="width: 3.25rem;"><input type="checkbox"
-                class="form-check-input form-check-input-sm ripple" id="chkDemoMd"></th>
-            <th scope="col">First</th>
-            <th scope="col">Last</th>
-            <th scope="col">Handle</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
-            </th>
-            <td><a href="javascript:void(0);">Mark</a></td>
-            <td>Otto</td>
-            <td>@mdo</td>
-          </tr>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
-            </th>
-            <td><a href="javascript:void(0);">Jacob</a></td>
-            <td>Thornton</td>
-            <td>@fat</td>
-          </tr>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
-            </th>
-            <td><a href="javascript:void(0);">John</a></td>
-            <td>Doe</td>
-            <td>@social</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <app-code-example [htmlCode]="sideBorderlessTableCode" title="Side-Borderless Table"></app-code-example>
-  </section>
-
-  <section class="demo-section">
-    <h2>Striped Table</h2>
-    <p class="mb-4">Table with alternating row colors using the <code>table-striped</code> class. This improves readability by creating visual separation between rows.</p>
-    
-    <div class="table-responsive">
-      <table class="table table-striped">
-        <thead>
-          <tr>
-            <th scope="col" style="width: 3.25rem;"><input type="checkbox"
-                class="form-check-input form-check-input-sm ripple" id="chkDemoMd"></th>
-            <th scope="col">First</th>
-            <th scope="col">Last</th>
-            <th scope="col">Handle</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
-            </th>
-            <td><a href="javascript:void(0);">Mark</a></td>
-            <td>Otto</td>
-            <td>@mdo</td>
-          </tr>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
-            </th>
-            <td><a href="javascript:void(0);">Jacob</a></td>
-            <td>Thornton</td>
-            <td>@fat</td>
-          </tr>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
-            </th>
-            <td><a href="javascript:void(0);">John</a></td>
-            <td>Doe</td>
-            <td>@social</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <app-code-example [htmlCode]="stripedTableCode" title="Striped Table"></app-code-example>
-  </section>
-
-  <section class="demo-section">
-    <h2>Striped + Side-Borderless Table</h2>
-    <p class="mb-4">Combination of striped rows and side-borderless styling using <code>table-striped side-borderless</code> classes. This creates a modern, clean appearance with enhanced readability.</p>
-    
-    <div class="table-responsive">
-      <table class="table table-striped side-borderless">
-        <thead>
-          <tr>
-            <th scope="col" style="width: 3.25rem;"><input type="checkbox"
-                class="form-check-input form-check-input-sm ripple" id="chkDemoMd"></th>
-            <th scope="col">First</th>
-            <th scope="col">Last</th>
-            <th scope="col">Handle</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
-            </th>
-            <td><a href="javascript:void(0);">Mark</a></td>
-            <td>Otto</td>
-            <td>@mdo</td>
-          </tr>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
-            </th>
-            <td><a href="javascript:void(0);">Jacob</a></td>
-            <td>Thornton</td>
-            <td>@fat</td>
-          </tr>
-          <tr>
-            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
-            </th>
-            <td><a href="javascript:void(0);">John</a></td>
-            <td>Doe</td>
-            <td>@social</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <app-code-example [htmlCode]="stripedSideBorderlessTableCode" title="Striped + Side-Borderless Table"></app-code-example>
-  </section>
-
-  <section class="demo-section">
-    <h2>Table with Links</h2>
-    <p class="mb-4">Comprehensive example showing multiple link types within table cells. Includes links for names, email addresses (mailto:), and action links.</p>
-    
-    <div class="table-responsive">
-      <table class="table">
-        <thead>
-          <tr>
-            <th scope="col">ID</th>
-            <th scope="col">Name</th>
-            <th scope="col">Email</th>
-            <th scope="col">Department</th>
-            <th scope="col">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th scope="row">1</th>
-            <td><a href="javascript:void(0);">John Doe</a></td>
-            <td><a href="mailto:john.doe@example.com">john.doe@example.com</a></td>
-            <td>Engineering</td>
-            <td>
-              <a href="javascript:void(0);">Edit</a> | 
-              <a href="javascript:void(0);">Delete</a>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">2</th>
-            <td><a href="javascript:void(0);">Jane Smith</a></td>
-            <td><a href="mailto:jane.smith@example.com">jane.smith@example.com</a></td>
-            <td>Marketing</td>
-            <td>
-              <a href="javascript:void(0);">Edit</a> | 
-              <a href="javascript:void(0);">Delete</a>
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">3</th>
-            <td><a href="javascript:void(0);">Mike Johnson</a></td>
-            <td><a href="mailto:mike.johnson@example.com">mike.johnson@example.com</a></td>
-            <td>Sales</td>
-            <td>
-              <a href="javascript:void(0);">Edit</a> | 
-              <a href="javascript:void(0);">Delete</a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <app-code-example [htmlCode]="tableWithLinksCode" title="Table with Links in Cells"></app-code-example>
-  </section>
-
-  <section class="demo-section">
-    <h2>Responsive Table</h2>
-    <p class="mb-4">Table wrapped in <code>table-responsive</code> div to enable horizontal scrolling on smaller screens. Essential for tables with many columns to maintain usability on mobile devices.</p>
-    
-    <div class="table-responsive">
-      <table class="table">
-        <thead>
-          <tr>
-            <th scope="col">ID</th>
-            <th scope="col">First Name</th>
-            <th scope="col">Last Name</th>
-            <th scope="col">Email</th>
-            <th scope="col">Department</th>
-            <th scope="col">Position</th>
-            <th scope="col">Hire Date</th>
-            <th scope="col">Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th scope="row">1</th>
-            <td>John</td>
-            <td>Doe</td>
-            <td>john.doe@example.com</td>
-            <td>Engineering</td>
-            <td>Senior Developer</td>
-            <td>2020-01-15</td>
-            <td>Active</td>
-          </tr>
-          <tr>
-            <th scope="row">2</th>
-            <td>Jane</td>
-            <td>Smith</td>
-            <td>jane.smith@example.com</td>
-            <td>Marketing</td>
-            <td>Marketing Manager</td>
-            <td>2019-06-20</td>
-            <td>Active</td>
-          </tr>
-          <tr>
-            <th scope="row">3</th>
-            <td>Mike</td>
-            <td>Johnson</td>
-            <td>mike.johnson@example.com</td>
-            <td>Sales</td>
-            <td>Sales Representative</td>
-            <td>2021-03-10</td>
-            <td>Active</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <app-code-example [htmlCode]="responsiveTableCode" title="Responsive Table Wrapper"></app-code-example>
-  </section>
-</div>

package/demo-angular/src/app/views/tables/tables.component.scss

@@ -1,3 +0,0 @@
-.demo-section {
-  margin-bottom: 4rem;
-}

package/demo-angular/src/app/views/tables/tables.component.ts

@@ -1,278 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
-
-@Component({
-  selector: 'app-tables',
-  imports: [TranslateModule, CodeExampleComponent],
-  templateUrl: './tables.component.html',
-  styleUrl: './tables.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TablesComponent {
-  // Default table with checkboxes
-  defaultTableCode = `<div class="table-responsive">
-  <table class="table">
-    <thead>
-      <tr>
-        <th scope="col" style="width: 3.25rem;">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkSelectAll">
-        </th>
-        <th scope="col">First</th>
-        <th scope="col">Last</th>
-        <th scope="col">Handle</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow1">
-        </th>
-        <td><a href="javascript:void(0);">Mark</a></td>
-        <td>Otto</td>
-        <td>@mdo</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow2">
-        </th>
-        <td><a href="javascript:void(0);">Jacob</a></td>
-        <td>Thornton</td>
-        <td>@fat</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow3">
-        </th>
-        <td><a href="javascript:void(0);">John</a></td>
-        <td>Doe</td>
-        <td>@social</td>
-      </tr>
-    </tbody>
-  </table>
-</div>`;
-
-  // Side-borderless table
-  sideBorderlessTableCode = `<div class="table-responsive">
-  <table class="table side-borderless">
-    <thead>
-      <tr>
-        <th scope="col" style="width: 3.25rem;">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkSelectAll">
-        </th>
-        <th scope="col">First</th>
-        <th scope="col">Last</th>
-        <th scope="col">Handle</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow1">
-        </th>
-        <td><a href="javascript:void(0);">Mark</a></td>
-        <td>Otto</td>
-        <td>@mdo</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow2">
-        </th>
-        <td><a href="javascript:void(0);">Jacob</a></td>
-        <td>Thornton</td>
-        <td>@fat</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow3">
-        </th>
-        <td><a href="javascript:void(0);">John</a></td>
-        <td>Doe</td>
-        <td>@social</td>
-      </tr>
-    </tbody>
-  </table>
-</div>`;
-
-  // Striped table
-  stripedTableCode = `<div class="table-responsive">
-  <table class="table table-striped">
-    <thead>
-      <tr>
-        <th scope="col" style="width: 3.25rem;">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkSelectAll">
-        </th>
-        <th scope="col">First</th>
-        <th scope="col">Last</th>
-        <th scope="col">Handle</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow1">
-        </th>
-        <td><a href="javascript:void(0);">Mark</a></td>
-        <td>Otto</td>
-        <td>@mdo</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow2">
-        </th>
-        <td><a href="javascript:void(0);">Jacob</a></td>
-        <td>Thornton</td>
-        <td>@fat</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow3">
-        </th>
-        <td><a href="javascript:void(0);">John</a></td>
-        <td>Doe</td>
-        <td>@social</td>
-      </tr>
-    </tbody>
-  </table>
-</div>`;
-
-  // Combination: striped + side-borderless
-  stripedSideBorderlessTableCode = `<div class="table-responsive">
-  <table class="table table-striped side-borderless">
-    <thead>
-      <tr>
-        <th scope="col" style="width: 3.25rem;">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkSelectAll">
-        </th>
-        <th scope="col">First</th>
-        <th scope="col">Last</th>
-        <th scope="col">Handle</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow1">
-        </th>
-        <td><a href="javascript:void(0);">Mark</a></td>
-        <td>Otto</td>
-        <td>@mdo</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow2">
-        </th>
-        <td><a href="javascript:void(0);">Jacob</a></td>
-        <td>Thornton</td>
-        <td>@fat</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow3">
-        </th>
-        <td><a href="javascript:void(0);">John</a></td>
-        <td>Doe</td>
-        <td>@social</td>
-      </tr>
-    </tbody>
-  </table>
-</div>`;
-
-  // Table with links in cells - more comprehensive example
-  tableWithLinksCode = `<div class="table-responsive">
-  <table class="table">
-    <thead>
-      <tr>
-        <th scope="col">ID</th>
-        <th scope="col">Name</th>
-        <th scope="col">Email</th>
-        <th scope="col">Department</th>
-        <th scope="col">Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">1</th>
-        <td><a href="javascript:void(0);">John Doe</a></td>
-        <td><a href="mailto:john.doe@example.com">john.doe@example.com</a></td>
-        <td>Engineering</td>
-        <td>
-          <a href="javascript:void(0);">Edit</a> | 
-          <a href="javascript:void(0);">Delete</a>
-        </td>
-      </tr>
-      <tr>
-        <th scope="row">2</th>
-        <td><a href="javascript:void(0);">Jane Smith</a></td>
-        <td><a href="mailto:jane.smith@example.com">jane.smith@example.com</a></td>
-        <td>Marketing</td>
-        <td>
-          <a href="javascript:void(0);">Edit</a> | 
-          <a href="javascript:void(0);">Delete</a>
-        </td>
-      </tr>
-      <tr>
-        <th scope="row">3</th>
-        <td><a href="javascript:void(0);">Mike Johnson</a></td>
-        <td><a href="mailto:mike.johnson@example.com">mike.johnson@example.com</a></td>
-        <td>Sales</td>
-        <td>
-          <a href="javascript:void(0);">Edit</a> | 
-          <a href="javascript:void(0);">Delete</a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>`;
-
-  // Responsive table wrapper
-  responsiveTableCode = `<!-- Responsive wrapper ensures horizontal scrolling on small screens -->
-<div class="table-responsive">
-  <table class="table">
-    <thead>
-      <tr>
-        <th scope="col">ID</th>
-        <th scope="col">First Name</th>
-        <th scope="col">Last Name</th>
-        <th scope="col">Email</th>
-        <th scope="col">Department</th>
-        <th scope="col">Position</th>
-        <th scope="col">Hire Date</th>
-        <th scope="col">Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">1</th>
-        <td>John</td>
-        <td>Doe</td>
-        <td>john.doe@example.com</td>
-        <td>Engineering</td>
-        <td>Senior Developer</td>
-        <td>2020-01-15</td>
-        <td>Active</td>
-      </tr>
-      <tr>
-        <th scope="row">2</th>
-        <td>Jane</td>
-        <td>Smith</td>
-        <td>jane.smith@example.com</td>
-        <td>Marketing</td>
-        <td>Marketing Manager</td>
-        <td>2019-06-20</td>
-        <td>Active</td>
-      </tr>
-      <tr>
-        <th scope="row">3</th>
-        <td>Mike</td>
-        <td>Johnson</td>
-        <td>mike.johnson@example.com</td>
-        <td>Sales</td>
-        <td>Sales Representative</td>
-        <td>2021-03-10</td>
-        <td>Active</td>
-      </tr>
-    </tbody>
-  </table>
-</div>`;
-}