Merge branch 'develop' of git.lumeweb.com:LumeWeb/portal-dashboard into develop

app/components/icons.tsx

@@ -458,23 +458,17 @@ export const MoreIcon = ({ className }: { className?: string }) => {
 export const FingerPrintIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="23"
       height="23"
       viewBox="0 0 23 23"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}>
-      <g clipPath="url(#clip0_343_2984)">
         <path
           d="M11.1728 0.931152C13.3952 0.931152 15.5267 1.81402 17.0982 3.38554C18.6697 4.95706 19.5526 7.0885 19.5526 9.31096V13.0353C19.5535 14.3774 19.2318 15.7001 18.6144 16.8918C17.997 18.0835 17.1021 19.1092 16.0051 19.8826C16.4465 18.4654 16.7035 16.9673 16.7519 15.4161L16.7593 14.8975V13.0344H14.8971V14.8975L14.8944 15.1908C14.8574 17.2213 14.4039 19.2225 13.562 21.0706C12.4834 21.3893 11.3519 21.4887 10.2342 21.363C11.3872 19.5425 12.0306 17.4461 12.0974 15.2923L12.1039 14.8975V8.37987H10.2417V14.8975L10.238 15.1657C10.1874 17.2324 9.5097 19.235 8.29479 20.9077C7.40642 20.5826 6.57967 20.1091 5.84975 19.5073C6.82259 18.2772 7.38005 16.77 7.44191 15.2029L7.44843 14.8975V9.31096L7.45308 9.12474C7.47869 8.5973 7.61679 8.08142 7.85811 7.61172L7.96425 7.41899L6.61883 6.07356C5.99989 6.94167 5.64371 7.96949 5.59277 9.03443L5.58625 9.31096V14.8975L5.58252 15.107C5.54313 16.2036 5.17995 17.264 4.53877 18.1545C3.40438 16.6894 2.79013 14.8882 2.79298 13.0353V9.31096C2.79298 7.0885 3.67585 4.95706 5.24737 3.38554C6.81889 1.81402 8.95032 0.931152 11.1728 0.931152ZM11.1728 3.72442C10.0592 3.72442 9.02197 4.0503 8.15047 4.61175L7.93632 4.757L9.28081 6.10243C9.7871 5.80291 10.3575 5.62832 10.9447 5.59312L11.1728 5.5866L11.359 5.59126C12.2803 5.63731 13.1517 6.02362 13.8045 6.67537C14.4573 7.32712 14.845 8.19794 14.8925 9.11916L14.8971 9.31096V11.1731H16.7593V9.31096C16.7593 7.82932 16.1707 6.40836 15.1231 5.36068C14.0754 4.313 12.6544 3.72442 11.1728 3.72442Z"
           fill="currentColor"
         />
-      </g>
-      <defs>
-        <clipPath id="clip0_343_2984">
-          <rect width="22.3461" height="22.3461" fill="currentColor" />
-        </clipPath>
-      </defs>
     </svg>
   );
 };
@@ -482,28 +476,17 @@ export const FingerPrintIcon = ({ className }: { className?: string }) => {
 export const EditIcon = ({ className }: { className?: string }) => {
   return (
     <svg
-      width="16"
+      aria-hidden="true"
-      height="16"
+      width="13"
-      viewBox="0 0 16 16"
+      height="13"
+      viewBox="0 0 13 13"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}>
-      <g clipPath="url(#clip0_355_3166)">
       <path
         d="M7.72289 2.8954L9.96834 5.14086L3.06357 12.0456H0.818115V9.80018L7.72289 2.8954ZM8.5088 2.1095L9.79993 0.818359L12.0454 3.06381L10.7543 4.35495L8.5088 2.1095Z"
         fill="currentColor"
       />
-      </g>
-      <defs>
-        <clipPath id="clip0_355_3166">
-          <rect
-            width="16"
-            height="16"
-            fill="currentColor"
-            transform="translate(0.818115 0.818359)"
-          />
-        </clipPath>
-      </defs>
     </svg>
   );
 };
