+ {!isDesktop && !sidebarMobileVisible ? (
+
+ ) : null}
+
{selectedId == null && (
No user selected
)}
+
+ {selectedId != null && userQuery.isPending && (
+
+ Loading user details...
+
+ )}
+
+ {selectedId != null && userQuery.error && (
+
+ Error:{' '}
+ {userQuery.error instanceof Error
+ ? userQuery.error.message
+ : 'Unknown error'}
+
+ )}
+
{selectedId && userQuery.data && (
<>
@@ -660,6 +721,6 @@ export default function Page() {
)}
-
+
)
}
diff --git a/src/app/admin/panels/members/panel_views/DonorView.module.css b/src/app/admin/panels/members/panel_views/DonorView.module.css
index cc99eeea..362c4709 100644
--- a/src/app/admin/panels/members/panel_views/DonorView.module.css
+++ b/src/app/admin/panels/members/panel_views/DonorView.module.css
@@ -173,3 +173,199 @@
color: #475569;
padding-right: 1rem;
}
+
+.modalBackdrop {
+ position: fixed;
+ inset: 0;
+ z-index: 60;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 1.25rem;
+ background: rgba(2, 6, 23, 0.38);
+ backdrop-filter: blur(10px) saturate(140%);
+ -webkit-backdrop-filter: blur(10px) saturate(140%);
+ will-change: opacity, backdrop-filter;
+}
+
+.modal {
+ position: relative;
+ width: min(56rem, 100%);
+ height: min(80dvh, 48rem);
+ min-height: 18rem;
+ display: flex;
+ flex-direction: column;
+ border-radius: 1rem;
+ background: rgba(255, 255, 255, 0.86);
+ backdrop-filter: blur(18px) saturate(160%);
+ -webkit-backdrop-filter: blur(18px) saturate(160%);
+ border: 1px solid rgba(17, 24, 39, 0.12);
+ box-shadow:
+ 0 1px 0 rgba(255, 255, 255, 0.75) inset,
+ 0 30px 80px rgba(15, 23, 42, 0.35);
+ overflow: hidden;
+ transform-origin: 50% 40%;
+ will-change: transform, opacity;
+}
+
+.modal::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ background: linear-gradient(
+ to bottom,
+ rgba(255, 255, 255, 0.55),
+ rgba(255, 255, 255, 0) 22%
+ );
+ opacity: 0.35;
+}
+
+.modalHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ padding: 0.95rem 1rem;
+ border-bottom: 1px solid rgba(17, 24, 39, 0.1);
+ background: rgba(255, 255, 255, 0.6);
+}
+
+.modalHeaderLeft {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ min-width: 0;
+}
+
+.modalTitle {
+ font-size: 1.05rem;
+ font-weight: 650;
+ letter-spacing: -0.01em;
+ color: #0f172a;
+}
+
+.modalSubtitle {
+ font-size: 0.92rem;
+ color: #475569;
+ line-height: 1.35;
+}
+
+.modalHeaderRight {
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+ flex-shrink: 0;
+}
+
+.modalBody {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+ padding: 0;
+ background: rgba(255, 255, 255, 0.62);
+ backdrop-filter: blur(18px) saturate(160%);
+ -webkit-backdrop-filter: blur(18px) saturate(160%);
+ font-weight: 500;
+ padding-inline: 1rem;
+}
+
+.modalBody :global(.pinned),
+.modalBody :global(.elementList),
+.modalBody :global(.listStatus) {
+ padding: 0.9rem 1rem 1rem;
+}
+
+.modalBody :global(.listStatus) {
+ flex: 1;
+ min-height: 0;
+}
+
+.modalFooter {
+ padding: 0.5rem 1rem;
+ border-top: 1px solid rgba(17, 24, 39, 0.1);
+ background: rgba(255, 255, 255, 0.6);
+ display: flex;
+ justify-content: flex-end;
+ gap: 0.6rem;
+}
+
+.modalFooterButton {
+ min-width: 7rem;
+}
+
+.modalSearch {
+ width: min(22rem, 52vw);
+}
+
+.searchInputBare {
+ display: flex;
+ width: 100%;
+ align-items: center;
+}
+
+.searchInputBare > input {
+ width: 100%;
+ height: 2.35rem;
+ line-height: 2.35rem;
+ border-radius: 0.6rem;
+ border: 1px solid #d1d5db;
+ padding: 0 0.75rem;
+ background: rgba(255, 255, 255, 0.75);
+}
+
+.detailsNavigationButton {
+ width: auto;
+ display: inline-block;
+ margin-top: 0.35rem;
+}
+
+.detailsNavigationLink {
+ display: inline-flex;
+ width: auto;
+ align-items: center;
+ justify-content: center;
+ padding: 0.28rem 0.75rem;
+ border-radius: 9999px;
+ background: rgba(14, 165, 233, 0.12);
+ color: rgba(2, 132, 199, 1);
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+}
+
+.detailsNavigationLink:hover {
+ background: rgba(14, 165, 233, 0.18);
+}
+
+.detailsNavigationLink:active {
+ transform: translateY(0) scale(0.99);
+}
+
+.detailsNavigationLabel {
+ flex: 0 0 auto;
+ width: auto;
+ max-width: none;
+ color: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ letter-spacing: inherit;
+ white-space: nowrap;
+}
+
+.detailsNavigationTagSection {
+ display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .modalBackdrop {
+ will-change: auto;
+ }
+
+ .modal {
+ will-change: auto;
+ }
+}
diff --git a/src/app/admin/panels/members/panel_views/DonorView.tsx b/src/app/admin/panels/members/panel_views/DonorView.tsx
index d30b484f..f52d9bae 100644
--- a/src/app/admin/panels/members/panel_views/DonorView.tsx
+++ b/src/app/admin/panels/members/panel_views/DonorView.tsx
@@ -9,6 +9,7 @@ import {
FormGroup,
TextField,
} from '@/components/common/forms'
+import { NavigationButton } from '@/components/common/navigation_stack/navigation_button/NavigationButton'
import {
ActBlueContribution,
ActBlueContributionCustomField,
@@ -99,6 +100,12 @@ const calcContributionData = (donor: ActBlueDonor): ContributionData => {
}
}
+const formatLineitemDate = (value: Date) =>
+ Intl.DateTimeFormat('en-US', {
+ dateStyle: 'medium',
+ timeStyle: 'short',
+ }).format(value)
+
export function DonorView({
selectedId,
user,
@@ -366,17 +373,112 @@ export function DonorView({
/>
-
- Open in Donors Panel
-
+ {(
+ contributionData.lineitems ??
+ []
+ ).map((lineitem) => (
+
+
+ label="Paid At"
+ getter={() =>
+ lineitem.paidAt
+ }
+ />
+
+ label="Sequence"
+ getter={() =>
+ `${lineitem.sequence}`
+ }
+ />
+
+ label="Amount"
+ getter={() =>
+ `$${lineitem.amount}`
+ }
+ />
+
+ label="Recurring Amount"
+ getter={() =>
+ `$${lineitem.recurringAmount}`
+ }
+ />
+
+ label="Amount Less AB Fees"
+ getter={() =>
+ `$${lineitem.amountLessAbFees}`
+ }
+ />
+
+ donor
+ .contributions?.[0]
+ ?.contributionForm
+ }
+ />
+ {contributionData.customFields?.map(
+ (field) => (
+
+ field.answer
+ }
+ />
+ )
+ )}
+
+
+
+ ))}
+