Table and styling cleanup.

src/angular/hq/src/app/app.component.html

@@ -1,5 +1,5 @@
 <!-- header -->
-<header class="justify-between items-end grid grid-cols-3 py-[20px] px-[30px]">
+<header class="justify-between items-end grid grid-cols-3 py-4 px-5">
     <!-- col one -->
     <div>&nbsp;</div>
     <!-- col two -->
@@ -13,7 +13,7 @@
         <!-- my account dropdown menu -->
         <div class="inline-block pe-10">
             <div class="relative inline-block h-full">
-                <button class="block font-semibold text-[10px] h-full" (click)="dropdownOpen = !dropdownOpen">
+                <button class="block font-semibold text-xs h-full" (click)="dropdownOpen = !dropdownOpen">
                     Last Name, First Name
                     <span>
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill inline-block w-[10px]" viewBox="0 0 16 16">
@@ -37,9 +37,8 @@
 </div>
 
 <!-- footer -->
-<footer class="py-[20px] px-[30px]">
+<footer class="py-4 px-5">
     <div class="flex justify-between">
-        <div class="text-[10px] text-gray-50">&copy;Sanctuary Software Studio Inc.</div>
-        <div class="text-[10px] text-gray-50">1-20 / 200 items</div>
+        <div class="text-xs text-gray-50">&copy;Sanctuary Software Studio Inc.</div>
     </div>
 </footer>

src/angular/hq/src/app/clients/client-details/client-details.component.html

@@ -1,4 +1,4 @@
-<div class="px-[30px]">
+<div class="px-5">
     <h1 class="font-rajdhani font-semibold text-3xl">[Client Name Here]</h1>
 
     <div class="grid gap-[2] grid-flow-row lg:grid-flow-col lg:gap-[30px] auto-cols-max pt-3">
@@ -8,7 +8,7 @@ <h1 class="font-rajdhani font-semibold text-3xl">[Client Name Here]</h1>
     </div>
 </div>
 
-<div class="px-[30px] pt-4">
+<div class="px-5 pt-4">
     <div class="flex flex-col lg:flex-row justify-between items-start">
         <div class="flex items-center order-2 lg:order-1 gap-[30px]">
             <!-- search bar -->
@@ -42,7 +42,7 @@ <h1 class="font-rajdhani font-semibold text-3xl">[Client Name Here]</h1>
                     <label for="switch" class="hidden"></label>
                     <div class="peer h-[14px] w-[33px] rounded-full bg-slate-200 after:absolute after:left-[4px] after:top-[3px] after:h-[8px] after:w-[8px] after:rounded-full after:bg-gray-500 peer-checked:after:bg-white after:transition-all after:content-[''] peer-checked:bg-steel-blue-600 peer-checked:after:translate-x-full peer-checked:after:right-[12px]  peer-checked:after:left-auto"></div>
                 </label>
-                <div class="text-[10px] ml-[6px]">On</div>
+                <div class="text-xs ml-[6px]">On</div>
             </div>
         </div>
         <div class="flex divide-x order-1 lg:order-2">

src/angular/hq/src/app/clients/client-details/client-project-list/client-project-list.component.html

@@ -1,55 +1 @@
-<table class="min-w-full border-collapse border">
-    <thead class="border">
-      <tr>
-        <th class="">Client Name</th>
-        <th class="">Rate</th>
-        <th class="">Billing Email</th>
-        <th class="">Official Name</th>
-        <th class=""><button>Client</button></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td class="">48HrBooks</td>
-        <td class="">$105.00</td>
-        <td class="">billiningEmail&#64;48HrBooks.com</td>
-        <td class="">Official Name - Probably longer than the Name</td>
-        <td><a>VIEW</a></td>
-      </tr>
-      <tr>
-        <td class="">ABB</td>
-        <td class="">$115.00</td>
-        <td class="">billiningEmail&#64;abb.com</td>
-        <td class="">Official Name - Probably longer than the Name</td>
-        <td><a>VIEW</a></td>
-      </tr>
-      <tr>
-        <td class="">JDM</td>
-        <td class="">$100.00</td>
-        <td class="">billiningEmail&#64;jdm.com</td>
-        <td class="">Official Name - Probably longer than the Name</td>
-        <td><a>VIEW</a></td>
-      </tr>
-      <tr>
-        <td class="">Milliken</td>
-        <td class="">$100.00</td>
-        <td class="">billiningEmail&#64;milliken.com</td>
-        <td class="">Official Name - Probably longer than the Name</td>
-        <td><a>VIEW</a></td>
-      </tr>
-      <tr>
-        <td class="">XB</td>
-        <td class="">$100.00</td>
-        <td class="">billiningEmail&#64;xb.com</td>
-        <td class="">Official Name - Probably longer than the Name</td>
-        <td><a>VIEW</a></td>
-      </tr>
-      <tr>
-        <td class="">Zomedica</td>
-        <td class="">$100.00</td>
-        <td class="">billiningEmail&#64;zomedica.com</td>
-        <td class="">Official Name - Probably longer than the Name</td>
-        <td><a>VIEW</a></td>
-      </tr>
-    </tbody>
-  </table>
+project list

