📝 Add docstrings to add-organizations-types

Docstrings generation was requested by @izadoesdev.

* #51 (comment)

The following files were modified:

* `apps/dashboard/app/(main)/organizations/[slug]/components/invitation-list.tsx`
* `apps/dashboard/app/(main)/organizations/[slug]/components/invite-member-dialog.tsx`
* `apps/dashboard/app/(main)/organizations/[slug]/components/member-list.tsx`
* `apps/dashboard/app/(main)/organizations/[slug]/components/organization-logo-uploader.tsx`
* `apps/dashboard/app/(main)/organizations/[slug]/components/overview-tab.tsx`
* `apps/dashboard/app/(main)/organizations/[slug]/components/settings-tab.tsx`
* `apps/dashboard/app/(main)/organizations/[slug]/components/team-view.tsx`
* `apps/dashboard/app/(main)/organizations/[slug]/components/teams-tab.tsx`
* `apps/dashboard/app/(main)/organizations/[slug]/page.tsx`
* `apps/dashboard/app/(main)/organizations/page.tsx`
* `apps/dashboard/hooks/use-organizations.ts`

Author: coderabbitai[bot]

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);
 
@@ -24,11 +25,24 @@ interface InvitationToCancel {
 	email: string;
 }
 
+/**
+ * Displays a list of pending invitations with the ability to cancel individual invitations.
+ *
+ * Renders each invitation with its details and provides a confirmation dialog for cancellation. Returns `null` if there are no invitations to display.
+ *
+ * @param invitations - The list of pending invitations to display
+ * @param onCancelInvitation - Callback to cancel an invitation by its ID
+ * @param isCancellingInvitation - Indicates if a cancellation is currently in progress
+ */
 export function InvitationList({
 	invitations,
 	onCancelInvitation,
 	isCancellingInvitation,
-}: any) {
+}: {
+	invitations: Invitation[];
+	onCancelInvitation: CancelInvitation;
+	isCancellingInvitation: boolean;
+}) {
 	const [invitationToCancel, setInvitationToCancel] =
 		useState<InvitationToCancel | null>(null);
 
@@ -54,7 +68,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,33 @@ 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) {
+/**
+ * Renders a modal dialog for inviting a new member to an organization.
+ *
+ * Allows users to enter an email address and select a role for the invitee, then sends an invitation to join the specified organization. The dialog can be opened or closed via props.
+ *
+ * @param isOpen - Whether the dialog is visible
+ * @param onClose - Callback to close the dialog
+ * @param organizationId - Identifier of the organization to invite a member to
+ */
+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 +83,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,33 @@ 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'];
+}
+
+/**
+ * Renders a role selector for an organization member, allowing role changes between "admin" and "member" unless the member is an "owner".
+ *
+ * Displays a static "Owner" badge for owner members. For other roles, provides a dropdown to select and update the member's role.
+ */
 function RoleSelector({
 	member,
 	onUpdateRole,
 	isUpdatingMember,
 	organizationId,
-}: any) {
+}: RoleSelectorProps) {
 	if (member.role === 'owner') {
 		return (
 			<Badge
@@ -60,7 +85,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">
@@ -74,14 +103,19 @@ function RoleSelector({
 	);
 }
 
+/**
+ * Displays a list of organization members with role management and removal functionality.
+ *
+ * Renders each member with their avatar, name, email, join date, and current role. Allows updating member roles and removing non-owner members. Shows a confirmation dialog before removing a member. If no members are present, displays a placeholder message.
+ */
 export function MemberList({
 	members,
 	onRemoveMember,
 	isRemovingMember,
 	onUpdateRole,
 	isUpdatingMember,
 	organizationId,
-}: any) {
+}: MemberListProps) {
 	const [memberToRemove, setMemberToRemove] = useState<MemberToRemove | null>(
 		null
 	);
@@ -106,7 +140,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,29 @@ 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;
 }
 
+/**
+ * React component for uploading, cropping, and updating an organization's logo.
+ *
+ * Allows users to select an image file, crop it to a circular aspect ratio, and upload the cropped image as the organization's new logo. Displays the current logo or organization initials as a fallback, and provides UI feedback for upload progress and errors.
+ *
+ * @param organization - The organization whose logo is being managed.
+ */
 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,14 +22,24 @@ 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;
 }
 
+/**
+ * Displays an overview of an organization's details, team statistics, and recent members.
+ *
+ * Renders organization metadata, quick statistics on member roles, and a list of the most recent team members with loading states and navigation controls.
+ *
+ * @param organization - The organization whose overview information is displayed.
+ */
 export function OverviewTab({ organization }: OverviewTabProps) {
 	const { members, isLoading: isLoadingMembers } = useOrganizationMembers(
 		organization.id

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

@@ -32,15 +32,22 @@ 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;
 }
 
+/**
+ * Displays and manages organization settings, including editing basic information, viewing associated websites, transferring assets, and deleting the organization.
+ *
+ * Renders UI for updating the organization's name and slug, uploading a logo, listing associated websites, transferring assets, and performing irreversible deletion with confirmation.
+ *
+ * @param organization - The organization whose settings are being managed
+ */
 export function SettingsTab({ organization }: SettingsTabProps) {
 	const router = useRouter();
 	const [name, setName] = useState(organization.name);

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,18 @@ const ViewSkeleton = () => (
 	</div>
 );
 
-export function TeamView({ organization }: { organization: any }) {
+/**
+ * Displays and manages the team members and invitations for a given organization.
+ *
+ * Renders team statistics, member and invitation lists, and provides controls for inviting new members and managing existing ones. Handles loading and error states for team data.
+ *
+ * @param organization - The organization whose team is being managed and displayed.
+ */
+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,20 @@ 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 }) {
+/**
+ * Displays the team management interface or a prompt to select an organization.
+ *
+ * Renders team management features if a valid organization is provided; otherwise, shows guidance to select an organization before managing teams.
+ *
+ * @param organization - The current organization context, or undefined if none is selected
+ */
+export function TeamsTab({
+	organization,
+}: {
+	organization: Organization | ActiveOrganization;
+}) {
 	if (!(organization && organization.id)) {
 		return (
 			<div className="py-12 text-center">