From c94b53512f4c84c0de1ff43b36eeca86f4dd8667 Mon Sep 17 00:00:00 2001
From: Lewis Carhart <lewis@flexops.dev>
Date: Sat, 5 Apr 2025 11:42:44 -0400
Subject: [PATCH] refactor: improve organization form components

- Standardized formatting and structure in DeleteOrganization and UpdateOrganizationName components for better readability.
- Enhanced UI elements with consistent Tailwind CSS classes and improved layout.
- Maintained existing functionality while ensuring a cleaner and more modular codebase.
---
 .../organization/delete-organization.tsx      | 195 +++++++++---------
 .../organization/update-organization-name.tsx | 169 +++++++--------
 2 files changed, 184 insertions(+), 180 deletions(-)

diff --git a/apps/app/src/components/forms/organization/delete-organization.tsx b/apps/app/src/components/forms/organization/delete-organization.tsx
index c0cc280866..a2e67e2fa8 100644
--- a/apps/app/src/components/forms/organization/delete-organization.tsx
+++ b/apps/app/src/components/forms/organization/delete-organization.tsx
@@ -3,23 +3,24 @@
 import { deleteOrganizationAction } from "@/actions/organization/delete-organization-action";
 import { useI18n } from "@/locales/client";
 import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
 } from "@comp/ui/alert-dialog";
 import { Button } from "@comp/ui/button";
 import {
-	Card,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
 } from "@comp/ui/card";
 import { Input } from "@comp/ui/input";
 import { Label } from "@comp/ui/label";
@@ -30,92 +31,94 @@ import { useState } from "react";
 import { toast } from "sonner";
 
 export function DeleteOrganization({
-	organizationId,
+  organizationId,
 }: {
-	organizationId: string;
+  organizationId: string;
 }) {
-	const t = useI18n();
-	const [value, setValue] = useState("");
-	const deleteOrganization = useAction(deleteOrganizationAction, {
-		onSuccess: () => {
-			toast.success(t("settings.general.org_delete_success"));
-			redirect("/");
-		},
-		onError: () => {
-			toast.error(t("settings.general.org_delete_error"));
-		},
-	});
+  const t = useI18n();
+  const [value, setValue] = useState("");
+  const deleteOrganization = useAction(deleteOrganizationAction, {
+    onSuccess: () => {
+      toast.success(t("settings.general.org_delete_success"));
+      redirect("/");
+    },
+    onError: () => {
+      toast.error(t("settings.general.org_delete_error"));
+    },
+  });
 
-	return (
-		<Card className="border border-destructive/50">
-			<CardHeader className="pb-2">
-				<div className="flex items-center gap-2">
-					<CardTitle className="flex items-center gap-2">
-						<AlertTriangle className="h-4 w-4 text-destructive" />
-						{t("settings.general.org_delete")}
-					</CardTitle>
-				</div>
-				<CardDescription className="mt-1">
-					{t("settings.general.org_delete_description")}
-				</CardDescription>
-			</CardHeader>
-			<CardFooter className="py-3 flex justify-between bg-muted/30 border-t text-xs text-muted-foreground">
-				<div />
+  return (
+    <Card className="border border-destructive">
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <CardTitle>
+            {t("settings.general.org_delete")}
+          </CardTitle>
+        </div>
+        <CardDescription>
+          <div className="max-w-[600px]">
+            {t("settings.general.org_delete_description")}
+          </div>
+        </CardDescription>
+      </CardHeader>
+      <CardContent />
+      <CardFooter className="flex justify-between bg-accent/30">
+        <div />
 
-				<AlertDialog>
-					<AlertDialogTrigger asChild>
-						<Button
-							variant="destructive"
-							size="sm"
-							className="hover:bg-destructive/90"
-						>
-							{t("common.actions.delete")}
-						</Button>
-					</AlertDialogTrigger>
-					<AlertDialogContent>
-						<AlertDialogHeader>
-							<AlertDialogTitle>
-								{t("settings.general.org_delete_alert_title")}
-							</AlertDialogTitle>
-							<AlertDialogDescription>
-								{t("settings.general.org_delete_alert_description")}
-							</AlertDialogDescription>
-						</AlertDialogHeader>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button
+              variant="destructive"
+              size="sm"
+              className="hover:bg-destructive/90"
+            >
+              {t("common.actions.delete")}
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                {t("settings.general.org_delete_alert_title")}
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                {t("settings.general.org_delete_alert_description")}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
 
-						<div className="mt-2 flex flex-col gap-2">
-							<Label htmlFor="confirm-delete">
-								{t("settings.general.delete_confirm_tip")}
-							</Label>
-							<Input
-								id="confirm-delete"
-								value={value}
-								onChange={(e) => setValue(e.target.value)}
-							/>
-						</div>
+            <div className="mt-2 flex flex-col gap-2">
+              <Label htmlFor="confirm-delete">
+                {t("settings.general.delete_confirm_tip")}
+              </Label>
+              <Input
+                id="confirm-delete"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+              />
+            </div>
 
-						<AlertDialogFooter className="mt-4">
-							<AlertDialogCancel>
-								{t("common.actions.cancel")}
-							</AlertDialogCancel>
-							<AlertDialogAction
-								onClick={() =>
-									deleteOrganization.execute({
-										id: organizationId,
-										organizationId,
-									})
-								}
-								disabled={value !== t("settings.general.delete_confirm")}
-								className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-							>
-								{deleteOrganization.status === "executing" ? (
-									<Loader2 className="h-4 w-4 animate-spin mr-1" />
-								) : null}
-								{t("common.actions.delete")}
-							</AlertDialogAction>
-						</AlertDialogFooter>
-					</AlertDialogContent>
-				</AlertDialog>
-			</CardFooter>
-		</Card>
-	);
+            <AlertDialogFooter className="mt-4">
+              <AlertDialogCancel>
+                {t("common.actions.cancel")}
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() =>
+                  deleteOrganization.execute({
+                    id: organizationId,
+                    organizationId,
+                  })
+                }
+                disabled={value !== t("settings.general.delete_confirm")}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              >
+                {deleteOrganization.status === "executing" ? (
+                  <Loader2 className="h-4 w-4 animate-spin mr-1" />
+                ) : null}
+                {t("common.actions.delete")}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </CardFooter>
+    </Card >
+  );
 }
