Various UI Consistency Fixes

src/@seed/api/analysis/analysis.types.ts

@@ -116,6 +116,7 @@ export type AnalysisSummary = {
   number_extra_data_fields: number;
   status: string;
   total_records: number;
+  total_sqft: number;
 }
 
 export type AnalysisSummaryStats = {

src/@seed/api/filter-group/filter-group.service.ts

@@ -6,7 +6,13 @@ import { catchError, map, ReplaySubject, take, tap } from 'rxjs'
 import { ErrorService } from '@seed/services'
 import { naturalSort } from '@seed/utils'
 import { UserService } from '../user'
-import type { FilterGroup, FilterGroupInventoryType, FilterGroupResponse, FilterGroupsResponse, FilterGroupUpsertPayload } from './filter-group.types'
+import type {
+  FilterGroup,
+  FilterGroupInventoryType,
+  FilterGroupResponse,
+  FilterGroupsResponse,
+  FilterGroupUpsertPayload,
+} from './filter-group.types'
 
 @Injectable({ providedIn: 'root' })
 export class FilterGroupService {

src/@seed/components/column-profiles/column-profiles.component.html

@@ -13,24 +13,23 @@
         }
       </mat-select>
     </div>
-    <a class="flex" (click)="openProfileModal('create')" mat-stroked-button matTooltip="Create New Profile">
-      <mat-icon class="fill-primary-700 icon-size-4" svgIcon="fa-solid:folder-plus"></mat-icon>
-    </a>
-    <a class="flex" [disabled]="!currentProfile" (click)="openProfileModal('rename')" mat-stroked-button matTooltip="Rename this Profile">
-      <mat-icon class="fill-primary-700 icon-size-4" svgIcon="fa-solid:eraser"></mat-icon>
-    </a>
-    <a class="flex" [disabled]="!currentProfile" (click)="openDeleteModal()" mat-stroked-button matTooltip="Delete this Profile">
-      <mat-icon class="fill-red-700 icon-size-4" svgIcon="fa-solid:x"></mat-icon>
-    </a>
-    <a
-      class="flex"
+    <button (click)="openProfileModal('create')" mat-icon-button matTooltip="Create New Profile">
+      <mat-icon class="scale-75 fill-primary-700" svgIcon="fa-solid:plus"></mat-icon>
+    </button>
+    <button [disabled]="!currentProfile" (click)="openProfileModal('rename')" mat-icon-button matTooltip="Rename this Profile">
+      <mat-icon class="scale-75 fill-cyan-600" svgIcon="fa-solid:pencil"></mat-icon>
+    </button>
+    <button [disabled]="!currentProfile" (click)="openDeleteModal()" mat-icon-button matTooltip="Delete this Profile">
+      <mat-icon class="scale-75 fill-red-700" svgIcon="fa-solid:trash"></mat-icon>
+    </button>
+    <button
       [disabled]="!currentProfile"
       (click)="openProfileModal('create', currentProfile.columns)"
-      mat-stroked-button
+      mat-icon-button
       matTooltip="Copy This Profile"
     >
-      <mat-icon class="fill-cyan-600 icon-size-4" svgIcon="fa-solid:copy"></mat-icon>
-    </a>
+      <mat-icon class="scale-75 fill-cyan-600" svgIcon="fa-solid:copy"></mat-icon>
+    </button>
   </div>
 
   @if (rowData.length) {

src/app/modules/datasets/data-mappings/step1/map-data.component.html

@@ -17,15 +17,15 @@
       }
     </mat-select>
     <!-- Profile Controls -->
-    <a class="flex" [disabled]="!profile" (click)="applyProfile()" matTooltip="Apply Profile" mat-stroked-button>
-      <mat-icon class="fill-primary-700 icon-size-4" svgIcon="fa-solid:check"></mat-icon>
-    </a>
-    <a class="flex" [disabled]="!profile" (click)="saveProfile()" matTooltip="Save Profile" mat-stroked-button>
-      <mat-icon class="fill-primary-700 icon-size-4" svgIcon="fa-solid:floppy-disk"></mat-icon>
-    </a>
-    <a class="flex" (click)="createProfile()" matTooltip="Create Profile" mat-stroked-button>
-      <mat-icon class="fill-primary-700 icon-size-4" svgIcon="fa-solid:plus"></mat-icon>
-    </a>
+    <button [disabled]="!profile" (click)="applyProfile()" matTooltip="Apply Profile" mat-icon-button>
+      <mat-icon class="scale-75 fill-primary-700" svgIcon="fa-solid:check"></mat-icon>
+    </button>
+    <button [disabled]="!profile" (click)="saveProfile()" matTooltip="Save Profile" mat-icon-button>
+      <mat-icon class="scale-75 fill-green-700" svgIcon="fa-solid:floppy-disk"></mat-icon>
+    </button>
+    <button (click)="createProfile()" matTooltip="Create Profile" mat-icon-button>
+      <mat-icon class="scale-75 fill-primary-700" svgIcon="fa-solid:plus"></mat-icon>
+    </button>
   </div>
 </div>
 

src/app/modules/datasets/datasets.component.ts

@@ -102,8 +102,8 @@ export class DatasetsComponent implements OnDestroy, OnInit {
         <span class="material-icons text-base">add</span>
         <span class="text-sm">Meter Data</span>
       </span>
-      <span class="material-icons cursor-pointer text-secondary my-auto" title="Rename Dataset" data-action="rename">edit</span>
-      <span class="material-icons cursor-pointer text-secondary my-auto" title="Delete Dataset" data-action="delete">clear</span>
+      <span class="material-icons cursor-pointer text-cyan-600 my-auto" title="Rename Dataset" data-action="rename">edit</span>
+      <span class="material-icons cursor-pointer text-red-500 my-auto" title="Delete Dataset" data-action="delete">delete</span>
       </div>
     `
   }

src/app/modules/insights/custom-reports/custom-reports.component.html

@@ -27,11 +27,6 @@
             @if (selectedReport) {
               <div class="flex items-center gap-2 rounded bg-primary-200 px-3 py-1.5 dark:bg-primary-700">
                 <span class="flex-1 truncate">{{ selectedReport.name }}</span>
-                @if (auth.requires_member) {
-                  <button class="!size-6 !min-w-0" (click)="clickDelete(selectedReport)" mat-icon-button>
-                    <mat-icon class="!text-base" fontIcon="close" />
-                  </button>
-                }
               </div>
             }
 
@@ -42,11 +37,6 @@
                     <a class="text-default flex-1 truncate no-underline" [routerLink]="['/insights/custom-reports', report.id]">
                       {{ report.name }}
                     </a>
-                    @if (auth.requires_member) {
-                      <button class="!size-6 !min-w-0" (click)="clickDelete(report); $event.stopPropagation()" mat-icon-button>
-                        <mat-icon class="!text-base" fontIcon="close" />
-                      </button>
-                    }
                   </div>
                 }
               }
@@ -268,13 +258,13 @@
                 <div class="text-secondary font-semibold">Actions</div>
 
                 @if (!editing && selectedReport) {
-                  <div class="flex gap-2">
-                    <a class="mr-2" (click)="clickEdit()" mat-stroked-button>
-                      <mat-icon class="icon-size-4" svgIcon="fa-solid:pencil"></mat-icon>
-                    </a>
-                    <a (click)="clickDelete(selectedReport)" mat-stroked-button color="warn">
-                      <mat-icon class="icon-size-4" svgIcon="fa-solid:x"></mat-icon>
-                    </a>
+                  <div class="flex gap-1">
+                    <button (click)="clickEdit()" mat-icon-button matTooltip="Edit">
+                      <mat-icon class="scale-75 fill-cyan-600" svgIcon="fa-solid:pencil" />
+                    </button>
+                    <button (click)="clickDelete(selectedReport)" mat-icon-button matTooltip="Delete">
+                      <mat-icon class="scale-75 text-red-500" svgIcon="fa-solid:trash" />
+                    </button>
                   </div>
                 }
 

src/app/modules/insights/default-reports/default-reports.component.html

@@ -23,7 +23,7 @@
             title="Save"
             aria-label="Save"
           >
-            <mat-icon class="scale-75" svgIcon="fa-solid:floppy-disk"></mat-icon>
+            <mat-icon class="scale-75 text-green-600" svgIcon="fa-solid:floppy-disk"></mat-icon>
           </button>
           <button
             [disabled]="!currentConfig || currentConfig.id === null"
@@ -32,7 +32,7 @@
             title="Rename"
             aria-label="Rename"
           >
-            <mat-icon class="scale-75" svgIcon="fa-solid:pen"></mat-icon>
+            <mat-icon class="scale-75 fill-cyan-600" svgIcon="fa-solid:pencil"></mat-icon>
           </button>
           <button
             [disabled]="!currentConfig || currentConfig.id === null"
@@ -44,7 +44,7 @@
             <mat-icon class="scale-75 text-red-500" svgIcon="fa-solid:trash"></mat-icon>
           </button>
           <button (click)="newConfig()" mat-icon-button title="New" aria-label="New">
-            <mat-icon class="scale-75" svgIcon="fa-solid:plus"></mat-icon>
+            <mat-icon class="scale-75 fill-primary-700" svgIcon="fa-solid:plus"></mat-icon>
           </button>
         </div>
       }

src/app/modules/insights/property-insights/property-insights.component.html

@@ -28,7 +28,7 @@
         <div>
           <div class="flex flex-col">
             <mat-button-toggle-group
-              class="border-button-toggle-group compact-button-toggle-group strike-through"
+              class="compact-button-toggle-group strike-through"
               [value]="datasetVisibility"
               [disabled]="!program"
               multiple

src/app/modules/inventory-list/list/grid/filter-group/filter-group-modal.component.ts

@@ -24,9 +24,12 @@ export class FilterGroupModalComponent {
 
   get title(): string {
     switch (this.data.action) {
-      case 'new': return 'New Filter Group'
-      case 'rename': return 'Rename Filter Group'
-      case 'delete': return 'Delete Filter Group'
+      case 'new':
+        return 'New Filter Group'
+      case 'rename':
+        return 'Rename Filter Group'
+      case 'delete':
+        return 'Delete Filter Group'
     }
   }
 

src/app/modules/inventory-list/list/grid/filter-group/filter-group-selector.component.html

@@ -1,6 +1,6 @@
 <div class="relative mr-1 flex flex-col">
   <mat-label class="text-secondary text-sm">Filter Group</mat-label>
-  <div class="flex h-6 items-center gap-1">
+  <div class="flex h-8 items-center gap-1">
     <mat-select
       class="h-6 w-50 rounded border border-gray-500 p-3 text-sm"
       [(value)]="selectedFilterGroupId"
@@ -19,28 +19,28 @@
 
     @if (isAliRoot) {
       <button
-        class="!size-6 !min-w-0"
+        class="!size-8 !min-w-0"
         [disabled]="!selectedFilterGroup || !modified"
         (click)="saveFilterGroup()"
         mat-icon-button
         matTooltip="Save"
       >
-        <mat-icon class="text-green-600 icon-size-5" fontIcon="save" />
+        <mat-icon class="scale-75 text-green-600" svgIcon="fa-solid:floppy-disk" />
       </button>
-      <button class="!size-6 !min-w-0" [disabled]="!selectedFilterGroup" (click)="renameFilterGroup()" mat-icon-button matTooltip="Rename">
-        <mat-icon class="icon-size-5" svgIcon="fa-solid:pencil" />
+      <button class="!size-8 !min-w-0" [disabled]="!selectedFilterGroup" (click)="renameFilterGroup()" mat-icon-button matTooltip="Rename">
+        <mat-icon class="scale-75 fill-cyan-600" svgIcon="fa-solid:pencil" />
       </button>
-      <button class="!size-6 !min-w-0" [disabled]="!selectedFilterGroup" (click)="deleteFilterGroup()" mat-icon-button matTooltip="Delete">
-        <mat-icon class="text-warn icon-size-5" svgIcon="fa-solid:x" />
+      <button class="!size-8 !min-w-0" [disabled]="!selectedFilterGroup" (click)="deleteFilterGroup()" mat-icon-button matTooltip="Delete">
+        <mat-icon class="scale-75 text-red-500" svgIcon="fa-solid:trash" />
       </button>
-      <button class="!size-6 !min-w-0" (click)="newFilterGroup()" mat-icon-button matTooltip="New Filter Group">
-        <mat-icon class="icon-size-5" fontIcon="add" />
+      <button class="!size-8 !min-w-0" (click)="newFilterGroup()" mat-icon-button matTooltip="New Filter Group">
+        <mat-icon class="scale-75 fill-primary-700" svgIcon="fa-solid:plus" />
       </button>
     }
 
     <!-- Label toggle -->
-    <button class="!size-6 !min-w-0" (click)="showLabelPanel = !showLabelPanel" mat-icon-button matTooltip="Labels">
-      <mat-icon class="!text-blue-600 icon-size-5" [class.!text-blue-800]="hasLabelSelections" fontIcon="label" />
+    <button class="!size-8 !min-w-0" (click)="showLabelPanel = !showLabelPanel" mat-icon-button matTooltip="Labels">
+      <mat-icon class="!text-blue-600" [class.!text-blue-800]="hasLabelSelections" fontIcon="label" />
     </button>
   </div>
 

src/app/modules/inventory-list/list/grid/filter-group/filter-group-selector.component.ts

@@ -286,9 +286,12 @@ export class FilterGroupSelectorComponent implements OnDestroy, OnInit {
 
   private _getLabelList(operator: 'and' | 'or' | 'exclude'): number[] {
     switch (operator) {
-      case 'and': return this.andLabels
-      case 'or': return this.orLabels
-      case 'exclude': return this.excludeLabels
+      case 'and':
+        return this.andLabels
+      case 'or':
+        return this.orLabels
+      case 'exclude':
+        return this.excludeLabels
     }
   }
 

src/app/modules/inventory-list/list/inventory.component.ts

@@ -18,14 +18,28 @@ import type {
   Profile,
   State,
 } from 'app/modules/inventory'
-import { ActionsComponent, ConfigSelectorComponent, FilterGroupSelectorComponent, FilterSortChipsComponent, InventoryGridComponent } from './grid'
+import {
+  ActionsComponent,
+  ConfigSelectorComponent,
+  FilterGroupSelectorComponent,
+  FilterSortChipsComponent,
+  InventoryGridComponent,
+} from './grid'
 import type { LabelSelections } from './grid/filter-group/filter-group-selector.component'
 
 @Component({
   selector: 'seed-inventory',
   templateUrl: './inventory.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [ActionsComponent, ConfigSelectorComponent, FilterGroupSelectorComponent, FilterSortChipsComponent, InventoryGridComponent, PageComponent, SharedImports],
+  imports: [
+    ActionsComponent,
+    ConfigSelectorComponent,
+    FilterGroupSelectorComponent,
+    FilterSortChipsComponent,
+    InventoryGridComponent,
+    PageComponent,
+    SharedImports,
+  ],
 })
 export class InventoryComponent implements OnDestroy, OnInit {
   private _activatedRoute = inject(ActivatedRoute)
@@ -85,7 +99,9 @@ export class InventoryComponent implements OnDestroy, OnInit {
         switchMap((orgId) => this.getDependencies(orgId)),
         map((results) => this.setDependencies(results)),
         switchMap((profile_id) => this.getProfile(profile_id)),
-        tap(() => { this._fetchAppliedLabels() }),
+        tap(() => {
+          this._fetchAppliedLabels()
+        }),
         switchMap(() => this.loadInventory()),
         tap(() => {
           this.setFilterSorts()
@@ -367,17 +383,23 @@ export class InventoryComponent implements OnDestroy, OnInit {
   }
 
   get filterGroupInventoryType() {
-    return this.type === 'taxlots' ? 'Tax Lot' as const : 'Property' as const
+    return this.type === 'taxlots' ? ('Tax Lot' as const) : ('Property' as const)
   }
 
   onFilterGroupApplied(fg: { query_dict?: Record<string, unknown> } | null): void {
     // Sync filter group's query_dict into userSettings so loadInventory uses consistent filters
     if (fg?.query_dict) {
-      this.userSettings = { ...this.userSettings, filters: { ...this.userSettings.filters, [this.type]: fg.query_dict as Record<string, Record<string, unknown>> } }
+      this.userSettings = {
+        ...this.userSettings,
+        filters: { ...this.userSettings.filters, [this.type]: fg.query_dict as Record<string, Record<string, unknown>> },
+      }
     } else {
       // When deselecting a filter group, preserve whatever filters the grid currently has
       const currentGridFilters = this.gridApi?.getFilterModel() ?? {}
-      this.userSettings = { ...this.userSettings, filters: { ...this.userSettings.filters, [this.type]: currentGridFilters as Record<string, Record<string, unknown>> } }
+      this.userSettings = {
+        ...this.userSettings,
+        filters: { ...this.userSettings.filters, [this.type]: currentGridFilters as Record<string, Record<string, unknown>> },
+      }
     }
     this.page = 1
     // Don't call loadInventory here — labelSelectionsChanged always fires right after

src/app/modules/inventory-list/summary/summary.component.html

@@ -30,6 +30,10 @@
             <div class="text-secondary ml-4 w-40">Extra Data Fields:</div>
             <div>{{ totalExtraData }}</div>
           </div>
+          <div class="flex">
+            <div class="text-secondary ml-4 w-40">Total Square Feet:</div>
+            <div>{{ totalSqft }}</div>
+          </div>
         </div>
       }
     </div>

src/app/modules/inventory-list/summary/summary.component.ts

@@ -40,6 +40,7 @@ export class SummaryComponent implements OnDestroy, OnInit {
   type = this._route.snapshot.paramMap.get('type') as InventoryType
   totalRecords: string
   totalExtraData: string
+  totalSqft: string
 
   ngOnInit() {
     this.initPage().pipe(takeUntil(this._unsubscribeAll$)).subscribe()
@@ -66,6 +67,7 @@ export class SummaryComponent implements OnDestroy, OnInit {
       tap((summary) => {
         this.totalRecords = summary.total_records.toLocaleString()
         this.totalExtraData = summary.number_extra_data_fields.toLocaleString()
+        this.totalSqft = (summary.total_sqft ?? 0).toLocaleString()
         this.summary = summary
       }),
       catchError(() => {

src/app/modules/organizations/columns/geocoding/geocoding.component.html

@@ -17,9 +17,9 @@
         <div>{{ column.display_name }}</div>
       </div>
       <div class="ml-auto flex">
-        <a (click)="delete(column)" mat-stroked-button
-          ><mat-icon class="icon-size-4" svgIcon="fa-solid:x" matTooltip="Remove from geocoding"></mat-icon
-        ></a>
+        <button (click)="delete(column)" mat-icon-button>
+          <mat-icon class="scale-75 fill-red-700" svgIcon="fa-solid:trash" matTooltip="Remove from geocoding"></mat-icon>
+        </button>
       </div>
     </div>
   }
@@ -36,7 +36,7 @@
     </mat-select>
   </mat-form-field>
   <div>
-    <button [disabled]="addForm.invalid || addForm.pending" mat-flat-button color="accent">
+    <button [disabled]="addForm.invalid || addForm.pending" mat-stroked-button>
       <span class="">Add Geocoding Column</span>
     </button>
   </div>