Cleanup

apps/app/src/app/[locale]/(app)/(dashboard)/(home)/components/FrameworkProgress.tsx

@@ -11,6 +11,8 @@ import { Button } from "@bubba/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@bubba/ui/card";
 import { FileStack } from "lucide-react";
 import Link from "next/link";
+import { useMediaQuery } from "@bubba/ui/hooks";
+import type { ReactNode } from "react";
 
 interface Props {
 	frameworks: (OrganizationFramework & {
@@ -29,13 +31,15 @@ export function FrameworkProgress({ frameworks }: Props) {
 		isLoading,
 	} = useComplianceScores({ frameworks });
 
+	const isMobile = useMediaQuery("(max-width: 640px)");
+
 	const CircleProgress = ({
 		percentage,
 		label,
 		href,
 	}: {
 		percentage: number;
-		label: string;
+		label: ReactNode;
 		href: string;
 	}) => (
 		<Link
@@ -70,8 +74,8 @@ export function FrameworkProgress({ frameworks }: Props) {
 					<div className="text-xl font-semibold">{percentage}%</div>
 				</div>
 			</div>
-			<div className="mt-2 flex items-center gap-1.5">
-				<span className="text-sm font-medium">{label}</span>
+			<div className="mt-2 text-center">
+				<span className="text-sm font-medium leading-tight">{label}</span>
 			</div>
 		</Link>
 	);
@@ -156,12 +160,22 @@ export function FrameworkProgress({ frameworks }: Props) {
 							/>
 							<CircleProgress
 								percentage={evidenceTasksCompliance}
-								label="Evidence Tasks"
+								label={
+									<>
+										<span className="sm:hidden">Evidence</span>
+										<span className="hidden sm:inline">Evidence Tasks</span>
+									</>
+								}
 								href="/evidence/list"
 							/>
 							<CircleProgress
 								percentage={cloudTestsCompliance}
-								label="Cloud Tests"
+								label={
+									<>
+										<span className="sm:hidden">Tests</span>
+										<span className="hidden sm:inline">Cloud Tests</span>
+									</>
+								}
 								href="/tests"
 							/>
 						</div>

apps/app/src/app/[locale]/(app)/(dashboard)/evidence/[id]/components/EvidenceDetails.tsx

@@ -8,71 +8,71 @@ import type { EvidenceDetailsProps } from "../types";
 import { ReviewSection } from "./ReviewSection";
 
 export function EvidenceDetails({ id }: EvidenceDetailsProps) {
-  const { data, isLoading, error, mutate } = useOrganizationEvidence({ id });
+	const { data, isLoading, mutate } = useOrganizationEvidence({ id });
 
-  if (isLoading) {
-    return (
-      <div className="flex flex-col gap-4">
-        <Skeleton className="h-20 w-full" />
-        <Skeleton className="h-40 w-full" />
-        <Skeleton className="h-60 w-full" />
-      </div>
-    );
-  }
+	if (isLoading) {
+		return (
+			<div className="flex flex-col gap-4">
+				<Skeleton className="h-20 w-full" />
+				<Skeleton className="h-40 w-full" />
+				<Skeleton className="h-60 w-full" />
+			</div>
+		);
+	}
 
-  if (!data?.data) return null;
+	if (!data?.data) return null;
 
-  const evidence = data.data;
+	const evidence = data.data;
 
-  const handleMutate = async () => {
-    await mutate();
-  };
+	const handleMutate = async () => {
+		await mutate();
+	};
 
-  return (
-    <div className="flex flex-col gap-4">
-      {/* Alert with evidence info and status */}
-      <Alert>
-        <FileIcon className="h-4 w-4" />
-        <AlertTitle>
-          <div className="flex items-center justify-between gap-2">
-            {evidence.evidence.name} Evidence
-            <div className="flex items-center gap-2">
-              {evidence.published ? (
-                <div className="flex items-center gap-2">
-                  <CheckCircle2 size={16} className="text-green-500 shrink-0" />
-                  <span className="text-sm text-green-600">Published</span>
-                </div>
-              ) : (
-                <div className="flex items-center gap-2">
-                  <XCircle size={16} className="text-red-500 shrink-0" />
-                  <span className="text-sm text-red-600">Draft</span>
-                </div>
-              )}
-            </div>
-          </div>
-        </AlertTitle>
-        <AlertDescription className="mt-4">
-          {evidence.description || "No description provided."}
+	return (
+		<div className="flex flex-col gap-4">
+			{/* Alert with evidence info and status */}
+			<Alert>
+				<FileIcon className="h-4 w-4" />
+				<AlertTitle>
+					<div className="flex items-center justify-between gap-2">
+						{evidence.evidence.name} Evidence
+						<div className="flex items-center gap-2">
+							{evidence.published ? (
+								<div className="flex items-center gap-2">
+									<CheckCircle2 size={16} className="text-green-500 shrink-0" />
+									<span className="text-sm text-green-600">Published</span>
+								</div>
+							) : (
+								<div className="flex items-center gap-2">
+									<XCircle size={16} className="text-red-500 shrink-0" />
+									<span className="text-sm text-red-600">Draft</span>
+								</div>
+							)}
+						</div>
+					</div>
+				</AlertTitle>
+				<AlertDescription className="mt-4">
+					{evidence.description || "No description provided."}
 
-          {evidence.isNotRelevant && (
-            <div className="bg-yellow-800 border border-yellow-600 rounded-md p-3 mt-4 text-yellow-300 text-sm">
-              This evidence has been marked as not relevant and will not be
-              included in compliance reports.
-            </div>
-          )}
-        </AlertDescription>
-      </Alert>
+					{evidence.isNotRelevant && (
+						<div className="bg-yellow-800 border border-yellow-600 rounded-md p-3 mt-4 text-yellow-300 text-sm">
+							This evidence has been marked as not relevant and will not be
+							included in compliance reports.
+						</div>
+					)}
+				</AlertDescription>
+			</Alert>
 
-      <ReviewSection
-        evidence={evidence}
-        evidenceId={id}
-        lastPublishedAt={evidence.lastPublishedAt}
-        frequency={evidence.frequency}
-        department={evidence.department || null}
-        currentAssigneeId={evidence.assigneeId}
-        onSuccess={handleMutate}
-        id={id}
-      />
-    </div>
-  );
+			<ReviewSection
+				evidence={evidence}
+				evidenceId={id}
+				lastPublishedAt={evidence.lastPublishedAt}
+				frequency={evidence.frequency}
+				department={evidence.department || null}
+				currentAssigneeId={evidence.assigneeId}
+				onSuccess={handleMutate}
+				id={id}
+			/>
+		</div>
+	);
 }