fix(ui): improve "no data" message for assist stats

frontend/app/components/AssistStats/AssistStats.tsx

@@ -237,7 +237,7 @@ function AssistStats() {
                     <Typography.Title style={{ marginBottom: 0 }} level={5}>
                       {graphs.currentPeriod[i]
                         ? durationFromMsFormatted(graphs.currentPeriod[i])
-                        : 0}
+                        : null}
                     </Typography.Title>
                     {graphs.previousPeriod[i] ? (
                       <div

frontend/app/components/AssistStats/components/Charts.tsx

@@ -21,7 +21,7 @@ function Chart(props: Props) {
   return (
     <NoContent
       size="small"
-      title="No data available"
+      title={<div className={'text-base font-normal'}>No data available</div>}
       show={data && data.length === 0}
       style={{ height: '100px' }}
     >

frontend/app/components/AssistStats/components/Table.tsx

@@ -4,7 +4,7 @@ import { numberWithCommas } from 'App/utils';
 import React from 'react';
 import { Button, Dropdown, Space, Typography, Tooltip } from 'antd';
 import { CloudDownloadOutlined, TableOutlined } from '@ant-design/icons';
-import { Loader, Pagination } from 'UI';
+import { Loader, Pagination, NoContent } from 'UI';
 import PlayLink from 'Shared/SessionItem/PlayLink';
 import { recordingsService } from 'App/services';
 import { checkForRecent, durationFromMsFormatted, getDateFromMill } from 'App/date';
@@ -80,11 +80,18 @@ function StatsTable({ onSort, isLoading, onPageChange, page, sessions, exportCSV
         <Cell size={1}>{/* BUTTONS */}</Cell>
       </div>
       <div className={'bg-white'}>
-        <Loader loading={isLoading} style={{ height: 300 }}>
-          {sessions.list.map((session) => (
-            <Row session={session} />
-          ))}
-        </Loader>
+            <Loader loading={isLoading} style={{ height: 300 }}>
+          <NoContent
+            size={'small'}
+            title={<div className={'text-base font-normal'}>No data available</div>}
+            show={sessions.list && sessions.list.length === 0}
+            style={{ height: '100px' }}
+          >
+              {sessions.list.map((session) => (
+                <Row session={session} />
+              ))}
+          </NoContent>
+            </Loader>
       </div>
       <div className={'flex items-center justify-between p-4'}>
         {sessions.total > 0 ? (

frontend/app/components/AssistStats/components/TeamMembers.tsx

@@ -4,7 +4,7 @@ import { durationFromMsFormatted } from 'App/date';
 import { Member } from 'App/services/AssistStatsService';
 import { getInitials } from 'App/utils';
 import React from 'react';
-import { Loader } from 'UI';
+import { Loader, NoContent } from 'UI';
 import { exportCSVFile } from 'App/utils';
 
 const items = [
@@ -90,20 +90,27 @@ function TeamMembers({
         </div>
       </div>
       <Loader loading={isLoading} style={{ minHeight: 150, height: 300 }} size={48}>
-        {topMembers.list.map((member) => (
-          <div key={member.name} className={'w-full flex items-center gap-2 border-b pt-2 pb-1'}>
-            <div className="relative flex items-center justify-center w-10 h-10">
-              <div className="absolute left-0 right-0 top-0 bottom-0 mx-auto w-10 h-10 rounded-full opacity-30 bg-tealx" />
-              <div className="text-lg uppercase color-tealx">{getInitials(member.name)}</div>
+        <NoContent
+          size={'small'}
+          title={<div className={'text-base font-normal'}>No data available</div>}
+          show={topMembers.list && topMembers.list.length === 0}
+          style={{ height: '100px' }}
+        >
+          {topMembers.list.map((member) => (
+            <div key={member.name} className={'w-full flex items-center gap-2 border-b pt-2 pb-1'}>
+              <div className="relative flex items-center justify-center w-10 h-10">
+                <div className="absolute left-0 right-0 top-0 bottom-0 mx-auto w-10 h-10 rounded-full opacity-30 bg-tealx" />
+                <div className="text-lg uppercase color-tealx">{getInitials(member.name)}</div>
+              </div>
+              <div>{member.name}</div>
+              <div className={'ml-auto'}>
+                {membersSort === 'sessionsAssisted'
+                  ? member.count
+                  : durationFromMsFormatted(member.count)}
+              </div>
             </div>
-            <div>{member.name}</div>
-            <div className={'ml-auto'}>
-              {membersSort === 'sessionsAssisted'
-                ? member.count
-                : durationFromMsFormatted(member.count)}
-            </div>
-          </div>
-        ))}
+          ))}
+        </NoContent>
       </Loader>
       <div className={'flex items-center justify-center text-disabled-text p-2 mt-auto'}>
         {isLoading || topMembers.list.length === 0