src/angular/hq/src/app/clients/client-list/client-list.component.html

@@ -1,13 +1,53 @@
-<div class="px-[30px]">
+<div class="px-5">
     <h1 class="font-rajdhani font-semibold text-3xl">Clients</h1>
 
     <div class="grid gap-7 grid-flow-col auto-cols-max pt-3">
         &nbsp;
     </div>
 </div>
 
-<div class="px-[30px] pt-3">
-    <a routerLink="someId1">Some ID 1</a><br />
-    <a routerLink="someId2">Some ID 2</a><br />
-    <a routerLink="someId3">Some ID 3</a>
+<table class="min-w-full border-spacing-0 border-separate">
+    <thead>
+        <tr class="sticky top-0 text-left">
+            <th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">Client Name</th>
+            <th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3">Official Name</th>
+            <th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3">Billing Email</th>
+            <th scope="col" class="bg-blue-900 border-steel-blue-600 border-y py-3 text-right pr-5" colspan="2">
+                <button class="px-2 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-[2px] min-w-[120px] font-normal">Client</button>
+            </th>
+        </tr>
+    </thead>
+    <tbody>
+        @for(i of [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]; track i)
+        {
+            <tr class="even:bg-gray-850 odd:bg-black-alt">
+                <td class="border-b border-black py-2 pl-5">Client {{ i }}</td>
+                <td class="border-b border-black py-2">$105.00</td>
+                <td class="border-b border-black py-2">billiningEmail&#64;client{{ i }}.com</td>
+                <td class="border-b border-black py-2">Official Name - Probably longer than the Name</td>
+                <td class="border-b border-black py-2 text-right pr-5"><a [routerLink]="[i]" class="text-teal-200 hover:text-teal-300">VIEW</a></td>
+            </tr>
+        }
+    </tbody>
+</table>
+<div class="justify-between items-center grid grid-cols-3 py-3 px-5 bg-blue-900 border-y border-steel-blue-600">
+    <div>
+        <select class="bg-black-alt border border-gray-300 rounded py-1 px-2 mr-2">
+            <option value="20">20</option>
+            <!-- Add more options as needed -->
+        </select>
+        <span>items per page</span>
+    </div>
+    <div class="flex items-center justify-center">
+        <a href="#" class="mx-2 hover:text-gray-200">&lt;</a>
+        <span class="mx-2">1</span>
+        <a href="#" class="mx-2 hover:text-gray-200">2</a>
+        <a href="#" class="mx-2 hover:text-gray-200">3</a>
+        <a href="#" class="mx-2 hover:text-gray-200">4</a>
+        <a href="#" class="mx-2 hover:text-gray-200">5</a>
+        <a href="#" class="mx-2 hover:text-gray-200">&gt;</a>
+    </div>
+    <div class="flex justify-end text-xs">
+        1-20 / 200 items
+    </div>
 </div>

src/angular/hq/src/app/clients/clients.component.html

