Merge branch 'ncross-layout'

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

@@ -1,6 +1,45 @@
-<ul>
-    <li><a routerLink="/clients" routerLinkActive="text-red-500">Clients</a></li>
-    <li><a routerLink="/psr" routerLinkActive="text-red-500">PSR</a></li>
-</ul>
+<!-- header -->
+<header class="justify-between items-end grid grid-cols-3 py-4 px-6">
+    <!-- col one -->
+    <div>&nbsp;</div>
+    <!-- col two -->
+    <nav class="nav flex flex-1 justify-center h-[30px]">
+        <div class="px-5 border-r border-r-gray-100"><a routerLink="/clients" routerLinkActive="text-gray-100 border-b border-b-orange-500/100" class="inline-block text-center font-bold text-sm text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]">Clients</a></div>
+        <div class="px-5 border-r border-r-gray-100"><a routerLink="/psr" routerLinkActive="text-gray-100 border-b border-b-orange-500/100" class="inline-block text-center font-bold text-sm text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]">PSR</a></div>
+        <div class="px-5"><a routerLink="/my-stuff" routerLinkActive="text-gray-100 border-b border-b-orange-500/100" class="inline-block text-center font-bold text-sm text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]">My Stuff</a></div>
+    </nav>
+    <!-- col three -->
+    <div class="flex column justify-end items-center">
+        <!-- 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">
+                    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">
+                            <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+                        </svg>
+                    </span>
+                </button>
+                <div [ngClass]="{ 'opacity-100': dropdownOpen, 'opacity-0': !dropdownOpen }" class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-sm bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" tabindex="-1">
+                    <a routerLink="/"class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">My Account</a>
+                    <a routerLink="/" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Sign out</a>
+                </div>
+            </div>
+        </div>
+        <div class="inline-block"><a routerLink="/"><img src="/assets/logo.svg" alt="Sanctuary Software Studio, Inc." style="height:30px;"></a></div>
+    </div>
+</header>
 
-<router-outlet></router-outlet>
+<!-- router-outlet -->
+<div class="flex-1">
+    <router-outlet></router-outlet>
+</div>
+
+<!-- footer -->
+<footer class="px-6 py-4">
+    <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>
+</footer>

src/angular/hq/src/app/app.component.ts

