> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Log Details

> Show CometChat iOS UI Kit call log details with call history, participants, recordings, tabbed views, and Calls SDK integration.

Learn how to integrate and customize CometChat's call log components to display call history, participant details, and call recordings in your iOS app.

## Overview

The `CallLogDetailsVC` module provides a tabbed interface for viewing details of past calls:

* **History** — Chronological join/leave events with timestamps
* **Participants** — Users who joined the call
* **Recordings** — Links to cloud-hosted call recordings

This ensures transparency and auditability for both users and administrators.

## Prerequisites

Before implementing call log details, ensure you have:

* Completed [Getting Started](/ui-kit/ios/getting-started) setup
* CometChat UIKit v5+ installed
* CometChatCallsSDK integrated
* User logged in with `CometChatUIKit.login()`
* Active internet connection

## Components

| Component                  | Description                                                       |
| -------------------------- | ----------------------------------------------------------------- |
| `CallLogDetailsVC`         | Main container with segmented control and page view               |
| `CallLogParticipantsVC`    | Displays a list of users who participated in the call             |
| `CallLogHistoryVC`         | Shows join/leave history entries with timestamps and statuses     |
| `CallLogRecordingsVC`      | Lists call recordings with playback actions                       |
| `CallLogDetailsHeaderView` | Header view showing call metadata (title, status, duration)       |
| `CallLogUserCell`          | UITableViewCell for participants, history, and recordings entries |
| `CallLogDetailsModel`      | Data model formatting participants, history, and recordings data  |
| `CallLogViewModel`         | Fetches and distributes call log data to the UI components        |

## Integration Steps

### Step 1: Present Call Log Details Screen

Show the call log interface for a selected call:

```swift lines theme={null}
import UIKit
import CometChatSDK
import CometChatCallsSDK

class CallLogsViewController: UIViewController {
    
    func showCallDetails(for call: CallLog) {
        // Initialize the call log details view controller
        let detailsVC = CallLogDetailsVC(call: call)
        
        // Push onto navigation stack
        navigationController?.pushViewController(detailsVC, animated: true)
    }
}
```

This bundles history, participants, and recordings into a single UI flow.

**File reference:** [`CallLogDetailsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/CallLogDetailsVC.swift)

### Step 2: Display Participants List

Populate the participants tab with the call's members:

```swift lines theme={null}
import UIKit
import CometChatSDK

class CallLogParticipantsVC: UIViewController {
    
    var participants: [Participant] = []
    @IBOutlet weak var participantsTableView: UITableView!
    
    func loadParticipants() {
        // Fetch participants from call log data
        // ...
        
        // Reload table view to display participants
        participantsTableView.reloadData()
    }
}
```

This provides an audit trail of who was present in the call.

**File reference:** [`CallLogParticipantsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Participants/CallLogParticipantsVC.swift)

### Step 3: Show Call History

Render join/leave activities in chronological order:

```swift lines theme={null}
import UIKit

class CallLogHistoryVC: UIViewController {
    
    var history: [CallHistoryEntry] = []
    @IBOutlet weak var tableView: UITableView!
    
    func addHistoryEntry(user: String, action: String, timestamp: Date) {
        // Create and append new history entry
        let entry = CallHistoryEntry(user: user, action: action, timestamp: timestamp)
        history.append(entry)
        
        // Refresh the table view
        tableView.reloadData()
    }
}
```

This tracks user join/leave times for transparency.

**File references:**

* [`CallHistoyTVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20History%20/CallHistoyTVC.swift)
* [`CallLogHistoryVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20History%20/CallLogHistoryVC.swift)

### Step 4: List and Play Recordings

Provide playback links for any recorded calls:

```swift lines theme={null}
import UIKit

class CallLogRecordingsVC: UIViewController {
    
    func playRecording(url: URL) {
        // Open recording URL in default browser/player
        UIApplication.shared.open(url)
    }
}
```

This enables administrators and users to review call content (if recording is enabled).

**File references:**

* [`CallLogRecordingsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Recording%20/CallLogRecordingsVC.swift)
* [`CallRecordingTVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Recording%20/CallRecordingTVC.swift)

