small payouts UX improvements

Author: steven-tey

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/fraud/fraud-group-table.tsx

@@ -156,7 +156,6 @@ export function FraudGroupTable() {
                 name: partner.name || "Unknown",
                 image: partner.image,
               }}
-              showPermalink={false}
               showFraudIndicator={false}
             />
           );

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/[payoutId]/page-client.tsx

@@ -32,6 +32,7 @@ import {
   Table,
   TimestampTooltip,
   Tooltip,
+  useKeyboardShortcut,
   usePagination,
   useTable,
 } from "@dub/ui";
@@ -508,6 +509,21 @@ function PayoutConfirmButton() {
   const permissionsError =
     typeof _permissionsError === "string" ? _permissionsError : null;
 
+  useKeyboardShortcut(
+    "c",
+    () =>
+      router.push(
+        `/${slug}/program/payouts?confirmPayouts=true&selectedPayoutId=${payout?.id}`,
+      ),
+    {
+      enabled:
+        !hasHold &&
+        !!payout?.id &&
+        !!payout.partner.payoutsEnabledAt &&
+        !permissionsError,
+    },
+  );
+
   if (payout?.status !== "pending") {
     return null;
   }
@@ -516,6 +532,8 @@ function PayoutConfirmButton() {
     <div className="flex items-center gap-2">
       <Button
         text="Confirm payout"
+        className="h-8 px-3 sm:h-9"
+        shortcut="C"
         disabledTooltip={
           hasHold
             ? `This partner's payouts are on hold due to [unresolved fraud events](${APP_DOMAIN}/${slug}/program/fraud?partnerId=${payout.partner.id}). They cannot be paid out until resolved.`

apps/web/ui/partners/confirm-payouts-sheet.tsx

@@ -689,6 +689,8 @@ function ConfirmPayoutsSheetContent() {
     error: eligiblePayoutsError
       ? "Failed to load payouts for this invoice."
       : undefined,
+    onRowClick: (row) =>
+      window.open(`/${slug}/program/payouts/${row.original.id}`, "_blank"),
   });
 
   const { error: permissionsError } = clientAccessCheck({
@@ -835,25 +837,13 @@ function ConfirmPayoutsSheetContent() {
                 )
               </span>
             </span>
-            <Button
-              variant="secondary"
-              text="Review"
-              className="h-7 w-fit rounded-md border border-neutral-200 px-2 text-sm"
-              onClick={() =>
-                queryParams({
-                  set: {
-                    status: "hold",
-                  },
-                  del: [
-                    "confirmPayouts",
-                    "selectedPayoutId",
-                    "excludedPayoutIds",
-                    "payoutId",
-                    "page",
-                  ],
-                })
-              }
-            />
+            <a href={`/${slug}/program/payouts?status=hold`} target="_blank">
+              <Button
+                variant="secondary"
+                text="Review"
+                className="h-7 w-fit cursor-alias rounded-md border border-neutral-200 px-2 text-sm"
+              />
+            </a>
           </div>
         )}
       </div>