Renamed (app) folder to (main).

src/app/(main)/reports/retention/RetentionParameters.js

@@ -0,0 +1,46 @@
+import { useContext, useRef } from 'react';
+import { useMessages } from 'components/hooks';
+import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
+import { ReportContext } from '../Report';
+import { MonthSelect } from 'components/input/MonthSelect';
+import BaseParameters from '../BaseParameters';
+import { parseDateRange } from 'lib/date';
+
+export function RetentionParameters() {
+  const { report, runReport, isRunning, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const ref = useRef(null);
+
+  const { parameters } = report || {};
+  const { websiteId, dateRange } = parameters || {};
+  const { startDate } = dateRange || {};
+  const queryDisabled = !websiteId || !dateRange;
+
+  const handleSubmit = (data, e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!queryDisabled) {
+      runReport(data);
+    }
+  };
+
+  const handleDateChange = value => {
+    updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
+  };
+
+  return (
+    <Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
+      <BaseParameters showDateSelect={false} />
+      <FormRow label={formatMessage(labels.date)}>
+        <MonthSelect date={startDate} onChange={handleDateChange} />
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default RetentionParameters;

src/app/(main)/reports/retention/RetentionReport.js

@@ -0,0 +1,34 @@
+'use client';
+import RetentionTable from './RetentionTable';
+import RetentionParameters from './RetentionParameters';
+import Report from '../Report';
+import ReportHeader from '../ReportHeader';
+import ReportMenu from '../ReportMenu';
+import ReportBody from '../ReportBody';
+import Magnet from 'assets/magnet.svg';
+import { REPORT_TYPES } from 'lib/constants';
+import { parseDateRange } from 'lib/date';
+import { endOfMonth, startOfMonth } from 'date-fns';
+
+const defaultParameters = {
+  type: REPORT_TYPES.retention,
+  parameters: {
+    dateRange: parseDateRange(
+      `range:${startOfMonth(new Date()).getTime()}:${endOfMonth(new Date()).getTime()}`,
+    ),
+  },
+};
+
+export default function RetentionReport({ reportId }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Magnet />} />
+      <ReportMenu>
+        <RetentionParameters />
+      </ReportMenu>
+      <ReportBody>
+        <RetentionTable />
+      </ReportBody>
+    </Report>
+  );
+}

src/app/(main)/reports/retention/RetentionReport.module.css

@@ -0,0 +1,10 @@
+.filters {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  line-height: 32px;
+  padding: 10px;
+  overflow: hidden;
+}

src/app/(main)/reports/retention/RetentionTable.js

@@ -0,0 +1,80 @@
+import { useContext } from 'react';
+import classNames from 'classnames';
+import { ReportContext } from '../Report';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import { useMessages } from 'components/hooks';
+import { useLocale } from 'components/hooks';
+import { formatDate } from 'lib/date';
+import styles from './RetentionTable.module.css';
+
+export function RetentionTable() {
+  const { formatMessage, labels } = useMessages();
+  const { locale } = useLocale();
+  const { report } = useContext(ReportContext);
+  const { data } = report || {};
+
+  if (!data) {
+    return <EmptyPlaceholder />;
+  }
+
+  const days = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
+
+  const rows = data.reduce((arr, row) => {
+    const { date, visitors, day } = row;
+    if (day === 0) {
+      return arr.concat({
+        date,
+        visitors,
+        records: days
+          .reduce((arr, day) => {
+            arr[day] = data.find(x => x.date === date && x.day === day);
+            return arr;
+          }, [])
+          .filter(n => n),
+      });
+    }
+    return arr;
+  }, []);
+
+  const totalDays = rows.length;
+
+  return (
+    <>
+      <div className={styles.table}>
+        <div className={classNames(styles.row, styles.header)}>
+          <div className={styles.date}>{formatMessage(labels.date)}</div>
+          <div className={styles.visitors}>{formatMessage(labels.visitors)}</div>
+          {days.map(n => (
+            <div key={n} className={styles.day}>
+              {formatMessage(labels.day)} {n}
+            </div>
+          ))}
+        </div>
+        {rows.map(({ date, visitors, records }, rowIndex) => {
+          return (
+            <div key={rowIndex} className={styles.row}>
+              <div className={styles.date}>{formatDate(`${date} 00:00:00`, 'PP', locale)}</div>
+              <div className={styles.visitors}>{visitors}</div>
+              {days.map(day => {
+                if (totalDays - rowIndex < day) {
+                  return null;
+                }
+                const percentage = records[day]?.percentage;
+                return (
+                  <div
+                    key={day}
+                    className={classNames(styles.cell, { [styles.empty]: !percentage })}
+                  >
+                    {percentage ? `${percentage.toFixed(2)}%` : ''}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+export default RetentionTable;

src/app/(main)/reports/retention/RetentionTable.module.css

@@ -0,0 +1,52 @@
+.table {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  font-weight: 700;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: 1px;
+  margin-bottom: 1px;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  background: var(--blue200);
+  border-radius: var(--border-radius);
+}
+
+.date {
+  display: flex;
+  align-items: center;
+  min-width: 160px;
+}
+
+.visitors {
+  display: flex;
+  align-items: center;
+  min-width: 80px;
+}
+
+.day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+}
+
+.empty {
+  background: var(--blue100);
+}

src/app/(main)/reports/retention/page.js

@@ -0,0 +1,9 @@
+import RetentionReport from './RetentionReport';
+
+export default function RetentionReportPage() {
+  return <RetentionReport reportId={null} />;
+}
+
+export const metadata = {
+  title: 'Create Report | umami',
+};