LumeWeb · pcfreak30 · Jul 23, 2024 · Jul 15, 2024
diff --git a/apps/lumeweb.com/pnpm-lock.yaml b/apps/lumeweb.com/pnpm-lock.yaml
diff --git a/apps/portal-dashboard/app/atoms/portalUrl.ts b/apps/portal-dashboard/app/atoms/portalUrl.ts
@@ -0,0 +1,4 @@
+import { env } from "~/env.js";
+import { atom } from "jotai";
+
+export const portalUrlAtom = atom(env.VITE_PORTAL_DOMAIN);
diff --git a/...l-dashboard/app/components/data-table.tsx → ...al-dashboard/app/components/DataTable.tsx b/...l-dashboard/app/components/data-table.tsx → ...al-dashboard/app/components/DataTable.tsx
@@ -1,10 +1,7 @@
 import { useMemo } from "react";
 import type { BaseRecord } from "@refinedev/core";
 import { useTable } from "@refinedev/react-table";
-import {
-  type ColumnDef,
-  flexRender,
-} from "@tanstack/react-table";
+import { type ColumnDef, flexRender } from "@tanstack/react-table";
 
 import {
   Table,
@@ -13,42 +10,54 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "./ui/table"
+} from "./ui/table";
 import { Skeleton } from "./ui/skeleton";
-import { DataTablePagination } from "./table-pagination"
+import { DataTablePagination } from "apps/portal-dashboard/app/components/TablePagination.js";
 
-interface DataTableProps<TData extends BaseRecord = BaseRecord, TValue = unknown> {
-  columns: ColumnDef<TData, TValue>[],
+interface DataTableProps<
+  TData extends BaseRecord = BaseRecord,
+  TValue = unknown,
+> {
+  columns: ColumnDef<TData, TValue>[];
   resource: string;
   dataProviderName?: string;
 }
 
 export function DataTable<TData extends BaseRecord, TValue>({
   columns,
   resource,
-  dataProviderName
+  dataProviderName,
 }: DataTableProps<TData, TValue>) {
   const table = useTable({
     columns,
     refineCoreProps: {
       resource,
-      dataProviderName: dataProviderName || "default"
-    }
-  })
+      dataProviderName: dataProviderName || "default",
+    },
+  });
 
-  const loadingRows = useMemo(() => Array(4).fill({}).map(() => ({
-    getIsSelected: () => false,
-    getVisibleCells: () => columns.map(() => ({
-      column: {
-        columnDef: {
-          cell: <Skeleton className="h-4 w-full bg-foreground/30" />,
-        }
-      },
-      getContext: () => null
-    })),
-  })), [])
+  const loadingRows = useMemo(
+    () =>
+      Array(4)
+        .fill({})
+        .map(() => ({
+          getIsSelected: () => false,
+          getVisibleCells: () =>
+            columns.map(() => ({
+              column: {
+                columnDef: {
+                  cell: <Skeleton className="h-4 w-full bg-foreground/30" />,
+                },
+              },
+              getContext: () => null,
+            })),
+        })),
+    [],
+  );
 
-  const rows = table.refineCore.tableQueryResult.isLoading ? loadingRows : table.getRowModel().rows
+  const rows = table.refineCore.tableQueryResult.isLoading
+    ? loadingRows
+    : table.getRowModel().rows;
 
   return (
     <>
@@ -58,15 +67,17 @@ export function DataTable<TData extends BaseRecord, TValue>({
             <TableRow key={headerGroup.id}>
               {headerGroup.headers.map((header, index) => {
                 return (
-                  <TableHead key={`FileDataTableHeader_${index}`} style={{ width: header.getSize() }}>
+                  <TableHead
+                    key={`FileDataTableHeader_${index}`}
+                    style={{ width: header.getSize() }}>
                     {header.isPlaceholder
                       ? null
                       : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
                   </TableHead>
-                )
+                );
               })}
             </TableRow>
           ))}
