refactor product page

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/customers/[id]/ClientPage.tsx

@@ -16,16 +16,11 @@ import {
 import { useOrders } from '@/hooks/queries/orders'
 import {
   computeCumulativeValue,
+  dateToInterval,
   defaultMetricMarks,
   metricDisplayNames,
 } from '@/utils/metrics'
-import {
-  Customer,
-  Interval,
-  Metrics,
-  MetricType,
-  Organization,
-} from '@polar-sh/api'
+import { Customer, Metrics, MetricType, Organization } from '@polar-sh/api'
 import Button from '@polar-sh/ui/components/atoms/Button'
 import { DataTable } from '@polar-sh/ui/components/atoms/DataTable'
 import FormattedDateTime from '@polar-sh/ui/components/atoms/FormattedDateTime'
@@ -57,31 +52,6 @@ const rangeDisplayNames: Record<Range, string> = {
   '24h': '24h',
 }
 
-const rangeToInterval = (startDate: Date) => {
-  const yearsAgo = new Date().getFullYear() - startDate.getFullYear()
-  const monthsAgo =
-    (new Date().getFullYear() - startDate.getFullYear()) * 12 +
-    (new Date().getMonth() - startDate.getMonth())
-  const weeksAgo = Math.floor(
-    (new Date().getTime() - startDate.getTime()) / (7 * 24 * 60 * 60 * 1000),
-  )
-  const daysAgo = Math.floor(
-    (new Date().getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000),
-  )
-
-  if (yearsAgo >= 3) {
-    return Interval.YEAR
-  } else if (monthsAgo >= 4) {
-    return Interval.MONTH
-  } else if (weeksAgo > 4) {
-    return Interval.WEEK
-  } else if (daysAgo > 1) {
-    return Interval.DAY
-  } else {
-    return Interval.HOUR
-  }
-}
-
 const getRangeStartDate = (range: Range, customer: Customer) => {
   switch (range) {
     case 'all_time':
@@ -132,7 +102,7 @@ const ClientPage: React.FC<ClientPageProps> = ({ organization, customer }) => {
     startDate: startDate,
     endDate: new Date(),
     organizationId: organization.id,
-    interval: rangeToInterval(startDate),
+    interval: dateToInterval(startDate),
     customerId: [customer.id],
   })
 
@@ -248,7 +218,7 @@ const ClientPage: React.FC<ClientPageProps> = ({ organization, customer }) => {
                 <MetricChart
                   height={300}
                   data={metricsData.periods}
-                  interval={rangeToInterval(startDate)}
+                  interval={dateToInterval(startDate)}
                   marks={defaultMetricMarks}
                   metric={metricsData.metrics[selectedMetric]}
                   onDataIndexHover={(period) =>

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/products/[id]/ClientPage.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { EditProductPage } from '@/components/Products/EditProductPage'
+import { ProductPage } from '@/components/Products/ProductPage/ProductPage'
 import { useProduct } from '@/hooks/queries'
 import { MaintainerOrganizationContext } from '@/providers/maintainerOrganization'
 import { useParams } from 'next/navigation'
@@ -12,7 +12,5 @@ export default function Page() {
 
   const { data: product } = useProduct(id as string)
 
-  return product ? (
-    <EditProductPage product={product} organization={org} />
-  ) : null
+  return product ? <ProductPage product={product} organization={org} /> : null
 }

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/sales/ClientPage.tsx

@@ -1,14 +1,18 @@
 'use client'
 
 import { DashboardBody } from '@/components/Layout/DashboardLayout'
+import MetricChartBox from '@/components/Metrics/MetricChartBox'
 import ProductSelect from '@/components/Products/ProductSelect'
+import { OrderAmountWithRefund } from '@/components/Refunds/OrderAmountWithRefund'
+import { useMetrics } from '@/hooks/queries/metrics'
 import { useOrders } from '@/hooks/queries/orders'
 import {
   DataTablePaginationState,
   DataTableSortingState,
   getAPIParams,
   serializeSearchParams,
 } from '@/utils/datatable'
+import { dateToInterval } from '@/utils/metrics'
 import { Order, OrderCustomer, Organization, Product } from '@polar-sh/api'
 import Avatar from '@polar-sh/ui/components/atoms/Avatar'
 import {
@@ -17,30 +21,10 @@ import {
   DataTableColumnHeader,
 } from '@polar-sh/ui/components/atoms/DataTable'
 import FormattedDateTime from '@polar-sh/ui/components/atoms/FormattedDateTime'
-import Pill from '@polar-sh/ui/components/atoms/Pill'
-import { formatCurrencyAndAmount } from '@polar-sh/ui/lib/money'
 import { RowSelectionState } from '@tanstack/react-table'
 import { useRouter } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
 
-const AmountColumn = ({ order }: { order: Order }) => {
-  return (
-    <div className="flex flex-row gap-x-2">
-      <span>{formatCurrencyAndAmount(order.amount, order.currency)}</span>
-      {order.status == 'refunded' && (
-        <Pill color="blue" className="flex flex-row">
-          <span>Refunded</span>
-        </Pill>
-      )}
-      {order.status == 'partially_refunded' && (
-        <Pill color="purple" className="flex flex-row">
-          <span>Partial Refund</span>
-        </Pill>
-      )}
-    </div>
-  )
-}
-
 interface ClientPageProps {
   organization: Organization
   pagination: DataTablePaginationState
@@ -156,7 +140,9 @@ const ClientPage: React.FC<ClientPageProps> = ({
       header: ({ column }) => (
         <DataTableColumnHeader column={column} title="Amount" />
       ),
-      cell: ({ row: { original: order } }) => <AmountColumn order={order} />,
+      cell: ({ row: { original: order } }) => (
+        <OrderAmountWithRefund order={order} />
+      ),
     },
     {
       accessorKey: 'product',
@@ -198,6 +184,14 @@ const ClientPage: React.FC<ClientPageProps> = ({
     }
   }, [selectedOrder, router])
 
+  const { data: metricsData, isLoading: metricsLoading } = useMetrics({
+    organizationId: organization.id,
+    startDate: new Date(organization.created_at),
+    endDate: new Date(),
+    interval: dateToInterval(new Date(organization.created_at)),
+    productId,
+  })
+
   return (
     <DashboardBody>
       <div className="flex flex-col gap-8">
@@ -211,6 +205,22 @@ const ClientPage: React.FC<ClientPageProps> = ({
             />
           </div>
         </div>
+        <div className="grid grid-cols-2 gap-8">
+          <MetricChartBox
+            data={metricsData?.periods ?? []}
+            loading={metricsLoading}
+            metric={metricsData?.metrics.orders}
+            height={150}
+            compact
+          />
+          <MetricChartBox
+            data={metricsData?.periods ?? []}
+            loading={metricsLoading}
+            metric={metricsData?.metrics.revenue}
+            height={150}
+            compact
+          />
+        </div>
         {orders && pageCount !== undefined && (
           <DataTable
             columns={columns}

clients/apps/web/src/components/Layout/Section.tsx

@@ -7,15 +7,23 @@ export const Section = ({
   children,
   className,
   cta,
+  compact,
 }: {
   title: string
   description?: string
   children: React.ReactNode
   className?: string
   cta?: React.ReactNode
+  compact?: boolean
 }) => {
   return (
-    <div className={twMerge('relative flex flex-col gap-12 p-12', className)}>
+    <div
+      className={twMerge(
+        'relative flex flex-col',
+        compact ? 'gap-6 p-8' : 'gap-12 p-12',
+        className,
+      )}
+    >
       <SectionDescription title={title} description={description} cta={cta} />
       {children}
     </div>