diff --git a/apps/app/src/components/forms/organization/update-organization-name.tsx b/apps/app/src/components/forms/organization/update-organization-name.tsx
index bed28d05cd..1fa0d7eefd 100644
--- a/apps/app/src/components/forms/organization/update-organization-name.tsx
+++ b/apps/app/src/components/forms/organization/update-organization-name.tsx
@@ -5,19 +5,19 @@ import { organizationNameSchema } from "@/actions/schema";
 import { useI18n } from "@/locales/client";
 import { Button } from "@comp/ui/button";
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
 } from "@comp/ui/card";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
 } from "@comp/ui/form";
 import { Input } from "@comp/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -28,83 +28,84 @@ import { toast } from "sonner";
 import type { z } from "zod";
 
 export function UpdateOrganizationName({
-	organizationName,
+  organizationName,
 }: {
-	organizationName: string;
+  organizationName: string;
 }) {
-	const t = useI18n();
-	const updateOrganizationName = useAction(updateOrganizationNameAction, {
-		onSuccess: () => {
-			toast.success(t("settings.general.org_name_updated"));
-		},
-		onError: () => {
-			toast.error(t("settings.general.org_name_error"));
-		},
-	});
+  const t = useI18n();
+  const updateOrganizationName = useAction(updateOrganizationNameAction, {
+    onSuccess: () => {
+      toast.success(t("settings.general.org_name_updated"));
+    },
+    onError: () => {
+      toast.error(t("settings.general.org_name_error"));
+    },
+  });
 
-	const form = useForm<z.infer<typeof organizationNameSchema>>({
-		resolver: zodResolver(organizationNameSchema),
-		defaultValues: {
-			name: organizationName,
-		},
-	});
+  const form = useForm<z.infer<typeof organizationNameSchema>>({
+    resolver: zodResolver(organizationNameSchema),
+    defaultValues: {
+      name: organizationName,
+    },
+  });
 
-	const onSubmit = (data: z.infer<typeof organizationNameSchema>) => {
-		updateOrganizationName.execute(data);
-	};
+  const onSubmit = (data: z.infer<typeof organizationNameSchema>) => {
+    updateOrganizationName.execute(data);
+  };
 
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-				<Card>
-					<CardHeader className="pb-2">
-						<CardTitle className="flex items-center gap-2">
-							<Building className="h-4 w-4 text-primary" />
-							{t("settings.general.org_name")}
-						</CardTitle>
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              {t("settings.general.org_name")}
+            </CardTitle>
 
-						<CardDescription className="mt-1">
-							{t("settings.general.org_name_description")}
-						</CardDescription>
-					</CardHeader>
-					<CardContent className="pb-4">
-						<FormField
-							control={form.control}
-							name="name"
-							render={({ field }) => (
-								<FormItem>
-									<FormControl>
-										<Input
-											{...field}
-											className="max-w-[300px]"
-											autoComplete="off"
-											autoCapitalize="none"
-											autoCorrect="off"
-											spellCheck="false"
-											maxLength={32}
-										/>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-					</CardContent>
-					<CardFooter className="py-3 flex justify-between bg-muted/30 border-t text-xs text-muted-foreground">
-						<div>{t("settings.general.org_name_tip")}</div>
-						<Button
-							type="submit"
-							variant="default"
-							size="sm"
-							disabled={updateOrganizationName.status === "executing"}
-						>
-							{updateOrganizationName.status === "executing" ? (
-								<Loader2 className="h-4 w-4 animate-spin mr-1" />
-							) : null}
-							{t("common.actions.save")}
-						</Button>
-					</CardFooter>
-				</Card>
-			</form>
-		</Form>
-	);
+            <CardDescription>
+              <div className="max-w-[600px]">
+                {t("settings.general.org_name_description")}
+              </div>
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      className="max-w-[300px]"
+                      autoComplete="off"
+                      autoCapitalize="none"
+                      autoCorrect="off"
+                      spellCheck="false"
+                      maxLength={32}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+          <CardFooter className="flex justify-between bg-accent/30">
+            <div className="text-xs text-muted-foreground">
+              {t("settings.general.org_name_tip")}
+            </div>
+            <Button
+              type="submit"
+              disabled={updateOrganizationName.status === "executing"}
+            >
+              {updateOrganizationName.status === "executing" ? (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              ) : null}
+              {t("common.actions.save")}
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </Form>
+  );
 }