style: Profile page redesign

src/components/Directory/DirectoryProfileTabs.tsx

@@ -1,4 +1,3 @@
-import { AcademicInfo } from "../Profile/AcademicInfo";
 import { InternshipList } from "../Profile/Internship/InternshipList";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { ResearchList } from "../Profile/Research/ResearchList";
@@ -48,7 +47,6 @@ export function DirectoryProfileTabs({ officerId, archived = false, editable = f
 				</TabsTrigger>
 			</TabsList>
 			<TabsContent value="background" className="mt-6 flex flex-col gap-y-6">
-				<AcademicInfo officerId={officerId} archived={archived} editable={editable} />
 				<InternshipList officerId={officerId} archived={archived} editable={editable} />
 				<ResearchList officerId={officerId} archived={archived} editable={editable} />
 				{editable && <ResumeSection officerId={officerId} archived={archived} />}

src/components/Profile/AcademicInfo.tsx

@@ -1,15 +1,53 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useQuery } from "@tanstack/react-query";
-import UpdateAcademics from "./UpdateAcademics";
+import UpdateAcademics, { type UpdateAcademicsHandle } from "./UpdateAcademics";
 import { getOfficerByIdQuery, getOfficerQuery } from "@/queries/officer";
+import type { Officer } from "@/schemas/officer";
+import { CalendarDays, GraduationCap } from "lucide-react";
 
 type Props = {
 	officerId?: string;
 	archived?: boolean;
 	editable?: boolean;
+	variant?: "card" | "inline";
+	hideSubmitButton?: boolean;
+	academicFormRef?: React.Ref<UpdateAcademicsHandle>;
 };
 
-export function AcademicInfo({ officerId, archived = false, editable = false }: Props) {
+function AcademicContent({ officer }: { officer: Officer }) {
+	return (
+		<div className="space-y-4">
+			<div className="space-y-1">
+				<div className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-white/45">
+					<GraduationCap className="h-3 w-3" />
+					Year Standing
+				</div>
+				<div className="text-sm text-white">
+					{officer.yearStanding}
+				</div>
+			</div>
+
+			<div className="space-y-1">
+				<div className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-white/45">
+					<CalendarDays className="h-3 w-3" />
+					Expected Graduation
+				</div>
+				<div className="text-sm text-white">
+					{officer.expectedGrad.term} {officer.expectedGrad.year}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function AcademicInfo({
+	officerId,
+	archived = false,
+	editable = false,
+	variant = "card",
+	hideSubmitButton = false,
+	academicFormRef,
+}: Props) {
 	const { data: officer } = useQuery(
 		officerId ? getOfficerByIdQuery(officerId, archived) : getOfficerQuery
 	);
@@ -18,57 +56,35 @@ export function AcademicInfo({ officerId, archived = false, editable = false }:
 		return null;
 	}
 
+	const content = editable ? (
+		<UpdateAcademics
+			officer={officer}
+			showSubmitButton={!hideSubmitButton}
+			ref={academicFormRef}
+		/>
+	) : (
+		<AcademicContent officer={officer} />
+	);
+
+	if (variant === "inline") {
+		return (
+			<div className="space-y-4">
+				<span className="text-xs font-semibold uppercase text-white/60">
+					Academic Information
+				</span>
+				{content}
+			</div>
+		);
+	}
+
 	return (
 		<Card className="rounded-xl border border-white/10 bg-black/40 shadow-xl">
 			<CardHeader>
 				<CardTitle className="text-2xl font-semibold text-white">
 					Academic Information
 				</CardTitle>
 			</CardHeader>
-			<CardContent className="p-6">
-				{editable ? (
-					<UpdateAcademics officer={officer} />
-				) : (
-					<div className="space-y-4">
-						<div className="group rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10">
-							<div className="text-sm font-medium tracking-wider text-white/50 uppercase">
-								Net ID
-							</div>
-							<div className="mt-2 text-lg font-medium text-white">
-								{officer.netId}
-							</div>
-						</div>
-
-						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-							<div className="group rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10">
-								<div className="text-sm font-medium tracking-wider text-white/50 uppercase">
-									Year Standing
-								</div>
-								<div className="mt-2 text-lg font-medium text-white">
-									{officer.yearStanding}
-								</div>
-							</div>
-							<div className="group rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10">
-								<div className="text-sm font-medium tracking-wider text-white/50 uppercase">
-									Credit Standing
-								</div>
-								<div className="mt-2 text-lg font-medium text-white">
-									{officer.creditStanding}
-								</div>
-							</div>
-						</div>
-
-						<div className="group rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10">
-							<div className="text-sm font-medium tracking-wider text-white/50 uppercase">
-								Expected Graduation
-							</div>
-							<div className="mt-2 text-lg font-medium text-white">
-								{officer.expectedGrad.term} {officer.expectedGrad.year}
-							</div>
-						</div>
-					</div>
-				)}
-			</CardContent>
+			<CardContent className="p-6">{content}</CardContent>
 		</Card>
 	);
 }

src/components/Profile/ImageUpdate.tsx

@@ -15,11 +15,18 @@ type Props = {
 	officerId: string;
 	firstName: string;
 	lastName: string;
+	editable?: boolean;
 };
 
 
 
-export function ImageUpdate({ photo, officerId, firstName, lastName }: Props) {
+export function ImageUpdate({
+	photo,
+	officerId,
+	firstName,
+	lastName,
+	editable = false,
+}: Props) {
 	const avatarOutputSize = 720;
 
 	const defaultAdjustments: ImageAdjustments = {
@@ -243,19 +250,21 @@ export function ImageUpdate({ photo, officerId, firstName, lastName }: Props) {
 					accept="image/*"
 					className="hidden"
 				/>
-				<Button
-					size="icon"
-					variant="secondary"
-					className="absolute -right-1 bottom-0 cursor-pointer rounded-full shadow-xl transition-shadow duration-300 hover:shadow-purple-500/20"
-					onClick={handleImageClick}
-					disabled={isPending}
-				>
-					{isPending ? (
-						<Loader2 className="h-4 w-4 animate-spin" />
-					) : (
-						<Pencil className="h-4 w-4" />
-					)}
-				</Button>
+				{editable && (
+					<Button
+						size="icon"
+						variant="secondary"
+						className="absolute -right-1 bottom-0 cursor-pointer rounded-full shadow-xl transition-shadow duration-300 hover:shadow-purple-500/20"
+						onClick={handleImageClick}
+						disabled={isPending}
+					>
+						{isPending ? (
+							<Loader2 className="h-4 w-4 animate-spin" />
+						) : (
+							<Pencil className="h-4 w-4" />
+						)}
+					</Button>
+				)}
 			</div>
 		</>
 	);