feat: revenue tracking

* wip

* wip

* wip

* wip

* show revenue better on overview

* align realtime and overview counters

* update revenue docs

* always return device id

* add project settings, improve projects charts,

* fix: comments

* fixes

* fix migration

* ignore sql files

* fix comments

apps/start/src/components/report-chart/common/axis.tsx

@@ -6,7 +6,6 @@ import { useRef, useState } from 'react';
 import type { AxisDomain } from 'recharts/types/util/types';
 
 import type { IInterval } from '@openpanel/validation';
-
 export const AXIS_FONT_PROPS = {
   fontSize: 8,
   className: 'font-mono',
@@ -69,9 +68,11 @@ export const useXAxisProps = (
     interval: 'auto',
   },
 ) => {
-  const formatDate = useFormatDateInterval(
-    interval === 'auto' ? 'day' : interval,
-  );
+  const formatDate = useFormatDateInterval({
+    interval: interval === 'auto' ? 'day' : interval,
+    short: true,
+  });
+
   return {
     ...X_AXIS_STYLE_PROPS,
     height: hide ? 0 : X_AXIS_STYLE_PROPS.height,

apps/start/src/components/report-chart/common/report-chart-tooltip.tsx

@@ -62,7 +62,10 @@ export const ReportChartTooltip = createChartTooltip<Data, Context>(
     const {
       report: { interval, unit },
     } = useReportChartContext();
-    const formatDate = useFormatDateInterval(interval);
+    const formatDate = useFormatDateInterval({
+      interval,
+      short: false,
+    });
     const number = useNumber();
 
     if (!data || data.length === 0) {

apps/start/src/components/report-chart/common/report-table.tsx

@@ -40,7 +40,10 @@ export function ReportTable({
   const number = useNumber();
   const interval = useSelector((state) => state.report.interval);
   const breakdowns = useSelector((state) => state.report.breakdowns);
-  const formatDate = useFormatDateInterval(interval);
+  const formatDate = useFormatDateInterval({
+    interval,
+    short: true,
+  });
 
   function handleChange(name: string, checked: boolean) {
     setVisibleSeries((prev) => {

apps/start/src/components/report-chart/conversion/chart.tsx

@@ -1,6 +1,8 @@
+import { pushModal } from '@/modals';
 import type { RouterOutputs } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { getChartColor } from '@/utils/theme';
+import { useCallback } from 'react';
 import {
   CartesianGrid,
   Line,
@@ -10,8 +12,6 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { pushModal } from '@/modals';
-import { useCallback } from 'react';
 
 import { createChartTooltip } from '@/components/charts/chart-tooltip';
 import { useFormatDateInterval } from '@/hooks/use-format-date-interval';
@@ -171,7 +171,10 @@ const { Tooltip, TooltipProvider } = createChartTooltip<
   }
 
   const { date } = data[0];
-  const formatDate = useFormatDateInterval(context.interval);
+  const formatDate = useFormatDateInterval({
+    interval: context.interval,
+    short: false,
+  });
   const number = useNumber();
   return (
     <>