add notification to admin dash if no stats generated yet (#346)

* add notification if no stats generated yet * Update main.wasp * fix app_diff * Update AnalyticsDashboardPage.tsx
wasp-lang · Dec 17, 2024 · a0de7e9 · a0de7e9
1 parent f77e029
commit a0de7e9
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 50 deletions.
diff --git a/opensaas-sh/app_diff/package-lock.json.diff b/opensaas-sh/app_diff/package-lock.json.diff
diff --git a/opensaas-sh/app_diff/src/admin/dashboards/analytics/AnalyticsDashboardPage.tsx.diff b/opensaas-sh/app_diff/src/admin/dashboards/analytics/AnalyticsDashboardPage.tsx.diff
@@ -7,17 +7,12 @@
  import { useQuery, getDailyStats } from 'wasp/client/operations';
  import TotalSignupsCard from './TotalSignupsCard';
  import TotalPageViewsCard from './TotalPageViewsCard';
-@@ -7,21 +9,68 @@
- import RevenueAndProfitChart from './RevenueAndProfitChart';
- import SourcesTable from './SourcesTable';
- import DefaultLayout from '../../layout/DefaultLayout';
--import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin'
-+import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin';
+@@ -10,12 +12,54 @@
+ import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin';
 
  const Dashboard = ({ user }: { user: AuthUser }) => {
--  useRedirectHomeUnlessUserIsAdmin({ user })
 +  const [isDemoInfoVisible, setIsDemoInfoVisible] = useState(false);
-+  useRedirectHomeUnlessUserIsAdmin({ user });
+   useRedirectHomeUnlessUserIsAdmin({ user });
 
    const { data: stats, isLoading, error } = useQuery(getDailyStats);
 
@@ -48,7 +43,6 @@
 +
    return (
      <DefaultLayout user={user}>
-+      {/* Floating Demo Announcement */}
 +      {isDemoInfoVisible && (
 +        <div className='fixed z-999 bottom-0 mb-2 left-1/2 -translate-x-1/2 lg:mb-4 bg-gray-700 rounded-full px-3.5 py-2 text-sm text-white duration-300 ease-in-out hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600'>
 +          <div className='px-4 flex flex-row gap-2 items-center my-1'>
@@ -65,26 +59,15 @@
 +          </div>
 +        </div>
 +      )}
-       <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5'>
-         <TotalPageViewsCard
-           totalPageViews={stats?.dailyStats.totalViews}
-           prevDayViewsChangePercent={stats?.dailyStats.prevDayViewsChangePercent}
-         />
--        <TotalRevenueCard dailyStats={stats?.dailyStats} weeklyStats={stats?.weeklyStats} isLoading={isLoading} />
-+        <TotalRevenueCard
-+          dailyStats={stats?.dailyStats}
-+          weeklyStats={stats?.weeklyStats}
-+          isLoading={isLoading}
-+        />
-         <TotalPayingUsersCard dailyStats={stats?.dailyStats} isLoading={isLoading} />
-         <TotalSignupsCard dailyStats={stats?.dailyStats} isLoading={isLoading} />
-       </div>
-@@ -30,7 +79,7 @@
-         <RevenueAndProfitChart weeklyStats={stats?.weeklyStats} isLoading={isLoading} />
+       <div className='relative'>
+         <div className={`${!stats ? 'opacity-25' : ''}`}>
+           <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5'>
+@@ -36,7 +80,7 @@
+             <RevenueAndProfitChart weeklyStats={stats?.weeklyStats} isLoading={isLoading} />
 
-         <div className='col-span-12 xl:col-span-8'>
--          <SourcesTable sources={stats?.dailyStats?.sources} />
-+          <SourcesTable sources={sortedSources} />
+             <div className='col-span-12 xl:col-span-8'>
+-              <SourcesTable sources={stats?.dailyStats?.sources} />
++              <SourcesTable sources={sortedSources} />
+             </div>
+           </div>
          </div>
-       </div>
-     </DefaultLayout>
diff --git a/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff b/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
@@ -19,7 +19,13 @@
            </WaspRouterLink>
          </div>
          <div className='flex lg:hidden'>
-@@ -61,8 +60,8 @@
+@@ -56,13 +55,13 @@
+         </div>
+         <div className='hidden lg:flex lg:gap-x-12'>{renderNavigationItems(navigationItems)}</div>
+         <div className='hidden lg:flex lg:flex-1 gap-3 justify-end items-center'>
+-          <ul className='flex justify-center items-center gap-2 sm:gap-4'>
++          <ul className='ml-4 flex justify-center items-center gap-2 sm:gap-4'>
+             <DarkModeSwitcher />
            </ul>
            {isUserLoading ? null : !user ? (
              <WaspRouterLink to={routes.LoginRoute.to} className='text-sm font-semibold leading-6 ml-3'>

diff --git a/template/app/src/admin/dashboards/analytics/AnalyticsDashboardPage.tsx b/template/app/src/admin/dashboards/analytics/AnalyticsDashboardPage.tsx
@@ -7,31 +7,55 @@ import TotalRevenueCard from './TotalRevenueCard';
 import RevenueAndProfitChart from './RevenueAndProfitChart';
 import SourcesTable from './SourcesTable';
 import DefaultLayout from '../../layout/DefaultLayout';
-import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin'
+import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin';
+import { cn } from '../../../client/cn';
 
 const Dashboard = ({ user }: { user: AuthUser }) => {
-  useRedirectHomeUnlessUserIsAdmin({ user })
+  useRedirectHomeUnlessUserIsAdmin({ user });
 
   const { data: stats, isLoading, error } = useQuery(getDailyStats);
 
   return (
     <DefaultLayout user={user}>
-      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5'>
-        <TotalPageViewsCard
-          totalPageViews={stats?.dailyStats.totalViews}
-          prevDayViewsChangePercent={stats?.dailyStats.prevDayViewsChangePercent}
-        />
-        <TotalRevenueCard dailyStats={stats?.dailyStats} weeklyStats={stats?.weeklyStats} isLoading={isLoading} />
-        <TotalPayingUsersCard dailyStats={stats?.dailyStats} isLoading={isLoading} />
-        <TotalSignupsCard dailyStats={stats?.dailyStats} isLoading={isLoading} />
-      </div>
+      <div className='relative'>
+        <div className={cn({
+          'opacity-25': !stats,
+        })}>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5'>
+            <TotalPageViewsCard
+              totalPageViews={stats?.dailyStats.totalViews}
+              prevDayViewsChangePercent={stats?.dailyStats.prevDayViewsChangePercent}
+            />
+            <TotalRevenueCard
+              dailyStats={stats?.dailyStats}
+              weeklyStats={stats?.weeklyStats}
+              isLoading={isLoading}
+            />
+            <TotalPayingUsersCard dailyStats={stats?.dailyStats} isLoading={isLoading} />
+            <TotalSignupsCard dailyStats={stats?.dailyStats} isLoading={isLoading} />
+          </div>
 
-      <div className='mt-4 grid grid-cols-12 gap-4 md:mt-6 md:gap-6 2xl:mt-7.5 2xl:gap-7.5'>
-        <RevenueAndProfitChart weeklyStats={stats?.weeklyStats} isLoading={isLoading} />
+          <div className='mt-4 grid grid-cols-12 gap-4 md:mt-6 md:gap-6 2xl:mt-7.5 2xl:gap-7.5'>
+            <RevenueAndProfitChart weeklyStats={stats?.weeklyStats} isLoading={isLoading} />
 
-        <div className='col-span-12 xl:col-span-8'>
-          <SourcesTable sources={stats?.dailyStats?.sources} />
+            <div className='col-span-12 xl:col-span-8'>
+              <SourcesTable sources={stats?.dailyStats?.sources} />
+            </div>
+          </div>
         </div>
+
+        {!stats && (
+          <div className='absolute inset-0 flex items-start justify-center bg-white/50 dark:bg-boxdark-2/50'>
+            <div className='rounded-lg bg-white p-8 shadow-lg dark:bg-boxdark'>
+              <p className='text-2xl font-bold text-boxdark dark:text-white'>
+                No daily stats generated yet
+              </p>
+              <p className='mt-2 text-sm text-bodydark2'>
+                Stats will appear here once the daily stats job has run
+              </p>
+            </div>
+          </div>
+        )}
       </div>
     </DefaultLayout>
   );

diff --git a/template/app/src/analytics/operations.ts b/template/app/src/analytics/operations.ts
@@ -11,7 +11,7 @@ type DailyStatsValues = {
   weeklyStats: DailyStatsWithSources[];
 };
 
-export const getDailyStats: GetDailyStats<void, DailyStatsValues> = async (_args, context) => {
+export const getDailyStats: GetDailyStats<void, DailyStatsValues | undefined> = async (_args, context) => {
   if (!context.user?.isAdmin) {
     throw new HttpError(401);
   }
@@ -24,7 +24,8 @@ export const getDailyStats: GetDailyStats<void, DailyStatsValues> = async (_args
     },
   });
   if (!dailyStats) {
-    throw new HttpError(204, 'No daily stats generated yet.');
+    console.log('\x1b[34mNote: No daily stats have been generated by the dailyStatsJob yet. \x1b[0m');
+    return undefined;
   }
 
   const weeklyStats = await context.entities.DailyStats.findMany({