@@ -21,6 +21,8 @@ export class AppComponent {
   title = 'HQ';
   appSettingsService = inject(AppSettingsService);
   oidcSecurityService = inject(OidcSecurityService);
+
+  dropdownOpen = false;
 
   ngOnInit() {
     this.oidcSecurityService

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

@@ -1,5 +1,25 @@
-<router-outlet></router-outlet>
+<div class="px-6">
+    <h1 class="font-rajdhani font-semibold text-3xl">[Client Name Here]</h1>
 
-<a routerLink="projects" routerLinkActive="text-red-500">Projects</a><br />
-<a routerLink="quotes" routerLinkActive="text-red-500">Quotes</a><br />
-<a routerLink="services" routerLinkActive="text-red-500">Services</a>
+    <div class="grid gap-2 grid-flow-row lg:grid-flow-col lg:gap-7 auto-cols-max pt-3 text-sm">
+        <div class="text-gray-50">$105.00</div>
+        <div class="text-gray-50">billingEmail&#64;clientDomain.com</div>
+        <div class="text-gray-50">Official Name - Probably longer than the name</div>
+    </div>
+</div>
+
+<div class="px-6 pt-3">
+    <div class="flex flex-col lg:flex-row justify-between items-center">
+        <div class="order-2 lg:order-1">
+            Search, Dropdown, Toggle Here
+        </div>
+        <div class="flex divide-x order-1 lg:order-2">
+            <a routerLink="projects" routerLinkActive="bg-blue-900" class="text-gray-100 bg-black-alt px-8 py-3 text-sm font-bold hover:bg-blue-900">Projects</a>
+            <a routerLink="quotes" routerLinkActive="bg-blue-900" class="text-gray-100 bg-black-alt px-8 py-3 text-sm font-bold hover:bg-blue-900">Quotes</a>
+            <a routerLink="services" routerLinkActive="bg-blue-900" class="text-gray-100 bg-black-alt px-8 py-3 text-sm font-bold hover:bg-blue-900">Services</a>
+            <a routerLink="invoices" routerLinkActive="bg-blue-900" class="text-gray-100 bg-black-alt px-8 py-3 text-sm font-bold hover:bg-blue-900">Invoices</a>
+        </div>
+    </div>
+</div>
+
+<router-outlet></router-outlet>

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

@@ -1 +1,2 @@
-<p>client-project-list works!</p>
+
+<p>client-project-list works!</p>

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

@@ -1 +1,2 @@
-<p>client-quote-list works!</p>
+
+    <p>client-quote-list works!</p>

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

@@ -1 +1,2 @@
-<p>client-service-list works!</p>
+
+    <p>client-service-list works!</p>

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

@@ -1,5 +1,13 @@
-<p>client-list works!</p>
+<div class="px-6">
+    <h1 class="font-rajdhani font-semibold text-3xl">Clients</h1>
 
-<a routerLink="someId1">Some ID 1</a><br />
-<a routerLink="someId2">Some ID 2</a><br />
-<a routerLink="someId3">Some ID 3</a>
+    <div class="grid gap-7 grid-flow-col auto-cols-max pt-3 text-sm">
+        &nbsp;
+    </div>
+</div>
+
+<div class="px-6 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>
+</div>

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

@@ -1 +1,7 @@
-<p>psrdetails works!</p>
+<div class="px-6">
+    <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 text-sm">
+        <div class="text-gray-50">Dencar Technology</div>
+    </div>
+</div>

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

@@ -1,5 +1,15 @@
-<p>psrlist works!</p>
+<div class="px-6">
+    <h1 class="font-rajdhani font-semibold text-3xl">PSR</h1>
 
-<a routerLink="someId1">Some ID 1</a><br />
-<a routerLink="someId2">Some ID 2</a><br />
-<a routerLink="someId3">Some ID 3</a>
+    <div class="grid gap-7 grid-flow-col auto-cols-max pt-3 text-sm">
+        <div class="text-gray-50">$105.00</div>
+        <div class="text-gray-50">billingEmail&#64;clientDomain.com</div>
+        <div class="text-gray-50">Official Name - Probably longer than the name</div>
+    </div>
+</div>
+
+<div class="px-6 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>
+</div>

src/angular/hq/src/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="h-full bg-gray-100" lang="en">
+<html class="h-full bg-gray-900" lang="en">
 <head>
   <meta charset="utf-8">
   <title>HQ</title>
@@ -8,8 +8,11 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap&family=Rajdhani:wght@300;400;500;600;700&display=swap');
+  </style>
 </head>
 <body class="mat-typography h-full">
-  <app-root></app-root>
+  <app-root class="flex flex-col h-full"></app-root>
 </body>
 </html>

src/angular/hq/src/styles.scss

@@ -106,5 +106,8 @@ $HQ-theme: mat.define-light-theme((
 @tailwind components;
 @tailwind utilities;
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html, body { 
+  height: 100%; 
+  @apply text-gray-100;
+}
+body { margin: 0; font-family: "Open Sans", Roboto, "Helvetica Neue", sans-serif; }

src/angular/hq/tailwind.config.js

@@ -4,6 +4,10 @@ module.exports = {
     "./src/**/*.{html,ts}",
   ],
   theme: {
+    fontFamily: {
+      'rajdhani': ['rajdhani', 'sans-serif'],
+      'open-sans': ['open-sans', 'sans-serif']
+    },
     extend: {
       colors: {
         orange: {
@@ -31,10 +35,49 @@ module.exports = {
           800: '#94300c',
           900: '#7a280d',
           950: '#461302',
-        }
+        },
+        blue: {
+          '50': '#f5f7fa',
+          '100': '#ebeef3',
+          '200': '#d3dae4',
+          '300': '#abbbce',
+          '400': '#7e96b2',
+          '500': '#5e7a99',
+          '600': '#4a617f',
+          '700': '#3d4f67',
+          '800': '#354357',
+          '900': '#28313e',
+          '950': '#202631',
+        },
+        'steel-blue': {
+          '50': '#f3f8fb',
+          '100': '#e4edf5',
+          '200': '#cfe0ee',
+          '300': '#afcce1',
+          '400': '#88b0d2',
+          '500': '#6c96c5',
+          '600': '#537bb5',
+          '700': '#4e6da7',
+          '800': '#445b89',
+          '900': '#3a4d6e',
+          '950': '#273144',
+        },
+        gray: {
+          '50': '#b3b3b3',
+          '100': '#e9e9e9',
+          '200': '#d1d1d1',
+          '300': '#b0b0b0',
+          '400': '#888888',
+          '500': '#6d6d6d',
+          '600': '#5d5d5d',
+          '700': '#4f4f4f',
+          '800': '#454545',
+          '900': '#3e3e3e',
+          '950': '#262626',
+        },
+        'black-alt': "#242424"
       }
     },
   },
   plugins: [],
-}
-
+}