+ {[
+ "All the features of Dokploy",
+ "Unlimited deployments",
+ "Self-hosted on your own infrastructure",
+ "Full access to all deployment features",
+ "Dokploy integration",
+ "Backups",
+ "All Incoming features",
+ ].map((feature) => (
+
+
+ {feature}
+
+ ))}
+
+
+
+
+ {serverQuantity} Servers
+
+
+
+
+
+ {
+ setServerQuantity(
+ e.target.value as unknown as number,
+ );
+ }}
+ />
+
+
+
+
0
+ ? "justify-between"
+ : "justify-end",
+ "flex flex-row items-center gap-2 mt-4",
)}
>
- {[
- "All the features of Dokploy",
- "Unlimited deployments",
- "Self-hosted on your own infrastructure",
- "Full access to all deployment features",
- "Dokploy integration",
- "Backups",
- "All Incoming features",
- ].map((feature) => (
-
+ Could not load server types. Please verify your Hetzner API key.
+
+ )}
+
+ {/* Architecture Information */}
+
+
+
+
+
+ x86 Architecture: Traditional Intel/AMD
+ processors. Most compatible with existing software and
+ applications. Best choice for general-purpose workloads.
+
+
+
+
+
+
+
+
+ ARM Architecture: Modern, energy-efficient
+ processors. Excellent price-to-performance ratio. Perfect for
+ cloud-native and containerized applications.
+
+
+
+
+
+ );
+};
diff --git a/apps/dokploy/components/dashboard/settings/billing/show-hostinger-servers.tsx b/apps/dokploy/components/dashboard/settings/billing/show-hostinger-servers.tsx
new file mode 100644
index 000000000..50b923709
--- /dev/null
+++ b/apps/dokploy/components/dashboard/settings/billing/show-hostinger-servers.tsx
@@ -0,0 +1,428 @@
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+ CardDescription,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import {
+ Loader2,
+ Server,
+ Cpu,
+ HardDrive,
+ MemoryStick,
+ Globe,
+ DollarSign,
+ Calendar,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+// Map specs based on plan name
+function getVPSSpecs(planName: string) {
+ const kvmMatch = planName.match(/KVM\s*(\d+)/i);
+ const kvmNumber = kvmMatch ? Number.parseInt(kvmMatch[1] || "1", 10) : 1;
+
+ const specs = {
+ 1: { cpu: 1, ram: 4, storage: 50, bandwidth: 4 },
+ 2: { cpu: 2, ram: 8, storage: 100, bandwidth: 8 },
+ 4: { cpu: 4, ram: 16, storage: 200, bandwidth: 16 },
+ 8: { cpu: 8, ram: 32, storage: 400, bandwidth: 32 },
+ };
+
+ return specs[kvmNumber as keyof typeof specs] || specs[1];
+}
+
+// Get description based on plan name
+function getPlanDescription(planName: string) {
+ const kvmMatch = planName.match(/KVM\s*(\d+)/i);
+ const kvmNumber = kvmMatch ? Number.parseInt(kvmMatch[1] || "1", 10) : 1;
+
+ const descriptions = {
+ 1: "Perfect for small projects and personal websites",
+ 2: "Most popular plan for growing businesses",
+ 4: "High performance for demanding applications",
+ 8: "Maximum power for resource-intensive workloads",
+ };
+
+ return (
+ descriptions[kvmNumber as keyof typeof descriptions] || descriptions[1]
+ );
+}
+
+// Format billing period
+function formatBillingPeriod(period: number, unit: string): string {
+ if (unit === "month") {
+ return period === 1 ? "Monthly" : `${period} months`;
+ }
+ if (unit === "year") {
+ return period === 1 ? "Yearly" : `${period} years`;
+ }
+ return `${period} ${unit}`;
+}
+
+// Calculate yearly savings
+function calculateSavings(monthlyPrice: number, yearlyPrice: number): number {
+ return monthlyPrice * 12 - yearlyPrice;
+}
+
+export const ShowHostingerServers = () => {
+ const { data: vpsPlans, isLoading } = api.hostinger.vpsPlans.useQuery();
+
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ Hostinger VPS Plans
+
+ Sorted by price
+
+
+
+ VPS plans with real pricing from Hostinger API
+
+
+ 💡 Promotional pricing applies to first billing period only
+
+
+
+
+
+ Could not load VPS plans. Please verify your Hostinger API key.
+
+ )}
+
+
+
+
ℹ️
+
+ For resellers: These are real prices from
+ Hostinger API. Promotional pricing applies to the first billing
+ period only. You can use the shown IDs to create servers via
+ API.
+