From e4b9b4dba95d8d8f6401a8afd033c0af0f253e25 Mon Sep 17 00:00:00 2001
From: Xiangzhe <xiangzhedev@gmail.com>
Date: Sun, 9 Aug 2026 08:34:04 -0300
Subject: [PATCH] refactor(settings): extract pricing tab helpers

Co-authored-by: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
---
 .../settings/components/PricingTab.tsx        | 59 +------------------
 .../settings/components/PricingTabHelpers.tsx | 56 ++++++++++++++++++
 2 files changed, 58 insertions(+), 57 deletions(-)
 create mode 100644 src/app/(dashboard)/dashboard/settings/components/PricingTabHelpers.tsx

diff --git a/src/app/(dashboard)/dashboard/settings/components/PricingTab.tsx b/src/app/(dashboard)/dashboard/settings/components/PricingTab.tsx
index c402b5dc32..cafd2f45aa 100644
--- a/src/app/(dashboard)/dashboard/settings/components/PricingTab.tsx
+++ b/src/app/(dashboard)/dashboard/settings/components/PricingTab.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { FilterSelect, HeroStat, SyncMini } from "./PricingTabHelpers";
+
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { Card, Button } from "@/shared/components";
 import ProviderIcon from "@/shared/components/ProviderIcon";
@@ -726,63 +728,6 @@ export default function PricingTab() {
   );
 }
 
-function HeroStat({ label, value, accent }: { label: string; value: number; accent?: string }) {
-  return (
-    <div className="text-center">
-      <div className="text-[10px] uppercase tracking-wide text-text-muted font-semibold truncate">
-        {label}
-      </div>
-      <div
-        className={`text-2xl font-bold tabular-nums leading-tight ${accent || "text-text-main"}`}
-      >
-        {value}
-      </div>
-    </div>
-  );
-}
-
-function SyncMini({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="rounded-md border border-border/30 bg-bg-base/40 px-2 py-1.5">
-      <p className="text-[9px] uppercase tracking-wide text-text-muted font-semibold truncate">
-        {label}
-      </p>
-      <p className="text-[11px] font-medium text-text-main mt-0.5 truncate" title={value}>
-        {value}
-      </p>
-    </div>
-  );
-}
-
-function FilterSelect({
-  label,
-  value,
-  onChange,
-  options,
-}: {
-  label: string;
-  value: string;
-  onChange: (v: string) => void;
-  options: Array<{ value: string; label: string }>;
-}) {
-  return (
-    <label className="flex items-center gap-1.5 text-xs text-text-muted">
-      <span className="font-semibold uppercase tracking-wide">{label}:</span>
-      <select
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className="bg-bg-base border border-border rounded-md px-2 py-1.5 text-xs text-text-main cursor-pointer focus:outline-none focus:border-primary"
-      >
-        {options.map((opt) => (
-          <option key={opt.value} value={opt.value}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-    </label>
-  );
-}
-
 function ProviderSection({
   provider,
   pricingData,
diff --git a/src/app/(dashboard)/dashboard/settings/components/PricingTabHelpers.tsx b/src/app/(dashboard)/dashboard/settings/components/PricingTabHelpers.tsx
new file mode 100644
index 0000000000..8dd99258c9
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/settings/components/PricingTabHelpers.tsx
@@ -0,0 +1,56 @@
+export function HeroStat({ label, value, accent }: { label: string; value: number; accent?: string }) {
+  return (
+    <div className="text-center">
+      <div className="text-[10px] uppercase tracking-wide text-text-muted font-semibold truncate">
+        {label}
+      </div>
+      <div
+        className={`text-2xl font-bold tabular-nums leading-tight ${accent || "text-text-main"}`}
+      >
+        {value}
+      </div>
+    </div>
+  );
+}
+
+export function SyncMini({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-md border border-border/30 bg-bg-base/40 px-2 py-1.5">
+      <p className="text-[9px] uppercase tracking-wide text-text-muted font-semibold truncate">
+        {label}
+      </p>
+      <p className="text-[11px] font-medium text-text-main mt-0.5 truncate" title={value}>
+        {value}
+      </p>
+    </div>
+  );
+}
+
+export function FilterSelect({
+  label,
+  value,
+  onChange,
+  options,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: Array<{ value: string; label: string }>;
+}) {
+  return (
+    <label className="flex items-center gap-1.5 text-xs text-text-muted">
+      <span className="font-semibold uppercase tracking-wide">{label}:</span>
+      <select
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="bg-bg-base border border-border rounded-md px-2 py-1.5 text-xs text-text-main cursor-pointer focus:outline-none focus:border-primary"
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}