fix: Init redeploy

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/DeployButton.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { cn } from "@ctrlplane/ui";
+import { Button } from "@ctrlplane/ui/button";
+
+import { api } from "../../../../../trpc/react";
+
+export const DeployButton: React.FC<{
+  releaseId: string;
+  environmentId: string;
+}> = ({ releaseId, environmentId }) => {
+  const deploy = api.release.deploy.toEnvironment.useMutation();
+  const router = useRouter();
+
+  return (
+    <Button
+      className={cn(
+        "w-full border-dashed border-neutral-800/50 bg-transparent text-center text-neutral-800 hover:border-blue-400 hover:bg-transparent hover:text-blue-400",
+      )}
+      variant="outline"
+      size="sm"
+      onClick={(e) => {
+        e.preventDefault();
+
+        deploy
+          .mutateAsync({
+            environmentId,
+            releaseId,
+          })
+          .then(() => router.refresh());
+      }}
+      disabled={deploy.isPending}
+    >
+      Deploy
+    </Button>
+  );
+};

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/DeploymentBarChart.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { capitalCase } from "change-case";
+import {
+  Bar,
+  BarChart,
+  Cell,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { getStatusColor } from "./status-color";
+
+export const DeploymentBarChart: React.FC<{
+  data: { name: string; count: number }[];
+}> = ({ data }) => (
+  <ResponsiveContainer width="100%" height={250}>
+    <BarChart data={data} margin={{ top: 10, left: -25, bottom: -10 }}>
+      <XAxis
+        dataKey="name"
+        type="category"
+        interval={0}
+        height={100}
+        style={{ fontSize: "0.75rem" }}
+        angle={-45}
+        textAnchor="end"
+        tickFormatter={(value) => capitalCase(value as string)}
+      />
+      <YAxis style={{ fontSize: "0.75rem" }} />
+      <Bar dataKey="count" fill="#8884d8">
+        {data.map(({ name }) => (
+          <Cell key={name} fill={getStatusColor(name)} />
+        ))}
+      </Bar>
+    </BarChart>
+  </ResponsiveContainer>
+);

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/ReleaseDropdownMenu.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { TbDotsVertical, TbReload } from "react-icons/tb";
+
+import { Badge } from "@ctrlplane/ui/badge";
+import { Button } from "@ctrlplane/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@ctrlplane/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@ctrlplane/ui/dropdown-menu";
+
+import { api } from "~/trpc/react";
+
+export const ReleaseDropdownMenu: React.FC<{
+  release: {
+    id: string;
+    name: string;
+  };
+  environment: {
+    id: string;
+    name: string;
+  };
+  isReleaseCompleted: boolean;
+}> = ({ release, environment, isReleaseCompleted }) => {
+  const router = useRouter();
+  const redeploy = api.release.deploy.toEnvironment.useMutation();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <TbDotsVertical />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <Dialog>
+          <DialogTrigger asChild>
+            <DropdownMenuItem
+              disabled={!isReleaseCompleted}
+              onSelect={(e) => e.preventDefault()}
+              className="space-x-2"
+            >
+              <TbReload />
+              <span>Redeploy</span>
+            </DropdownMenuItem>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>
+                Redeploy{" "}
+                <Badge variant="secondary" className="h-7 text-lg">
+                  {release.name}
+                </Badge>{" "}
+                to {environment.name}?
+              </DialogTitle>
+              <DialogDescription>
+                This will redeploy the release to all targets in the
+                environment.
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter>
+              <Button
+                onClick={() =>
+                  redeploy
+                    .mutateAsync({
+                      environmentId: environment.id,
+                      releaseId: release.id,
+                    })
+                    .then(() => router.refresh())
+                }
+              >
+                Redeploy
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};