fix: Form layout

apps/dashboard/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/utils/cx"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border border-stone-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-stone-950 focus:ring-offset-2 dark:border-stone-800 dark:focus:ring-stone-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-stone-900 text-stone-50 hover:bg-stone-900/80 dark:bg-stone-50 dark:text-stone-900 dark:hover:bg-stone-50/80",
+        secondary:
+          "border-transparent bg-stone-100 text-stone-900 hover:bg-stone-100/80 dark:bg-stone-800 dark:text-stone-50 dark:hover:bg-stone-800/80",
+        destructive:
+          "border-transparent bg-red-500 text-stone-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-stone-50 dark:hover:bg-red-900/80",
+        outline: "text-stone-950 dark:text-stone-50",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

apps/dashboard/src/forms/form_access.ts

@@ -18,8 +18,13 @@ export const FORM_ACCESS: Record<
         ir_signup: "shown_locked",
         ir_additional_info: "shown"
     },
-    after_initial_registration: {},
-    after_initial_registration_signed: {},
+    after_initial_registration: {
+        ir_signup: "shown_locked"
+    },
+    after_initial_registration_signed: {
+        ir_signup: "shown_locked",
+        ir_additional_info: "shown"
+    },
     before_complete_registration_ir_signed: {
         lunch_tickets: "shown",
         exhibitor_catalog: "shown",

apps/dashboard/src/forms/ir_signup/form.tsx

@@ -1,4 +1,5 @@
 import IrRegistrationPage from "@/forms/ir_signup/ir_registration.page"
+import { RegistrationStatus } from "@/store/company/company_slice"
 import { Form } from "../form_types"
 
 export const form: Form = {
@@ -13,11 +14,15 @@ export const form: Form = {
             fields: [],
             hasNextButton: false,
             isDone: ({ registration }) =>
-                [
-                    "initial_registration_signed",
-                    "complete_registration_ir_signed",
-                    "complete_registration_signed"
-                ].includes(registration.type)
+                (
+                    [
+                        "initial_registration_signed",
+                        "complete_registration_ir_signed",
+                        "complete_registration_signed",
+                        "after_initial_registration_signed",
+                        "complete_registration_ir_signed"
+                    ] as RegistrationStatus[]
+                ).includes(registration.type)
         }
     ]
 }

apps/dashboard/src/screens/dashboard/FormCard.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge"
 import { useProducts } from "@/shared/hooks/useProducts"
 import { useRegistration } from "@/shared/hooks/useRegistration"
 import { useNavigate } from "@tanstack/react-router"
