Update dependencies and import dynamic method

This commit updates multiple dependencies in the pnpm-lock.yaml file and imports the dynamic method from 'next/dynamic' in the site-header-account-section.tsx file. These updates are part of routine maintenance and improvement of the codebase. The import allows for dynamic imports, which can enhance performance.
2024-04-16 20:56:18 +08:00
parent f2be1b80f4
commit cad729670f
26 changed files with 918 additions and 1788 deletions
--- a/apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx
@@ -37,13 +37,15 @@ export default function DashboardDemo() {
      >
        <Card>
          <CardHeader>
-            <CardTitle>Monthly Recurring Revenue</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Monthly Recurring Revenue</span>
+              <Trend trend={'up'}>20%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{`$${mrr[1]}`}</Figure>
-              <Trend trend={'up'}>20%</Trend>
            </div>

            <Chart data={mrr[0]} />
@@ -52,13 +54,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Revenue</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Revenue</span>
+              <Trend trend={'up'}>12%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
-            <div className={'flex items-center justify-between'}>
+            <div className={'mb-4 flex items-center justify-between'}>
              <Figure>{`$${netRevenue[1]}`}</Figure>
-              <Trend trend={'up'}>12%</Trend>
            </div>

            <Chart data={netRevenue[0]} />
@@ -67,13 +71,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Fees</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Fees</span>
+              <Trend trend={'up'}>9%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{`$${fees[1]}`}</Figure>
-              <Trend trend={'up'}>9%</Trend>
            </div>

            <Chart data={fees[0]} />
@@ -82,13 +88,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>New Customers</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>New Customers</span>
+              <Trend trend={'down'}>-25%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{`${newCustomers[1]}`}</Figure>
-              <Trend trend={'down'}>-25%</Trend>
            </div>

            <Chart data={newCustomers[0]} />
@@ -97,13 +105,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Visitors</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Visitors</span>
+              <Trend trend={'down'}>-4.3%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{visitors[1]}</Figure>
-              <Trend trend={'down'}>-4.3%</Trend>
            </div>

            <Chart data={visitors[0]} />
@@ -112,13 +122,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Returning Visitors</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Returning Visitors</span>
+              <Trend trend={'stale'}>10%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{returningVisitors[1]}</Figure>
-              <Trend trend={'stale'}>10%</Trend>
            </div>

            <Chart data={returningVisitors[0]} />
@@ -127,13 +139,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Churn</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Churn</span>
+              <Trend trend={'up'}>-10%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{churn[1]}%</Figure>
-              <Trend trend={'up'}>-10%</Trend>
            </div>

            <Chart data={churn[0]} />
@@ -142,13 +156,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Support Tickets</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Support Tickets</span>
+              <Trend trend={'up'}>-30%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{tickets[1]}</Figure>
-              <Trend trend={'up'}>-30%</Trend>
            </div>

            <Chart data={tickets[0]} />
@@ -159,13 +175,15 @@ export default function DashboardDemo() {
      <div>
        <Card>
          <CardHeader>
-            <CardTitle>Active Users</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Active Users</span>
+              <Trend trend={'up'}>10%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{activeUsers[1]}</Figure>
-              <Trend trend={'up'}>10%</Trend>
            </div>

            <Chart data={activeUsers[0]} />
@@ -217,7 +235,7 @@ function Chart(
  return (
    <div
      className={
-        'h-36 duration-200 animate-in fade-in slide-in-from-left-4 slide-in-from-top-4'
+        'h-36 py-2 duration-200 animate-in fade-in slide-in-from-left-4 slide-in-from-top-4'
      }
    >
      <ResponsiveContainer width={'100%'} height={'100%'}>
@@ -333,7 +351,11 @@ function BadgeWithTrend(props: React.PropsWithChildren<{ trend: string }>) {
 }

 function Figure(props: React.PropsWithChildren) {
-  return <div className={'text-3xl font-extrabold'}>{props.children}</div>;
+  return (
+    <div className={'font-heading text-4xl font-extrabold'}>
+      {props.children}
+    </div>
+  );
 }

 function Trend(
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -1,5 +1,6 @@
 'use client';

+import dynamic from 'next/dynamic';
 import Link from 'next/link';

 import type { User } from '@supabase/supabase-js';
@@ -10,12 +11,18 @@ import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useUser } from '@kit/supabase/hooks/use-user';
 import { Button } from '@kit/ui/button';
-import { ModeToggle } from '@kit/ui/mode-toggle';
 import { Trans } from '@kit/ui/trans';

 import featuresFlagConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';

+const ModeToggle = dynamic(
+  () => import('@kit/ui/mode-toggle').then((mod) => mod.ModeToggle),
+  {
+    ssr: false,
+  },
+);
+
 const paths = {
  home: pathsConfig.app.home,
 };
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,4 +1,5 @@
 import { Urbanist as HeadingFont, Inter as SansFont } from 'next/font/google';
+import Head from 'next/head';
 import { cookies, headers } from 'next/headers';

 import { Toaster } from '@kit/ui/sonner';
@@ -36,7 +37,9 @@ export default async function RootLayout({

  return (
    <html lang={language} className={getClassName(theme)}>
-      <CsrfTokenMeta />
+      <Head>
+        <CsrfTokenMeta />
+      </Head>

      <body>
        <RootProviders theme={theme} lang={language}>
@@ -51,7 +54,7 @@ export default async function RootLayout({

 function getClassName(theme?: string) {
  const dark = theme === 'dark';
-  const light = theme === 'light';
+  const light = !dark;

  return cn(
    'min-h-screen bg-background antialiased',
--- a/apps/web/components/root-providers.tsx
+++ b/apps/web/components/root-providers.tsx
@@ -57,6 +57,7 @@ export function RootProviders({
                  enableSystem
                  disableTransitionOnChange
                  defaultTheme={theme}
+                  enableColorScheme={false}
                >
                  {children}
                </ThemeProvider>
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@@ -52,6 +52,9 @@ const config = {
      transform: 'lodash/{{member}}',
    },
  },
+  env: {
+    NEXT_PUBLIC_BUILD_ID: process.env.GIT_HASH ?? performance.now().toString(),
+  },
  /** We already do linting and typechecking as separate tasks in CI */
  eslint: { ignoreDuringBuilds: true },
  typescript: { ignoreBuildErrors: true },
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -48,18 +48,18 @@
    "@kit/team-accounts": "workspace:^",
    "@kit/ui": "workspace:^",
    "@makerkit/data-loader-supabase-core": "^0.0.7",
-    "@makerkit/data-loader-supabase-nextjs": "beta",
+    "@makerkit/data-loader-supabase-nextjs": "^1.1.0",
    "@marsidev/react-turnstile": "^0.5.4",
    "@radix-ui/react-icons": "^1.3.0",
    "@supabase/supabase-js": "^2.42.4",
-    "@tanstack/react-query": "5.29.0",
+    "@tanstack/react-query": "5.29.2",
    "@tanstack/react-query-next-experimental": "^5.29.2",
    "@tanstack/react-table": "^8.16.0",
    "date-fns": "^3.6.0",
-    "edge-csrf": "^1.0.11",
+    "edge-csrf": "1.0.12-sveltekit-1",
    "i18next": "^23.11.2",
    "i18next-resources-to-backend": "^1.2.1",
-    "lucide-react": "^0.367.0",
+    "lucide-react": "^0.368.0",
    "next": "14.2.1",
    "next-sitemap": "^4.2.3",
    "next-themes": "0.3.0",
@@ -76,7 +76,7 @@
    "@kit/prettier-config": "workspace:^",
    "@kit/tailwind-config": "workspace:^",
    "@kit/tsconfig": "workspace:^",
-    "@next/bundle-analyzer": "14.2.0",
+    "@next/bundle-analyzer": "14.2.1",
    "@types/mdx": "^2.0.13",
    "@types/node": "^20.12.7",
    "@types/react": "^18.2.79",
@@ -85,8 +85,8 @@
    "dotenv-cli": "^7.4.1",
    "eslint": "^8.57.0",
    "prettier": "^3.2.5",
-    "supabase": "^1.157.2",
-    "tailwindcss": "3.4.1",
+    "supabase": "^1.159.1",
+    "tailwindcss": "3.4.3",
    "typescript": "^5.4.5"
  },
  "eslintConfig": {