chore: add documentation comments for analytics and permission compon…

…ents

src/src/components/analytics/google-analytics.tsx

@@ -4,6 +4,19 @@ interface GoogleAnalyticsProps {
   trackingId: string
 }
 
+/**
+ * GoogleAnalytics component integrates Google Analytics into a React application.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} props.trackingId - The Google Analytics tracking ID. This is required for the component to function.
+ *
+ * @example
+ * // Usage example:
+ * <GoogleAnalytics trackingId="UA-XXXXXXXXX-X" />
+ *
+ * @returns {JSX.Element | null} Returns the Google Analytics script tags or null if trackingId is not provided.
+ */
 const GoogleAnalytics: React.FC<GoogleAnalyticsProps> = ({ trackingId }) => {
   if (!trackingId) {
     console.error('Google Analytics tracking ID is required.')

src/src/components/analytics/umami-analytics.tsx

@@ -5,6 +5,14 @@ interface UmamiAnalyticsProps {
   websiteId: string
 }
 
+/**
+ * UmamiAnalytics component is responsible for embedding the Umami analytics script into the application.
+ *
+ * @param {string} scriptUrl - The URL of the Umami analytics script.
+ * @param {string} websiteId - The unique identifier for the website being tracked.
+ *
+ * @returns {JSX.Element | null} - Returns a script element with the provided script URL and website ID, or null if either parameter is missing.
+ */
 const UmamiAnalytics: React.FC<UmamiAnalyticsProps> = ({ scriptUrl, websiteId }) => {
   if (!scriptUrl || !websiteId) {
     console.error('Umami script URL and website ID are required.')

src/src/components/permission/PermissionActions.tsx

@@ -16,6 +16,14 @@ type PermissionActionsProps = {
     visible?: boolean
   }>
 }
+/**
+ * Component that renders a dropdown menu with various action buttons based on the provided actions.
+ * Each action is rendered as a button with an icon and a label, and is only visible if the user has the required policy.
+ *
+ * @param {PermissionActionsProps} props - The props for the component.
+ * @param {Array} props.actions - The list of actions to be rendered in the dropdown menu.
+ * @returns {JSX.Element} The rendered PermissionActions component.
+ */
 export const PermissionActions = ({ actions }: PermissionActionsProps) => {
   const { can } = useGrantedPolicies()
   const renderElement = (action: (typeof actions)[0]) => {

src/src/components/permission/PermissionToggle.tsx

@@ -17,6 +17,19 @@ type PermissionProps = {
   disabled?: boolean
 }
 
+/**
+ * A component that renders a toggle switch for permissions.
+ *
+ * @param {PermissionProps} props - The properties for the PermissionToggle component.
+ * @param {string} props.name - The name of the permission.
+ * @param {string} props.id - The unique identifier for the permission.
+ * @param {function} props.onUpdate - The callback function to be called when the permission is updated.
+ * @param {string} [props.className] - Additional CSS classes to apply to the component.
+ * @param {boolean} props.isGranted - Indicates whether the permission is granted.
+ * @param {boolean} props.disabled - Indicates whether the toggle is disabled.
+ *
+ * @returns {JSX.Element} The rendered PermissionToggle component.
+ */
 function PermissionToggle({ name, id, onUpdate, className, isGranted, disabled }: PermissionProps) {
   const onChangeEvent = useCallback(() => {
     onUpdate?.()

src/src/components/permission/TogglePermission.tsx

@@ -13,6 +13,20 @@ type TogglePermissionProps = UsePermissionsChangesProps & {
   disabled?: boolean
   onCancelEvent?: () => void
 }
+/**
+ * TogglePermission component allows toggling permissions with optional "Select All" and "Save" functionalities.
+ *
+ * @param {TogglePermissionProps} props - The properties for the TogglePermission component.
+ * @param {PermissionGrantInfoDto[]} props.permissions - The list of permissions to be displayed and toggled.
+ * @param {string} props.type - The type of permissions being handled.
+ * @param {boolean} [props.hideSelectAll] - Flag to hide the "Select All" option.
+ * @param {boolean} [props.hideSave] - Flag to hide the "Save" button.
+ * @param {Function} [props.onSelectedUpdate] - Callback function to handle updates when a permission is selected.
+ * @param {boolean} [props.disabled] - Flag to disable the permission toggles.
+ * @param {Function} [props.onCancelEvent] - Callback function to handle the cancel event.
+ *
+ * @returns {JSX.Element} The rendered TogglePermission component.
+ */
 export const TogglePermission = ({
   permissions,
   type,

src/src/components/permission/usePermissionChanges.ts

@@ -2,11 +2,25 @@ import { PermissionGrantInfoDto } from '@/client'
 import { Permissions } from '@/lib/utils'
 import { useCallback, useEffect, useState } from 'react'
 
+/**
+ * Hook to manage permission changes for different types of entities.
+ * 
+ * @param {UsePermissionsChangesProps} props - The properties for the hook.
+ * @returns {Object} - An object containing the state and handlers for permission changes.
+ */
 export type UsePermissionsChangesProps = {
   permissions: PermissionGrantInfoDto[]
   type: 'identity' | 'tenant' | 'feature' | 'setting'
 }
 
+/**
+ * Helper function to update the permission data based on the selected permission.
+ * 
+ * @param {PermissionGrantInfoDto[]} data - The current permission data.
+ * @param {PermissionGrantInfoDto} selectedData - The selected permission data.
+ * @param {`${Permissions}`} permission - The permission to be updated.
+ * @param {Function} setData - The function to update the permission data state.
+ */
 const helper = (
   data: PermissionGrantInfoDto[],
   selectedData: PermissionGrantInfoDto,
@@ -51,6 +65,11 @@ export const usePermissionsChanges = ({ permissions, type }: UsePermissionsChang
   const [hasAllSelected, setHasAllSelected] = useState(false)
   const [data, setData] = useState<PermissionGrantInfoDto[]>(permissions)
 
+  /**
+   * Handler for changes in the current permission.
+   * 
+   * @param {number} idx - The index of the selected permission.
+   */
   const onCurrentPermissionChanges = useCallback(
     (idx: number) => {
       const selectedData = data[idx]
@@ -78,6 +97,9 @@ export const usePermissionsChanges = ({ permissions, type }: UsePermissionsChang
     [permissions, type]
   )
 
+  /**
+   * Handler to update the state when all permissions are selected or deselected.
+   */
   const onHasAllSelectedUpdate = useCallback(() => {
     setHasAllSelected((f) => {
       data.forEach((d) => (d.isGranted = !f))