> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Logs

> Widget that shows the list of Call Logs available with filtering, call-back actions, and custom views.

<Accordion title="AI Agent Component Spec">
  ```json theme={null}
  {
    "component": "CometChatCallLogs",
    "package": "cometchat_calls_uikit",
    "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
    "description": "Widget that shows the list of Call Logs available with filtering, call-back actions, and custom views.",
    "props": {
      "data": {
        "callLogsRequestBuilder": { "type": "CallLogRequestBuilder?", "default": "null" },
        "callLogsBuilderProtocol": { "type": "CallLogsBuilderProtocol?", "default": "null" }
      },
      "callbacks": {
        "onItemClick": "Function(CallLog callLog)?",
        "onItemLongPress": "Function(CallLog callLog)?",
        "onCallLogIconClicked": "Function(CallLog callLog)?",
        "onBack": "VoidCallback?",
        "onError": "OnError?",
        "onLoad": "OnLoad<CallLog>?",
        "onEmpty": "OnEmpty?"
      },
      "visibility": {
        "hideAppbar": { "type": "bool?", "default": "false" },
        "showBackButton": { "type": "bool?", "default": "true" }
      },
      "viewSlots": {
        "listItemView": "Widget? Function(CallLog callLog, BuildContext context)?",
        "subTitleView": "Widget? Function(CallLog callLog, BuildContext context)?",
        "trailingView": "Function(BuildContext context, CallLog callLog)?",
        "leadingStateView": "Widget? Function(BuildContext, CallLog)?",
        "titleView": "Widget? Function(BuildContext, CallLog)?",
        "backButton": "Widget?",
        "emptyStateView": "WidgetBuilder?",
        "errorStateView": "WidgetBuilder?",
        "loadingStateView": "WidgetBuilder?"
      },
      "style": {
        "callLogsStyle": "CometChatCallLogsStyle?"
      },
      "icons": {
        "audioCallIcon": "Widget?",
        "videoCallIcon": "Widget?",
        "incomingCallIcon": "Widget?",
        "outgoingCallIcon": "Widget?",
        "missedCallIcon": "Widget?"
      },
      "formatting": {
        "datePattern": "String?",
        "dateSeparatorPattern": "String?"
      }
    }
  }
  ```
</Accordion>

## Overview

`CometChatCallLogs` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that shows the list of Call Logs available. By default, names are shown for all listed users, along with their avatars if available.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/TO10Bmu50bb5qPTI/images/2cd314f4-call_logs-e92a7499f211eaa3e4e6aabfac684dba.png?fit=max&auto=format&n=TO10Bmu50bb5qPTI&q=85&s=3514621c3eff56dcbd44a4e06fee04e4" width="2560" height="1600" data-path="images/2cd314f4-call_logs-e92a7499f211eaa3e4e6aabfac684dba.png" />
</Frame>

The `CometChatCallLogs` widget is composed of the following BaseWidgets:

| Widgets                                                     | Description                                                                                                                                                                             |
| ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [CometChatListBase](/ui-kit/flutter/v5/components-overview) | `CometChatListBase` is a container widget featuring a title, customizable background options, and a dedicated list widget for seamless integration within your application's interface. |
| [CometChatListItem](/ui-kit/flutter/v5/components-overview) | This widget displays data retrieved from a CallLog object on a card, presenting a title and subtitle.                                                                                   |

## Usage

### Integration

`CometChatCallLogs` being a wrapper widget, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.

You can launch `CometChatCallLogs` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.

##### 1. Using Navigator to Launch `CometChatCallLogs`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallLogs()));
    ```
  </Tab>
</Tabs>

##### 2. Embedding `CometChatCallLogs` as a Widget in the build Method

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
    import 'package:flutter/material.dart';

    class CallLogsExample extends StatefulWidget {
      const CallLogsExample({super.key});

      @override
      State<CallLogsExample> createState() => _CallLogsExampleState();
    }

    class _CallLogsExampleState extends State<CallLogsExample> {

      @override
      Widget build(BuildContext context) {
        return const Scaffold(
          body: SafeArea(
            child: CometChatCallLogs(),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.

##### onItemClick

This method proves valuable when users seek to override the `onItemClick` functionality within CometChatCallLogs, empowering them with greater control and customization options.

The `onItemClick` action function invoked when a call log item is clicked, typically used to open a detailed chat screen.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onItemClick: (callLog) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### onItemLongPress

Function executed when a callLog item is long-pressed, allowing additional actions like delete or select.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onItemLongPress: (CallLog callLog) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### onBack

`onBack` is triggered when you press the back button in the app bar. It has a predefined behavior; when clicked, it navigates to the previous activity. However, you can override this action using the following code snippet.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onBack: () {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### OnError

This action doesn't change the behavior of the component but rather listens for any errors that occur in the callLogs component.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onError: (e) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### onLoad

Invoked when the list is successfully fetched and loaded, helping track component readiness.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onLoad: (list) {
          // print("Call Logs: $list");
        },
    )
    ```
  </Tab>