@@ -1,121 +1 @@
-<router-outlet></router-outlet>
-
-<div class="overflow-hidden">
-    <div class="px-6">
-    <table class="min-w-full text-left">
-        <thead class="sticky top-0">
-        <tr>
-            <th scope="col" class="py-3 relative">Client Name
-                <div class="bg-blue-900 border-y border-steel-blue-600 absolute top-0 bottom-0 w-screen	-z-10 right-[100%]"></div>
-                <div class="bg-blue-900 border-y border-steel-blue-600 absolute top-0 bottom-0 w-screen	-z-10 left-0"></div>
-            </th>
-            <th scope="col" class="py-3">Official Name</th>
-            <th scope="col" class="py-3">Billing Email</th>
-            <th scope="col" colspan="2" class="py-3 text-right">
-                <button class="px-2 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-[2px] min-w-[120px] font-normal">Client</button>
-            </th>
-        </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td class="py-2 relative">48HrBooks
-                    <div class="bg-gray-850 border-b border-black absolute top-0 bottom-0 w-screen	-z-10 right-[100%]"></div>
-                    <div class="bg-gray-850 border-b border-black absolute top-0 bottom-0 w-screen	-z-10 left-0"></div>
-                </td>
-                <td class="py-2">$105.00</td>
-                <td class="py-2">billiningEmail&#64;48HrBooks.com</td>
-                <td class="py-2">Official Name - Probably longer than the Name</td>
-                <td class="py-2 text-right"><a href="#" class="text-teal-200 hover:text-teal-300">VIEW</a></td>
-            </tr>
-            <tr>
-                <td class="py-2 relative">ABB
-                    <div class="bg-black-alt border-b border-black absolute top-0 bottom-0 w-screen	-z-10 right-[100%]"></div>
-                    <div class="bg-black-alt border-b border-black absolute top-0 bottom-0 w-screen	-z-10 left-0"></div>
-                </td>
-                <td class="py-2">$115.00</td>
-                <td class="py-2">billiningEmail&#64;abb.com</td>
-                <td class="py-2">Official Name - Probably longer than the Name</td>
-                <td class="py-2 text-right"><a href="#" class="text-teal-200 hover:text-teal-300">VIEW</a></td>
-            </tr>
-            <tr>
-                <td class="py-2 relative">JDM
-                    <div class="bg-gray-850 border-b border-black absolute top-0 bottom-0 w-screen	-z-10 right-[100%]"></div>
-                    <div class="bg-gray-850 border-b border-black absolute top-0 bottom-0 w-screen	-z-10 left-0"></div>
-                </td>
-                <td class="py-2">$100.00</td>
-                <td class="py-2">billiningEmail&#64;jdm.com</td>
-                <td class="py-2">Official Name - Probably longer than the Name</td>
-                <td class="py-2 text-right"><a href="#" class="text-teal-200 hover:text-teal-300">VIEW</a></td>
-            </tr>
-            <tr>
-                <td class="py-2 relative">Milliken
-                    <div class="bg-black-alt border-b border-black absolute top-0 bottom-0 w-screen	-z-10 right-[100%]"></div>
-                    <div class="bg-black-alt border-b border-black absolute top-0 bottom-0 w-screen	-z-10 left-0"></div>
-                </td>
-                <td class="py-2">$100.00</td>
-                <td class="py-2">billiningEmail&#64;milliken.com</td>
-                <td class="py-2">Official Name - Probably longer than the Name</td>
-                <td class="py-2 text-right"><a href="#" class="text-teal-200 hover:text-teal-300">VIEW</a></td>
-            </tr>
-            <tr>
-                <td class="py-2 relative">XB
-                    <div class="bg-gray-850 border-b border-black absolute top-0 bottom-0 w-screen	-z-10 right-[100%]"></div>
-                    <div class="bg-gray-850 border-b border-black absolute top-0 bottom-0 w-screen	-z-10 left-0"></div>
-                </td>
-                <td class="py-2">$100.00</td>
-                <td class="py-2">billiningEmail&#64;xb.com</td>
-                <td class="py-2">Official Name - Probably longer than the Name</td>
-                <td class="py-2 text-right"><a href="#" class="text-teal-200 hover:text-teal-300">VIEW</a></td>
-            </tr>
-            <tr>
-                <td class="py-2 relative">Zomedica
-                    <div class="bg-black-alt border-b border-black absolute top-0 bottom-0 w-screen	-z-10 right-[100%]"></div>
-                    <div class="bg-black-alt border-b border-black absolute top-0 bottom-0 w-screen	-z-10 left-0"></div>
-                </td>
-                <td class="py-2">$100.00</td>
-                <td class="py-2">billiningEmail&#64;zomedica.com</td>
-                <td class="py-2">Official Name - Probably longer than the Name</td>
-                <td class="py-2 text-right"><a href="#" class="text-teal-200 hover:text-teal-300">VIEW</a></td>
-            </tr>
-            <tr>
-                <td class="py-2 relative">48HrBooks
-                    <div class="bg-gray-850 border-b border-black absolute top-0 bottom-0 w-screen	-z-10 right-[100%]"></div>
-                    <div class="bg-gray-850 border-b border-black absolute top-0 bottom-0 w-screen	-z-10 left-0"></div>
-                </td>
-                <td class="py-2">$105.00</td>
-                <td class="py-2">billiningEmail&#64;48HrBooks.com</td>
-                <td class="py-2">Official Name - Probably longer than the Name</td>
-                <td class="py-2 text-right"><a href="#" class="text-teal-200 hover:text-teal-300">VIEW</a></td>
-            </tr>
-        </tbody>
-        <tfoot>
-            <tr>
-                <td class="py-3 relative">
-                    <div class="flex">
-                        <div class="flex-none">
-                            <select class="bg-black-alt border border-gray-300 rounded py-1 px-2">
-                                <option value="20">20</option>
-                                <!-- Add more options as needed -->
-                            </select>
-                            <span>items per page</span>
-                        </div>                        
-                    </div>                    
-                    <div class="bg-blue-900 border-y border-steel-blue-600 absolute top-0 bottom-0 w-screen	-z-10 right-[100%]"></div>
-                    <div class="bg-blue-900 border-y border-steel-blue-600 absolute top-0 bottom-0 w-screen	-z-10 left-0"></div>
-                </td>
-                <td class="py-3">
-                    <div class="flex items-center">
-                        <a href="#" class="mx-2 hover:text-gray-200">&lt;</a>
-                        <span class="mx-2">1</span>
-                        <a href="#" class="mx-2 hover:text-gray-200">2</a>
-                        <a href="#" class="mx-2 hover:text-gray-200">3</a>
-                        <a href="#" class="mx-2 hover:text-gray-200">4</a>
-                        <a href="#" class="mx-2 hover:text-gray-200">5</a>
-                        <a href="#" class="mx-2 hover:text-gray-200">&gt;</a>
-                    </div>
-                </td>
-            </tr>
-        </tfoot>
-    </table>
-    </div>
-</div>
+<router-outlet></router-outlet>

