Setup a companies list page with dummy data.

src/lib/index.ts

@@ -1,3 +1,7 @@
 // place files you want to import through the `$lib` alias in this folder.
+
+/**
+ * @TODO MAKE THIS WORK
+ */
 //export * from "./axios";
 export * from "./user";

src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script>
-  import { goto } from '$app/navigation';
+  import { goto } from "$app/navigation";
 
   function signOut() {
     // replace with your auth sign-out logic
-    goto('/logout');
+    goto("/logout");
   }
 </script>
 
@@ -14,6 +14,7 @@
 <header class="header container">
   <h1>App Home</h1>
   <nav>
+    <a href="/companies">Companies</a>
     <a href="/projects">Projects</a>
     <a href="/settings">Settings</a>
     <a href="/profile">Profile</a>
@@ -24,7 +25,10 @@
 <main class="container">
   <section class="hero">
     <h2>Welcome back</h2>
-    <p>This is your protected home page. Quick links and recent activity appear below.</p>
+    <p>
+      This is your protected home page. Quick links and recent activity appear
+      below.
+    </p>
   </section>
 
   <section class="grid">
@@ -48,15 +52,69 @@
 </footer>
 
 <style>
-  :global(body) { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:#f7f7f8; color:#111; }
+  :global(body) {
-  .container { max-width: 960px; margin: 0 auto; padding: 1rem; }
+    margin: 0;
-  header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e5e7eb; background: #fff; }
+    font-family:
-  nav { display:flex; gap: .5rem; align-items:center; }
+      system-ui,
-  nav a { color:#0366d6; text-decoration:none; padding:.25rem .5rem; }
+      -apple-system,
-  nav button { background:#ef4444; color:#fff; border:0; padding:.4rem .6rem; border-radius:6px; cursor:pointer; }
+      "Segoe UI",
-  main { padding: 1.5rem 0; }
+      Roboto,
-  .hero h2 { margin:0 0 .5rem 0; }
+      "Helvetica Neue",
-  .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; margin-top:1rem; }
+      Arial;
-  .card { background:#fff; border:1px solid #e5e7eb; padding:1rem; border-radius:8px; }
+    background: #f7f7f8;
-  footer { text-align:center; padding:1rem 0; color:#6b7280; }
+    color: #111;
-</style>
+  }
+  .container {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 1rem;
+  }
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e5e7eb;
+    background: #fff;
+  }
+  nav {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  nav a {
+    color: #0366d6;
+    text-decoration: none;
+    padding: 0.25rem 0.5rem;
+  }
+  nav button {
+    background: #ef4444;
+    color: #fff;
+    border: 0;
+    padding: 0.4rem 0.6rem;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  main {
+    padding: 1.5rem 0;
+  }
+  .hero h2 {
+    margin: 0 0 0.5rem 0;
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+  }
+  .card {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    padding: 1rem;
+    border-radius: 8px;
+  }
+  footer {
+    text-align: center;
+    padding: 1rem 0;
+    color: #6b7280;
+  }
+</style>

src/routes/companies/+page.svelte

@@ -0,0 +1,347 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+
+  // Dummy data - 100 companies for pagination demo
+  const dummyCompanies = Array.from({ length: 100 }, (_, i) => ({
+    id: i + 1,
+    name: `Company ${i + 1}`,
+    cw_CompanyId: `CW-${String(i + 1).padStart(5, "0")}`,
+    cw_Identifier: `ID-${String(i + 1).padStart(5, "0")}`,
+  }));
+
+  let currentPage = 1;
+  let searchQuery = "";
+  const itemsPerPage = 30; // 3 columns x 10 rows
+
+  $: totalPages = Math.ceil(dummyCompanies.length / itemsPerPage);
+  $: startIndex = (currentPage - 1) * itemsPerPage;
+  $: endIndex = startIndex + itemsPerPage;
+  $: displayedCompanies = dummyCompanies.slice(startIndex, endIndex);
+
+  function goToPage(page: number) {
+    if (page >= 1 && page <= totalPages) {
+      currentPage = page;
+    }
+  }
+
+  function signOut() {
+    goto("/logout");
+  }
+</script>
+
+<svelte:head>
+  <title>Companies — App</title>
+</svelte:head>
+
+<header class="header container">
+  <h1>Companies</h1>
+  <nav>
+    <a href="/">Home</a>
+    <a href="/settings">Settings</a>
+    <a href="/profile">Profile</a>
+    <button on:click={signOut}>Sign out</button>
+  </nav>
+</header>
+
+<main class="container">
+  <section class="hero">
+    <h2>Company Directory</h2>
+    <p>Browse all companies. Total: {dummyCompanies.length} companies</p>
+  </section>
+
+  <section class="search-section">
+    <input
+      type="text"
+      placeholder="Search companies by name, ID, or identifier..."
+      bind:value={searchQuery}
+      class="search-bar"
+    />
+  </section>
+
+  <section class="companies-grid">
+    {#each displayedCompanies as company (company.id)}
+      <article class="company-card">
+        <h3>{company.name}</h3>
+        <dl>
+          <dt>ID</dt>
+          <dd>{company.id}</dd>
+          <dt>CW Company ID</dt>
+          <dd>{company.cw_CompanyId}</dd>
+          <dt>CW Identifier</dt>
+          <dd>{company.cw_Identifier}</dd>
+        </dl>
+        <a href="/company/{company.id}" class="view-link">View Details</a>
+      </article>
+    {/each}
+  </section>
+
+  {#if totalPages > 1}
+    <section class="pagination">
+      <button
+        on:click={() => goToPage(currentPage - 1)}
+        disabled={currentPage === 1}
+        class="pagination-btn"
+      >
+        ← Previous
+      </button>
+
+      <div class="page-numbers">
+        {#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
+          <button
+            on:click={() => goToPage(page)}
+            class="page-number {page === currentPage ? 'active' : ''}"
+          >
+            {page}
+          </button>
+        {/each}
+      </div>
+
+      <button
+        on:click={() => goToPage(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        class="pagination-btn"
+      >
+        Next →
+      </button>
+
+      <span class="page-info">
+        Page {currentPage} of {totalPages}
+      </span>
+    </section>
+  {/if}
+</main>
+
+<footer class="container">
+  <small>© {new Date().getFullYear()} Your App</small>
+</footer>
+
+<style>
+  :global(body) {
+    margin: 0;
+    font-family:
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial;
+    background: #f7f7f8;
+    color: #111;
+  }
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem;
+  }
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e5e7eb;
+    background: #fff;
+  }
+  nav {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  nav a {
+    color: #0366d6;
+    text-decoration: none;
+    padding: 0.25rem 0.5rem;
+  }
+  nav button {
+    background: #ef4444;
+    color: #fff;
+    border: 0;
+    padding: 0.4rem 0.6rem;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  main {
+    padding: 1.5rem 0;
+  }
+  .hero h2 {
+    margin: 0 0 0.5rem 0;
+  }
+  .hero p {
+    margin: 0;
+    color: #6b7280;
+  }
+
+  .search-section {
+    margin: 1.5rem 0;
+  }
+
+  .search-bar {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    background: #fff;
+    color: #111;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+  }
+
+  .search-bar:focus {
+    outline: none;
+    border-color: #0366d6;
+    box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
+  }
+
+  .search-bar::placeholder {
+    color: #9ca3af;
+  }
+
+  .companies-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+    margin: 2rem 0;
+  }
+
+  .company-card {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 1.5rem;
+    transition:
+      box-shadow 0.2s,
+      border-color 0.2s;
+  }
+
+  .company-card:hover {
+    border-color: #0366d6;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  .company-card h3 {
+    margin: 0 0 1rem 0;
+    color: #111;
+    font-size: 1.1rem;
+  }
+
+  .company-card dl {
+    margin: 0 0 1rem 0;
+    font-size: 0.9rem;
+  }
+
+  .company-card dt {
+    font-weight: 600;
+    color: #6b7280;
+    margin-top: 0.5rem;
+  }
+
+  .company-card dd {
+    margin: 0.25rem 0 0 0;
+    color: #111;
+    font-family: monospace;
+  }
+
+  .view-link {
+    display: inline-block;
+    color: #0366d6;
+    text-decoration: none;
+    padding: 0.5rem 0;
+    font-weight: 500;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.2s;
+  }
+
+  .view-link:hover {
+    border-bottom-color: #0366d6;
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin: 2rem 0;
+    padding: 1rem;
+    background: #fff;
+    border-radius: 8px;
+    border: 1px solid #e5e7eb;
+    flex-wrap: wrap;
+  }
+
+  .pagination-btn {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #0366d6;
+    font-weight: 500;
+    transition: all 0.2s;
+  }
+
+  .pagination-btn:hover:not(:disabled) {
+    background: #0366d6;
+    color: #fff;
+  }
+
+  .pagination-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .page-numbers {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .page-number {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    padding: 0.5rem 0.75rem;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #0366d6;
+    font-weight: 500;
+    transition: all 0.2s;
+    min-width: 2.5rem;
+  }
+
+  .page-number:hover {
+    background: #f3f4f6;
+  }
+
+  .page-number.active {
+    background: #0366d6;
+    color: #fff;
+    border-color: #0366d6;
+  }
+
+  .page-info {
+    color: #6b7280;
+    font-size: 0.9rem;
+    white-space: nowrap;
+  }
+
+  footer {
+    text-align: center;
+    padding: 1rem 0;
+    color: #6b7280;
+  }
+
+  @media (max-width: 768px) {
+    .companies-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .companies-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .pagination {
+      flex-direction: column;
+    }
+  }
+</style>