@@ -511,6 +494,7 @@ export const EditIcon = ({ className }: { className?: string }) => {
 export const ThemeIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="20"
       height="20"
       viewBox="0 0 20 20"
@@ -528,13 +512,13 @@ export const ThemeIcon = ({ className }: { className?: string }) => {
 export const ChevronDownIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="13"
       height="7"
       viewBox="0 0 13 7"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
+      className={className}>
-    >
       <path
         d="M3.00406 0.571289C2.11315 0.571289 1.66699 1.64843 2.29695 2.2784L5.59966 5.5811C5.99018 5.97163 6.62335 5.97163 7.01387 5.58111L10.3166 2.2784C10.9465 1.64843 10.5004 0.571289 9.60948 0.571289H3.00406Z"
         fill="currentColor"
@@ -546,13 +530,13 @@ export const ChevronDownIcon = ({ className }: { className?: string }) => {
 export const FolderIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="28"
       height="22"
       viewBox="0 0 28 22"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
+      className={className}>
-    >
       <path
         d="M11 0H2.75C1.2375 0 0 1.2375 0 2.75V19.25C0 20.7625 1.2375 22 2.75 22H24.75C26.2625 22 27.5 20.7625 27.5 19.25V5.5C27.5 3.9875 26.2625 2.75 24.75 2.75H13.75L11 0Z"
         fill="currentColor"
@@ -564,14 +548,13 @@ export const FolderIcon = ({ className }: { className?: string }) => {
 export const RecentIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="12"
       height="12"
       viewBox="0 0 12 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
+      className={className}>
-    >
-      <g clipPath="url(#clip0_323_1182)">
       <path
         d="M6 0C4.81331 0 3.65328 0.351894 2.66658 1.01118C1.67989 1.67047 0.910851 2.60754 0.456726 3.7039C0.00259972 4.80026 -0.11622 6.00666 0.115291 7.17054C0.346802 8.33443 0.918247 9.40353 1.75736 10.2426C2.59648 11.0818 3.66558 11.6532 4.82946 11.8847C5.99335 12.1162 7.19975 11.9974 8.2961 11.5433C9.39246 11.0892 10.3295 10.3201 10.9888 9.33342C11.6481 8.34673 12 7.18669 12 6C11.9983 4.40923 11.3656 2.88411 10.2407 1.75926C9.1159 0.634414 7.59077 0.00172054 6 0ZM6 11C5.0111 11 4.0444 10.7068 3.22215 10.1573C2.39991 9.60794 1.75904 8.82705 1.38061 7.91342C1.00217 6.99979 0.90315 5.99445 1.09608 5.02455C1.289 4.05464 1.76521 3.16373 2.46447 2.46447C3.16373 1.7652 4.05465 1.289 5.02455 1.09607C5.99446 0.903148 6.99979 1.00216 7.91342 1.3806C8.82705 1.75904 9.60794 2.3999 10.1574 3.22215C10.7068 4.04439 11 5.01109 11 6C10.9985 7.32564 10.4713 8.59656 9.53393 9.53393C8.59656 10.4713 7.32564 10.9985 6 11Z"
         fill="currentColor"
@@ -580,12 +563,6 @@ export const RecentIcon = ({ className }: { className?: string }) => {
         d="M6.5 5.793V3C6.5 2.86739 6.44732 2.74021 6.35355 2.64645C6.25979 2.55268 6.13261 2.5 6 2.5C5.86739 2.5 5.74021 2.55268 5.64645 2.64645C5.55268 2.74021 5.5 2.86739 5.5 3V6C5.50003 6.1326 5.55273 6.25975 5.6465 6.3535L7.1465 7.8535C7.2408 7.94458 7.3671 7.99498 7.4982 7.99384C7.6293 7.9927 7.75471 7.94011 7.84741 7.84741C7.94011 7.75471 7.9927 7.6293 7.99384 7.4982C7.99498 7.3671 7.94458 7.2408 7.8535 7.1465L6.5 5.793Z"
         fill="currentColor"
       />
-      </g>
-      <defs>
-        <clipPath id="clip0_323_1182">
-          <rect width="12" height="12" fill="currentColor" />
-        </clipPath>
-      </defs>
     </svg>
   );
 };

app/components/management-card.tsx

@@ -10,7 +10,7 @@ const ManagementCardAvatar = ({ src }: { src?: string }) => {
         <Avatar className="border-2 border-ring h-28 w-28" />
         <Button
           variant="outline"
-          className="h-10 w-10 rounded-full hover:bg-secondary-2 border-white absolute bottom-0 right-0 z-50">
+          className="absolute bottom-0 right-0 z-50 flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
           <EditIcon />
         </Button>
       </div>
@@ -23,7 +23,7 @@ const ManagementCardTitle = ({
   className,
 }: React.PropsWithChildren<{ className?: string }>) => {
   return (
-    <div className={cn("flex gap-x-2 items-center font-semibold", className)}>
+    <div className={cn("flex items-center gap-x-2 font-semibold", className)}>
       <FingerPrintIcon className="text-ring" />
       {children}
     </div>
@@ -35,7 +35,7 @@ const ManagementCardContent = ({
   className,
 }: React.PropsWithChildren<{ className?: string }>) => {
   return (
-    <div className={cn("text-primary-2 mt-4 mb-8 block text-sm", className)}>
+    <div className={cn("mt-4 mb-8 text-sm text-primary-2", className)}>
       {children}
     </div>
   );

app/components/ui/dialog.tsx

@@ -43,7 +43,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <Cross2Icon className="h-4 w-4" />
+        <Cross2Icon className="w-4 h-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

app/data/file-provider.ts

@@ -0,0 +1,15 @@
+import type { BaseRecord, CreateManyParams, CreateManyResponse, CreateParams, CreateResponse, CustomParams, CustomResponse, DataProvider, DeleteManyParams, DeleteManyResponse, DeleteOneParams, DeleteOneResponse, GetListParams, GetListResponse, GetManyParams, GetManyResponse, GetOneParams, GetOneResponse, UpdateManyParams, UpdateManyResponse, UpdateParams, UpdateResponse } from "@refinedev/core";
+
+export class PortalFilesProvider implements DataProvider {
+    getList: <TData extends BaseRecord = BaseRecord>(params: GetListParams) => Promise<GetListResponse<TData>>;
+    getMany?: (<TData extends BaseRecord = BaseRecord>(params: GetManyParams) => Promise<GetManyResponse<TData>>) | undefined;
+    getOne: <TData extends BaseRecord = BaseRecord>(params: GetOneParams) => Promise<GetOneResponse<TData>>;
+    create: <TData extends BaseRecord = BaseRecord, TVariables = {}>(params: CreateParams<TVariables>) => Promise<CreateResponse<TData>>;
+    createMany?: (<TData extends BaseRecord = BaseRecord, TVariables = {}>(params: CreateManyParams<TVariables>) => Promise<CreateManyResponse<TData>>) | undefined;
+    update: <TData extends BaseRecord = BaseRecord, TVariables = {}>(params: UpdateParams<TVariables>) => Promise<UpdateResponse<TData>>;
+    updateMany?: (<TData extends BaseRecord = BaseRecord, TVariables = {}>(params: UpdateManyParams<TVariables>) => Promise<UpdateManyResponse<TData>>) | undefined;
+    deleteOne: <TData extends BaseRecord = BaseRecord, TVariables = {}>(params: DeleteOneParams<TVariables>) => Promise<DeleteOneResponse<TData>>;
+    deleteMany?: (<TData extends BaseRecord = BaseRecord, TVariables = {}>(params: DeleteManyParams<TVariables>) => Promise<DeleteManyResponse<TData>>) | undefined;
+    getApiUrl: () => string;
+    custom?: (<TData extends BaseRecord = BaseRecord, TQuery = unknown, TPayload = unknown>(params: CustomParams<TQuery, TPayload>) => Promise<CustomResponse<...>>) | undefined;
+}

app/routes/account.tsx

@@ -150,20 +150,20 @@ export default function MyAccount() {
       </div>
       {/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */}
       <ChangeEmailForm
-        open={openModal["changeEmail"]}
+        open={openModal.changeEmail}
         setOpen={(value: boolean) =>
           setModal({ ...openModal, changeEmail: value })
         }
         currentValue="bsimpson@springfield.oh.gov.com"
       />
       <ChangePasswordForm
-        open={openModal["changePassword"]}
+        open={openModal.changePassword}
         setOpen={(value: boolean) =>
           setModal({ ...openModal, changePassword: value })
         }
       />
       <SetupTwoFactorDialog
-        open={openModal["setupTwoFactor"]}
+        open={openModal.setupTwoFactor}
         setOpen={(value: boolean) =>
           setModal({ ...openModal, setupTwoFactor: value })
         }

app/routes/login.tsx

@@ -1,45 +1,50 @@
-import type {MetaFunction} from "@remix-run/node"
+import type { MetaFunction } from "@remix-run/node";
-import {Link, useLocation} from "@remix-run/react"
+import { Link, useLocation } from "@remix-run/react";
-import {z} from "zod"
+import { z } from "zod";
-import {Button} from "~/components/ui/button"
+import { Button } from "~/components/ui/button";
-import logoPng from "~/images/lume-logo.png?url"
+import logoPng from "~/images/lume-logo.png?url";
-import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
+import lumeColorLogoPng from "~/images/lume-color-logo.png?url";
-import discordLogoPng from "~/images/discord-logo.png?url"
+import discordLogoPng from "~/images/discord-logo.png?url";
-import lumeBgPng from "~/images/lume-bg-image.png?url"
+import lumeBgPng from "~/images/lume-bg-image.png?url";
-import {Field, FieldCheckbox} from "~/components/forms"
+import { Field, FieldCheckbox } from "~/components/forms";
-import {getFormProps, useForm} from "@conform-to/react"
+import { getFormProps, useForm } from "@conform-to/react";
-import {getZodConstraint, parseWithZod} from "@conform-to/zod"
+import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import {useGo, useIsAuthenticated, useLogin, useParsed} from "@refinedev/core";
+import {
-import {AuthFormRequest} from "~/data/auth-provider.js";
+  useGo,
-import {useEffect} from "react";
+  useIsAuthenticated,
+  useLogin,
+  useParsed,
+} from "@refinedev/core";
+import type { AuthFormRequest } from "~/data/auth-provider";
+import { useEffect } from "react";
 
 export const meta: MetaFunction = () => {
   return [
-        {title: "Login"},
+    { title: "Login" },
-        {name: "description", content: "Welcome to Lume!"}
+    { name: "description", content: "Welcome to Lume!" },
-    ]
+  ];
-}
+};
 
 type LoginParams = {
   to: string;
-}
+};
 
 export default function Login() {
-    const location = useLocation()
+  const location = useLocation();
-    const {isLoading: isAuthLoading, data: authData} = useIsAuthenticated();
+  const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated();
-    const hash = location.hash
+  const hash = location.hash;
   const go = useGo();
-    const parsed = useParsed<LoginParams>()
+  const parsed = useParsed<LoginParams>();
 
   useEffect(() => {
     if (!isAuthLoading) {
       if (authData?.authenticated) {
         let to = "/dashboard";
-                if(parsed.params?.to){
+        if (parsed.params?.to) {
-                    to = parsed.params.to
+          to = parsed.params.to;
         }
 
-                go({to, type: "push"});
+        go({ to, type: "push" });
       }
     }
   }, [isAuthLoading, authData]);
@@ -47,7 +52,7 @@ export default function Login() {
   return (
     <div className="p-10 h-screen relative">
       <header>
-                <img src={logoPng} alt="Lume logo" className="h-10"/>
+        <img src={logoPng} alt="Lume logo" className="h-10" />
       </header>
       <div className="fixed inset-0 -z-10 overflow-clip">
         <img
@@ -57,8 +62,8 @@ export default function Login() {
         />
       </div>
 
-            {hash === "" && <LoginForm/>}
+      {hash === "" && <LoginForm />}
-            {hash === "#otp" && <OtpForm/>}
+      {hash === "#otp" && <OtpForm />}
 
       <footer className="my-5">
         <ul className="flex flex-row">
@@ -66,9 +71,8 @@ export default function Login() {
             <Link to="https://discord.lumeweb.com">
               <Button
                 variant={"link"}
-                                className="flex flex-row gap-x-2 text-input-placeholder"
+                className="flex flex-row gap-x-2 text-input-placeholder">
-                            >
+                <img className="h-5" src={discordLogoPng} alt="Discord Logo" />
-                                <img className="h-5" src={discordLogoPng} alt="Discord Logo"/>
                 Connect with us
               </Button>
             </Link>
@@ -77,9 +81,8 @@ export default function Login() {
             <Link to="https://lumeweb.com">
               <Button
                 variant={"link"}
-                                className="flex flex-row gap-x-2 text-input-placeholder"
+                className="flex flex-row gap-x-2 text-input-placeholder">
-                            >
+                <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
-                                <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo"/>
                 Connect with us
               </Button>
             </Link>
@@ -87,23 +90,23 @@ export default function Login() {
         </ul>
       </footer>
     </div>
-    )
+  );
 }
 
 const LoginSchema = z.object({
   email: z.string().email(),
   password: z.string(),
-    rememberMe: z.boolean()
+  rememberMe: z.boolean(),
-})
+});
 
 const LoginForm = () => {
-    const login = useLogin<AuthFormRequest>()
+  const login = useLogin<AuthFormRequest>();
-    const parsed = useParsed<LoginParams>()
+  const parsed = useParsed<LoginParams>();
   const [form, fields] = useForm({
     id: "login",
     constraint: getZodConstraint(LoginSchema),
-        onValidate({formData}) {
+    onValidate({ formData }) {
-            return parseWithZod(formData, {schema: LoginSchema})
+      return parseWithZod(formData, { schema: LoginSchema });
     },
     shouldValidate: "onSubmit",
     onSubmit(e) {
@@ -114,30 +117,29 @@ const LoginForm = () => {
         email: data.email.toString(),
         password: data.password.toString(),
         rememberMe: data.rememberMe.toString() === "on",
-                redirectTo: parsed.params?.to
+        redirectTo: parsed.params?.to,
+      });
+    },
   });
-        }
-    })
 
   return (
     <form
       className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
-            {...getFormProps(form)}
+      {...getFormProps(form)}>
-        >
       <h2 className="text-3xl font-bold !mb-12">Welcome back! 🎉</h2>
       <Field
-                inputProps={{name: fields.email.name}}
+        inputProps={{ name: fields.email.name }}
-                labelProps={{children: "Email"}}
+        labelProps={{ children: "Email" }}
         errors={fields.email.errors}
       />
       <Field
-                inputProps={{name: fields.password.name, type: "password"}}
+        inputProps={{ name: fields.password.name, type: "password" }}
-                labelProps={{children: "Password"}}
+        labelProps={{ children: "Password" }}
         errors={fields.password.errors}
       />
       <FieldCheckbox
-                inputProps={{name: fields.rememberMe.name, form: form.id}}
+        inputProps={{ name: fields.rememberMe.name, form: form.id }}
-                labelProps={{children: "Remember Me"}}
+        labelProps={{ children: "Remember Me" }}
         errors={fields.rememberMe.errors}
       />
       <Button className="w-full h-14">Login</Button>
@@ -145,8 +147,7 @@ const LoginForm = () => {
         Forgot your password?{" "}
         <Link
           to="/reset-password"
-                    className="text-primary-1 text-md hover:underline hover:underline-offset-4"
+          className="text-primary-1 text-md hover:underline hover:underline-offset-4">
-                >
           Reset Password
         </Link>
       </p>
@@ -156,35 +157,34 @@ const LoginForm = () => {
         </Button>
       </Link>
     </form>
-    )
+  );
-}
+};
 
 const OtpSchema = z.object({
-    otp: z.string().length(6, {message: "OTP must be 6 characters"})
+  otp: z.string().length(6, { message: "OTP must be 6 characters" }),
-})
+});
 
 const OtpForm = () => {
   // TODO: Add support for resending the OTP
   const [form, fields] = useForm({
     id: "otp",
     constraint: getZodConstraint(OtpSchema),
-        onValidate({formData}) {
+    onValidate({ formData }) {
-            return parseWithZod(formData, {schema: OtpSchema})
+      return parseWithZod(formData, { schema: OtpSchema });
     },
-        shouldValidate: "onSubmit"
+    shouldValidate: "onSubmit",
-    })
+  });
-    const valid = false // TODO: some sort of logic to verify user is on OTP state validly
+  const valid = false; // TODO: some sort of logic to verify user is on OTP state validly
 
   if (!valid) {
-        location.hash = ""
+    location.hash = "";
-        return null
+    return null;
   }
 
   return (
     <form
       className="w-full p-2 max-w-md mt-12 bg-background"
-            {...getFormProps(form)}
+      {...getFormProps(form)}>
-        >
       <span className="block !mb-8 space-y-2">
         <h2 className="text-3xl font-bold">Check your inbox</h2>
         <p className="text-input-placeholder">
@@ -197,19 +197,18 @@ const OtpForm = () => {
         </p>
       </span>
       <Field
-                inputProps={{name: fields.otp.name}}
+        inputProps={{ name: fields.otp.name }}
-                labelProps={{children: "Confirmation Code"}}
+        labelProps={{ children: "Confirmation Code" }}
         errors={fields.otp.errors}
       />
       <Button className="w-full h-14">Verify</Button>
       <p className="text-input-placeholder w-full text-left">
         <Link
           to="/login"
-                    className="text-primary-1 text-md hover:underline hover:underline-offset-4"
+          className="text-primary-1 text-md hover:underline hover:underline-offset-4">
-                >
           ← Back to Login
         </Link>
       </p>
     </form>
-    )
+  );
-}
+};