src/angular/hq/src/app/psr/psrdetails/psrdetails.component.html

@@ -1,4 +1,4 @@
-<div class="px-[30px]">
+<div class="px-5">
     <h1 class="font-rajdhani font-semibold text-3xl">P 1006; POS</h1>
 
     <div class="grid gap-7 grid-flow-col auto-cols-max pt-3">

src/angular/hq/src/app/psr/psrlist/psrlist.component.html

@@ -1,4 +1,4 @@
-<div class="px-[30px]">
+<div class="px-5">
     <h1 class="font-rajdhani font-semibold text-3xl">PSR</h1>
 
     <div class="grid gap-[2] grid-flow-row lg:grid-flow-col lg:gap-[30px] auto-cols-max pt-3">
@@ -8,7 +8,7 @@ <h1 class="font-rajdhani font-semibold text-3xl">PSR</h1>
     </div>
 </div>
 
-<div class="px-[30px] pt-3">
+<div class="px-5 pt-3">
     <a routerLink="someId1">Some ID 1</a><br />
     <a routerLink="someId2">Some ID 2</a><br />
     <a routerLink="someId3">Some ID 3</a>

src/angular/hq/tailwind.config.js

@@ -11,6 +11,13 @@ module.exports = {
       sans: ['"Open Sans"', ...defaultTheme.fontFamily.sans]
     },
     extend: {
+      fontSize: {
+        'xs': '10px'
+      },
+      spacing: {
+        '4': '20px',
+        '5': '30px',
+      },
       colors: {
         orange: {
           50: '#fef8ee',