whmcsCrosterTemplates/includes/active-products-services-item.tpl

<div class="div-service-item" data-href="clientarea.php?action=productdetails&id={$service->id}">
	<div class="div-service-name">
		<span>
			<b>{$service->product->productGroup->name}</b> - {$service->product->name}
		</span>
		<span class="text-domain">{$service->domain}</span>
	</div>
	<div class="div-service-status text-md-center w-auto">
		<span class="label label-placeholder">
			{$statusProperties[array_key_first($statusProperties)]['translation']}
		</span>
		<span class="label label-{$statusProperties[$service->domainStatus]['modifier']}"
			  title="{$statusProperties[$service->domainStatus]['translation']}"
		>
			{$statusProperties[$service->domainStatus]['translation']}
		</span>
	</div>
    <div class="div-service-buttons mt-1 mt-md-0 ml-0 ml-md-3">
        {if !empty($buttonData)}
            <div class="list-group-item-dropdown dropdown" data-service-id="{$service->id}">
                <button type="button"
                        class="btn btn-sm btn-default dropdown-toggle"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                >
					{$LANG.manage}
                    <span class="caret"></span>
                </button>
                 <ul class="dropdown-menu dropdown-menu-right" data-service-id="{$service->id}" data-href="clientarea.php?action=productdetails&id={$service->id}">
                    {foreach $buttonData as $buttonDatum}
                        <li class="dropdown-item btn-custom-action{if !$buttonDatum['active']} disabled{/if}"
                            data-serviceid="{$buttonDatum['serviceid']}"
                            data-identifier="{$buttonDatum['identifier']}"
                            data-active="{$buttonDatum['active']}"
                            {if !$buttonDatum['active']}disabled="disabled"{/if}
                        >
                            <span class="loading mr-1" style="display: none;">
                                <i class="fas fa-spinner fa-spin"></i>
                            </span>
                            {$buttonDatum['display']}
                        </li>
                    {/foreach}
					<li class="dropdown-divider">-----</li>
					<li class="dropdown-item">{lang key="clientareaviewdetails"}</li>
                </ul>
            </div>
		{else}
			<button class="btn btn-default btn-sm btn-view-details">
				<span>{lang key="clientareaviewdetails"}</span>
			</button>		
        {/if}
    </div>
</div>