feat: org upload photos

Author: izadoesdev

apps/dashboard/app/(main)/organizations/[slug]/components/organization-logo-uploader.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import { useRef, useState } from 'react';
 import ReactCrop, {
 	type Crop,
@@ -18,11 +19,10 @@ import {
 	DialogTitle,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { type Organization, useOrganizations } from '@/hooks/use-organizations';
 import { getOrganizationInitials } from '@/lib/utils';
 import 'react-image-crop/dist/ReactCrop.css';
-import { UploadSimpleIcon } from '@phosphor-icons/react';
+import { TrashIcon, UploadSimpleIcon } from '@phosphor-icons/react';
 import { getCroppedImage } from '@/lib/canvas-utils';
 
 interface OrganizationLogoUploaderProps {
@@ -32,8 +32,12 @@ interface OrganizationLogoUploaderProps {
 export function OrganizationLogoUploader({
 	organization,
 }: OrganizationLogoUploaderProps) {
-	const { uploadOrganizationLogo, isUploadingOrganizationLogo } =
-		useOrganizations();
+	const {
+		uploadOrganizationLogo,
+		isUploadingOrganizationLogo,
+		deleteOrganizationLogo,
+		isDeletingOrganizationLogo,
+	} = useOrganizations();
 	const [preview, setPreview] = useState(organization.logo);
 	const [imageSrc, setImageSrc] = useState<string | null>(null);
 	const [crop, setCrop] = useState<Crop>();
@@ -42,20 +46,24 @@ export function OrganizationLogoUploader({
 	const fileInputRef = useRef<HTMLInputElement>(null);
 	const imageRef = useRef<HTMLImageElement>(null);
 
-	const handleModalOpenChange = (isOpen: boolean) => {
-		if (!isOpen && fileInputRef.current) {
+	const resetCropState = () => {
+		setImageSrc(null);
+		setCrop(undefined);
+		setCompletedCrop(undefined);
+		if (fileInputRef.current) {
 			fileInputRef.current.value = '';
 		}
+	};
+
+	const handleModalOpenChange = (isOpen: boolean) => {
 		if (!isOpen) {
-			setImageSrc(null);
-			setCrop(undefined);
-			setCompletedCrop(undefined);
+			resetCropState();
 		}
 		setIsModalOpen(isOpen);
 	};
 
-	function onImageLoad(e: React.SyntheticEvent<HTMLImageElement>) {
-		const { width, height } = e.currentTarget;
+	function onImageLoad(img: HTMLImageElement) {
+		const { naturalWidth: width, naturalHeight: height } = img;
 		const percentCrop = centerCrop(
 			makeAspectCrop(
 				{
@@ -70,6 +78,7 @@ export function OrganizationLogoUploader({
 			height
 		);
 		setCrop(percentCrop);
+
 		const pixelCrop = {
 			unit: 'px' as const,
 			x: Math.round((percentCrop.x / 100) * width),
@@ -105,31 +114,51 @@ export function OrganizationLogoUploader({
 				'logo.png'
 			);
 
-			const formData = new FormData();
-			formData.append('file', croppedFile);
-
-			uploadOrganizationLogo(
-				{ organizationId: organization.id, formData },
-				{
-					onSuccess: (data) => {
-						setPreview(data.url);
-						handleModalOpenChange(false);
-						toast.success('Logo updated successfully!');
-					},
-					onError: (error) => {
-						toast.error(error.message || 'Failed to upload logo.');
+			const reader = new FileReader();
+			reader.onloadend = () => {
+				const fileData = reader.result as string;
+				uploadOrganizationLogo(
+					{
+						organizationId: organization.id,
+						fileData,
+						fileName: croppedFile.name,
+						fileType: croppedFile.type,
 					},
-				}
-			);
+					{
+						onSuccess: (data) => {
+							setPreview(data.logoUrl);
+							handleModalOpenChange(false);
+							setTimeout(() => resetCropState(), 100);
+						},
+						onError: (error) => {
+							toast.error(error.message || 'Failed to upload logo.');
+						},
+					}
+				);
+			};
+			reader.readAsDataURL(croppedFile);
 		} catch (e) {
 			toast.error('Failed to crop image.');
 			console.error(e);
 		}
 	};
 
+	const handleDeleteLogo = () => {
+		deleteOrganizationLogo(
+			{ organizationId: organization.id },
+			{
+				onSuccess: () => {
+					setPreview(null);
+				},
+				onError: (error) => {
+					toast.error(error.message || 'Failed to delete logo.');
+				},
+			}
+		);
+	};
+
 	return (
 		<div className="space-y-3">
-			<Label>Organization Logo</Label>
 			<div className="flex items-center gap-4">
 				<div className="group relative">
 					<Avatar className="h-20 w-20 border-2 border-border/50 shadow-sm">
@@ -152,6 +181,27 @@ export function OrganizationLogoUploader({
 					<p className="text-muted-foreground text-sm">
 						Click the image to upload a new one.
 					</p>
+					{preview && (
+						<Button
+							className="rounded"
+							disabled={isDeletingOrganizationLogo}
+							onClick={handleDeleteLogo}
+							size="sm"
+							variant="outline"
+						>
+							{isDeletingOrganizationLogo ? (
+								<>
+									<div className="mr-2 h-3 w-3 animate-spin rounded-full border border-muted-foreground/30 border-t-muted-foreground" />
+									Deleting...
+								</>
+							) : (
+								<>
+									<TrashIcon className="mr-2 h-4 w-4" size={16} />
+									Remove Logo
+								</>
+							)}
+						</Button>
+					)}
 					<Input
 						accept="image/png, image/jpeg, image/gif"
 						className="hidden"
@@ -176,12 +226,17 @@ export function OrganizationLogoUploader({
 								setCrop(percentCrop);
 								setCompletedCrop(pixelCrop);
 							}}
+							onComplete={(pixelCrop) => {
+								setCompletedCrop(pixelCrop);
+							}}
 						>
-							<img
+							<Image
 								alt="Crop preview"
-								onLoad={onImageLoad}
+								height={600}
+								onLoadingComplete={onImageLoad}
 								ref={imageRef}
 								src={imageSrc}
+								width={800}
 							/>
 						</ReactCrop>
 					)}

apps/dashboard/app/(main)/organizations/[slug]/components/settings-tab.tsx

@@ -55,11 +55,6 @@ export function SettingsTab({ organization }: SettingsTabProps) {
 	const [isSaving, setIsSaving] = useState(false);
 	const [isDeleting, setIsDeleting] = useState(false);
 
-	// API Keys dialogs state - TODO: Re-enable when dialog components are fixed
-	// const [showCreateKey, setShowCreateKey] = useState(false);
-	// const [showKeyDetail, setShowKeyDetail] = useState(false);
-	// const [selectedKeyId, setSelectedKeyId] = useState<string | null>(null);
-
 	const { updateOrganizationAsync, deleteOrganizationAsync } =
 		useOrganizations();
 
@@ -154,7 +149,6 @@ export function SettingsTab({ organization }: SettingsTabProps) {
 					<CardContent className="space-y-6">
 						{/* Logo Upload Section */}
 						<div className="space-y-4">
-							<Label className="font-medium text-sm">Organization Logo</Label>
 							<OrganizationLogoUploader organization={organization} />
 						</div>
 

apps/dashboard/components/layout/navigation/navigation-config.tsx

@@ -296,7 +296,7 @@ export const categoryConfig = {
 		],
 		defaultCategory: 'websites',
 		navigationMap: {
-			websites: [], // Will be populated dynamically
+			websites: [],
 			organizations: organizationNavigation,
 			billing: billingNavigation,
 			settings: personalNavigation,
@@ -370,7 +370,6 @@ export const createLoadingWebsitesNavigation = (): NavigationSection[] => [
 	},
 ];
 
-// Function to get navigation with dynamic websites data
 export const getNavigationWithWebsites = (
 	pathname: string,
 	websites: Array<{ id: string; name: string | null; domain: string }> = [],

apps/dashboard/components/organizations/create-organization-dialog.tsx

@@ -61,8 +61,11 @@ export function CreateOrganizationDialog({
 	isOpen,
 	onClose,
 }: CreateOrganizationDialogProps) {
-	const { createOrganizationAsync, isCreatingOrganization } =
-		useOrganizations();
+	const {
+		createOrganizationAsync,
+		isCreatingOrganization,
+		uploadOrganizationLogoAsync,
+	} = useOrganizations();
 	// const router = useRouter();
 
 	// Form state
@@ -80,6 +83,7 @@ export function CreateOrganizationDialog({
 	const [crop, setCrop] = useState<Crop>();
 	const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
 	const [isCropModalOpen, setIsCropModalOpen] = useState(false);
+	const [logoFile, setLogoFile] = useState<File | null>(null);
 	const fileInputRef = useRef<HTMLInputElement>(null);
 	const imageRef = useRef<HTMLImageElement | null>(null);
 
@@ -100,7 +104,10 @@ export function CreateOrganizationDialog({
 	const resetForm = () => {
 		setFormData({ name: '', slug: '', logo: '', metadata: {} });
 		setPreview(null);
+		setLogoFile(null);
 		setSlugManuallyEdited(false);
+		resetCropState();
+		setIsCropModalOpen(false);
 	};
 
 	// Close dialog
@@ -133,14 +140,18 @@ export function CreateOrganizationDialog({
 	);
 
 	// Image crop modal handlers
-	const handleCropModalOpenChange = (open: boolean) => {
-		if (!open && fileInputRef.current) {
+	const resetCropState = () => {
+		setImageSrc(null);
+		setCrop(undefined);
+		setCompletedCrop(undefined);
+		if (fileInputRef.current) {
 			fileInputRef.current.value = '';
 		}
+	};
+
+	const handleCropModalOpenChange = (open: boolean) => {
 		if (!open) {
-			setImageSrc(null);
-			setCrop(undefined);
-			setCompletedCrop(undefined);
+			resetCropState();
 		}
 		setIsCropModalOpen(open);
 	};
@@ -187,11 +198,13 @@ export function CreateOrganizationDialog({
 				completedCrop,
 				'logo.png'
 			);
+
+			setLogoFile(croppedFile);
+
 			const reader = new FileReader();
 			reader.onloadend = () => {
 				const dataUrl = reader.result as string;
 				setPreview(dataUrl);
-				setFormData((prev) => ({ ...prev, logo: dataUrl }));
 				handleCropModalOpenChange(false);
 				toast.success('Logo saved successfully!');
 			};
@@ -201,7 +214,6 @@ export function CreateOrganizationDialog({
 		}
 	};
 
-	// Organization initials for avatar fallback
 	const getOrganizationInitials = (name: string) =>
 		name
 			.split(' ')
@@ -210,13 +222,39 @@ export function CreateOrganizationDialog({
 			.toUpperCase()
 			.slice(0, 2);
 
-	// Submit handler
 	const handleSubmit = async () => {
 		if (!isFormValid) {
 			return;
 		}
 		try {
-			await createOrganizationAsync(formData);
+			const organization = await createOrganizationAsync({
+				name: formData.name,
+				slug: formData.slug,
+				metadata: formData.metadata,
+			});
+
+			if (logoFile && organization?.id) {
+				try {
+					const reader = new FileReader();
+					const fileData = await new Promise<string>((resolve) => {
+						reader.onloadend = () => resolve(reader.result as string);
+						reader.readAsDataURL(logoFile);
+					});
+
+					await uploadOrganizationLogoAsync({
+						organizationId: organization.id,
+						fileData,
+						fileName: logoFile.name,
+						fileType: logoFile.type,
+					});
+				} catch (logoError) {
+					toast.warning(
+						'Organization created, but logo upload failed. You can upload it later from settings.'
+					);
+					console.error('Logo upload failed:', logoError);
+				}
+			}
+
 			handleClose();
 			// router.push('/organizations');
 		} catch {
@@ -446,6 +484,9 @@ export function CreateOrganizationDialog({
 									setCrop(percentCrop);
 									setCompletedCrop(pixelCrop);
 								}}
+								onComplete={(pixelCrop) => {
+									setCompletedCrop(pixelCrop);
+								}}
 							>
 								<Image
 									alt="Crop preview"