Fixed retention report showing wrong dates. Changed Breakdown field select to modal.

This commit is contained in:
Mike Cao 2025-06-29 15:36:43 -07:00
parent ee8750d9df
commit ea83afbc13
20 changed files with 108 additions and 277 deletions

View file

@ -1,10 +0,0 @@
.bar {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: var(--base600);
}
.link span {
color: var(--base700) !important;
}

View file

@ -1,37 +0,0 @@
import { Fragment } from 'react';
import Link from 'next/link';
import { Row, Icon, Text } from '@umami/react-zen';
import { Chevron } from '@/components/icons';
import styles from './Breadcrumb.module.css';
export interface BreadcrumbProps {
data: {
url?: string;
label: string;
}[];
}
export function Breadcrumb({ data }: BreadcrumbProps) {
return (
<Row alignItems="center" gap className={styles.bar}>
{data.map((a, i) => {
return (
<Fragment key={i}>
{a.url ? (
<Link href={a.url} className={styles.link}>
<Text>{a.label}</Text>
</Link>
) : (
<Text>{a.label}</Text>
)}
{i !== data.length - 1 ? (
<Icon rotate={270}>
<Chevron />
</Icon>
) : null}
</Fragment>
);
})}
</Row>
);
}

View file

@ -1,34 +0,0 @@
.search {
max-width: 300px;
margin: 20px 0;
}
.body {
display: flex;
flex-direction: column;
position: relative;
overflow-x: auto;
}
.body td {
display: flex;
gap: 10px;
min-height: 70px;
align-items: center;
}
.body > div > div > div {
display: flex;
gap: 10px;
}
.pager {
margin: 20px 0;
}
.status {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}

View file

@ -1,107 +0,0 @@
.button {
display: flex;
align-items: center;
align-self: flex-start;
white-space: nowrap;
gap: var(--size200);
font-family: inherit;
color: var(--base900);
background: var(--base100);
border: 1px solid transparent;
border-radius: var(--border-radius);
min-height: var(--base-height);
padding: 0 var(--size600);
position: relative;
cursor: pointer;
}
.button:hover {
background: var(--base200);
}
.button:active {
background: var(--base300);
}
.button:visited {
color: var(--base900);
}
.button.disabled {
color: var(--disabled-color) !important;
background-color: var(--disabled-background) !important;
border-color: transparent !important;
pointer-events: none;
}
.button.primary {
color: var(--light50);
background: var(--primary-color);
}
.button.primary:hover {
color: var(--light50);
background: var(--primary500);
}
.button.primary:active {
color: var(--light50);
background: var(--primary600);
}
.button.secondary {
border: 1px solid var(--border-color);
background: var(--base50);
}
.button.secondary:hover {
background: var(--base75);
}
.button.secondary:active {
background: var(--base100);
}
.button.quiet {
color: var(--base900);
background: transparent;
}
.button.quiet:hover {
background: var(--base100);
}
.button.quiet:active {
background: var(--base200);
}
.button.danger {
color: var(--light50);
background: var(--red800);
}
.button.danger:hover {
color: var(--light50);
background: var(--red900);
}
.button.danger:active {
color: var(--light50);
background: var(--red1000);
}
.button.size-sm {
font-size: var(--font-size-sm);
height: calc(var(--base-height) * 0.75);
padding: 0 calc(var(--size600) * 0.75);
}
.button.size-md {
font-size: var(--font-size-md);
}
.button.size-lg {
font-size: var(--font-size-lg);
height: calc(var(--base-height) * 1.25);
padding: 0 calc(var(--size600) * 1.25);
}