</Tabs>

***

##### onEmpty

Called when the list is empty, enabling custom handling such as showing a placeholder message.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
        onEmpty: () {
            // Handle empty call logs
          },
    )
    ```
  </Tab>
</Tabs>

***

##### onCallLogIconClicked

You can customize this behavior by using the provided code snippet to override the `onCallLogIconClicked` and improve error handling.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onCallLogIconClicked: (CallLog callLog) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

### Filters

**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.

##### 1. CallLogRequestBuilder

The [CallLogRequestBuilder](/sdk/flutter/call-logs) enables you to filter and customize the call list based on available parameters in CallLogRequestBuilder. This feature allows you to create more specific and targeted queries during the call. The following are the parameters available in [CallLogRequestBuilder](/sdk/flutter/call-logs)

**Example**

In the example below, we are applying a filter based on the limit and have a call recording.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      callLogsRequestBuilder: CallLogRequestBuilder()
        ..limit = 10
        ..hasRecording = true,
    )
    ```
  </Tab>
</Tabs>

List of properties exposed by `CallLogRequestBuilder`

| **Property**       | Description                                                 | Code                     |
| ------------------ | ----------------------------------------------------------- | ------------------------ |
| **Auth Token**     | Sets the authentication token.                              | `authToken: String?`     |
| **Call Category**  | Sets the category of the call.                              | `callCategory: String?`  |
| **Call Direction** | Sets the direction of the call.                             | `callDirection: String?` |
| **Call Status**    | Sets the status of the call.                                | `callStatus: String?`    |
| **Call Type**      | Sets the type of the call.                                  | `callType: String?`      |
| **Guid**           | Sets the unique ID of the group involved in the call.       | `guid: String?`          |
| **Has Recording**  | Indicates if the call has a recording.                      | `hasRecording: bool`     |
| **Limit**          | Sets the maximum number of call logs to return per request. | `limit: int`             |
| **Uid**            | Sets the unique ID of the user involved in the call.        | `uid: String?`           |

***

### Events

