Hi Ravi,



Try below code:-

1) Apex Controller********

public with sharing class CaseController 
{
    @AuraEnabled
    public static List<Case> getCases() 
    {
        List<Case> cases= [SELECT Id, CaseNumber, AccountId, ContactId, ContactPhone, ContactEmail, Origin, Reason, Status FROM Case Where Status=:'Closed'];
        return Cases;
    }
}
***************************************************************************************************************************
2) Cases Component********

<aura:component >
    <aura:attribute name="Case" type="Case" />
    
        <lightning:card variant="Narrow" title="{!v.Case.CaseNumber}" 
                        iconName="standard:Case">
            <aura:set attribute="actions">
                <lightning:button name="details" label="Details" onclick="{!c.goToRecord}" />
            </aura:set> 
            <aura:set attribute="footer">
                Account Id:<lightning:badge label="{!v.Case.AccountId}"/>
            </aura:set>

            <p class="slds-p-horizontal_small">
                {!v.Case.ContactPhone}
            </p>
            <p class="slds-p-horizontal_small">
                {!v.Case.ContactEmail}
            </p>
        </lightning:card>

</aura:component>

3) Client-side COntroller ********

({
    goToRecord : function(component, event, helper) {
        // Fire the event to navigate to the case record
        var sObjectEvent = $A.get("e.force:navigateToSObject");
        sObjectEvent.setParams({
            "recordId": component.get("v.Case.Id")
        })
        sObjectEvent.fire();
    }
})


***************************************************************************************************************************
4) ComponentList Component********

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="pNish.CaseController">
    <!-- Handle component initialization in a client-side controller -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <!-- Dynamically load the list of cases -->
    <aura:attribute name="cases" type="Case[]"/>
    <aura:attribute name="caseList" type="Case[]"/>
    <aura:attribute name="totalcases" type="Integer"/>
    
    <!-- Page header with a counter that displays total number of cases -->
    <div class="slds-page-header slds-page-header_object-home">
        <lightning:layout >
            <lightning:layoutItem >
                <lightning:icon iconName="standard:Case" />
            </lightning:layoutItem>
            <lightning:layoutItem class="slds-m-left_small">
                <p class="slds-text-title_caps slds-line-height_reset">Cases</p>
                <h1 class="slds-page-header__title slds-p-right_x-small">Case Viewer</h1>
            </lightning:layoutItem>
        </lightning:layout>
    
        <lightning:layout >
            <lightning:layoutItem >
                <p class="slds-text-body_small">{!v.totalcases} Cases • View Cases Based on Case Origin</p>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    
    <!-- Body with dropdown menu and list of cases -->
    <lightning:layout >
        <lightning:layoutItem padding="horizontal-medium" >
            <!-- Create a dropdown menu with options -->
            <lightning:select aura:id="select" label="Case Origin" name="Source" 
                              onchange="{!c.handleSelect}" class="slds-m-bottom_medium">
                <option value="">-- Select a Case Origin --</option>
                <option value="Phone" text="Phone"/>
                <option value="Email" text="Email"/>
                <option value="Web" text="Web"/>
                <option value="All" text="All"/>
            </lightning:select>
    
            <!-- Iterate over the list of cases and display them -->

            <aura:iteration var="Case" items="{!v.cases}">
                <!-- If you’re using a namespace, replace with myNamespace:cases-->
                <pNish:Cases Case="{!case}"/>
            </aura:iteration>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

5) Client-side Controller********

({
    doInit : function(component, event, helper) {
        // Retrieve cases during component initialization
        helper.loadcases(component);
    },
    
    handleSelect : function(component, event, helper) {
        var cases = component.get("v.cases");
        var caseList = component.get("v.caseList");

        //Get the selected option: "Phone", "Email", "Web", or "All"
        var selected = event.getSource().get("v.value");
    
        var filter = [];
        var k = 0;
        for (var i=0; i<caseList.length; i++){
            var c = caseList[i];
            if (selected != "All"){
                if(c.Origin == selected) {
                    filter[k] = c;
                    k++; 
                }
            }
            else {
                   filter = caseList;
            }       
        }
        //Set the filtered list of cases based on the selected option
        component.set("v.cases", filter);
        helper.updateTotal(component);
    }
})

6) Client-side Helper Controller********

({
   loadcases : function(cmp) {
        // Load all case data
        var action = cmp.get("c.getCases");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.cases", response.getReturnValue());
                cmp.set("v.caseList", response.getReturnValue());
                this.updateTotal(cmp);
            }

            // Display toast message to indicate load status
            var toastEvent = $A.get("e.force:showToast");
            if (state === 'SUCCESS'){
                toastEvent.setParams({
                    "title": "Success!",
                    "message": " Your cases have been loaded successfully."
                });
            }
            else {
                toastEvent.setParams({
                        "title": "Error!",
                        "message": " Something has gone wrong."
                });
            }
            toastEvent.fire();
        });
         $A.enqueueAction(action);
    },
     
    updateTotal: function(cmp) {
      var cases = cmp.get("v.cases");
      cmp.set("v.totalcases", cases.length);
    }
})

Let me know in case of any concerns.

Please mark this answer as the solution/ best answer if it solves your purpose so that it can help other community members.

Thanks,
Pramod Nishane
Salesforce Consultant
Varasi LLC
www.varasi.com