diff --git a/apps/dokploy/components/dashboard/compose/monitoring/show.tsx b/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
index 4f7c3e024..217b9caa9 100644
--- a/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
+++ b/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
@@ -20,7 +20,7 @@ import { api } from "@/utils/api";
import { Loader2 } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";
-import { ContainerMonitoring } from "../../monitoring/container/show";
+import { ContainerMonitoring } from "../../monitoring/paid/container/show-paid-container-monitoring";
interface Props {
appName: string;
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx
new file mode 100644
index 000000000..57a3cbe22
--- /dev/null
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx
@@ -0,0 +1,101 @@
+import { format } from "date-fns";
+import {
+ Area,
+ AreaChart,
+ CartesianGrid,
+ Legend,
+ ResponsiveContainer,
+ Tooltip,
+ YAxis,
+} from "recharts";
+import type { DockerStatsJSON } from "./show";
+
+interface Props {
+ acummulativeData: DockerStatsJSON["block"];
+}
+
+export const DockerBlockChart = ({ acummulativeData }: Props) => {
+ const transformedData = acummulativeData.map((item, index) => {
+ return {
+ time: item.time,
+ name: `Point ${index + 1}`,
+ readMb: item.value.readMb,
+ writeMb: item.value.writeMb,
+ };
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* @ts-ignore */}
+ } />
+
+
+
+
+
+
+
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
+
{`Read ${payload[0].payload.readMb.toFixed(2)} MB`}
+
{`Write: ${payload[0].payload.writeMb.toFixed(3)} MB`}
+
+
+
+
+
+
+
+
+
+
+
+ {/* @ts-ignore */}
+ } />
+
+
+
+
+
+
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
+
{`CPU Usage: ${payload[0].payload.usage}%`}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* @ts-ignore */}
+ } />
+
+
+
+
+
+
+
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
+
{`Disk usage: ${payload[0].payload.usedGb} GB`}
+
{`Disk free: ${payload[0].payload.freeGb} GB`}
+
{`Total disk: ${payload[0].payload.totalGb} GB`}
+
+
+
+
+
+
+
+
+
+
+
+ {/* @ts-ignore */}
+ } />
+
+
+
+
+
+
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
+
{`Memory usage: ${payload[0].payload.usage} GB`}
+
+
+
+
+
+
+
+
+
+
+
+ {/* @ts-ignore */}
+ } />
+
+
+
+
+
+
+
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
+
{`In MB Usage: ${payload[0].payload.inMB} MB`}
+
{`Out MB Usage: ${payload[0].payload.outMB} MB`}
+
+
+
+
+
+
+
+
+ CPU Usage
+
+
+
+
+ Used: {currentData.cpu.value.toFixed(2)}%
+
+
+
+
+
+
+
+
+ Memory Usage
+
+
+
+
+
+ {`Used: ${(currentData.memory.value.used / 1024 ** 3).toFixed(2)} GB / Limit: ${(currentData.memory.value.total / 1024 ** 3).toFixed(2)} GB`}
+
+
+
+
+
+ {appName === "dokploy" && (
+
+
+
+ Disk Space
+
+
+
+
+
+ {`Used: ${currentData.disk.value.diskUsage} GB / Limit: ${currentData.disk.value.diskTotal} GB`}
+
+
+
+
+ )}
+
+
+
+ Block I/O
+
+
+
+
+ {`Read: ${currentData.block.value.readMb.toFixed(
+ 2,
+ )} MB / Write: ${currentData.block.value.writeMb.toFixed(
+ 3,
+ )} MB`}
+
+
+
+
+
+
+
+
+
+ Network I/O
+
+
+
+
+
+ {`In MB: ${currentData.network.value.inputMb.toFixed(
+ 2,
+ )} MB / Out MB: ${currentData.network.value.outputMb.toFixed(
+ 2,
+ )} MB`}
+
+
+
+
+
+
+
+