Fix type issues in organizations.

Author: sbansal1999

apps/dashboard/app/(main)/organizations/[slug]/components/invitation-list.tsx

@@ -16,6 +16,7 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import type { CancelInvitation, Invitation } from '@/hooks/use-organizations';
 
 dayjs.extend(relativeTime);
 
@@ -28,7 +29,11 @@ export function InvitationList({
 	invitations,
 	onCancelInvitation,
 	isCancellingInvitation,
-}: any) {
+}: {
+	invitations: Invitation[];
+	onCancelInvitation: CancelInvitation;
+	isCancellingInvitation: boolean;
+}) {
 	const [invitationToCancel, setInvitationToCancel] =
 		useState<InvitationToCancel | null>(null);
 
@@ -54,7 +59,7 @@ export function InvitationList({
 				</Badge>
 			</div>
 			<div className="space-y-3">
-				{invitations.map((invitation: any) => (
+				{invitations.map((invitation) => (
 					<div
 						className="flex items-center justify-between rounded border border-border/50 bg-muted/30 p-4"
 						key={invitation.id}

apps/dashboard/app/(main)/organizations/[slug]/components/invite-member-dialog.tsx

@@ -19,13 +19,24 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from '@/components/ui/select';
-import { useOrganizationMembers } from '@/hooks/use-organizations';
+import {
+	type Organization,
+	useOrganizationMembers,
+} from '@/hooks/use-organizations';
+
+type InviteRole = 'owner' | 'admin' | 'member';
 
-export function InviteMemberDialog({ isOpen, onClose, organizationId }: any) {
+export function InviteMemberDialog({
+	isOpen,
+	onClose,
+	organizationId,
+}: {
+	isOpen: boolean;
+	onClose: () => void;
+	organizationId: Organization['id'];
+}) {
 	const [inviteEmail, setInviteEmail] = useState('');
-	const [inviteRole, setInviteRole] = useState<'owner' | 'admin' | 'member'>(
-		'member'
-	);
+	const [inviteRole, setInviteRole] = useState<InviteRole>('member');
 	const { inviteMember, isInvitingMember } =
 		useOrganizationMembers(organizationId);
 
@@ -63,7 +74,7 @@ export function InviteMemberDialog({ isOpen, onClose, organizationId }: any) {
 					<div className="space-y-2">
 						<Label htmlFor="role">Role</Label>
 						<Select
-							onValueChange={(value) => setInviteRole(value as any)}
+							onValueChange={(value) => setInviteRole(value as InviteRole)}
 							value={inviteRole}
 						>
 							<SelectTrigger>

apps/dashboard/app/(main)/organizations/[slug]/components/member-list.tsx

@@ -30,6 +30,10 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from '@/components/ui/select';
+import type {
+	OrganizationMember,
+	UpdateMemberData,
+} from '@/hooks/use-organizations';
 
 dayjs.extend(relativeTime);
 
@@ -38,12 +42,28 @@ interface MemberToRemove {
 	name: string;
 }
 
+interface MemberListProps {
+	members: OrganizationMember[];
+	onRemoveMember: (memberId: string) => void;
+	isRemovingMember: boolean;
+	onUpdateRole: (member: UpdateMemberData) => void;
+	isUpdatingMember: boolean;
+	organizationId: string;
+}
+
+interface RoleSelectorProps {
+	member: MemberListProps['members'][number];
+	onUpdateRole: MemberListProps['onUpdateRole'];
+	isUpdatingMember: MemberListProps['isUpdatingMember'];
+	organizationId: MemberListProps['organizationId'];
+}
+
 function RoleSelector({
 	member,
 	onUpdateRole,
 	isUpdatingMember,
 	organizationId,
-}: any) {
+}: RoleSelectorProps) {
 	if (member.role === 'owner') {
 		return (
 			<Badge
@@ -60,7 +80,11 @@ function RoleSelector({
 			defaultValue={member.role}
 			disabled={isUpdatingMember}
 			onValueChange={(newRole) =>
-				onUpdateRole({ memberId: member.id, role: newRole, organizationId })
+				onUpdateRole({
+					memberId: member.id,
+					role: newRole as UpdateMemberData['role'],
+					organizationId,
+				})
 			}
 		>
 			<SelectTrigger className="w-32 rounded">
@@ -81,7 +105,7 @@ export function MemberList({
 	onUpdateRole,
 	isUpdatingMember,
 	organizationId,
-}: any) {
+}: MemberListProps) {
 	const [memberToRemove, setMemberToRemove] = useState<MemberToRemove | null>(
 		null
 	);
@@ -106,7 +130,7 @@ export function MemberList({
 
 			{members && members.length > 0 ? (
 				<div className="space-y-3">
-					{members.map((member: any) => (
+					{members.map((member) => (
 						<div
 							className="flex items-center justify-between rounded border border-border/50 bg-muted/30 p-4"
 							key={member.id}

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

@@ -19,26 +19,22 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useOrganizations } from '@/hooks/use-organizations';
+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 { getCroppedImage } from '@/lib/canvas-utils';
 
 interface OrganizationLogoUploaderProps {
-	organization: {
-		id: string;
-		name: string;
-		logo: string | null;
-	};
+	organization: Organization;
 }
 
 export function OrganizationLogoUploader({
 	organization,
 }: OrganizationLogoUploaderProps) {
 	const { uploadOrganizationLogo, isUploadingOrganizationLogo } =
 		useOrganizations();
-	const [preview, setPreview] = useState<string | null>(organization.logo);
+	const [preview, setPreview] = useState(organization.logo);
 	const [imageSrc, setImageSrc] = useState<string | null>(null);
 	const [crop, setCrop] = useState<Crop>();
 	const [completedCrop, setCompletedCrop] = useState<PixelCrop>();

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

@@ -22,12 +22,15 @@ import {
 	CardTitle,
 } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useOrganizationMembers } from '@/hooks/use-organizations';
+import {
+	type Organization,
+	useOrganizationMembers,
+} from '@/hooks/use-organizations';
 
 dayjs.extend(relativeTime);
 
 interface OverviewTabProps {
-	organization: any;
+	organization: Organization;
 }
 
 export function OverviewTab({ organization }: OverviewTabProps) {

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

@@ -32,13 +32,13 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useOrganizations } from '@/hooks/use-organizations';
+import { type Organization, useOrganizations } from '@/hooks/use-organizations';
 import { trpc } from '@/lib/trpc';
 import { OrganizationLogoUploader } from './organization-logo-uploader';
 import { TransferAssets } from './transfer-assets';
 
 interface SettingsTabProps {
-	organization: any;
+	organization: Organization;
 }
 
 export function SettingsTab({ organization }: SettingsTabProps) {

apps/dashboard/app/(main)/organizations/[slug]/components/team-view.tsx

@@ -5,13 +5,16 @@ import {
 	EnvelopeIcon,
 	PlusIcon,
 	UsersIcon,
+	type Icon as IconType,
 } from '@phosphor-icons/react';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
 	useOrganizationInvitations,
 	useOrganizationMembers,
+	type ActiveOrganization,
+	type Organization,
 } from '@/hooks/use-organizations';
 import { InvitationList } from './invitation-list';
 import { InviteMemberDialog } from './invite-member-dialog';
@@ -23,7 +26,7 @@ const StatCard = ({
 	label,
 	value,
 }: {
-	icon: any;
+	icon: IconType;
 	label: string;
 	value: number;
 }) => (
@@ -55,7 +58,11 @@ const ViewSkeleton = () => (
 	</div>
 );
 
-export function TeamView({ organization }: { organization: any }) {
+export function TeamView({
+	organization,
+}: {
+	organization: NonNullable<Organization | ActiveOrganization>;
+}) {
 	const [showInviteDialog, setShowInviteDialog] = useState(false);
 
 	const {

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

@@ -9,8 +9,13 @@ import {
 	CardTitle,
 } from '@/components/ui/card';
 import { TeamView } from './team-view';
+import type { ActiveOrganization, Organization } from '@/hooks/use-organizations';
 
-export function TeamsTab({ organization }: { organization: any }) {
+export function TeamsTab({
+	organization,
+}: {
+	organization: Organization | ActiveOrganization;
+}) {
 	if (!(organization && organization.id)) {
 		return (
 			<div className="py-12 text-center">

apps/dashboard/app/(main)/organizations/[slug]/page.tsx

@@ -16,7 +16,11 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useOrganizations } from '@/hooks/use-organizations';
+import {
+	type Organization,
+	type OrganizationsError,
+	useOrganizations,
+} from '@/hooks/use-organizations';
 import { getOrganizationInitials } from '@/lib/utils';
 import { OrganizationPageSkeleton } from './components/organization-page-skeleton';
 import { OverviewTab } from './components/overview-tab';
@@ -27,7 +31,11 @@ function SetActiveButton({
 	onSetActive,
 	isSettingActive,
 	isCurrentlyActive,
-}: any) {
+}: {
+	onSetActive: () => void;
+	isSettingActive: boolean;
+	isCurrentlyActive: boolean;
+}) {
 	if (isCurrentlyActive) {
 		return (
 			<Badge
@@ -62,12 +70,19 @@ function SetActiveButton({
 	);
 }
 
+interface PageHeaderProps {
+	organization: Organization;
+	isCurrentlyActive: boolean;
+	onSetActive: () => void;
+	isSettingActive: boolean;
+}
+
 function PageHeader({
 	organization,
 	isCurrentlyActive,
 	onSetActive,
 	isSettingActive,
-}: any) {
+}: PageHeaderProps) {
 	return (
 		<div className="rounded border border-border/50 bg-muted/30 p-6">
 			<div className="flex items-center justify-between">
@@ -128,7 +143,13 @@ function OrganizationNotFound() {
 	);
 }
 
-function ErrorDisplay({ onRetry, error }: any) {
+function ErrorDisplay({
+	onRetry,
+	error,
+}: {
+	onRetry: () => void;
+	error: OrganizationsError;
+}) {
 	return (
 		<div className="py-12 text-center">
 			<div className="mx-auto max-w-md rounded border border-border/50 bg-muted/30 p-6">

apps/dashboard/app/(main)/organizations/components/organization-switcher.tsx

@@ -12,12 +12,16 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { useOrganizations } from '@/hooks/use-organizations';
+import {
+	type ActiveOrganization,
+	type Organization,
+	useOrganizations,
+} from '@/hooks/use-organizations';
 import { cn, getOrganizationInitials } from '@/lib/utils';
 
 interface OrganizationSwitcherProps {
-	organizations: any[];
-	activeOrganization: any | null;
+	organizations: Organization[];
+	activeOrganization: ActiveOrganization;
 	className?: string;
 }