From 23ea4a851383fa07481009918d4aeeac9e576d10 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 24 Aug 2022 17:33:51 +0200
Subject: [PATCH] change(ui) - widget sessions bottom count and pagination

---
 .../components/WidgetSessions/WidgetSessions.tsx          | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
index d1e10d10a..d3a092b49 100644
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@@ -9,6 +9,7 @@ import { DateTime } from 'luxon';
 import { debounce } from 'App/utils';
 import useIsMounted from 'App/hooks/useIsMounted';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import { numberWithCommas } from 'App/utils';
 
 interface Props {
     className?: string;
@@ -99,7 +100,12 @@ function WidgetSessions(props: Props) {
                             </React.Fragment>
                         ))}
 
-                        <div className="w-full flex items-center justify-center py-6">
+                        <div className="flex items-center justify-between p-5">
+                            <div>
+                                Showing <span className="font-medium">{(metricStore.sessionsPage - 1) * metricStore.sessionsPageSize + 1}</span> to{' '}
+                                <span className="font-medium">{(metricStore.sessionsPage - 1) * metricStore.sessionsPageSize + filteredSessions.sessions.length}</span> of{' '}
+                                <span className="font-medium">{numberWithCommas(filteredSessions.total)}</span> sessions.
+                            </div>
                             <Pagination
                                 page={metricStore.sessionsPage}
                                 totalPages={Math.ceil(filteredSessions.total / metricStore.sessionsPageSize)}