refactor: update auth, formatting, etc

.eslintignore

@@ -6,6 +6,7 @@ node_modules/
 .pnp.js
 .cache/
 .next/
+.yarn/
 out/
 
 # testing

.prettierignore

@@ -4,6 +4,7 @@ node_modules/
 .pnp.js
 .cache/
 .next/
+.yarn/
 out/
 
 # Ignore testing files

package.json

@@ -7,8 +7,7 @@
     "dev": "next dev --turbo",
     "build": "next build && rm -rf ./.next/cache",
     "start": "next start",
-    "lint": "next lint",
-    "lint:check": "next lint --no-cache",
+    "lint": "next lint --no-cache",
     "lint:fix": "eslint --fix .",
     "format:check": "prettier --check .",
     "format:fix": "prettier --write .",
@@ -42,7 +41,7 @@
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "formik": "^2.4.5",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^11.2.0",
     "geist": "^1.2.0",
     "lucide-react": "^0.298.0",
     "next": "^14.2.3",

public/manifest.json

@@ -56,4 +56,4 @@
       "url": "https://play.google.com/store/apps/details?id=dot9.simbio"
     }
   ]
-}
+}

src/app/(dashboard)/test/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { memo } from "react";
+import Layout from "@/components/ui/Layout";
+
+const PageAbout: React.FC = () => {
+  return (
+    <Layout>
+      <div
+        className="mx-auto flex h-full w-1/3 flex-col flex-nowrap items-center justify-center p-5"
+        style={{
+          minHeight: "calc(100vh - 92px)",
+        }}
+      >
+        <h2 className="text-xl font-medium">Server Error</h2>
+
+        <p className="mt-2 text-center text-xs">
+          Something went wrong. Please try again later.
+        </p>
+
+        <p className="relative mt-6 text-xs">
+          <Link
+            className="font-medium hover:underline"
+            href="https://at-mah.vercel.app"
+          >
+            Retun to Dashboard
+          </Link>
+        </p>
+      </div>
+    </Layout>
+  );
+};
+
+export default memo(PageAbout);

src/app/auth/register/page.tsx