[Events](/ui-kit/flutter/v5/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

The `CometChatCallLogs` widget does not have any exposed events.

***

## Customization

To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

### Style

You can customize the appearance of the `CometChatCallLogs` Widget by applying the `CometChatCallLogsStyle` to it using the following code snippet.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      callLogsStyle: CometChatCallLogsStyle(
          titleTextColor: Color(0xFFF76808),
          separatorColor: Color(0xFFF76808),
          avatarStyle: CometChatAvatarStyle(
                borderRadius: BorderRadius.circular(8),
                backgroundColor: Color(0xFFFBAA75),
          ),
       ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ubfBSdV1t6rmjxeA/images/8b6613da-call_logs_styling-d5342d812a143246feaf901a3128b234.png?fit=max&auto=format&n=ubfBSdV1t6rmjxeA&q=85&s=1009f4fb61dff6eac44af46df9233768" width="2560" height="1600" data-path="images/8b6613da-call_logs_styling-d5342d812a143246feaf901a3128b234.png" />
</Frame>

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

| **Methods**        | Description                                               | Code                           |
| ------------------ | --------------------------------------------------------- | ------------------------------ |
| **showBackButton** | Used to toggle visibility for back button in the app bar. | `setBackIconVisibility: bool?` |
| **hideAppbar**     | Used to toggle visibility for back button in the app bar. | `hideAppbar: bool?`            |

***

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      backButton: Icon(Icons.add_alert, color: Color(0xFF6851D6)),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b63f7edc-call_logs_functionality_cometchat_screens-9440a7269b6a247eec0ea0b0be9853d7.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=9f9a8bbd4563c375f98f1a2532f86121" alt="Image" width="4498" height="3121" data-path="images/b63f7edc-call_logs_functionality_cometchat_screens-9440a7269b6a247eec0ea0b0be9853d7.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/7d1ac343-call_logs_functionality_cometchat_screens-6da1c65caba38476d7a76ef530beef6d.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=6b8934f51590a09e8f9964b11c3ccb03" alt="Image" width="4498" height="3121" data-path="images/7d1ac343-call_logs_functionality_cometchat_screens-6da1c65caba38476d7a76ef530beef6d.png" />
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| **Property**                  | **Description**                                                                | **Code**                                                                                                               |
| ----------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| **Back Button**               | A widget for the back button.                                                  | `backButton: Widget?`                                                                                                  |
| **Call Logs Request Builder** | Builder for creating call log requests.                                        | `callLogsRequestBuilder: CallLogRequestBuilder?`                                                                       |
| **Date Pattern**              | Format pattern for date display.                                               | `datePattern: String?`                                                                                                 |
| **Date Separator Pattern**    | Format pattern for date separator.                                             | `dateSeparatorPattern: String?`                                                                                        |
| **Empty State Text**          | Text to display when there are no call logs.                                   | `emptyStateText: String?`                                                                                              |
| **Error State Text**          | Text to display when there is an error.                                        | `errorStateText: String?`                                                                                              |
| **Hide Separator**            | Whether to hide the separator between call logs.                               | `hideSeparator: bool`                                                                                                  |
| **Incoming Audio Call Icon**  | Icon for incoming audio calls.                                                 | `incomingAudioCallIcon: Icon?`                                                                                         |
| **Incoming Video Call Icon**  | Icon for incoming video calls.                                                 | `incomingVideoCallIcon: Icon?`                                                                                         |
| **Info Icon Url**             | URL for the info icon.                                                         | `infoIconUrl: String?`                                                                                                 |
| **Loading Icon Url**          | URL for the loading icon.                                                      | `loadingIconUrl: String?`                                                                                              |
| **Missed Audio Call Icon**    | Icon for missed audio calls.                                                   | `missedAudioCallIcon: Icon?`                                                                                           |
| **Missed Video Call Icon**    | Icon for missed video calls.                                                   | `missedVideoCallIcon: Icon?`                                                                                           |
| **Outgoing Audio Call Icon**  | Icon for outgoing audio calls.                                                 | `outgoingAudioCallIcon: Icon?`                                                                                         |
| **Outgoing Video Call Icon**  | Icon for outgoing video calls.                                                 | `outgoingVideoCallIcon: Icon?`                                                                                         |
| **Set Options**               | Set List of actions available on the long press of list item .                 | `setOptions: List<CometChatOption>? Function(Group group,CometChatGroupsController controller, BuildContext context)?` |
| **Add Options**               | adds into the current List of actions available on the long press of list item | `addOptions: List<CometChatOption>? Function(Group group,CometChatGroupsController controller, BuildContext context)?` |

***

### Advanced

For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets, layouts, and UI elements and then incorporate those into the widget.

#### setOptions

Defines the available actions users can perform on a call log entry, such as deleting, marking as spam, or calling back.

**Use Cases:**

* Provide quick call-back options.
* Allow users to block a number.
* Enable deleting multiple call logs.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
        setOptions: (callLog, controller, context) {
            // Set options for call log
        },
    )
    ```
  </Tab>
</Tabs>

***

#### addOptions

Adds custom actions to the existing call log options.

**Use Cases:**

* Add favorite/star call log option.
* Add favorite/star call log option.
* Provide an archive feature.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
        addOptions: (callLog, controller, context) {
            // Set options for call log
        },
    )
    ```
  </Tab>
</Tabs>

***

#### ListItemView

With this property, you can assign a custom ListItem to the Call Logs Widget.

**Example**

Here is the complete example for reference:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
     CometChatCallLogs(
          listItemView: (callLog, context) {
            final status =
                getCallStatus(context, callLog, CometChatUIKit.loggedInUser);
            IconData icon = Icons.call;
            Color? color;
            Color? textColor;
            if (status == "Incoming Call") {
              icon = Icons.phone_callback_rounded;
              color = Color(0xFF6852D6);
            } else if (status == "Outgoing Call") {
              icon = Icons.phone_forwarded;
              color = Color(0xFF6852D6);
            } else if (status == "Missed Call") {
              icon = Icons.phone_missed;
              color = Colors.red;
              textColor = Colors.red;
            }

            String name = "";

            if (CometChatUIKit.loggedInUser != null) {
              if (callLog.initiator is CallUser && callLog.receiver is CallUser) {
                CallUser callUserInitiator = callLog.initiator as CallUser;
                CallUser callUserReceiver = callLog.receiver as CallUser;
                if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
                  name = callUserReceiver.name ?? "";
                } else {
                  name = callUserInitiator.name ?? "";
                }
              } else if (callLog.initiator is CallUser &&
                  callLog.receiver is CallGroup) {
                CallUser callUserInitiator = callLog.initiator as CallUser;
                CallGroup callGroupReceiver = callLog.receiver as CallGroup;
                if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
                  name = callGroupReceiver.name ?? "";
                } else {
                  name = callUserInitiator.name ?? "";
                }
              }
            }

            //TODO: import DateFormat from intl package
            String formattedDate = DateFormat('d MMM, hh:mm a').format(
                DateTime.fromMillisecondsSinceEpoch(
                    (callLog.initiatedAt ?? 0) * 1000));

            return ListTile(
              leading: CircleAvatar(
                backgroundColor: Color(0xFFEDEAFA),
                child: Icon(
                  icon,
                  color: color,
                  size: 24,
                ),
              ),
              title: Text(
                name,
                style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                    color: textColor ?? Color(0xFF141414),
                    letterSpacing: 0),
              ),
              subtitle: Text(
                status,
                style: TextStyle(
                    color: Color(0xFF727272),
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    letterSpacing: 0),
              ),
              trailing: Text(
                formattedDate,
                style: TextStyle(
                    color: Color(0xFF727272),
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    letterSpacing: 0),
              ),
            );
          },
        );
    ```
  </Tab>

  <Tab title="getCallStatus">
    ```dart theme={null}
     /// Returns the call status message.
      static String getCallStatus(
          BuildContext context, CallLog callLog, User? loggedInUser) {
        String callMessageText = "";
        //check if the message is a call message and the receiver type is user
        if (callLog.receiverType == ReceiverTypeConstants.user) {
          CallUser initiator = callLog.initiator as CallUser;
          //check if the call is initiated
          if (callLog.status == CallStatusConstants.initiated) {
            //check if the logged in user is the initiator
            if (!isLoggedInUser(initiator, loggedInUser)) {
              callMessageText = "Incoming Call";
            } else {
              callMessageText = "Outgoing Call";
            }
          } else if (callLog.status == CallStatusConstants.ongoing) {
            callMessageText = "Call Accepted";
          } else if (callLog.status == CallStatusConstants.ended) {
            callMessageText = "Call Ended";
          } else if (callLog.status == CallStatusConstants.unanswered) {
            if (isLoggedInUser(initiator, loggedInUser)) {
              callMessageText = "Call Unanswered";
            } else {
              callMessageText = "Missed Call";
            }
          } else if (callLog.status == CallStatusConstants.cancelled) {
            if (isLoggedInUser(initiator, loggedInUser)) {
              callMessageText = "Call Cancelled";
            } else {
              callMessageText = "Missed Call";
            }
          } else if (callLog.status == CallStatusConstants.rejected) {
            if (isLoggedInUser(initiator, loggedInUser)) {
              callMessageText = "Call Rejected";
            } else {
              callMessageText = "Missed Call";
            }
          } else if (callLog.status == CallStatusConstants.busy) {
            if (isLoggedInUser(initiator, loggedInUser)) {
              callMessageText = "Call Rejected";
            } else {
              callMessageText = "Missed Call";
            }
          }
        }
        return callMessageText;
      }

      /// Returns true if the call is initiated by the logged in user.
      static bool isLoggedInUser(CallUser? initiator, User? loggedInUser) {
        if (initiator == null || loggedInUser == null) {
          return false;
        } else {
          return initiator.uid == loggedInUser.uid;
        }
      }
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/TO10Bmu50bb5qPTI/images/2c9ff0e2-call_logs_list_item_view-0ce23bdea51caf6a160a1d29336a8079.png?fit=max&auto=format&n=TO10Bmu50bb5qPTI&q=85&s=3d6b79a29798a0c0eb4001357bf25e13" width="2560" height="1600" data-path="images/2c9ff0e2-call_logs_list_item_view-0ce23bdea51caf6a160a1d29336a8079.png" />
</Frame>

