chore(ux): show range of records in paginated tables

clients/apps/web/src/app/(main)/[organization]/(header)/subscriptions/page.tsx

@@ -3,7 +3,7 @@ import { redirect } from 'next/navigation'
 export default async function Page({
   params,
 }: {
-  params: { organization: string; }
+  params: { organization: string }
 }) {
   redirect(`/${params.organization}`)
 }

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

@@ -4,7 +4,7 @@ import { CustomerModal } from '@/components/Customer/CustomerModal'
 import { DashboardBody } from '@/components/Layout/DashboardLayout'
 import { InlineModal } from '@/components/Modal/InlineModal'
 import { useModal } from '@/components/Modal/useModal'
-import { useCustomers} from '@/hooks/queries'
+import { useCustomers } from '@/hooks/queries'
 import useDebouncedCallback from '@/hooks/utils'
 import {
   DataTablePaginationState,

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

@@ -1,30 +1,24 @@
 'use client'
 
+import { GitHubAppInstallationUpsell } from '@/components/Dashboard/Upsell'
+import { DashboardBody } from '@/components/Layout/DashboardLayout'
 import Spinner from '@/components/Shared/Spinner'
-import { useListRepositories } from '@/hooks/queries'
 import { useHasLinkedExternalOrganizations } from '@/hooks'
-import { useSearchParams } from 'next/navigation'
+import { useListRepositories } from '@/hooks/queries'
+import { MaintainerOrganizationContext } from '@/providers/maintainerOrganization'
 import { Organization } from '@polar-sh/sdk'
-import { GitHubAppInstallationUpsell } from '@/components/Dashboard/Upsell'
-import { DashboardBody } from '@/components/Layout/DashboardLayout'
+import { useSearchParams } from 'next/navigation'
 import CopyToClipboardInput from 'polarkit/components/ui/atoms/copytoclipboardinput'
-import { MaintainerOrganizationContext } from '@/providers/maintainerOrganization'
 import ShadowBox from 'polarkit/components/ui/atoms/shadowbox'
 import { Tabs, TabsList, TabsTrigger } from 'polarkit/components/ui/atoms/tabs'
-import { ReactElement, useState } from 'react'
-import { useContext } from 'react'
-
+import { ReactElement, useContext, useState } from 'react'
 
 interface Embeddable {
   preview: ReactElement
   tag: string
 }
 
-const EmbedPage = ({
-  organization,
-}: {
-  organization: Organization
-}) => {
+const EmbedPage = ({ organization }: { organization: Organization }) => {
   const searchParams = useSearchParams()
   const repoSlug = searchParams.get('repo')
   const repositories = useListRepositories(
@@ -49,11 +43,21 @@ const EmbedPage = ({
 
   const embeds: Record<string, Embeddable> = {
     Issues: {
-      preview: <img src={`/embed/fund-our-backlog.svg?${orgRepoParams}`} alt="GitHub Embed of Fundable Backlog" />,
+      preview: (
+        <img
+          src={`/embed/fund-our-backlog.svg?${orgRepoParams}`}
+          alt="GitHub Embed of Fundable Backlog"
+        />
+      ),
       tag: `<a href="https://polar.sh/${orgSlashRepo}"><img src="https://polar.sh/embed/fund-our-backlog.svg?${orgRepoParams}" /></a>`,
     },
     Shield: {
-      preview: <img src={`/embed/seeks-funding-shield.svg?${orgRepoParams}`} alt="GitHub Shield of Fundable Issues" />,
+      preview: (
+        <img
+          src={`/embed/seeks-funding-shield.svg?${orgRepoParams}`}
+          alt="GitHub Shield of Fundable Issues"
+        />
+      ),
       tag: `<a href="https://polar.sh/${orgSlashRepo}"><img src="https://polar.sh/embed/seeks-funding-shield.svg?${orgRepoParams}" /></a>`,
     },
   }

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

@@ -42,7 +42,7 @@ export default function ClientPage() {
           <TableBody>
             {sortedMembers.map((m) => (
               <TableRow key={m.email}>
-                <TableCell className="font-medium ">
+                <TableCell className="font-medium">
                   <div className="inline-flex items-center gap-2">
                     <Avatar
                       className="h-8 w-8"

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

@@ -5,9 +5,9 @@ import { InlineModal } from '@/components/Modal/InlineModal'
 import { useModal } from '@/components/Modal/useModal'
 import Pagination from '@/components/Pagination/Pagination'
 import { ProductCheckoutModal } from '@/components/Products/ProductCheckoutModal'
-import { ProductThumbnail } from '@/components/Products/ProductThumbnail'
 import ProductPriceLabel from '@/components/Products/ProductPriceLabel'
 import ProductPrices from '@/components/Products/ProductPrices'
+import { ProductThumbnail } from '@/components/Products/ProductThumbnail'
 import { useProducts } from '@/hooks/queries/products'
 import useDebouncedCallback from '@/hooks/utils'
 import { MaintainerOrganizationContext } from '@/providers/maintainerOrganization'

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

@@ -7,32 +7,30 @@ import { ProductThumbnail } from '@/components/Products/ProductThumbnail'
 import { useCustomFields, useProduct } from '@/hooks/queries'
 import { useOrder } from '@/hooks/queries/orders'
 import { markdownOptionsJustText } from '@/utils/markdown'
-import { Organization, Product} from '@polar-sh/sdk'
+import { Organization, Product } from '@polar-sh/sdk'
 import { formatCurrencyAndAmount } from '@polarkit/lib/money'
 import { Separator } from '@radix-ui/react-dropdown-menu'
 import Markdown from 'markdown-to-jsx'
 import Link from 'next/link'
 import { FormattedDateTime, Pill } from 'polarkit/components/ui/atoms'
+import { Status } from 'polarkit/components/ui/atoms/Status'
 import Button from 'polarkit/components/ui/atoms/button'
 import ShadowBox from 'polarkit/components/ui/atoms/shadowbox'
 import React, { PropsWithChildren } from 'react'
 import { twMerge } from 'tailwind-merge'
-import { Status } from 'polarkit/components/ui/atoms/Status'
 
 interface OrderProductItemProps {
   product: Product
 }
 
 const OrderProductItem = ({ product }: OrderProductItemProps) => {
   return (
-    <div className="flex bg-white dark:bg-polar-800 flex-row items-center gap-6 border border-gray-200 dark:border-polar-700 rounded-3xl p-4">
+    <div className="dark:bg-polar-800 dark:border-polar-700 flex flex-row items-center gap-6 rounded-3xl border border-gray-200 bg-white p-4">
       <ProductThumbnail product={product} size="medium" />
       <div className="flex flex-col gap-2">
-        <div className='flex flex-row items-center gap-x-4'>
+        <div className="flex flex-row items-center gap-x-4">
           <h3 className="text-xl">{product.name}</h3>
-          {product.is_archived && (
-           <Pill color='gray'>Archived</Pill>
-          )}
+          {product.is_archived && <Pill color="gray">Archived</Pill>}
         </div>
         {product.description && (
           <div
@@ -56,10 +54,7 @@ interface ClientPageProps {
   orderId: string
 }
 
-const ClientPage: React.FC<ClientPageProps> = ({
- organization,
-  orderId
-}) => {
+const ClientPage: React.FC<ClientPageProps> = ({ organization, orderId }) => {
   const { data: order } = useOrder(orderId)
   const { data: product } = useProduct(order?.product.id)
   const { data: customFields } = useCustomFields(organization.id)
@@ -71,39 +66,57 @@ const ClientPage: React.FC<ClientPageProps> = ({
   return (
     <DashboardBody
       title={
-        <div className='flex flex-row items-baseline gap-8'>
+        <div className="flex flex-row items-baseline gap-8">
           <h2 className="text-xl font-normal">Order</h2>
-          <span className='text-gray-500 font-mono text-sm dark:text-polar-500'>{order.id}</span>
+          <span className="dark:text-polar-500 font-mono text-sm text-gray-500">
+            {order.id}
+          </span>
         </div>
       }
-      className='gap-y-8'
+      className="gap-y-8"
       contextView={<CustomerModal customer={order.customer} />}
     >
-      <ShadowBox className="flex flex-col bg-gray-100 gap-8">
+      <ShadowBox className="flex flex-col gap-8 bg-gray-100">
         <OrderProductItem product={product} />
         <div className="flex flex-row gap-4">
-          {!product.is_archived && <Link href={`/dashboard/${organization.slug}/products/${product.id}`}>
-            <Button>View Product</Button>
-          </Link>}
-          <Link href={`/dashboard/${organization.slug}/sales?product_id=${product.id}`}>
-            <Button variant="secondary" className='bg-gray-300 hover:bg-gray-200'>All Product Orders</Button>
+          {!product.is_archived && (
+            <Link
+              href={`/dashboard/${organization.slug}/products/${product.id}`}
+            >
+              <Button>View Product</Button>
+            </Link>
+          )}
+          <Link
+            href={`/dashboard/${organization.slug}/sales?product_id=${product.id}`}
+          >
+            <Button
+              variant="secondary"
+              className="bg-gray-300 hover:bg-gray-200"
+            >
+              All Product Orders
+            </Button>
           </Link>
         </div>
       </ShadowBox>
       <ShadowBox className="flex flex-col gap-8 bg-gray-100">
         <h2 className="text-xl">Order Details</h2>
         <div className="flex flex-col gap-1">
           <DetailRow title="Order ID">
-            <span className='font-mono text-sm'>{order.id}</span>
+            <span className="font-mono text-sm">{order.id}</span>
           </DetailRow>
           <DetailRow title="Order Date">
-            <span><FormattedDateTime dateStyle='long' datetime={order.created_at} /></span>
+            <span>
+              <FormattedDateTime dateStyle="long" datetime={order.created_at} />
+            </span>
           </DetailRow>
           <DetailRow title="Billing Reason">
-            <Status status={order.billing_reason.split('_').join(' ')} className='capitalize text-emerald-500 dark:bg-emerald-950 bg-emerald-100' />
+            <Status
+              status={order.billing_reason.split('_').join(' ')}
+              className="bg-emerald-100 capitalize text-emerald-500 dark:bg-emerald-950"
+            />
           </DetailRow>
 
-          <Separator className='h-[1px] my-4 dark:bg-polar-700 bg-gray-300' />
+          <Separator className="dark:bg-polar-700 my-4 h-[1px] bg-gray-300" />
 
           <DetailRow title="Tax">
             <span>{formatCurrencyAndAmount(order.tax_amount)}</span>
@@ -116,15 +129,15 @@ const ClientPage: React.FC<ClientPageProps> = ({
           </DetailRow>
           {order.billing_address ? (
             <>
-              <Separator className='h-[1px] my-4 dark:bg-polar-700 bg-gray-300' />
+              <Separator className="dark:bg-polar-700 my-4 h-[1px] bg-gray-300" />
               <DetailRow title="Country">
                 <span>{order.billing_address?.country}</span>
               </DetailRow>
               <DetailRow title="Address">
                 <span>{order.billing_address?.line1 ?? '—'}</span>
               </DetailRow>
               <DetailRow title="Address 2">
-              <span>{order.billing_address?.line2 ?? '—'}</span>
+                <span>{order.billing_address?.line2 ?? '—'}</span>
               </DetailRow>
               <DetailRow title="Postal Code">
                 <span>{order.billing_address?.postal_code ?? '—'}</span>
@@ -135,7 +148,10 @@ const ClientPage: React.FC<ClientPageProps> = ({
               <DetailRow title="State">
                 <span>{order.billing_address?.state ?? '—'}</span>
               </DetailRow>
-            </>) : <></>}
+            </>
+          ) : (
+            <></>
+          )}
         </div>
       </ShadowBox>
 
@@ -167,7 +183,10 @@ const ClientPage: React.FC<ClientPageProps> = ({
   )
 }
 
-const DetailRow = ({ title, children }: PropsWithChildren<{ title: string;}>) => {
+const DetailRow = ({
+  title,
+  children,
+}: PropsWithChildren<{ title: string }>) => {
   return (
     <div className="flex flex-row justify-between gap-8">
       <span className="dark:text-polar-500 text-gray-500">{title}</span>

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

@@ -12,18 +12,13 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function Page({
   params,
 }: {
-  params: { organization: string, id: string }
+  params: { organization: string; id: string }
 }) {
   const api = getServerSideAPI()
   const organization = await getOrganizationBySlugOrNotFound(
     api,
     params.organization,
   )
 
-  return (
-    <ClientPage
-      organization={organization}
-      orderId={params.id}
-    />
-  )
+  return <ClientPage organization={organization} orderId={params.id} />
 }

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

@@ -1,9 +1,9 @@
 'use client'
 
 import { DashboardBody } from '@/components/Layout/DashboardLayout'
+import FeatureSettings from '@/components/Settings/FeatureSettings'
 import OrganizationAppearanceSettings from '@/components/Settings/OrganizationAppearanceSettings'
 import { Section, SectionDescription } from '@/components/Settings/Section'
-import FeatureSettings from '@/components/Settings/FeatureSettings'
 import { MaintainerOrganizationContext } from '@/providers/maintainerOrganization'
 import { useContext } from 'react'
 

clients/apps/web/src/app/(main)/dashboard/layout.tsx

@@ -1,10 +1,5 @@
-
 import { PropsWithChildren } from 'react'
 
 export default async function Layout({ children }: PropsWithChildren) {
-  return (
-      <div className="md:h-screen h-full flex flex-col">
-        {children}
-      </div>
-  )
+  return <div className="flex h-full flex-col md:h-screen">{children}</div>
 }

clients/apps/web/src/app/(main)/docs/developers/webhooks/events/[...event]/page.tsx

@@ -1,4 +1,5 @@
 import ProseWrapper from '@/components/Documentation/ProseWrapper'
+import { TableOfContents } from '@/components/Documentation/TableOfContents'
 import {
   fetchSchema,
   generateSchemaExample,
@@ -9,14 +10,11 @@ import SyntaxHighlighterServer, {
   Highlighter,
   getHighlighter,
 } from '@/components/SyntaxHighlighterShiki/SyntaxHighlighterServer'
-import { notFound } from 'next/navigation'
 import Markdown from 'markdown-to-jsx'
+import { notFound } from 'next/navigation'
 import { OpenAPIV3_1 } from 'openapi-types'
-import { TableOfContents } from '@/components/Documentation/TableOfContents'
 import type { TocItem } from 'remark-flexible-toc'
 
-
-
 export const dynamic = 'force-static'
 
 const Webhook = ({
@@ -46,7 +44,7 @@ const Webhook = ({
 }
 
 export default async function Page({
-  params: { event }
+  params: { event },
 }: {
   params: { event: string[] }
 }) {
@@ -66,7 +64,7 @@ export default async function Page({
       depth: 1,
       numbering: [1],
       parent: 'root',
-    }
+    },
   ]
 
   return (

clients/apps/web/src/app/(main)/login/magic-link/authenticate/page.tsx

@@ -17,7 +17,7 @@ export default function Page({
   })
   return (
     <form
-      className="dark:bg-polar-950 flex h-screen w-full grow items-center justify-center  bg-gray-50"
+      className="dark:bg-polar-950 flex h-screen w-full grow items-center justify-center bg-gray-50"
       method="post"
       action={`${CONFIG.BASE_URL}/v1/magic_link/authenticate?${urlSearchParams.toString()}`}
     >

clients/apps/web/src/app/(main)/signup/page.tsx

@@ -50,9 +50,13 @@ export default async function Page({
               </label>
               <Input name="org-name" autoFocus />
             </div> */}
-            <Login returnTo={return_to} returnParams={rest} signup={{
+            <Login
+              returnTo={return_to}
+              returnParams={rest}
+              signup={{
                 intent: 'creator',
-            }}/>
+              }}
+            />
           </div>
         </div>
         <div className="dark:bg-polar-950 dark:border-polar-700 rounded-4xl col-span-2 hidden overflow-hidden rounded-r-none border border-r-0 border-gray-200 bg-gray-100 md:flex">