update layout of evidence

apps/app/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.codeActionsOnSave": {
+          "quickfix.biome": "explicit"
+      },
+      "recommendations": [
+		"biomejs.biome"
+	]
+  }

apps/app/package.json

@@ -6,7 +6,7 @@
     "dev": "NODE_OPTIONS='--inspect' next dev --turbopack --turbo -p 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "biome lint ./src",
     "clean-react": "rm -rf node_modules/react; rm -rf node_modules/react-dom"
   },
   "dependencies": {
@@ -96,4 +96,4 @@
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4"
   }
-}
+}

apps/app/src/app/[locale]/(app)/(dashboard)/evidence/[id]/Components/AssigneeSection.tsx → apps/app/src/app/[locale]/(app)/(dashboard)/evidence/[id]/components/AssigneeSection.tsx

@@ -11,7 +11,7 @@ import {
 import { Avatar, AvatarFallback, AvatarImage } from "@bubba/ui/avatar";
 import { useAction } from "next-safe-action/hooks";
 import { toast } from "sonner";
-import { assignEvidence } from "../Actions/assignEvidence";
+import { assignEvidence } from "../actions/assignEvidence";
 import { useOrganizationAdmins } from "../hooks/useOrganizationAdmins";
 import type { Admin } from "../hooks/useOrganizationAdmins";
 
@@ -27,7 +27,7 @@ export function AssigneeSection({
   onSuccess,
 }: AssigneeSectionProps) {
   const [assigneeId, setAssigneeId] = useState<string | null>(
-    currentAssigneeId || null,
+    currentAssigneeId || null
   );
   const { data: admins, isLoading, error } = useOrganizationAdmins();
   const [selectedAdmin, setSelectedAdmin] = useState<Admin | null>(null);

apps/app/src/app/[locale]/(app)/(dashboard)/evidence/[id]/Components/DepartmentSection.tsx → apps/app/src/app/[locale]/(app)/(dashboard)/evidence/[id]/components/DepartmentSection.tsx

@@ -11,7 +11,7 @@ import {
 import { useAction } from "next-safe-action/hooks";
 import { toast } from "sonner";
 import { Departments } from "@bubba/db";
-import { updateEvidenceDepartment } from "../Actions/updateEvidenceDepartment";
+import { updateEvidenceDepartment } from "../actions/updateEvidenceDepartment";
 
 interface DepartmentSectionProps {
   evidenceId: string;
@@ -25,7 +25,7 @@ export function DepartmentSection({
   onSuccess,
 }: DepartmentSectionProps) {
   const [department, setDepartment] = useState<string | null>(
-    currentDepartment || null,
+    currentDepartment || null
   );
 
   const { execute: updateDepartment, isExecuting } = useAction(
@@ -39,7 +39,7 @@ export function DepartmentSection({
         console.error("Error updating department:", error);
         toast.error("Failed to update department");
       },
-    },
+    }
   );
 
   useEffect(() => {
@@ -53,7 +53,7 @@ export function DepartmentSection({
   };
 
   const departmentOptions = Object.values(Departments).filter(
-    (dept) => dept !== "none",
+    (dept) => dept !== "none"
   );
 
   return (

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

@@ -0,0 +1,78 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@bubba/ui/alert";
+import { Skeleton } from "@bubba/ui/skeleton";
+import { CheckCircle2, FileIcon, XCircle } from "lucide-react";
+import { useOrganizationEvidence } from "../hooks/useOrganizationEvidence";
+import type { EvidenceDetailsProps } from "../types";
+import { ReviewSection } from "./ReviewSection";
+
+export function EvidenceDetails({ id }: EvidenceDetailsProps) {
+  const { data, isLoading, error, 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 (!data?.data) return null;
+
+  const evidence = data.data;
+
+  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."}
+
+          {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>
+  );
+}

apps/app/src/app/[locale]/(app)/(dashboard)/evidence/[id]/Components/FileCard.tsx → apps/app/src/app/[locale]/(app)/(dashboard)/evidence/[id]/components/FileCard.tsx

@@ -1,14 +1,5 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Button } from "@bubba/ui/button";
-import { Card, CardContent, CardFooter } from "@bubba/ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-  DialogTitle,
-} from "@bubba/ui/dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -20,16 +11,24 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@bubba/ui/alert-dialog";
+import { Button } from "@bubba/ui/button";
+import { Card, CardContent, CardFooter } from "@bubba/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@bubba/ui/dialog";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@bubba/ui/tooltip";
-import { ExternalLink, Loader2, Trash, Maximize2 } from "lucide-react";
+import { ExternalLink, Loader2, Maximize2, Trash } from "lucide-react";
 import Image from "next/image";
+import { useEffect, useState } from "react";
 import { FileIcon } from "./FileIcon";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 
 interface FilePreviewState {
   url: string | null;

apps/app/src/app/[locale]/(app)/(dashboard)/evidence/[id]/Components/FrequencySection.tsx → apps/app/src/app/[locale]/(app)/(dashboard)/evidence/[id]/components/FrequencySection.tsx

@@ -10,7 +10,7 @@ import {
 } from "@bubba/ui/select";
 import { useAction } from "next-safe-action/hooks";
 import { toast } from "sonner";
-import { updateEvidenceFrequency } from "../Actions/updateEvidenceFrequency";
+import { updateEvidenceFrequency } from "../actions/updateEvidenceFrequency";
 import type { Frequency } from "@bubba/db";
 
 interface FrequencySectionProps {
@@ -25,7 +25,7 @@ export function FrequencySection({
   onSuccess,
 }: FrequencySectionProps) {
   const [frequency, setFrequency] = useState<Frequency | null>(
-    currentFrequency || null,
+    currentFrequency || null
   );
 
   const { execute: updateFrequency, isExecuting } = useAction(
@@ -38,7 +38,7 @@ export function FrequencySection({
       onError: () => {
         toast.error("Failed to update review frequency");
       },
-    },
+    }
   );
 
   useEffect(() => {