## Customization Options

### Styling

Customize colors, fonts, and spacing using CometChat's theming system:

```swift lines theme={null}
import CometChatUIKitSwift

// Apply custom theme to call log components
let theme = CometChatTheme()
theme.palette.primary = UIColor.systemBlue

// Apply typography
let typography = CometChatTypography()
typography.heading = UIFont.systemFont(ofSize: 18, weight: .bold)

// Apply spacing
let spacing = CometChatSpacing()
spacing.padding = 16
```

### Filters

Use `CallLogViewModel` to filter by call type:

```swift lines theme={null}
// Filter by call type
viewModel.filterByType(.incoming)   // Show only incoming calls
viewModel.filterByType(.outgoing)   // Show only outgoing calls
viewModel.filterByType(.missed)     // Show only missed calls
```

### Empty States

Implement an `EmptyStateView` in `CallLogHistoryVC` for no-history scenarios:

```swift lines theme={null}
func showEmptyState() {
    let emptyView = UILabel()
    emptyView.text = "No call history available"
    emptyView.textAlignment = .center
    emptyView.textColor = .secondaryLabel
    tableView.backgroundView = emptyView
}
```

## Edge Cases

| Scenario              | Handling                                                                     |
| --------------------- | ---------------------------------------------------------------------------- |
| No call logs          | Show a custom empty state instead of a blank table                           |
| Large history         | Add lazy loading in `scrollViewDidScroll` to fetch more entries              |
| Blocked users         | Disable profile navigation in `CallLogParticipantsVC` if the user is blocked |
| Missing recording URL | Gracefully disable playback links                                            |

## Error Handling

| Error Type            | Solution                                                                                    |
| --------------------- | ------------------------------------------------------------------------------------------- |
| Network/API errors    | Display `UIAlertController` on fetch failures; expose error via `CallLogViewModel` delegate |
| Retry mechanism       | Add pull-to-refresh or a retry button in `CallLogDetailsVC`                                 |
| Recording unavailable | Gracefully disable playback links if URL is missing                                         |

## Additional Notes

* **Group Calls vs 1:1 Calls** — Customize `CallLogParticipantsVC` display based on call type and participant roles
* **Metadata Display** — Use `CallLogDetailsHeaderView` to show titles, call duration, and status icons

## Feature Matrix

| Feature                      | Component / Method         | File(s)                                               |
| ---------------------------- | -------------------------- | ----------------------------------------------------- |
| Show call log details screen | `CallLogDetailsVC(call:)`  | `CallLogDetailsVC.swift`                              |
| Display participants         | `CallLogParticipantsVC`    | `CallLogParticipantsVC.swift`                         |
| Display history entries      | `CallLogHistoryVC`         | `CallHistoyTVC.swift`, `CallLogHistoryVC.swift`       |
| List recordings              | `CallLogRecordingsVC`      | `CallLogRecordingsVC.swift`, `CallRecordingTVC.swift` |
| Header metadata              | `CallLogDetailsHeaderView` | `CallLogDetailsHeaderView.swift`                      |
| Data handling                | `CallLogDetailsModel`      | `CallLogDetailsModel.swift`                           |
| Data fetching & distribution | `CallLogViewModel`         | `CallLogViewModel.swift`                              |

## Related Components

* [Call Logs](/ui-kit/ios/call-logs) - Display call log list
* [Call Features](/ui-kit/ios/call-features) - Overview of calling capabilities
* [Ongoing Call](/ui-kit/ios/ongoing-call) - Active call interface

<CardGroup cols={2}>
  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp">
    Explore a full sample implementation
  </Card>

  <Card title="UIKit Source" href="https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details">
    Review the call log components in the UIKit library
  </Card>
</CardGroup>

## Related Guides

<CardGroup cols={2}>
  <Card title="Call Logs" icon="phone" href="/ui-kit/ios/call-logs">
    Display call history list
  </Card>

  <Card title="Call Features" icon="video" href="/ui-kit/ios/call-features">
    Overview of calling capabilities
  </Card>

  <Card title="Events" icon="bell" href="/ui-kit/ios/events">
    Handle call events
  </Card>
</CardGroup>