feat: add analytics

.env.local.sample

@@ -2,3 +2,5 @@ GS_PRIVATE_KEY=<your-gs-private-key>
 GS_CLIENT_EMAIL=<your-gs-client-email>
 SHEET_ID=<your-sheet-id>
 NEXT_PUBLIC_DOMAIN=http://localhost:3000
+UMAMI_URL=<your-umami-url>
+UMAMI_WEBSITE_ID=<your-umami-website-id>

components/ClearSelectionButton/ClearSelectionButton.tsx

@@ -30,6 +30,8 @@ const ClearSelectionButton = ({
         type: "button",
         title: "Clear",
         className: classNameData,
+        "data-umami-event": "clear-selection-button",
+        "data-umami-event-type": isHome ? "events" : "shifts",
       }}
     >
       <i className="bi bi-trash-fill"></i>

components/CustomToolbar/CustomToolbar.tsx

@@ -37,6 +37,7 @@ const MobileToolbar = ({ view, onView }) => {
                     view === "day" ? "rbc-active" : undefined
                   } h-[2.1rem]`}
                   onClick={() => onView("day")}
+                  data-umami-event="day-view-button"
                 >
                   <i className="bi bi-calendar3-event"></i> Day
                 </button>
@@ -52,6 +53,7 @@ const MobileToolbar = ({ view, onView }) => {
                     view === "week" ? "rbc-active" : undefined
                   } h-[2.1rem]`}
                   onClick={() => onView("week")}
+                  data-umami-event="week-view-button"
                 >
                   <i className="bi bi-calendar3-week"></i> Week
                 </button>
