feat(tasks): backend-driven pagination, search and date filters for Client Approval
Client Approval previously fetched up to 1000 pending clients via a route resolver and did name-search/sorting client-side (the search box was actually dead — it set a MatTableDataSource filter that the grouped-table view never read). Reworked to mirror PendingClientEditsComponent: real mat-paginator against /clients (offset/limit), server-side displayName search, orderBy=submittedOnDate for latest-first, and All/Today/Yesterday presets backed by the new fromDate/toDate params. Dropped the now-unused GetGroupedClientsData resolver. Also: Account Number column -> Client ID (element.id), disabled the Approve button with a "N selected" indicator when nothing's checked, and a redesigned action bar / empty-state (context-aware message for zero-results-from-search vs. zero-results-from-date-filter vs. truly nothing pending) — plus the plain-div search box and matched heights across chips/search/button, replacing an earlier mat-form-field version that Material's own outlined-field box model kept misaligning against the pill buttons.
This commit is contained in:
+207
-42
@@ -9,9 +9,14 @@
|
||||
@use '../../../shared/styles/list-layout' as *;
|
||||
|
||||
$brand: #1353a0;
|
||||
$brand-tint: #eaf1fb;
|
||||
$success: #16a34a;
|
||||
$success-tint: #ecfdf5;
|
||||
$border: #e2e8f0;
|
||||
$text: #0f172a;
|
||||
$text-muted: #64748b;
|
||||
$surface: #fff;
|
||||
$surface-muted: #f8fafc;
|
||||
|
||||
.cv-tab-content {
|
||||
padding: 16px 0;
|
||||
@@ -20,93 +25,252 @@ $text-muted: #64748b;
|
||||
.cv-action-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 14px;
|
||||
background: $surface;
|
||||
border: 1px solid $border;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
|
||||
}
|
||||
|
||||
.cv-search-field {
|
||||
.cv-search-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
max-width: 320px;
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
background: $surface-muted;
|
||||
border: 1px solid $border;
|
||||
border-radius: 8px;
|
||||
transition:
|
||||
background 0.15s,
|
||||
border-color 0.15s,
|
||||
box-shadow 0.15s;
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-form-field-flex {
|
||||
height: 32px;
|
||||
fa-icon {
|
||||
color: $text-muted;
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
color: $text;
|
||||
|
||||
&::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding: 4px 0;
|
||||
min-height: 32px;
|
||||
}
|
||||
&:focus-within {
|
||||
background: $surface;
|
||||
border-color: $brand;
|
||||
box-shadow: 0 0 0 2px rgb(19 83 160 / 18%);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.cv-quick-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mdc-notched-outline {
|
||||
.mdc-notched-outline__leading {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
.cv-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: 'DM Sans', Roboto, sans-serif;
|
||||
color: $text-muted;
|
||||
background: $surface;
|
||||
border: 1px solid $border;
|
||||
border-radius: 17px;
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.15s,
|
||||
color 0.15s,
|
||||
border-color 0.15s,
|
||||
box-shadow 0.15s;
|
||||
|
||||
.mdc-notched-outline__trailing {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: $surface-muted;
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-icon-prefix {
|
||||
padding: 0 6px 0 8px;
|
||||
color: $text-muted;
|
||||
}
|
||||
&--active {
|
||||
background: $brand;
|
||||
border-color: $brand;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 6px rgb(19 83 160 / 30%);
|
||||
|
||||
input {
|
||||
font-size: 13px;
|
||||
&:hover {
|
||||
background: $brand;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cv-action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cv-selected-count {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $brand;
|
||||
background: $brand-tint;
|
||||
border-radius: 14px;
|
||||
padding: 6px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cv-btn {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
height: 34px;
|
||||
padding: 0 16px;
|
||||
font-family: 'DM Sans', Roboto, sans-serif;
|
||||
letter-spacing: 0.1px;
|
||||
|
||||
fa-icon {
|
||||
margin-right: 4px;
|
||||
margin-right: 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.cv-btn-approve {
|
||||
border-color: #16a34a;
|
||||
color: #16a34a;
|
||||
border-color: $success;
|
||||
color: $success;
|
||||
|
||||
&:hover {
|
||||
background: #f0fdf4;
|
||||
&:hover:not([disabled]) {
|
||||
background: $success-tint;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
.cv-group-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
margin: 20px 0 8px;
|
||||
padding-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
text-transform: uppercase;
|
||||
color: $text-muted;
|
||||
margin: 22px 0 8px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: $brand;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cv-group-table {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid $border;
|
||||
}
|
||||
|
||||
.cv-paginator {
|
||||
margin-top: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// ===== Empty / loading state — scoped locally so it doesn't touch the shared
|
||||
// .empty-state used by every other checker-inbox tab. =====
|
||||
.cv-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 56px 24px;
|
||||
text-align: center;
|
||||
background: $surface;
|
||||
border: 1px solid $border;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.cv-empty__badge {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $success-tint;
|
||||
border: 1px solid #a7f3d0;
|
||||
color: $success;
|
||||
font-size: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cv-empty__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: $text;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.cv-empty__text {
|
||||
font-size: 13px;
|
||||
color: $text-muted;
|
||||
margin: 0;
|
||||
max-width: 360px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.cv-empty__link {
|
||||
color: $brand;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.cv-spinner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid $border;
|
||||
border-top-color: $brand;
|
||||
margin-bottom: 14px;
|
||||
animation: cv-spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes cv-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
@@ -121,5 +285,6 @@ $text-muted: #64748b;
|
||||
|
||||
.cv-action-buttons {
|
||||
margin-left: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user