@@ -65,7 +65,7 @@ const PageAuthRegistered: FC = () => {
                 </Button>
                 <Button
                   onClick={() => handleRegister("microsoft")}
-                  className="w-full bg-blue-700 text-white"
+                  className="bg-blue-700 w-full text-white"
                 >
                   Register with Microsoft
                 </Button>

src/app/auth/error/page.tsx → src/app/error/page.tsx

@@ -1,18 +1,20 @@
+import "server-only";
 import Image from "next/image";
 import BG from "@/assets/images/bg.svg";
 import { FC } from "react";
 import LOGO from "@/assets/images/simbio-color.svg";
+import Link from "next/link";
 
 const PageAuthError: FC = ({
   searchParams,
 }: {
   searchParams?: { [key: string]: string | string[] | undefined };
 }) => {
   return (
-    <section className="relative block h-screen w-full">
+    <section className="relative block min-h-screen w-full">
       {/* Background image */}
       <div
-        className="absolute left-0 top-0 -z-1 h-screen w-full bg-cover bg-fixed bg-center bg-no-repeat"
+        className="absolute left-0 top-0 -z-1 min-h-screen w-full bg-cover bg-fixed bg-center bg-no-repeat"
         style={{
           backgroundImage: `url(${BG.src})`,
         }}
@@ -22,24 +24,27 @@ const PageAuthError: FC = ({
         {/* Login Card Start */}
         <div className="flex w-full max-w-[640px] flex-col gap-8 rounded-md bg-white px-11 pb-8 pt-11 shadow">
           <div>
-            {/* Logo */}
-            <Image
-              className="brandLogo"
-              src={LOGO}
-              alt="Simbio logo"
-              priority
-            />
+            <Link href="/">
+              {/* Logo */}
+              <Image
+                className="brandLogo"
+                src={LOGO}
+                alt="Simbio logo"
+                priority
+              />
+            </Link>
           </div>
 
           <div className="flex flex-col gap-7">
             <div>
               {/* Title */}
-              <h1 className="mb-4 mt-4 text-2xl font-semibold leading-7">
-                {searchParams?.error}
+              <h1 className="mb-3 text-xl font-semibold leading-7">
+                {searchParams?.error || "Server error"}
               </h1>
               {/* Error message */}
-              <p className="caption1 mb-2 font-semibold">
-                {searchParams?.error_description}
+              <p className="caption1 mb-2 font-medium">
+                {searchParams?.error_description ||
+                  "Something went wrong on the server. Please try again later."}
               </p>
               <p className="caption1 font-medium text-[#1b1b1b]">
                 {searchParams?.error_uri}

src/app/routes.ts

@@ -3,7 +3,7 @@
  * These routes do not require authentication
  * @type {string[]}
  */
-export const publicRoutes = ["/", "/auth/new-verification"];
+export const publicRoutes = ["/", "/error", "/auth/new-verification"];
 
 /**
  * An array of routes that are used for authentication

src/assets/data/donations.json

@@ -270,4 +270,4 @@
   "offset": 0,
   "total": 19,
   "limit": 19
-}
+}

src/components/blood-request/BloodRequestForm/index.tsx

@@ -46,8 +46,10 @@ interface TRequestForm {
 }
 
 const FORM: TFormBuilderForm = {
-  sectionClassName: "w-full grid max-md:grid-cols-1 grid-cols-2 gap-x-13 gap-y-3",
-  fieldClassName: "flex max-md:flex-col max-md:gap-1 flex-row items-start justify-between gap-4 w-full",
+  sectionClassName:
+    "w-full grid max-md:grid-cols-1 grid-cols-2 gap-x-13 gap-y-3",
+  fieldClassName:
+    "flex max-md:flex-col max-md:gap-1 flex-row items-start justify-between gap-4 w-full",
   labelClassName:
     "w-full max-w-[150px] min-w-[125px] text-[13px] leading-[32px] font-medium",
   inputClassName: "w-full",

src/components/blood-request/BloodRequestTable/TableMenu.tsx

@@ -1,6 +1,13 @@
 import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 import {
   MoreVertical16Regular,
@@ -24,7 +31,7 @@ const TableMenu: FC = () => {
         <DropdownMenuSeparator />
 
         <DropdownMenuItem>
-          <DropdownMenuCheckboxItem className="ps-0 py-0">
+          <DropdownMenuCheckboxItem className="py-0 ps-0">
             <BookQuestionMark24Regular className="h-5 w-5" />
           </DropdownMenuCheckboxItem>
 
@@ -33,9 +40,8 @@ const TableMenu: FC = () => {
           </Link>
         </DropdownMenuItem>
 
-        <DropdownMenuItem >
-
-          <DropdownMenuCheckboxItem className="ps-0 py-0">
+        <DropdownMenuItem>
+          <DropdownMenuCheckboxItem className="py-0 ps-0">
             <Bug24Regular className="h-5 w-5" />
           </DropdownMenuCheckboxItem>
           <Link href={"/issues/report"} target="_blank">

src/components/blood-request/BloodRequestTable/data.tsx

@@ -121,7 +121,11 @@ export const columns: ColumnDef<TRequestItem>[] = [
   },
 ];
 
-export const hiddenColumns = { "blood_group": false, "quantity": false, "blood_type": false };
+export const hiddenColumns = {
+  blood_group: false,
+  quantity: false,
+  blood_type: false,
+};
 
 // Filter: Telecom Operator
 export const gender = [

src/components/blood-request/BloodRequestTable/index.tsx

@@ -69,8 +69,13 @@ const BloodRequestTable: FC<BloodRequestTablePropsType> = ({
       </div>
 
       {/* Card Body */}
-      <div className="pb-4 overflow-x-auto">
-        <DataGrid columns={columns} data={data} filters={filters} hiddenColumns={hiddenColumns} />
+      <div className="overflow-x-auto pb-4">
+        <DataGrid
+          columns={columns}
+          data={data}
+          filters={filters}
+          hiddenColumns={hiddenColumns}
+        />
       </div>
     </section>
   );

src/components/bloodCenters/BloodCenterTable/index.tsx

@@ -49,7 +49,7 @@ const CentersTable: FC<TCentersTableProps> = ({
       </div>
 
       {/* Card Body */}
-      <div className="pb-4 overflow-x-auto">
+      <div className="overflow-x-auto pb-4">
         <DataGrid columns={columns} data={data} filters={filters} />
       </div>
     </section>

src/components/charts/ChartMatrix/index.tsx

@@ -11,7 +11,7 @@ const ChartMatrix: React.FC<TChartMatrixProps> = ({
 }: TChartMatrixProps) => {
   return (
     <section className="h-full w-full">
-      <div className="grid h-fit w-full xs:grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 p-[22px] 2xl:grid-cols-6">
+      <div className="xs:grid-cols-1 grid h-fit w-full gap-5 p-[22px] sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
         {children}
       </div>
     </section>

src/components/charts/ChartMemberActivity/index.tsx

@@ -25,8 +25,7 @@ import {
 } from "@fluentui/react-icons";
 import { FC, memo } from "react";
 
-
-import ReactECharts from 'echarts-for-react/lib/core'
+import ReactECharts from "echarts-for-react/lib/core";
 import {
   RadarChart,
   // BarChart,
@@ -50,7 +49,7 @@ import {
   // ThemeRiverChart,
   // PictorialBarChart,
   // CustomChart
-} from 'echarts/charts'
+} from "echarts/charts";
 import {
   // GridSimpleComponent,
   // GridComponent,
@@ -82,13 +81,13 @@ import {
   // AriaComponent,
   // TransformComponent,
   // DatasetComponent,
-} from 'echarts/components'
-import * as echarts from 'echarts/core'
+} from "echarts/components";
+import * as echarts from "echarts/core";
 import {
   // CanvasRenderer,
-  SVGRenderer
-} from 'echarts/renderers'
-import React from 'react'
+  SVGRenderer,
+} from "echarts/renderers";
+import React from "react";
 import { EChartsOption } from "echarts-for-react";
 
 // Register the required components
@@ -164,8 +163,6 @@ echarts.use([
   // CustomChart
 ]);
 
-
-
 const dataGZ = [
   [26, 37, 27, 1.163, 27, 13, 1],
   [85, 62, 71, 1.195, 60, 8, 2],

src/components/charts/ChartMemberAgeDemographic/index.tsx

@@ -20,22 +20,16 @@ import {
   DocumentTableArrowRight24Regular,
 } from "@fluentui/react-icons";
 import { memo } from "react";
-import ReactECharts from 'echarts-for-react/lib/core';
-import { PieChart } from 'echarts/charts';
-import * as echarts from 'echarts/core';
-import { SVGRenderer } from 'echarts/renderers';
-import React from 'react';
+import ReactECharts from "echarts-for-react/lib/core";
+import { PieChart } from "echarts/charts";
+import * as echarts from "echarts/core";
+import { SVGRenderer } from "echarts/renderers";
+import React from "react";
 import { EChartsOption } from "echarts-for-react";
 import { LegendComponent, TooltipComponent } from "echarts/components";
 
 // Register the required components
-echarts.use([
-  SVGRenderer,
-  PieChart,
-  TooltipComponent,
-  LegendComponent
-]);
-
+echarts.use([SVGRenderer, PieChart, TooltipComponent, LegendComponent]);
 
 const options: EChartsOption = {
   animation: false,

src/components/charts/ChartMemberStats/index.tsx

@@ -20,12 +20,16 @@ import {
   DocumentTableArrowRight24Regular,
 } from "@fluentui/react-icons";
 import { memo } from "react";
-import ReactECharts from 'echarts-for-react/lib/core';
-import { PieChart } from 'echarts/charts';
-import * as echarts from 'echarts/core';
-import { SVGRenderer } from 'echarts/renderers';
-import React from 'react';
-import { LegendComponent, ToolboxComponent, TooltipComponent } from "echarts/components";
+import ReactECharts from "echarts-for-react/lib/core";
+import { PieChart } from "echarts/charts";
+import * as echarts from "echarts/core";
+import { SVGRenderer } from "echarts/renderers";
+import React from "react";
+import {
+  LegendComponent,
+  ToolboxComponent,
+  TooltipComponent,
+} from "echarts/components";
 import { EChartsOption } from "echarts-for-react";
 
 // Register the required components
@@ -34,10 +38,9 @@ echarts.use([
   PieChart,
   ToolboxComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
 ]);
 
-
 const options: EChartsOption = {
   animation: false,
   foo: "bar",