@@ -67,6 +69,7 @@ const MobileToolbar = ({ view, onView }) => {
                     view === "month" ? "rbc-active" : undefined
                   } h-[2.1rem]`}
                   onClick={() => onView("month")}
+                  data-umami-event="month-view-button"
                 >
                   <i className="bi bi-calendar3"></i> Month
                 </button>
@@ -88,6 +91,7 @@ const DesktopToolbar = ({ view, onView }) => {
         // don't use condition && "result" -> className can't be a boolean
         className={`${view === "day" ? "rbc-active" : undefined} h-[2.1rem]`}
         onClick={() => onView("day")}
+        data-umami-event="day-view-button"
       >
         <i className="bi bi-calendar3-event"></i>
       </button>
@@ -97,6 +101,7 @@ const DesktopToolbar = ({ view, onView }) => {
         // don't use condition && "result" -> className can't be a boolean
         className={`${view === "week" ? "rbc-active" : undefined} h-[2.1rem]`}
         onClick={() => onView("week")}
+        data-umami-event="week-view-button"
       >
         <i className="bi bi-calendar3-week"></i>
       </button>
@@ -106,6 +111,7 @@ const DesktopToolbar = ({ view, onView }) => {
         // don't use condition && "result" -> className can't be a boolean
         className={`${view === "month" ? "rbc-active" : undefined} h-[2.1rem]`}
         onClick={() => onView("month")}
+        data-umami-event="month-view-button"
       >
         <i className="bi bi-calendar3"></i>
       </button>

components/DarkModeToggler/DarkModeToggler.tsx

@@ -31,6 +31,8 @@ const DarkModeToggler = () => {
               : "system"
           )
         }
+        data-umami-event="appearance-select"
+        data-umami-event-mode={theme}
       >
         <option>Follow System</option>
         <option>Dark</option>

components/ExportButton/ExportButton.tsx

@@ -19,6 +19,8 @@ const ExportButton = ({ isHome, filters }: ExportButtonProps) => {
         onClick={() => setIsModalOpen(true)}
         title="Export"
         className="h-10 w-full rounded-xl p-2 font-medium leading-3 text-neutral-300 shadow-md ring-1 ring-neutral-200/50 transition-all duration-300 hover:text-neutral-900 hover:shadow-lg dark:bg-neutral-800/70 dark:text-neutral-500 dark:ring-neutral-400/20 dark:hover:text-neutral-200"
+        data-umami-event="export-button"
+        data-umami-event-type={isHome ? "events" : "shifts"}
       >
         Export <i className="bi bi-box-arrow-up"></i>
       </button>

components/Install/Install.tsx

@@ -29,6 +29,7 @@ const Install = ({ installPwaPrompt }: InstallProps) => {
       <button
         onClick={installPwa}
         className="mt-2 rounded-lg bg-cesium-100 p-2 font-medium text-cesium-900 shadow-sm transition-colors hover:bg-cesium-200 dark:bg-cesium-700/20 dark:hover:bg-cesium-700/30"
+        data-umami-event="install-button"
       >
         Install <i className="bi bi-download" />
       </button>

components/ShareButton/ShareButton.tsx

@@ -27,6 +27,8 @@ const ShareButton = ({
         className="h-10 w-10 rounded-xl p-2 font-medium leading-3 text-neutral-300 shadow-md ring-1 ring-neutral-200/50 transition-all duration-300 hover:text-neutral-900 hover:shadow-lg dark:bg-neutral-800/70 dark:text-neutral-500 dark:ring-neutral-400/20 dark:hover:text-neutral-200"
         title="Share"
         onClick={() => setIsModalOpen(true)}
+        data-umami-event="share-button"
+        data-umami-event-type={isHome ? "events" : "shifts"}
       >
         <i className="bi bi-share-fill"></i>
       </button>

components/ShareModal/ShareModal.tsx

@@ -249,6 +249,8 @@ const ShareModal = ({
                         type="submit"
                         className="relative -ml-px inline-flex w-[38px] place-content-center items-center gap-x-1.5 rounded-r-lg px-3 py-2 text-sm font-semibold ring-1 ring-inset ring-neutral-300 hover:bg-neutral-50 dark:ring-neutral-400/30 dark:hover:bg-neutral-400/10"
                         title="Import"
+                        data-umami-event="share-import-button"
+                        data-umami-event-type={isHome ? "events" : "shifts"}
                       >
                         {isImported ? (
                           <i className="bi bi-check-circle-fill text-cesium-900" />
@@ -264,6 +266,8 @@ const ShareModal = ({
                       className="relative ml-2 inline-flex items-center rounded-lg px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset ring-neutral-300 hover:bg-neutral-50 dark:ring-neutral-400/30 dark:hover:bg-neutral-400/10"
                       title="Copy your share code"
                       onClick={copyToClipboardHandle}
+                      data-umami-event="share-copy-button"
+                      data-umami-event-type={isHome ? "events" : "shifts"}
                     >
                       {isCopied ? (
                         <i className="bi bi-check-circle-fill text-cesium-900" />

components/Sidebar/Sidebar.tsx

@@ -101,6 +101,7 @@ const Sidebar = ({
               onClick={() => setIsSettings(!isSettings)}
               className="h-10 w-10 rounded-xl p-2 leading-3 text-neutral-300 shadow-md ring-1 ring-neutral-200/50 transition-all duration-300 hover:text-neutral-900 hover:shadow-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-500 dark:bg-neutral-800/70 dark:text-neutral-500 dark:ring-neutral-400/20 dark:hover:text-neutral-200"
               title="Settings"
+              data-umami-event="settings-button"
             >
               {isSettings ? (
                 <i className="bi bi-gear-fill text-neutral-900 dark:text-neutral-200"></i>

components/Themes/Themes.tsx

@@ -194,6 +194,8 @@ const Themes = ({
           className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10  ring-1 ring-inset ring-neutral-300 focus:ring-2 focus:ring-cesium-900 dark:bg-neutral-800 dark:ring-neutral-400/20"
           value={theme}
           onChange={(e) => updateTheme(e.target.value)}
+          data-umami-event="theme-select"
+          data-umami-event-theme={theme}
         >
           <option>Modern</option>
           <option>Classic</option>
@@ -213,6 +215,8 @@ const Themes = ({
               className="block w-full rounded-md border-0 py-1.5  ring-1 ring-inset ring-neutral-300 focus:ring-2 focus:ring-cesium-900 dark:bg-neutral-800 dark:ring-neutral-400/20"
               value={customType}
               onChange={(e) => updateCustomType(e.target.value)}
+              data-umami-event="customize-by-select"
+              data-umami-event-customize-by={customType}
             >
               <option>Year</option>
               <option>Subject</option>

pages/_document.tsx

@@ -1,4 +1,5 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import Script from "next/script";
 
 export default function Document() {
   return (
@@ -70,6 +71,12 @@ export default function Document() {
           media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
           rel="apple-touch-startup-image"
         />
+        <Script
+          defer
+          src={process.env.UMAMI_URL}
+          data-website-id={process.env.UMAMI_WEBSITE_ID}
+          strategy="afterInteractive"
+        />
       </Head>
       <body className="dark:bg-neutral-900">
         <Main />

pages/index.tsx

@@ -287,6 +287,7 @@ export default function Home({ filters }) {
             className="transition-colors hover:text-blue-500"
             onClick={() => handleData(true)}
             title="Sync event data (updates every hour)"
+            data-umami-event="sync-button"
           >
             <i className="bi bi-arrow-repeat" />
           </button>
@@ -297,6 +298,7 @@ export default function Home({ filters }) {
             target="_blank"
             rel="noopener noreferrer"
             className="cursor-pointer text-blue-500 hover:underline"
+            data-umami-event="event-missing-button"
           >
             add it
           </a>