added auth getting started box

app/src/ui/routes/auth/auth.index.tsx

@@ -1,10 +1,13 @@
+import clsx from "clsx";
+import { TbArrowRight, TbCircle, TbCircleCheckFilled, TbFingerprint } from "react-icons/tb";
 import { useApiQuery } from "ui/client";
 import { useBknd } from "ui/client/bknd";
 import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
 import { ButtonLink, type ButtonLinkProps } from "ui/components/buttons/Button";
+import { IconButton } from "ui/components/buttons/IconButton";
 import { Alert } from "ui/components/display/Alert";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
-import { routes } from "ui/lib/routes";
+import { routes, useNavigate } from "ui/lib/routes";
 
 export function AuthIndex() {
    const { app } = useBknd();
@@ -32,8 +35,22 @@ export function AuthIndex() {
                title="Auth not enabled"
                message="To use authentication features, please enable it in the settings."
             />
-            <div className="flex flex-col flex-grow p-3 gap-3">
+            <div className="flex flex-col md:flex-row flex-1 p-3 gap-3">
-               <div className="grid xs:grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5">
+               <div className="flex flex-col border border-primary/20 self-stretch md:self-start">
+                  <div className="flex flex-row gap-3 py-3 px-4 border-b border-b-muted font-medium bg-muted items-center justify-between">
+                     Getting started
+                     <TbFingerprint className="size-5" />
+                  </div>
+                  <Item title="Enable authentication" done={enabled} to={routes.auth.settings()} />
+                  <Item title="Create Roles" done={rolesTotal > 0} to={rolesLink} />
+                  <Item title="Create an user" done={usersTotal > 0} to={usersLink} />
+                  <Item
+                     title="Enable a second strategy"
+                     done={strategiesTotal > 1}
+                     to={strategiesLink}
+                  />
+               </div>
+               <div className="grid xs:grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5 flex-grow">
                   <KpiCard
                      title="Users registered"
                      value={!enabled ? 0 : usersTotal}
@@ -75,7 +92,7 @@ type KpiCardProps = {
 };
 
 const KpiCard: React.FC<KpiCardProps> = ({ title, value, actions }) => (
-   <div className="flex flex-col border border-muted">
+   <div className="flex flex-col border border-muted h-auto self-start">
       <div className="flex flex-col gap-2 px-5 pt-3.5 pb-4 border-b border-b-muted">
          <div>
             <span className="opacity-50">{title}</span>
@@ -92,3 +109,25 @@ const KpiCard: React.FC<KpiCardProps> = ({ title, value, actions }) => (
       </div>
    </div>
 );
+
+const Item = ({ title, done = false, to }: { title: string; done?: boolean; to?: string }) => {
+   const [navigate] = useNavigate();
+   return (
+      <div className="flex border-b border-b-muted">
+         <div className={clsx("flex flex-1 flex-row gap-3 py-3 px-4", done && "opacity-50")}>
+            <div className="flex flex-row flex-1 gap-3 items-center">
+               {done ? <TbCircleCheckFilled className="size-5" /> : <TbCircle className="size-5" />}
+               <p
+                  className={clsx(
+                     "font-medium text-primary/80 leading-none",
+                     done ? "line-through" : ""
+                  )}
+               >
+                  {title}
+               </p>
+            </div>
+            {to && <IconButton Icon={TbArrowRight} onClick={() => navigate(to)} />}
+         </div>
+      </div>
+   );
+};