-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
48ccd06
commit aa09be3
Showing
2 changed files
with
772 additions
and
696 deletions.
There are no files selected for viewing
266 changes: 171 additions & 95 deletions
266
src/angular/hq/src/app/projects/project-list/project-list.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,108 +1,184 @@ | ||
| <div class="px-5"> | ||
| <h1 class="font-rajdhani font-semibold text-3xl">P1006: POS</h1> | ||
| <div class="h-[calc(100dvh-106px)] fixed top-70 left-0 w-full flex flex-col"> | ||
| <div class="px-5"> | ||
| <h1 class="font-rajdhani font-semibold text-3xl">P1006: POS</h1> | ||
|
|
||
| <div class="flex flex-col xl:flex-row xl:justify-between xl:items-center"> | ||
| <div class="grid grid-flow-col gap-[30px] auto-cols-max pt-3"> | ||
| <div class="text-gray-50">$105.00</div> | ||
| <div class="text-gray-50">billingEmail@clientDomain.com</div> | ||
| <div class="text-gray-50"><a href="#" class="underline">Official Name - Probably longer than the name</a></div> | ||
| </div> | ||
|
|
||
| <div class="flex flex-row auto-cols-min gap-[2.983rem] pt-3 justify-end xl:pt-0"> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">Start / End Date</div> | ||
| <div class="text-right">MM/DD/YYYY - MM/DD/YYYY</div> | ||
| </div> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">HRS Last</div> | ||
| <div class="text-right">00000.00</div> | ||
| </div> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">HRS This</div> | ||
| <div class="text-right">00000.00</div> | ||
| <div class="flex flex-col xl:flex-row xl:justify-between xl:items-center"> | ||
| <div class="grid grid-flow-col gap-[30px] auto-cols-max pt-3"> | ||
| <div class="text-gray-50">$105.00</div> | ||
| <div class="text-gray-50">billingEmail@clientDomain.com</div> | ||
| <div class="text-gray-50"><a href="#" class="underline">Official Name - Probably longer than the name</a></div> | ||
| </div> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">Total HRS</div> | ||
| <div class="text-right">00000.00</div> | ||
| </div> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">HRS Avail.</div> | ||
| <div class="text-right">00000.00</div> | ||
| </div> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">Budget Avail.</div> | ||
| <div class="text-right">17%</div> | ||
|
|
||
| <div class="flex flex-row auto-cols-min gap-[2.983rem] pt-3 justify-end xl:pt-0"> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">Start / End Date</div> | ||
| <div class="text-right">MM/DD/YYYY - MM/DD/YYYY</div> | ||
| </div> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">HRS Last</div> | ||
| <div class="text-right">00000.00</div> | ||
| </div> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">HRS This</div> | ||
| <div class="text-right">00000.00</div> | ||
| </div> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">Total HRS</div> | ||
| <div class="text-right">00000.00</div> | ||
| </div> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">HRS Avail.</div> | ||
| <div class="text-right">00000.00</div> | ||
| </div> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">Budget Avail.</div> | ||
| <div class="text-right">17%</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="px-5 mb-[8px]"> | ||
| <div class="flex flex-col lg:flex-row justify-between items-start"> | ||
| <div class="flex items-end order-2 lg:order-1 gap-[20px]"> | ||
| <!-- search bar --> | ||
| <div class="relative flex items-stretch border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[36px] w-[395px]"> | ||
| <span class="relative flex items-center justify-center text-center whitespace-nowrap w-[36px] hover:cursor-pointer after:block after:w-[1px] after:absolute after:right-[1px] after:top-[6px] after:bottom-[6px] after:bg-gray-100"> | ||
| <i class="bi bi-search text-[14px]"></i> | ||
| </span> | ||
| <input | ||
| type="text" | ||
| class="w-[100%] block text-[14px] px-2 py-1 appearance-none focus:outline-none hover:cursor-pointer font-medium bg-inherit rounded" | ||
| name="" | ||
| /> | ||
| </div> | ||
|
|
||
| <!-- Is this a button? --> | ||
| <div class="relative flex items-stretch border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[36px] w-[205px]"> | ||
| <input | ||
| type="text" | ||
| class="w-[100%] block text-[14px] text-center px-2 py-1 appearance-none focus:outline-none hover:cursor-pointer font-medium bg-inherit rounded" | ||
| name="" | ||
| value="Activities" | ||
| /> | ||
| </div> | ||
| <div class="px-5 mb-[8px]"> | ||
| <div class="flex flex-col lg:flex-row justify-between items-start"> | ||
| <div class="flex items-end order-2 lg:order-1 gap-[20px]"> | ||
| <!-- search bar --> | ||
| <div class="relative flex items-stretch border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[36px] w-[395px]"> | ||
| <span class="relative flex items-center justify-center text-center whitespace-nowrap w-[36px] hover:cursor-pointer after:block after:w-[1px] after:absolute after:right-[1px] after:top-[6px] after:bottom-[6px] after:bg-gray-100"> | ||
| <i class="bi bi-search text-[14px]"></i> | ||
| </span> | ||
| <input | ||
| type="text" | ||
| class="w-[100%] block text-[14px] px-2 py-1 appearance-none focus:outline-none hover:cursor-pointer font-medium bg-inherit rounded" | ||
| name="" | ||
| /> | ||
| </div> | ||
| <!-- Is this a button? --> | ||
| <div class="relative flex items-stretch border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[36px] w-[205px]"> | ||
| <input | ||
| type="text" | ||
| class="w-[100%] block text-[14px] text-center px-2 py-1 appearance-none focus:outline-none hover:cursor-pointer font-medium bg-inherit rounded" | ||
| name="" | ||
| value="Activities" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="pl-[5vw]"> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">Total Billed</div> | ||
| <div class="text-right font-rajdhani font-semibold text-3xl">00000.00</div> | ||
| <div class="pl-[5vw]"> | ||
| <div> | ||
| <div class="text-xs text-right uppercase font-bold tracking-[.06em]">Total Billed</div> | ||
| <div class="text-right font-rajdhani font-semibold text-3xl">00000.00</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid grid-cols-[405px_1fr] gap-0"> | ||
| <aside class="sticky top-0 h-screen overflow-y-auto"> | ||
| <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">PSR week of <!-- sorted by client name --><i class="bi bi-sort-down ml-2"></i></th> | ||
| <th scope="col" colspan="2" class="bg-blue-900 border-steel-blue-600 border-y py-3">Total Hrs <i class="bi bi-arrow-down-up text-[12px] ml-2"></i></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">MM/DD/YYYY</td> | ||
| <td class="border-b border-black py-2">0000.00</td> | ||
| <td class="border-b border-black py-2 text-right pr-5"><a class="text-teal-200 hover:text-teal-300">VIEW</a></td> | ||
| </tr> | ||
| } | ||
| </tbody> | ||
| </table> | ||
| </aside> | ||
| <main class="bg-black-alt border-steel-blue-600 border-t"> | ||
| <div class="border-b border-black pt-[23px]"> | ||
| <div class="flex"> | ||
| <a routerLink="projects" routerLinkActive="border-gray-100" class="min-w-[120px] text-center whitespace-nowrap px-3 py-1 font-bold border-b border-transparent hover:border-gray-100">PM Report</a> | ||
| <a routerLink="quotes" routerLinkActive="border-gray-100" class="min-w-[120px] text-center whitespace-nowrap px-3 py-1 font-bold border-b border-transparent hover:border-gray-100">PSR</a> | ||
| </div> | ||
| </div> | ||
| <div class="p-4"> | ||
| # HQ # An overview of the objects/entities in HQ that includes information to define object properties, outline UX content for wireframing, and software development. ## Book ## Book consists of expected billable work to be performed against projects. Book entries are created manually or are periodically generated based on project configuration. ### Properties ### * Charge Code * Start Date * End Date * Hours ### View ### * Display the project and book info * Table of time associated with this book entry * Charge Code match * Time entry between Start Date and End Date ## Book and Bill ## Display a table of combination of the booked and billed hours for charge codes. The time resolution is in months. An example of this display will need to be put together. ## Client ## The client entity represents a SANCSOFT customer. ### Properties ### * Name: varchar(16) * Official Name: varchar(max) * Billing Email Address: varchar(max) * Hourly Rate ### List ### * Name * Official Name * Hourly Rate * Email Link ### View ### * Title: Name * Summary Information * Official Name * Email link * Hourly Rate * Invoice Summary * This month to date * Last month to date * This year to date * All time to date * Project Table: This Client * Status (open/closed/hold/other?) * Charge Code (ex: X0000) * Expanded Charge Code (ex: Client:Project:Code) * Project Name: Project full name * Last Month (hours worked/hours allocated) * This Month (hours worked/hours allocated) * Filter to open projects by default * Quotes Table: This Client, Create Link * Quote Number: Q0000 * Quote Status: Draft, Waiting for Sale, Waiting for Client, Waiting for Staff,... * Quote Name: trim to fit display * Quote Date: revision date of quote * Quote Value: estimated value of the quote (Numeric) * Quote PDF link * Services Table: This Client, Create Link * Charge Expanded Code * Service Status * Start - End date * Price info * Cost info * Invoice Table: This Client * Invoice Number * Invoice Date * Invoice Total * Invoice PDF link | ||
| <div class="overflow-hidden flex-auto"> | ||
| <div class="grid grid-cols-[405px_1fr] gap-0 relative"> | ||
| <aside class="border-r border-black sticky top-0 overflow-y-auto h-[calc(100dvh-245px)]"> | ||
| <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">PSR week of <!-- sorted by client name --><i class="bi bi-sort-down ml-2"></i></th> | ||
| <th scope="col" colspan="2" class="bg-blue-900 border-steel-blue-600 border-y py-3">Total Hrs <i class="bi bi-arrow-down-up text-[12px] ml-2"></i></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">MM/DD/YYYY</td> | ||
| <td class="border-b border-black py-2">0000.00</td> | ||
| <td class="border-b border-black py-2 text-right pr-5"><a class="text-teal-200 hover:text-teal-300">VIEW</a></td> | ||
| </tr> | ||
| } | ||
| </tbody> | ||
| </table> | ||
| </aside> | ||
| <main class="bg-black-alt overflow-y-auto h-[calc(100dvh-245px)]"> | ||
| <div class="bg-black-alt border-steel-blue-600 border-t pt-[23px] sticky top-0"> | ||
| <div class="flex border-b border-black"> | ||
| <a routerLink="projects" routerLinkActive="border-gray-100" class="min-w-[120px] text-center whitespace-nowrap px-3 py-1 font-bold border-b border-transparent hover:border-gray-100">PM Report</a> | ||
| <a routerLink="quotes" routerLinkActive="border-gray-100" class="min-w-[120px] text-center whitespace-nowrap px-3 py-1 font-bold border-b border-transparent hover:border-gray-100">PSR</a> | ||
| </div> | ||
| </div> | ||
| <div class="p-4"> | ||
| <h1 id="hq">HQ</h1> | ||
| <p>An overview of the objects/entities in HQ that includes information to define object properties, outline UX content for wireframing, and software development.</p> | ||
| <h2 id="book">Book</h2> | ||
| <p>Book consists of expected billable work to be performed against projects. Book entries are created manually or are periodically generated based on project configuration.</p> | ||
| <h3 id="properties">Properties</h3> | ||
| <ul> | ||
| <li>Charge Code </li> | ||
| <li>Start Date </li> | ||
| <li>End Date </li> | ||
| <li>Hours</li> | ||
| </ul> | ||
| <h3 id="view">View</h3> | ||
| <ul> | ||
| <li>Display the project and book info </li> | ||
| <li>Table of time associated with this book entry * Charge Code match </li> | ||
| <li>Time entry between Start Date and End Date</li> | ||
| </ul> | ||
| <h2 id="book-and-bill">Book and Bill</h2> | ||
| <p>Display a table of combination of the booked and billed hours for charge codes. The time resolution is in months. An example of this display will need to be put together. </p> | ||
| <h2 id="client">Client</h2> | ||
| <p>The client entity represents a SANCSOFT customer. </p> | ||
| <h3 id="properties">Properties</h3> | ||
| <ul> | ||
| <li>Name: varchar(16)</li> | ||
| <li>Official Name: varchar(max)</li> | ||
| <li>Billing Email Address: varchar(max)</li> | ||
| <li>Hourly Rate </li> | ||
| </ul> | ||
| <h3 id="list">List</h3> | ||
| <ul> | ||
| <li>Name </li> | ||
| <li>Official Name </li> | ||
| <li>Hourly Rate </li> | ||
| <li>Email Link </li> | ||
| </ul> | ||
| <h3 id="view">View</h3> | ||
| <ul> | ||
| <li>Title: Name </li> | ||
| <li>Summary Information </li> | ||
| <li>Official Name </li> | ||
| <li>Email link </li> | ||
| <li>Hourly Rate </li> | ||
| <li>Invoice Summary </li> | ||
| <li>This month to date </li> | ||
| <li>Last month to date </li> | ||
| <li>This year to date </li> | ||
| <li>All time to date </li> | ||
| <li>Project Table: This Client </li> | ||
| <li>Status (open/closed/hold/other?) </li> | ||
| <li>Charge Code (ex: X0000) </li> | ||
| <li>Expanded Charge Code (ex: Client:Project:Code)</li> | ||
| <li>Project Name: Project full name </li> | ||
| <li>Last Month (hours worked/hours allocated) </li> | ||
| <li>This Month (hours worked/hours allocated) </li> | ||
| <li>Filter to open projects by default </li> | ||
| <li>Quotes Table: This Client, Create Link </li> | ||
| <li>Quote Number: Q0000 </li> | ||
| <li>Quote Status: Draft, Waiting for Sale, Waiting for Client, Waiting for Staff,... </li> | ||
| <li>Quote Name: trim to fit display </li> | ||
| <li>Quote Date: revision date of quote </li> | ||
| <li>Quote Value: estimated value of the quote (Numeric) </li> | ||
| <li>Quote PDF link </li> | ||
| <li>Services Table: This Client, Create Link * Charge Expanded Code </li> | ||
| <li>Service Status </li> | ||
| <li>Start - End date </li> | ||
| <li>Price info </li> | ||
| <li>Cost info </li> | ||
| <li>Invoice Table: This Client </li> | ||
| <li>Invoice Number </li> | ||
| <li>Invoice Date </li> | ||
| <li>Invoice Total </li> | ||
| <li>Invoice PDF link</li> | ||
| </ul> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| </div> |
Oops, something went wrong.