@@ -51,13 +52,17 @@ export default function FormCard({
             key={form.key}
             className={cx(
                 "p-5 px-8 text-slate-700 transition-all hover:cursor-pointer active:scale-95",
-                locked && "opacity-50 hover:cursor-default active:scale-100"
+                {
+                    "opacity-50 hover:cursor-default active:scale-100": locked
+                }
             )}
         >
             <div className="mb-2 flex items-center justify-between gap-x-10">
                 <p className="text-lg">{form.name}</p>
                 {form.progression !== "none" &&
-                    (progress < 1 && !form.forceFormDone ? (
+                    (progress <= 0 && !form.forceFormDone ? (
+                        <Badge>Not Started</Badge>
+                    ) : progress < 1 && !form.forceFormDone ? (
                         <p className="text-yellow-400">
                             {(progress * 100).toFixed()}%
                         </p>

apps/dashboard/src/screens/dashboard/screen.tsx

@@ -13,23 +13,13 @@ import { BadgeInfo } from "lucide-react"
 import { useSelector } from "react-redux"
 import { isFormOpen, isFormVisible } from "../../forms/form_access"
 import { LogoutButton } from "../../shared/LogoutButton"
-import {
-    selectCompanyName,
-    selectCompanyStatus,
-    selectUser
-} from "../../store/company/company_selectors"
 import { selectForms } from "../../store/form/form_selectors"
 import { DashboardError } from "./DashboardError"
 import FormCard from "./FormCard"
 
 export function DashboardScreen() {
     const { data, isLoading, isError } = useRegistration()
     const forms = useSelector(selectForms)
-    const companyStatus = useSelector(selectCompanyStatus)
-    /*     const companyProgress = useSelector(selectCompanyProgress) */
-    //const selectError = useSelector(selectErrors)
-    const companyName = useSelector(selectCompanyName)
-    const user = useSelector(selectUser)
 
     /*     const colorClassName = {
         "text-red-400": companyProgress < 0.5,
@@ -47,7 +37,7 @@ export function DashboardScreen() {
     }
 
     const formCardsData = Object.entries(forms).filter(([, formMeta]) =>
-        isFormVisible(formMeta.key, companyStatus ?? null)
+        isFormVisible(formMeta.key, data.type ?? null)
     )
 
     return (
@@ -58,14 +48,14 @@ export function DashboardScreen() {
                     <div className="grid w-full grid-cols-[1fr_2fr_1fr]">
                         <div />
                         <h1 className="rounded p-2 px-8 text-center text-4xl text-emerald-400">
-                            {companyName}
+                            {data.company.name}
                         </h1>
                     </div>
-                    {user?.first_name != null && (
+                    {data.contact?.first_name != null && (
                         <Card className="max-w-[700px]">
                             <CardHeader>
                                 <CardTitle>
-                                    Welcome <b>{user.first_name}</b>!
+                                    Welcome <b>{data.contact.first_name}</b>!
                                 </CardTitle>
                                 <CardDescription>
                                     From this dashboard you will be able to
@@ -118,10 +108,7 @@ export function DashboardScreen() {
                                 key={key}
                                 form={formMeta}
                                 locked={
-                                    !isFormOpen(
-                                        formMeta.key,
-                                        companyStatus ?? null
-                                    )
+                                    !isFormOpen(formMeta.key, data.type ?? null)
                                 }
                             />
                         ))}

apps/dashboard/src/screens/form/screen.tsx

@@ -1,22 +1,22 @@
-import PrimarySection from "./PrimarySection"
-import { FormPageView } from "./FormPageView"
+import { useParams } from "@tanstack/react-router"
+import { useEffect } from "react"
 import { useDispatch, useSelector } from "react-redux"
+import { FORMS } from "../../forms"
+import { isFormOpen } from "../../forms/form_access"
+import { InfoScreen } from "../../shared/InfoScreen"
+import { Navbar } from "../../shared/Navbar"
+import { selectCompanyStatus } from "../../store/company/company_selectors"
 import {
     selectActivePage,
     selectActivePageIndex,
     selectForm
 } from "../../store/form/form_selectors"
-import { FormSidebarProgressionSummary } from "./sidebar/FormSidebarProgressionSummary"
-import { cx } from "../../utils/cx"
-import { Navbar } from "../../shared/Navbar"
-import { InfoScreen } from "../../shared/InfoScreen"
-import { useParams } from "@tanstack/react-router"
-import { FORMS } from "../../forms"
-import { useEffect } from "react"
 import { setActiveForm } from "../../store/form/form_slice"
-import { isFormOpen } from "../../forms/form_access"
-import { selectCompanyStatus } from "../../store/company/company_selectors"
 import { RootState } from "../../store/store"
+import { cx } from "../../utils/cx"
+import { FormPageView } from "./FormPageView"
+import PrimarySection from "./PrimarySection"
+import { FormSidebarProgressionSummary } from "./sidebar/FormSidebarProgressionSummary"
 
 export function FormScreen() {
     const dispatch = useDispatch()
@@ -73,8 +73,17 @@ export function FormScreen() {
     return (
         <div>
             <Navbar />
-            <div className={cx("grid min-h-[92vh] grid-cols-[1fr_3fr_1fr]")}>
-                <FormSidebarProgressionSummary />
+            <div
+                className={cx("grid min-h-[92vh] grid-cols-[1fr_3fr_1fr]", {
+                    "grid-cols-[0_1fr_0]": !SideBar && form.pages.length <= 1
+                })}
+            >
+                {form.pages.length > 1 ? (
+                    // Only show the progression summary if there are multiple pages
+                    <FormSidebarProgressionSummary />
+                ) : (
+                    <div className="" />
+                )}
                 <PrimarySection>
                     <FormPageView
                         form={form}

apps/dashboard/src/screens/form/sidebar/FormSidebarProgressionSummary.tsx

@@ -16,6 +16,7 @@ export function FormSidebarProgressionSummary() {
                     <PageCard
                         key={page.id}
                         selected={activePage?.id === page.id}
+                        form={form}
                         page={page}
                     />
                 ))}

apps/dashboard/src/screens/form/sidebar/PageCard.tsx

@@ -1,14 +1,14 @@
+import { FORMS } from "@/forms"
+import { useProducts } from "@/shared/hooks/useProducts"
+import { useRegistration } from "@/shared/hooks/useRegistration"
 import React from "react"
-import {
-    selectActivePage,
-    selectFormPageProgress
-} from "../../../store/form/form_selectors"
-import { setPage } from "../../../store/form/form_slice"
-import { AppDispatch, RootState } from "../../../store/store"
-import { cx } from "../../../utils/cx"
 import { useDispatch, useSelector } from "react-redux"
-import { remoteSaveChanges } from "../../../store/form/async_actions"
 import { FormPage } from "../../../forms/form_types"
+import { remoteSaveChanges } from "../../../store/form/async_actions"
+import { selectActivePage } from "../../../store/form/form_selectors"
+import { setPage } from "../../../store/form/form_slice"
+import { AppDispatch } from "../../../store/store"
+import { cx } from "../../../utils/cx"
 
 type Props = React.HTMLAttributes<HTMLDivElement>
 
@@ -26,16 +26,27 @@ export function Card({ children, className, ...rest }: Props) {
     )
 }
 
-export function PageCard({ page }: { selected: boolean; page: FormPage }) {
+export function PageCard({
+    page,
+    form
+}: {
+    selected: boolean
+    page: FormPage
+    form: (typeof FORMS)[keyof typeof FORMS]
+}) {
     const dispatch = useDispatch<AppDispatch>()
-    const calcProgress = useSelector((state: RootState) =>
-        selectFormPageProgress(state, page.id)
-    )
-    const customProgress = useSelector(page.getProgress ?? (() => null))
-    const progress = customProgress != null ? customProgress : calcProgress
     const activePage = useSelector(selectActivePage)
 
-    const completed = progress != null && progress >= 1
+    const { data: dataRegistration } = useRegistration()
+    const { data: dataProducts } = useProducts()
+
+    if (!dataRegistration || !dataProducts) return null
+
+    const completed = page.isDone?.({
+        form,
+        products: dataProducts,
+        registration: dataRegistration
+    })
 
     function clickPageCard() {
         dispatch(remoteSaveChanges())
@@ -47,20 +58,15 @@ export function PageCard({ page }: { selected: boolean; page: FormPage }) {
             onClick={clickPageCard}
             className={cx(
                 "flex-row items-center justify-between hover:cursor-pointer",
-                completed && page.id !== activePage?.id && "opacity-70"
+                completed && page.id !== activePage?.id && "opacity-50"
             )}
         >
             <div className="flex items-center gap-2">
                 {completed && (
                     <span className="pi pi-check-circle text-emerald-400"></span>
                 )}
-                <h3 className="text-emerald-800">{page.title}</h3>
+                <h3>{page.title}</h3>
             </div>
-            {progress != null && progress < 1 && progress > 0 && (
-                <p className="text-xs font-bold text-emerald-400">
-                    {(progress * 100).toFixed(0)}%
-                </p>
-            )}
         </Card>
     )
 }

apps/dashboard/src/shared/LogoutButton.tsx

@@ -1,8 +1,12 @@
-export const LogoutButton = () => {
-	return <a className="p-3 " href="/accounts/logout?next=/register">
-		<div className="my-5 flex items-center gap-x-2 text-center text-slate-700 hover:text-slate-500">
-			<p className="underline">Sign Out</p>
-			<span className="pi pi-sign-out" />
-		</div>
-	</a>
-}
+import { HOST } from "@/shared/vars"
+
+export function LogoutButton() {
+    return (
+        <a className="p-3 " href={`${HOST}/accounts/logout?next=/register`}>
+            <div className="my-5 flex items-center gap-x-2 text-center text-slate-700 hover:text-slate-500">
+                <p className="underline">Sign Out</p>
+                <span className="pi pi-sign-out" />
+            </div>
+        </a>
+    )
+}

apps/dashboard/src/shared/hooks/useRegistration.tsx

@@ -58,7 +58,6 @@ export interface Company {
 export async function queryRegistration() {
     const response = await fetch(`${HOST}/api/registration`)
     const result = (await response.json()) as RegistrationResponse
-    console.log("REGISTRATION", result)
     return result
 }