@mindbill/angular 0.11.2 → 0.12.0

package/README.md

@@ -153,6 +153,19 @@ The operations surfaces consume a normalized list of bills, so they can be used
 
 `summarizeMindBillDashboard`, `buildMindBillReportRows`, `buildMindBillReportCsv`, `buildMindBillStatusAgingMatrix`, and `buildMindBillStatusAgingCsv` are also exported for custom layouts and server-side reporting.
 
+`mindbill-bill-tasks-dashboard` is the daisyBill-style Bill Tasks worklist: one tone-colored card per task section, rows bucketed by age in days with clickable counts, and a grand-total card. Aggregate your own work items with `buildBillTasksDashboard` from `@mindbill/browser` (types re-exported here) and pass the result as `[data]`:
+
+```html
+<mindbill-bill-tasks-dashboard
+  [data]="billTasks"
+  heading="Bill Tasks"
+  [appearance]="appearance"
+  (cellSelected)="openWorklist($event)"
+/>
+```
+
+Each emitted cell carries `{ sectionId, rowId, bucketId, refs, count }`, where `bucketId` is `null` for a row's Task Total column and `refs` are the bill references collected by the builder.
+
 ## Organization onboarding and billing settings
 
 `mindbill-organization-onboarding` captures the practice identity, billing provider, locations, and W-9 once — saved straight to your MindBill organization through the browser session. Set `variant="settings"` for the compact edit-after-setup layout.

package/fesm2022/mindbill-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { signal, computed, Input, Component, EventEmitter, effect, Output, Directive, inject, ChangeDetectorRef, HostListener } from '@angular/core';
-import { createBillLifecycleClient, createBillReferenceClient, createBillSubmissionClient, createOrganizationClient } from '@mindbill/browser';
+import { createBillLifecycleClient, BILL_TASKS_AGING_BUCKETS, createBillReferenceClient, createBillSubmissionClient, createOrganizationClient } from '@mindbill/browser';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -817,6 +817,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Output
             }] } });
 
