chore(studio): improve table presentation#41217
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
|
||
| - the link in the Payment Failure email | ||
| - the "Pay Now" button on the [organization's invoices page](/dashboard/org/_/billing#invoices) | ||
| - the "Pay now" button on the [organization's invoices page](/dashboard/org/_/billing#invoices) |
There was a problem hiding this comment.
I changed this button to sentence case below, so I’m just reflecting the UI 1:1 here.
| </Badge> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="bottom" className="max-w-sm"> | ||
| <TooltipContent side="bottom" className="max-w-xs"> |
There was a problem hiding this comment.
Otherwise it’s a visually funky width.
| While most credit card payments get processed instantly, some Indian card providers | ||
| may take up to 72 hours to process payments. We’re still waiting for your card | ||
| provider to process this payment. | ||
| </p> | ||
|
|
||
| <p className="text-xs text-foreground"> | ||
| If you run into this, we recommend{' '} | ||
| We recommend proactively{' '} | ||
| <InlineLink href={`${DOCS_URL}/guides/platform/credits#credit-top-ups`}> | ||
| topping up your credits | ||
| </InlineLink>{' '} | ||
| in advance to avoid running into this in the future. | ||
| to avoid this issue in the future. | ||
| </p> | ||
| </div> | ||
| ) : paymentAttempted ? ( | ||
| <p className="text-xs text-foreground"> | ||
| We were not able to collect the payment. Make sure you have a valid payment method and | ||
| enough funds. Outstanding invoices may cause restrictions. You can manually pay the | ||
| invoice using the "Pay Now" button. | ||
| invoice using the “Pay now” button. | ||
| </p> | ||
| ) : ( | ||
| <p className="text-xs text-foreground"> | ||
| The invoice will soon be charged for. In case you pay via invoice instead of card, | ||
| please make sure to make the payment in a timely manner. You can also pay the invoice | ||
| using your card now using the "Pay Now" button. | ||
| The invoice will soon be charged for. Please make sure to pay in a timely manner, | ||
| especially if you pay via invoice instead of card. You can pay the invoice using your | ||
| card using the “Pay now” button. | ||
| </p> | ||
| ))} | ||
|
|
||
| {status === InvoiceStatus.PAID && ( | ||
| <p className="text-xs text-foreground"> | ||
| The invoice has been paid successfully. No action is required on your side. | ||
| The invoice has been paid successfully. No further action is required on your side. | ||
| </p> | ||
| )} | ||
|
|
||
| {status === InvoiceStatus.VOID && ( | ||
| <p className="text-xs text-foreground"> | ||
| This invoice has been forgiven. No action is required on your side. | ||
| This invoice has been forgiven. No further action is required on your side. |
There was a problem hiding this comment.
Copywriting improvements for clarity.
|
|
||
| return ( | ||
| <Card className="max-w-5xl"> | ||
| <CardContent className="p-0 pb-3"> |
There was a problem hiding this comment.
Doesn’t seem necessary to wrap this Table in CardContent only to undo its padding. Or am I missing something?
| <Card className="max-w-5xl"> | ||
| <CardContent className="p-0 pb-3"> | ||
| <Table className=""> | ||
| <TableCaption className="text-xs"> |
There was a problem hiding this comment.
Remove text-xs. Keeping text size consistent is a way to improve clarity.
| return ( | ||
| <Button onClick={onPayNow} loading={isPending} disabled={isPending}> | ||
| Pay Now | ||
| Pay now |
There was a problem hiding this comment.
Sentence case as per our convention for button and title casing.
| <TableRow> | ||
| {invoices.length > 0 && ( | ||
| <TableHead className="w-2"> | ||
| <span className="sr-only">Icon</span> |
There was a problem hiding this comment.
Makes the word “Icon” read by screen readers. Otherwise it’s just an ambitious thead.
| <CardFooter className="border-t p-4 flex items-center justify-between"> | ||
| <p className="text-foreground-muted text-sm"> | ||
| {isErrorCount | ||
| ? 'Failed to retrieve total number of invoices' | ||
| : `Showing ${offset + 1} to ${offset + invoices.length} out of ${count} invoices`} | ||
| </p> | ||
| <div className="flex items-center gap-x-2" aria-label="Pagination"> | ||
| <Button | ||
| icon={<ChevronLeft />} | ||
| aria-label={`Go to page ${page - 1}`} | ||
| type="default" | ||
| size="tiny" | ||
| disabled={page === 1} | ||
| onClick={async () => setPage(page - 1)} | ||
| /> | ||
| <Button | ||
| icon={<ChevronRight />} | ||
| aria-label={`Go to page ${page + 1}`} | ||
| type="default" | ||
| size="tiny" | ||
| disabled={page * PAGE_LIMIT >= (count ?? 0)} | ||
| onClick={async () => setPage(page + 1)} | ||
| /> | ||
| </div> | ||
| </CardFooter> |
There was a problem hiding this comment.
Table elements like tfoot and caption should only ever container inline elements. This is outside of the scope of the table, hence the CardFooter.
| className={cn('bg-primary font-medium text-primary-foreground', className)} | ||
| {...props} | ||
| /> | ||
| <tfoot ref={ref} className={cn('border-t font-medium', className)} {...props} /> |
There was a problem hiding this comment.
Remove extraneous classes.
| className={cn( | ||
| 'border-t', // TableCaption is aligned by parent Table at caption-bottom | ||
| 'p-4 text-sm text-foreground-muted', // Match styling of TableCell | ||
| className | ||
| )} | ||
| // Should only contain inline elements | ||
| {...props} |
There was a problem hiding this comment.
As explained in comments:
- It always needs a
border-t - It should match the styling of
TableCell
🎭 Playwright Test Results
Details
Flaky testsFeatures › table-editor.spec.ts › table editor › add enums and show enums on table Skipped testsFeatures › sql-editor.spec.ts › SQL Editor › snippet favourite works as expected |
This comment has been minimized.
This comment has been minimized.
| </Table> | ||
| </CardContent> | ||
| <Table> | ||
| <TableCaption> |
There was a problem hiding this comment.
hmm a little confused with how caption is rendered (surprised that's rendered as a "footer", i.e. below the table header despite it being declared above) - but might need to remove border-t if there's no wrappers (there's an extra border in the empty state)
Should we be using TableFooter here instead actually?
There was a problem hiding this comment.
bit of a text size difference as well - will add a text-xs just to keep things as they are although feel free to adjust
before:
after:
There was a problem hiding this comment.
am just gonna shift table caption to below table body - since its meant to be rendered below the table body anyways
There was a problem hiding this comment.
Good shout. Replaced with more semantic tfoot (our TableFooter).
This comment has been minimized.
This comment has been minimized.
joshenlim
left a comment
There was a problem hiding this comment.
Verified changes on staging preview!
|
Warning Rate limit exceeded@dnywh has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 11 minutes and 47 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughRefactors table layouts and styling in invoices and integrations, tightens tooltip layout and rewords several invoice status messages, changes "Pay Now" to "Pay now" text, and adjusts base TableCaption/TableFooter styles. No exported APIs or runtime control flow were altered. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/docs/content/guides/platform/your-monthly-invoice.mdx(1 hunks)apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx(1 hunks)apps/studio/components/interfaces/Integrations/Wrappers/WrapperTable.tsx(2 hunks)apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicePayButton.tsx(1 hunks)apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx(4 hunks)packages/ui/src/components/shadcn/ui/table.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx (3)
packages/ui/index.tsx (1)
TooltipContent(241-241)apps/studio/components/ui/InlineLink.tsx (1)
InlineLink(17-44)apps/studio/lib/constants/index.ts (1)
DOCS_URL(48-48)
apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx (3)
packages/ui/index.tsx (1)
Card(13-13)apps/studio/components/ui/AlertError.tsx (1)
AlertError(49-92)apps/studio/lib/helpers.ts (1)
formatCurrency(329-337)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: typecheck
- GitHub Check: test
- GitHub Check: test (1)
🔇 Additional comments (8)
apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicePayButton.tsx (1)
25-25: LGTM! Sentence case applied consistently.The button label change aligns with the project's convention for button casing and matches related updates across the billing UI.
apps/docs/content/guides/platform/your-monthly-invoice.mdx (1)
69-69: LGTM! Documentation updated to match UI.The button label in the documentation now accurately reflects the updated UI component.
apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx (1)
60-99: LGTM! Copywriting and styling improvements enhance clarity.The updated tooltip messages are more direct and user-friendly. The styling consolidation (text centering at parent level) maintains visual consistency while simplifying the markup.
packages/ui/src/components/shadcn/ui/table.tsx (3)
1-1: LGTM! Import consolidation.Moving lucide-react imports to the top improves code organization.
47-47: LGTM! TableFooter styling updated for consistency.The removal of background color and addition of
border-taligns with the new table design system where footers use borders instead of distinct backgrounds.
162-172: LGTM! Enhanced TableCaption styling with helpful documentation.The expanded styling with border and padding matching TableCell creates visual consistency. The inline comments clarify the caption-bottom alignment behavior and element constraints, which will help future maintainers.
apps/studio/components/interfaces/Integrations/Wrappers/WrapperTable.tsx (1)
77-120: LGTM! Well-structured table refactor with accessibility improvements.The restructure to a flat Table layout with explicit TableHeader, TableBody, and TableFooter components improves clarity and maintainability. Key improvements:
- Screen reader label on Line 84 for the Actions column enhances accessibility
- Conditional
border-t-0on Line 110 when there are no wrappers addresses the visual issue mentioned in past review comments- Footer hover prevention styling ensures consistent UX
apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx (1)
206-230: LGTM! Well-implemented pagination controls.The CardFooter pagination implementation includes:
- Clear status text showing current range and total count
- Proper ARIA labels on navigation buttons for accessibility
- Appropriate disabled states at boundaries
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx (1)
122-150: Fix empty-statecolSpanand remove unreachable loading copy.When
invoices.length === 0, the icon header cell is not rendered, so the header has 5 columns. The empty-state row still usescolSpan={6}, causing a header/body column mismatch. Also, inside the empty-state message,isLoading ? 'Checking for invoices' : ...is never true in this branch because the outer conditional already handledisLoading.You can fix both with:
- ) : invoices.length === 0 ? ( - <TableRow className="[&>td]:hover:bg-inherit"> - <TableCell colSpan={6} className="py-6"> - <p className="text-foreground-lighter"> - {isLoading ? 'Checking for invoices' : 'No invoices for this organization yet'} - </p> - </TableCell> - </TableRow> + ) : invoices.length === 0 ? ( + <TableRow className="[&>td]:hover:bg-inherit"> + <TableCell colSpan={5} className="py-6"> + <p className="text-foreground-lighter"> + No invoices for this organization yet + </p> + </TableCell> + </TableRow>This keeps the table grid consistent and removes dead conditional text.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: test
- GitHub Check: typecheck
- GitHub Check: test (1)
🔇 Additional comments (2)
apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx (2)
2-2: Card/Table refactor and header styling look solid.Using the shared Card + Table primitives here, along with
tableHeadClassNameto mute headers during loading/empty states and sr-only labels for the icon/actions columns, is consistent and accessible. No issues from my side on this structure.Also applies to: 18-29, 98-121
155-196: Invoice row markup and accessibility look good.Decorative icon is correctly marked
aria-hidden, the sr-only "Icon" header labels the column for AT, amounts are markedtranslate="no", invoice numbers are monospaced, and the status + actions cells are logically grouped. The row structure matches the header columns and looks clean.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx (1)
203-207: Guard againstcountbeing undefined in footer copy.When the count query hasn't resolved yet,
countwill beundefined, resulting in user-facing text like "out of undefined invoices".<p className="text-foreground-muted text-sm"> {isErrorCount ? 'Failed to retrieve total number of invoices' - : `Showing ${offset + 1} to ${offset + invoices.length} out of ${count} invoices`} + : typeof count === 'number' + ? `Showing ${offset + 1} to ${offset + invoices.length} out of ${count} invoices` + : `Showing ${offset + 1} to ${offset + invoices.length} invoices`} </p>
🧹 Nitpick comments (2)
apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx (2)
208-208: Consider addingrole="navigation"for proper landmark semantics.The
aria-label="Pagination"on adivdoesn't create a navigation landmark. Addingrole="navigation"allows assistive technologies to identify this as a navigable region.- <div className="flex items-center gap-x-2" aria-label="Pagination"> + <div className="flex items-center gap-x-2" role="navigation" aria-label="Pagination">
215-215: Unnecessaryasyncon synchronous callbacks.The
setPagecalls are synchronous state updates; theasynckeyword has no effect here and can be removed for clarity.- onClick={async () => setPage(page - 1)} + onClick={() => setPage(page - 1)} ... - onClick={async () => setPage(page + 1)} + onClick={() => setPage(page + 1)}Also applies to: 223-223
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx(4 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx (3)
packages/ui/index.tsx (1)
Card(13-13)apps/studio/components/ui/AlertError.tsx (1)
AlertError(49-92)apps/studio/lib/helpers.ts (1)
formatCurrency(329-337)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: test (1)
- GitHub Check: typecheck
- GitHub Check: test
🔇 Additional comments (3)
apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx (3)
98-100: Good UX pattern for loading state visual feedback.Fading the header text during loading/empty states provides clear visual indication that data is not yet available.
122-148: Column span logic is now correct across all states.The conditional
colSpan={invoices.length > 0 ? 6 : 5}properly accounts for the absent icon column during loading/error states, and the empty state correctly usescolSpan={5}.
153-194: Invoice row rendering is clean and accessible.The ARIA issue has been addressed (removed redundant
aria-labelfrom the decorative icon), and the row structure properly uses semantic table cells with appropriate formatting.
* billing improvements * wrapper improvements * border fix * Nit adjustments * fixes * fix aria * fix loading * fixes * fix --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* wip * wip * single page * new sections and polishing up * reponsive * nits * semantic titles * optimize imgs * nits * wup * hero bubbles * Update apps/www/components/Wrapped/Pages/SupabaseSelect.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: Use `amaro` for stripping types in code samples (#41229) * Fix the error for babel/preset-typescript in docs. * Unfix the version. * Try using amaro for type stripping. * Run prettier after stripping types. * Fix tests. --------- Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com> * fix: Fix minor issue in the foreign key selector (#41235) Change the isPending state to isLoading. * docs: Remove empty troubleshooting fields (#41236) * Remove emoty fields * Fix lock file * chore: update self-hosted image versions (#41234) * Feature: show index advisor in table editor (#41166) * added table advisor query * updated to include table editor performance * updated JSON B * added side panel * updated query indexes to show highlights context * show index advisor in table editor * updated invalidation logic * added color updates * added query indexes * updated query performance type * updated overflow and title * put behind flag * remove gap * added on close * Update apps/studio/data/database/table-index-advisor-query.ts Co-authored-by: Charis <26616127+charislam@users.noreply.github.com> * updated styling --------- Co-authored-by: Charis <26616127+charislam@users.noreply.github.com> * fix: useFlag to update initial check of flag store (#41209) * fix flag lib * updated uneeded logic * updated logic * remove line * updated comment * fix: Hide favourites and share snippets on self-hosted variant (#41227) * Hide favorite and share actions for self-hosted version. * Rename the query on save only on platform. * Simplify useCheckOpenAiKeyQuery. * Rename with AI now depends if the OPENAI_API_KEY is set. * Minor fixes. * Fix the tests to use .skip for skipping tests. Remove extra port params. * Make the test for favourites work only on platform variant. * feat(reports): support new database report granularity FE-2221 (#41228) * handle new granularity * undo unnecessary type change * rm console log * fix: blog auto scroll post app router migration for blog (#41220) Enhance TOC highlighting and anchor scroll in blog posts Refactored useActiveAnchors hook to support smooth hash scrolling and improved TOC highlighting based on scroll position. Added options for custom selectors and offset, and updated BlogPostClient to enable scroll-to-anchor and TOC highlight functionality. * fix: remove flakiness with launch options and default timeouts (#41245) * attempt to make table editor tests less flaky * updated race conditions for table editor * updated playwright config with optimized launch options * reduce workers * updated timeouts for tests * updated config to have a global timeout of 20 seconds * updated to be visible * chore: update changelog and image versions file (#41244) * feat(design-system): improve table docs (#41215) * docs updates * docs expansion * minor docs fix * improvements * fix dependencies * docs expansion * more table examples * map over data * improve copy * Update apps/design-system/registry/default/example/table-row-link-actions.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/design-system/registry/default/example/table-row-link-actions.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fixes * fix --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore(studio): improve table presentation (#41217) * billing improvements * wrapper improvements * border fix * Nit adjustments * fixes * fix aria * fix loading * fixes * fix --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> * Save opened side bar in local storage, and init on new session (#41224) * Save opened side bar in local storage, and init on new session * Fix test * Fix * Nit * docs(design-system): Data Table and Data Grid documentation (#41252) * basic differentiation * docs * data-grid examples * data-grid-demo * data-table * demo * use existing components * improvements * markup * docs * remove data table * lint * Update apps/design-system/content/docs/ui-patterns/empty-states.mdx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix ref * use TanStack sorting * grammar * dependency * 📝 Add docstrings to `dnywh/docs/data-table-data-grid` (#41255) Docstrings generation was requested by @MildTomato. * #41252 (comment) The following files were modified: * `apps/design-system/registry/default/example/data-grid-demo.tsx` * `apps/design-system/registry/default/example/data-grid-empty-state.tsx` * `apps/design-system/registry/default/example/data-table-demo.tsx` Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * docs: fix grammatical error in generate-text-embeddings guide (#41187) * docs: fix grammatical error in generate-text-embeddings guide * Update generate-text-embeddings.mdx Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com> --------- Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com> * chore: uniform card and panel padding-x (#41237) * docs: Fix typo in API introduction documentation (#41251) * chore(billing): regenerate api-types to include vanity subdomain entitlement (#41257) chore(billing: regenerate api-types to include vanity subdomain entitlement * Add liam to humans.txt (#41169) * docs: Add link to restoring backup to new Supabase project (#39108) Co-authored-by: Chris Chinchilla <chris.ward@supabase.io> * feat(code-block): add word wrap functionality and controls to code bl… (#39689) * feat(code-block): add word wrap functionality and controls to code blocks * feat(code-block): enhance layout of code block with improved line number display and structure * fix h-full issue * fix Prettier issue --------- Co-authored-by: Chris Chinchilla <chris.ward@supabase.io> * wip * wip * single page * optimize imgs * revert * pkg * update new content * rm overflow * new data * nits * nits * og * border * fix: improve AnimatedCounter and FloatingStatBubbles/Intro components - Update AnimatedCounter to correctly reflect value changes in the DOM. - Add lifetime management for timers in FloatingStatBubbles and FloatingBoxes to prevent memory leaks. - Ensure cleanup of timers on component unmount for better resource management. * dbs * minify images * text-brand-link on light mode * fix grid * max-width on images * address comments * fixes * faster image rotation * upd og * new launch * nitsgs * last nits --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com> Co-authored-by: Chris Chinchilla <chris.ward@supabase.io> Co-authored-by: Andrey A. <56412611+aantti@users.noreply.github.com> Co-authored-by: Ali Waseem <waseema393@gmail.com> Co-authored-by: Jordi Enric <37541088+jordienr@users.noreply.github.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com> Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Dinesh Dawonauth <dineshddawo@gmail.com> Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com> Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com> Co-authored-by: 李子衿 <160584929+hhhez@users.noreply.github.com> Co-authored-by: Kanishk Dudeja <kanishk@kanishkdudeja.com> Co-authored-by: lch-supa <liam.hogan@supabase.io> Co-authored-by: Timothy Lim <tim.lim@supabase.io> Co-authored-by: Priyanshu Thapliyal <114170980+Priyanshuthapliyal2005@users.noreply.github.com>
What kind of change does this PR introduce?
What is the current behavior?
What is the new behavior?
TablecomponentNote that the invoices have been mocked locally and artificially limited to five per page to show off pagination. I can share the mock data if you need it.
Summary by CodeRabbit
Style
Refactor
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.