***

#### TitleView

Allows setting a custom title view, typically used for the caller’s name or number.

**Use Cases:**

* Display caller’s full name.
* Show a business label for saved contacts.
* Use bold text for unknown numbers.

***

#### LeadingView

Customizes the leading view, usually the caller’s avatar or profile picture.

**Use Cases:**

* Display a profile picture.
* Show a call type icon (missed, received, dialed).
* Indicate call status (e.g., missed calls in red).

***

#### SubtitleView

You can customize the subtitle widget for each call logs item to meet your requirements

**Example**

Here is the complete example for reference:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
          subTitleView: (callLog, context) {
            return Row(
              children: [
                getCallIcon(context, callLog, CometChatUIKit.loggedInUser),
                Text(
                  getCallStatus(context, callLog, CometChatUIKit.loggedInUser),
                  style: TextStyle(
                      color: Color(0xFF727272),
                      fontSize: 14,
                      fontWeight: FontWeight.w400,
                      letterSpacing: 0),
                )
              ],
            );
          },
        );
    ```
  </Tab>

  <Tab title="getCallIcon">
    ```dart theme={null}
     /// [getCallIcon] Return call status icon
      static Widget getCallIcon(
          BuildContext context, CallLog callLog, User? loggedInUser) {
        bool isInitiatedByUser =
            CallUtils.callLogLoggedInUser(callLog, loggedInUser);

        // Define default icons if not provided
        Widget incoming = Icon(
          Icons.call_received_outlined,
          color: Colors.red,
          size: 16,
        );

        Widget outgoing = Icon(
          Icons.call_made_outlined,
          color: Color(0xFF09C26F),
          size: 16,
        );

        Widget missed = Icon(
          Icons.call_received_outlined,
          color: Colors.red,
          size: 16,
        );

        // Helper function to select icon based on initiator and call type
        Widget selectIcon(bool isInitiatedByUser) {
          return isInitiatedByUser ? outgoing : incoming;
        }

        // Switch on call status to determine the appropriate icon
        switch (callLog.status) {
          case CallStatusConstants.initiated:
          case CallStatusConstants.ongoing:
          case CallStatusConstants.ended:
            return selectIcon(isInitiatedByUser);

          case CallStatusConstants.unanswered:
          case CallStatusConstants.cancelled:
          case CallStatusConstants.rejected:
          case CallStatusConstants.busy:
            return isInitiatedByUser ? outgoing : missed;

          default:
            return const SizedBox(); // Return empty widget for unknown statuses
        }
      }
    ```
  </Tab>

  <Tab title="getCallStatus">
    ```dart theme={null}
     /// Returns the call status message.
      static String getCallStatus(
          BuildContext context, CallLog callLog, User? loggedInUser) {
        String callMessageText = "";
        //check if the message is a call message and the receiver type is user
        if (callLog.receiverType == ReceiverTypeConstants.user) {
          CallUser initiator = callLog.initiator as CallUser;
          //check if the call is initiated
          if (callLog.status == CallStatusConstants.initiated) {
            //check if the logged in user is the initiator
            if (!isLoggedInUser(initiator, loggedInUser)) {
              callMessageText = "Incoming Call";
            } else {
              callMessageText = "Outgoing Call";
            }
          } else if (callLog.status == CallStatusConstants.ongoing) {
            callMessageText = "Call Accepted";
          } else if (callLog.status == CallStatusConstants.ended) {
            callMessageText = "Call Ended";
          } else if (callLog.status == CallStatusConstants.unanswered) {
            if (isLoggedInUser(initiator, loggedInUser)) {
              callMessageText = "Call Unanswered";
            } else {
              callMessageText = "Missed Call";
            }
          } else if (callLog.status == CallStatusConstants.cancelled) {
            if (isLoggedInUser(initiator, loggedInUser)) {
              callMessageText = "Call Cancelled";
            } else {
              callMessageText = "Missed Call";
            }
          } else if (callLog.status == CallStatusConstants.rejected) {
            if (isLoggedInUser(initiator, loggedInUser)) {
              callMessageText = "Call Rejected";
            } else {
              callMessageText = "Missed Call";
            }
          } else if (callLog.status == CallStatusConstants.busy) {
            if (isLoggedInUser(initiator, loggedInUser)) {
              callMessageText = "Call Rejected";
            } else {
              callMessageText = "Missed Call";
            }
          }
        }
        return callMessageText;
      }

      /// Returns true if the call is initiated by the logged in user.
      static bool isLoggedInUser(CallUser? initiator, User? loggedInUser) {
        if (initiator == null || loggedInUser == null) {
          return false;
        } else {
          return initiator.uid == loggedInUser.uid;
        }
      }
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mNTojjz_O28of40c/images/f6dd73cd-call_logs_subtitle_view-56e85253ead39acb41b05c54f4193fa5.png?fit=max&auto=format&n=mNTojjz_O28of40c&q=85&s=8dee38cc063c6b9706dd19f4821eb865" width="2560" height="1600" data-path="images/f6dd73cd-call_logs_subtitle_view-56e85253ead39acb41b05c54f4193fa5.png" />
</Frame>