@@ -77,8 +88,7 @@ export function DataTable<TData extends BaseRecord, TValue>({
               <TableRow
                 key={`FileDataTableRow_${index}`}
                 data-state={row.getIsSelected() && "selected"}
-                className="group"
-              >
+                className="group">
                 {row.getVisibleCells().map((cell, index) => (
                   <TableCell key={`FileDataTableCell_${index}`}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -88,7 +98,9 @@ export function DataTable<TData extends BaseRecord, TValue>({
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center text-foreground">
+              <TableCell
+                colSpan={columns.length}
+                className="h-24 text-center text-foreground">
                 No results.
               </TableCell>
             </TableRow>
@@ -97,5 +109,5 @@ export function DataTable<TData extends BaseRecord, TValue>({
       </Table>
       <DataTablePagination table={table} />
     </>
-  )
+  );
 }
diff --git a/...al-dashboard/app/components/file-card.tsx → ...tal-dashboard/app/components/FileCard.tsx b/...al-dashboard/app/components/file-card.tsx → ...tal-dashboard/app/components/FileCard.tsx
diff --git a/...portal-dashboard/app/components/forms.tsx → ...portal-dashboard/app/components/Forms.tsx b/...portal-dashboard/app/components/forms.tsx → ...portal-dashboard/app/components/Forms.tsx
@@ -1,30 +1,34 @@
-import { Label } from "@radix-ui/react-label"
-import { Input } from "./ui/input"
-import { type FieldName, useInputControl } from "@conform-to/react"
-import { useId } from "react"
-import { cn } from "~/utils"
-import { Checkbox } from "~/components/ui/checkbox"
-import { Textarea } from "./ui/textarea"
+import { Label } from "@radix-ui/react-label";
+import { Input } from "./ui/input";
+import { type FieldName, useInputControl } from "@conform-to/react";
+import { useId } from "react";
+import { cn } from "~/util/cn.js";
+import { Checkbox } from "~/components/ui/checkbox";
+import { Textarea } from "./ui/textarea";
 
 export const Field = ({
   inputProps,
   labelProps,
   errors,
-  className
+  className,
 }: {
   inputProps: {
-    name: FieldName<string>
-  } & React.HTMLProps<HTMLInputElement>
-  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
-  errors?: ListOfErrors
-  className?: string
+    name: FieldName<string>;
+  } & React.HTMLProps<HTMLInputElement>;
+  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
+  errors?: ListOfErrors;
+  className?: string;
 }) => {
-  const fallbackId = useId()
-  const id = inputProps.id ?? fallbackId
-  const errorId = errors?.length ? `${id}-error` : undefined
+  const fallbackId = useId();
+  const id = inputProps.id ?? fallbackId;
+  const errorId = errors?.length ? `${id}-error` : undefined;
   return (
     <div className={className}>
-      <Label {...labelProps} htmlFor={id} className="font-semibold text-sm text-secondary-foreground" />
+      <Label
+        {...labelProps}
+        htmlFor={id}
+        className="font-semibold text-sm text-secondary-foreground"
+      />
       <Input
         {...inputProps}
         className="mt-4 bg-input border-border placeholder-input-placeholder"
@@ -36,57 +40,59 @@ export const Field = ({
         {errorId ? <ErrorList id={errorId} errors={errors} /> : null}
       </div>
     </div>
-  )
-}
+  );
+};
 
 export const FieldCheckbox = ({
   inputProps,
   labelProps,
   errors,
-  className
+  className,
 }: {
   inputProps: {
-    name: string
-    form: string
-    value?: string
-  } & React.ComponentPropsWithoutRef<typeof Checkbox>
-  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
-  errors?: ListOfErrors
-  className?: string
+    name: string;
+    form: string;
+    value?: string;
+  } & React.ComponentPropsWithoutRef<typeof Checkbox>;
+  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
+  errors?: ListOfErrors;
+  className?: string;
 }) => {
-  const { key, defaultChecked, ...checkboxProps } = inputProps
-  const checkedValue = inputProps.value ?? "on"
+  const { key, defaultChecked, ...checkboxProps } = inputProps;
+  const checkedValue = inputProps.value ?? "on";
   const input = useInputControl({
     key,
     name: inputProps.name,
     formId: inputProps.form,
-    initialValue: defaultChecked ? checkedValue : undefined
-  })
-  const fallbackId = useId()
-  const id = inputProps.id ?? fallbackId
-  const errorId = errors?.length ? `${id}-error` : undefined
+    initialValue: defaultChecked ? checkedValue : undefined,
+  });
+  const fallbackId = useId();
+  const id = inputProps.id ?? fallbackId;
+  const errorId = errors?.length ? `${id}-error` : undefined;
   return (
     <>
       <div
-        className={cn("space-x-2 flex items-center text-foreground", className)}
-      >
+        className={cn(
+          "space-x-2 flex items-center text-foreground",
+          className,
+        )}>
         <Checkbox
           {...checkboxProps}
           id={id}
           aria-invalid={errorId ? true : undefined}
           aria-describedby={errorId}
           checked={input.value === checkedValue}
           onCheckedChange={(state) => {
-            input.change(state.valueOf() ? checkedValue : "")
-            inputProps.onCheckedChange?.(state)
+            input.change(state.valueOf() ? checkedValue : "");
+            inputProps.onCheckedChange?.(state);
           }}
           onFocus={(event) => {
-            input.focus()
-            inputProps.onFocus?.(event)
+            input.focus();
+            inputProps.onFocus?.(event);
           }}
           onBlur={(event) => {
-            input.blur()
-            inputProps.onBlur?.(event)
+            input.blur();
+            inputProps.onBlur?.(event);
           }}
           type="button"
         />
@@ -96,23 +102,23 @@ export const FieldCheckbox = ({
         {errorId ? <ErrorList id={errorId} errors={errors} /> : null}
       </div>
     </>
-  )
-}
+  );
+};
 
 export function TextareaField({
   labelProps,
   textareaProps,
   errors,
   className,
 }: {
-  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
-  textareaProps: React.TextareaHTMLAttributes<HTMLTextAreaElement>
-  errors?: ListOfErrors
-  className?: string
+  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
+  textareaProps: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+  errors?: ListOfErrors;
+  className?: string;
 }) {
-  const fallbackId = useId()
-  const id = textareaProps.id ?? textareaProps.name ?? fallbackId
-  const errorId = errors?.length ? `${id}-error` : undefined
+  const fallbackId = useId();
+  const id = textareaProps.id ?? textareaProps.name ?? fallbackId;
+  const errorId = errors?.length ? `${id}-error` : undefined;
   return (
     <div className={className}>
       <Label htmlFor={id} {...labelProps} />
@@ -126,19 +132,19 @@ export function TextareaField({
         {errorId ? <ErrorList id={errorId} errors={errors} /> : null}
       </div>
     </div>
-  )
+  );
 }
 
-export type ListOfErrors = Array<string | null | undefined> | null | undefined
+export type ListOfErrors = Array<string | null | undefined> | null | undefined;
 export function ErrorList({
   id,
-  errors
+  errors,
 }: {
-  errors?: ListOfErrors
-  id?: string
+  errors?: ListOfErrors;
+  id?: string;
 }) {
-  const errorsToRender = errors?.filter(Boolean)
-  if (!errorsToRender?.length) return null
+  const errorsToRender = errors?.filter(Boolean);
+  if (!errorsToRender?.length) return null;
   return (
     <ul id={id} className="flex flex-col gap-1">
       {errorsToRender.map((e) => (
@@ -147,5 +153,5 @@ export function ErrorList({
         </li>
       ))}
     </ul>
-  )
+  );
 }
diff --git a/...pp/components/inline-auth-link-banner.tsx → ...d/app/components/InlineAuthLinkBanner.tsx b/...pp/components/inline-auth-link-banner.tsx → ...d/app/components/InlineAuthLinkBanner.tsx
diff --git a/...al-dashboard/app/components/lume-logo.tsx → ...tal-dashboard/app/components/LumeLogo.tsx b/...al-dashboard/app/components/lume-logo.tsx → ...tal-dashboard/app/components/LumeLogo.tsx
diff --git a/...hboard/app/components/management-card.tsx → ...shboard/app/components/ManagementCard.tsx b/...hboard/app/components/management-card.tsx → ...shboard/app/components/ManagementCard.tsx
@@ -1,4 +1,4 @@
-import { cn } from "~/utils";
+import { cn } from "~/util/cn.js";
 import { EditIcon, FingerPrintIcon } from "./icons";
 import { Avatar } from "./ui/avatar";
 import { Button } from "./ui/button";
@@ -36,10 +36,9 @@ const ManagementCardTitle = ({
   icon: Icon = FingerPrintIcon,
   className,
 }: React.PropsWithChildren<{
-  className?: string
+  className?: string;
   icon?: React.ComponentType<{ className?: string }>;
 }>) => {
-
   return (
     <div className={cn("flex items-center gap-x-2 font-semibold", className)}>
       <Icon className="text-foreground" />

diff --git a/apps/portal-dashboard/app/components/NavigationButton.tsx b/apps/portal-dashboard/app/components/NavigationButton.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Button } from "./ui/button";
+import { cn } from "~/util/cn.js";
+
+const NavigationButton = ({
+  children,
+  active,
+}: React.PropsWithChildren<{ active?: boolean }>) => {
+  return (
+    <Button
+      variant="ghost"
+      className={cn(
+        "justify-start h-14 w-full text-foreground/70 hover:bg-secondary/80",
+        active &&
+          "border border-border/30 font-semibold  text-foreground hover:bg-transparent",
+      )}>
+      {children}
+    </Button>
+  );
+};
+
+export default NavigationButton;