From 275d7ee5864ec4b24d6419efa1eb7bc3f9604a6b Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Thu, 31 Jul 2025 03:37:09 -0600
Subject: [PATCH] refactor(billing): reorganize imports and adjust layout for
 better UI consistency

---
 .../settings/billing/show-billing.tsx         | 26 +++++++++----------
 .../settings/billing/show-providers.tsx       |  8 +++---
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
index 117e980ef..1be3d4510 100644
--- a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
+++ b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
@@ -1,3 +1,15 @@
+import { loadStripe } from "@stripe/stripe-js";
+import clsx from "clsx";
+import {
+	AlertTriangle,
+	CheckIcon,
+	CreditCard,
+	Loader2,
+	MinusIcon,
+	PlusIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -12,18 +24,6 @@ import { Progress } from "@/components/ui/progress";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { loadStripe } from "@stripe/stripe-js";
-import clsx from "clsx";
-import {
-	AlertTriangle,
-	CheckIcon,
-	CreditCard,
-	Loader2,
-	MinusIcon,
-	PlusIcon,
-} from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
 import { ShowProviders } from "./show-providers";
 
 const stripePromise = loadStripe(
@@ -315,7 +315,7 @@ export const ShowBilling = () => {
 							)}
 						</div>
 					</CardContent>
-					<div className="flex flex-col gap-4 px-4">
+					<div className="flex flex-col gap-4 pb-10">
 						<ShowProviders />
 					</div>
 				</div>
diff --git a/apps/dokploy/components/dashboard/settings/billing/show-providers.tsx b/apps/dokploy/components/dashboard/settings/billing/show-providers.tsx
index 835ffe42e..ce39f53f6 100644
--- a/apps/dokploy/components/dashboard/settings/billing/show-providers.tsx
+++ b/apps/dokploy/components/dashboard/settings/billing/show-providers.tsx
@@ -1,18 +1,18 @@
+import { DollarSign } from "lucide-react";
 import {
 	Card,
 	CardContent,
+	CardDescription,
 	CardHeader,
 	CardTitle,
-	CardDescription,
 } from "@/components/ui/card";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ShowHetznerProviders } from "./show-hetzner-providers";
 import { ShowHostingerServers } from "./show-hostinger-servers";
-import { DollarSign } from "lucide-react";
 
 export const ShowProviders = () => {
 	return (
-		<Card className="w-full bg-transparent ">
+		<Card className="w-full bg-transparent border-none">
 			<CardHeader>
 				<CardTitle className="flex items-center gap-2">
 					<DollarSign className="h-6 w-6 text-green-600" />