+const MINDBILL_BILL_TASKS_TONES = {
+    violet: "#7c53c3",
+    red: "#cf4437",
+    blue: "#2f7fd1",
+    green: "#2c9a5b",
+    amber: "#d9931f",
+    neutral: "#8195a1",
+};
+const MINDBILL_BILL_TASKS_PILL_BASES = ["#2c9a5b", "#1f9aa8", "#dcbb28", "#e08a2e", "#d75d8a"];
+function mindBillBillTasksTone(tone) {
+    return MINDBILL_BILL_TASKS_TONES[tone] ?? MINDBILL_BILL_TASKS_TONES.neutral;
+}
+function mindBillBillTasksPillBase(index) {
+    return MINDBILL_BILL_TASKS_PILL_BASES[index % MINDBILL_BILL_TASKS_PILL_BASES.length];
+}
+/** Click-through payload for a bucket cell (bucketIndex) or a row total (null). */
+function mindBillBillTasksCell(section, row, bucketIndex, buckets) {
+    if (bucketIndex === null) {
+        return {
+            sectionId: section.id,
+            rowId: row.id,
+            bucketId: null,
+            refs: row.refs.flat(),
+            count: row.total,
+        };
+    }
+    return {
+        sectionId: section.id,
+        rowId: row.id,
+        bucketId: buckets[bucketIndex]?.id ?? null,
+        refs: row.refs[bucketIndex] ?? [],
+        count: row.counts[bucketIndex] ?? 0,
+    };
+}
+
+// daisyBill-style "Bill Tasks" dashboard: one rounded, tone-colored card per
+// task section, rows bucketed by age in days with colored bucket header pills,
+// per-cell click-through counts, and a closing grand-total card. The pure
+// aggregation lives in @mindbill/browser (buildBillTasksDashboard) so React
+// and Angular render the exact same data shape.
+class MindBillBillTasksDashboardComponent {
+    data = null;
+    buckets = BILL_TASKS_AGING_BUCKETS;
+    heading = "";
+    grandTotalLabel = "Bill Tasks Total";
+    emptyLabel = "No Tasks";
+    appearance = { preset: "mindbill" };
+    cellSelected = new EventEmitter();
+    get themeStyle() {
+        return {
+            ...mindBillAngularAppearanceStyle(this.appearance),
+            "--cols": `minmax(150px,1.6fr) repeat(${this.buckets.length},minmax(84px,1fr)) minmax(84px,1fr)`,
+        };
+    }
+    tone(section) {
+        return mindBillBillTasksTone(section.tone);
+    }
+    pillBackground(index) {
+        return `color-mix(in srgb,${mindBillBillTasksPillBase(index)} 20%,var(--s))`;
+    }
+    pillColor(index) {
+        return `color-mix(in srgb,${mindBillBillTasksPillBase(index)} 62%,var(--t))`;
+    }
+    select(section, row, bucketIndex) {
+        this.cellSelected.emit(mindBillBillTasksCell(section, row, bucketIndex, this.buckets));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillTasksDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillTasksDashboardComponent, isStandalone: true, selector: "mindbill-bill-tasks-dashboard", inputs: { data: "data", buckets: "buckets", heading: "heading", grandTotalLabel: "grandTotalLabel", emptyLabel: "emptyLabel", appearance: "appearance" }, outputs: { cellSelected: "cellSelected" }, ngImport: i0, template: `
+    <div class="mbtk" [ngStyle]="themeStyle">
+      @if (heading) { <header class="heading"><h2>{{ heading }}</h2></header> }
+      @for (section of data?.sections ?? []; track section.id) {
+        <section class="card" [style.borderColor]="tone(section)" [attr.aria-label]="section.label">
+          <div class="grid head" [style.borderBottomColor]="tone(section)">
+            <span class="title">
+              <i class="dot" [style.background]="tone(section)"></i>
+              <span class="title-text"><strong>{{ section.label }}</strong><span class="basis">by {{ section.agingBasisLabel }}</span></span>
+            </span>
+            @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+              <span class="pill" [style.background]="pillBackground(bucketIndex)" [style.color]="pillColor(bucketIndex)">{{ bucket.label }}</span>
+            }
+            <span class="colhead">Task Total</span>
+          </div>
+          @if (section.empty) {
+            <p class="empty">{{ emptyLabel }}</p>
+          } @else {
+            @for (row of section.rows; track row.id) {
+              <div class="grid row">
+                <span class="rowlabel">{{ row.label }}</span>
+                @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+                  <span class="count">
+                    @if ((row.counts[bucketIndex] ?? 0) > 0) {
+                      <button type="button" class="link" (click)="select(section, row, bucketIndex)">{{ row.counts[bucketIndex] }}</button>
+                    } @else { <span class="zero">0</span> }
+                  </span>
+                }
+                <span class="total">
+                  @if (row.total > 0) {
+                    <button type="button" class="link" (click)="select(section, row, null)">{{ row.total }}</button>
+                  } @else { <span class="zero">0</span> }
+                </span>
+              </div>
+            }
+            <div class="grid row totals">
+              <span class="rowlabel">Total</span>
+              @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+                <span class="count">{{ section.totals[bucketIndex] ?? 0 }}</span>
+              }
+              <span class="total">{{ section.total }}</span>
+            </div>
+          }
+        </section>
+      }
+      <section class="card grand" [attr.aria-label]="grandTotalLabel">
+        <div class="grid row totals">
+          <span class="rowlabel grand-label">{{ grandTotalLabel }}</span>
+          @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+            <span class="count">{{ data?.grandTotals?.[bucketIndex] ?? 0 }}</span>
+          }
+          <span class="total">{{ data?.grandTotal ?? 0 }}</span>
+        </div>
+      </section>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.mbtk{color:var(--t);font-family:var(--font);font-size:14px}.heading{margin-bottom:14px}.heading h2{margin:0;font-size:24px}.card{margin-bottom:16px;border:1.5px solid var(--b);border-radius:var(--r);background:var(--s);overflow:hidden}.grid{display:grid;grid-template-columns:var(--cols);gap:0 10px;align-items:center;padding:0 16px}.head{padding:12px 16px;border-bottom:1px solid var(--b)}.title{display:flex;align-items:center;gap:9px;min-width:0}.dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%}.title-text{min-width:0}.title-text strong{display:block;font-size:15.5px;line-height:1.3}.basis{display:block;color:var(--m);font-size:12px;line-height:1.35}.pill{justify-self:stretch;padding:5px 6px;border-radius:999px;font-size:11px;font-weight:750;line-height:1.25;text-align:center;white-space:nowrap}.colhead{justify-self:stretch;color:var(--m);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:center;white-space:nowrap}.row{border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);min-height:44px}.row:first-of-type{border-top:0}.rowlabel{color:var(--m);font-size:13px;line-height:1.35;padding:9px 0;overflow-wrap:anywhere}.count,.total{text-align:center;font-variant-numeric:tabular-nums}.zero{color:var(--m)}.link{border:0;background:none;padding:6px 8px;color:var(--a);font:inherit;font-weight:750;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:6px}.link:hover{text-decoration:underline;background:color-mix(in srgb,var(--a) 8%,transparent)}.totals{background:color-mix(in srgb,var(--bg) 78%,var(--s));border-top:1px solid var(--b);font-weight:760}.totals .rowlabel{color:var(--t);font-weight:760}.empty{margin:0;padding:22px 16px;color:var(--m);text-align:center}.grand{border-color:var(--b)}.grand .row{min-height:52px}.grand-label{font-size:14px;font-weight:800}@media(max-width:760px){.pill,.colhead,.count{display:none}.grid{grid-template-columns:minmax(0,1fr) auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillTasksDashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mindbill-bill-tasks-dashboard", standalone: true, imports: [CommonModule], template: `
+    <div class="mbtk" [ngStyle]="themeStyle">
+      @if (heading) { <header class="heading"><h2>{{ heading }}</h2></header> }
+      @for (section of data?.sections ?? []; track section.id) {
+        <section class="card" [style.borderColor]="tone(section)" [attr.aria-label]="section.label">
+          <div class="grid head" [style.borderBottomColor]="tone(section)">
+            <span class="title">
+              <i class="dot" [style.background]="tone(section)"></i>
+              <span class="title-text"><strong>{{ section.label }}</strong><span class="basis">by {{ section.agingBasisLabel }}</span></span>
+            </span>
+            @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+              <span class="pill" [style.background]="pillBackground(bucketIndex)" [style.color]="pillColor(bucketIndex)">{{ bucket.label }}</span>
+            }
+            <span class="colhead">Task Total</span>
+          </div>
+          @if (section.empty) {
+            <p class="empty">{{ emptyLabel }}</p>
+          } @else {
+            @for (row of section.rows; track row.id) {
+              <div class="grid row">
+                <span class="rowlabel">{{ row.label }}</span>
+                @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+                  <span class="count">
+                    @if ((row.counts[bucketIndex] ?? 0) > 0) {
+                      <button type="button" class="link" (click)="select(section, row, bucketIndex)">{{ row.counts[bucketIndex] }}</button>
+                    } @else { <span class="zero">0</span> }
+                  </span>
+                }
+                <span class="total">
+                  @if (row.total > 0) {
+                    <button type="button" class="link" (click)="select(section, row, null)">{{ row.total }}</button>
+                  } @else { <span class="zero">0</span> }
+                </span>
+              </div>
+            }
+            <div class="grid row totals">
+              <span class="rowlabel">Total</span>
+              @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+                <span class="count">{{ section.totals[bucketIndex] ?? 0 }}</span>
+              }
+              <span class="total">{{ section.total }}</span>
+            </div>
+          }
+        </section>
+      }
+      <section class="card grand" [attr.aria-label]="grandTotalLabel">
+        <div class="grid row totals">
+          <span class="rowlabel grand-label">{{ grandTotalLabel }}</span>
+          @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+            <span class="count">{{ data?.grandTotals?.[bucketIndex] ?? 0 }}</span>
+          }
+          <span class="total">{{ data?.grandTotal ?? 0 }}</span>
+        </div>
+      </section>
+    </div>
+  `, styles: [":host{display:block}.mbtk{color:var(--t);font-family:var(--font);font-size:14px}.heading{margin-bottom:14px}.heading h2{margin:0;font-size:24px}.card{margin-bottom:16px;border:1.5px solid var(--b);border-radius:var(--r);background:var(--s);overflow:hidden}.grid{display:grid;grid-template-columns:var(--cols);gap:0 10px;align-items:center;padding:0 16px}.head{padding:12px 16px;border-bottom:1px solid var(--b)}.title{display:flex;align-items:center;gap:9px;min-width:0}.dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%}.title-text{min-width:0}.title-text strong{display:block;font-size:15.5px;line-height:1.3}.basis{display:block;color:var(--m);font-size:12px;line-height:1.35}.pill{justify-self:stretch;padding:5px 6px;border-radius:999px;font-size:11px;font-weight:750;line-height:1.25;text-align:center;white-space:nowrap}.colhead{justify-self:stretch;color:var(--m);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:center;white-space:nowrap}.row{border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);min-height:44px}.row:first-of-type{border-top:0}.rowlabel{color:var(--m);font-size:13px;line-height:1.35;padding:9px 0;overflow-wrap:anywhere}.count,.total{text-align:center;font-variant-numeric:tabular-nums}.zero{color:var(--m)}.link{border:0;background:none;padding:6px 8px;color:var(--a);font:inherit;font-weight:750;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:6px}.link:hover{text-decoration:underline;background:color-mix(in srgb,var(--a) 8%,transparent)}.totals{background:color-mix(in srgb,var(--bg) 78%,var(--s));border-top:1px solid var(--b);font-weight:760}.totals .rowlabel{color:var(--t);font-weight:760}.empty{margin:0;padding:22px 16px;color:var(--m);text-align:center}.grand{border-color:var(--b)}.grand .row{min-height:52px}.grand-label{font-size:14px;font-weight:800}@media(max-width:760px){.pill,.colhead,.count{display:none}.grid{grid-template-columns:minmax(0,1fr) auto}}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], buckets: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], grandTotalLabel: [{
+                type: Input
+            }], emptyLabel: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], cellSelected: [{
+                type: Output
+            }] } });
+
 /** Date helpers shared by the Angular submission surfaces. Mirrors the React
  * package's parseBillSubmissionDate/formatBillSubmissionDate exactly so both
  * frameworks accept and render the same values. */
@@ -2234,5 +2432,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MINDBILL_STATUS_AGING_BUCKETS, MindBillBillAgingSummaryComponent, MindBillBillLifecycleComponent, MindBillBillListComponent, MindBillBillRejectionNoticeComponent, MindBillBillSubmissionComponent, MindBillBillingDashboardComponent, MindBillBillingManagementButtonComponent, MindBillBillingReportComponent, MindBillComboBoxComponent, MindBillDateInputComponent, MindBillLifecycleStore, MindBillOrganizationOnboardingComponent, MindBillStatusAgingMatrixComponent, billRejectionIssueSummary, billRejectionIssues, buildMindBillReportCsv, buildMindBillReportRows, buildMindBillStatusAgingCsv, buildMindBillStatusAgingMatrix, ensureTrailingProcedureLine, formatMindBillSubmissionDate, isEmptyProcedureLine, mindBillAgingBucket, mindBillAgingDays, mindBillAngularAppearanceStyle, mindBillCustomProcedureOption, parseMindBillSubmissionDate, summarizeMindBillDashboard };
+export { MINDBILL_BILL_TASKS_PILL_BASES, MINDBILL_BILL_TASKS_TONES, MINDBILL_STATUS_AGING_BUCKETS, MindBillBillAgingSummaryComponent, MindBillBillLifecycleComponent, MindBillBillListComponent, MindBillBillRejectionNoticeComponent, MindBillBillSubmissionComponent, MindBillBillTasksDashboardComponent, MindBillBillingDashboardComponent, MindBillBillingManagementButtonComponent, MindBillBillingReportComponent, MindBillComboBoxComponent, MindBillDateInputComponent, MindBillLifecycleStore, MindBillOrganizationOnboardingComponent, MindBillStatusAgingMatrixComponent, billRejectionIssueSummary, billRejectionIssues, buildMindBillReportCsv, buildMindBillReportRows, buildMindBillStatusAgingCsv, buildMindBillStatusAgingMatrix, ensureTrailingProcedureLine, formatMindBillSubmissionDate, isEmptyProcedureLine, mindBillAgingBucket, mindBillAgingDays, mindBillAngularAppearanceStyle, mindBillBillTasksCell, mindBillBillTasksPillBase, mindBillBillTasksTone, mindBillCustomProcedureOption, parseMindBillSubmissionDate, summarizeMindBillDashboard };
 //# sourceMappingURL=mindbill-angular.mjs.map