***

#### TrailingView

You can customize the tail widget for each call logs item to meet your requirements

**Example**

Here is the complete example for reference:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      trailingView: (context, callLog) {
          String formattedDate = DateFormat('d MMM, hh:mm a').format(
                DateTime.fromMillisecondsSinceEpoch(
                (callLog.initiatedAt ?? 0) * 1000));
          return Text(
                formattedDate,
                style: TextStyle(
                      color: Color(0xFF727272),
                      fontSize: 14,
                      fontWeight: FontWeight.w400,
                      letterSpacing: 0),
                );
           },
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2JiXkJ8lq6PmPGlJ/images/6ea9f1f9-call_logs_tail_view-cb6d574e764966d8c90d14eac6cff3ef.png?fit=max&auto=format&n=2JiXkJ8lq6PmPGlJ&q=85&s=3234ce93d1866d133ac9610e7f1f2937" width="2560" height="1600" data-path="images/6ea9f1f9-call_logs_tail_view-cb6d574e764966d8c90d14eac6cff3ef.png" />
</Frame>

***

## Configurations

[Configurations](/ui-kit/flutter/v5/components-overview#configurations) offer the ability to customize the properties of each widget within a Composite Widget.

`CometChatCallLogs` has `CometChatOutgoingCall` widget. Hence, each of these widgets will have its individual \`Configuration\`\`.

* `Configurations` expose properties that are available in its individual widgets.

#### Outgoing Call

You can customize the properties of the OutGoing Call widget by making use of the `OutgoingCallConfiguration`. You can accomplish this by employing the `outgoingCallConfiguration` props as demonstrated below:

**Example**

Here is the complete example for reference:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      outgoingCallConfiguration: OutgoingCallConfiguration(
        subtitle: "Outgoing Call",
        outgoingCallStyle: OutgoingCallStyle(
          background: Color(0xFFE4EBF5),
        )
      ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/e8884743-call_logs_outgoing_call_config_cometchat_screens-74adaf62cb240d32b466c122d66e98d2.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=48873fa44ccf3634ed75f6d6aed06db2" alt="Image" width="4498" height="3121" data-path="images/e8884743-call_logs_outgoing_call_config_cometchat_screens-74adaf62cb240d32b466c122d66e98d2.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/OOBJyP9hM0C-rAe_/images/de8acec6-call_logs_outgoing_call_config_cometchat_screens-836ab1ccf71553f8991268445fb70852.png?fit=max&auto=format&n=OOBJyP9hM0C-rAe_&q=85&s=bac0e32ab04ec28d5a1f592c0c70b977" alt="Image" width="4498" height="3121" data-path="images/de8acec6-call_logs_outgoing_call_config_cometchat_screens-836ab1ccf71553f8991268445fb70852.png" />
  </Tab>
</Tabs>

All exposed properties of `OutgoingCallConfiguration` can be found under [OutGoing Call](/ui-kit/flutter/v5/outgoing-call#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.

***