Merge branch 'dev' into bookings-bugs-fixes

.env.example

@@ -13,6 +13,7 @@ SUPABASE_ANON_PUBLIC="{ANON_PUBLIC}"
 SUPABASE_SERVICE_ROLE="{SERVICE_ROLE}"
 SUPABASE_URL="https://{YOUR_INSTANCE_NAME}.supabase.co"
 SERVER_URL="http://localhost:3000"
+APP_NAME="Shelf"
 
 
 # Set this to false to disable requirement of subscription for premium features. This will make premium features available for all users
@@ -36,6 +37,6 @@ INVITE_TOKEN_SECRET="secret-test-invite"
 GEOCODE_API_KEY="geocode-api-key"
 
 # Used for Sentry error logging
-SENTRY_DSN="sentry-dsn"
 SENTRY_ORG="sentry-org"
-SENTRY_PROJECT="sentry-project"
+SENTRY_PROJECT="sentry-project"
+SENTRY_DSN="sentry-dsn"

app/components/assets/asset-image.tsx

@@ -24,7 +24,7 @@ export const AssetImage = ({
   const url =
     mainImage ||
     fetcher?.data?.asset?.mainImage ||
-    "/images/asset-placeholder.jpg";
+    "/static/images/asset-placeholder.jpg";
 
   useEffect(() => {
     if (mainImage && mainImageExpiration) {

app/components/assets/custom-fields-inputs.tsx

@@ -23,7 +23,7 @@ import {
   SelectValue,
   SelectItem,
 } from "../forms";
-import { Calendar } from "../forms/calender-input";
+import { Calendar } from "../forms/calendar-input";
 import FormRow from "../forms/form-row";
 import Input from "../forms/input";
 import { Switch } from "../forms/switch";

app/components/assets/form.tsx

@@ -252,6 +252,7 @@ export const AssetForm = ({
             label={zo.fields.description()}
             name={zo.fields.description()}
             defaultValue={description || ""}
+            hideLabel
             placeholder="Add a description for your asset."
             disabled={disabled}
             data-test-id="assetDescription"

app/components/assets/notes/notes.tsx

@@ -50,7 +50,7 @@ export const Notes = () => {
         <div className="flex h-[500px] items-center  justify-center">
           <div className="flex flex-col items-center justify-center p-[16px] text-center md:p-[50px]">
             <img
-              src="/images/no-notes.svg"
+              src="/static/images/no-notes.svg"
               alt="Graphic for no notes"
               className="mb-6 w-[172px]"
             />

app/components/custody/custodian-select.tsx

@@ -88,7 +88,7 @@ export default function CustodianSelect(
                         <img
                           src={
                             member.user.profilePicture ||
-                            "/images/default_pfp.jpg"
+                            "/static/images/default_pfp.jpg"
                           }
                           className={"w-[20px] rounded-[4px]"}
                           alt={`${member.user.firstName} ${member.user.lastName}'s profile`}

app/components/dashboard/announcement-bar.tsx

@@ -7,7 +7,7 @@ import { Button } from "../shared/button";
 export default function AnnouncementBar() {
   const { announcement } = useLoaderData<typeof loader>();
   return announcement ? (
-    <div className="mb:gap-4 mb:p-4 mb-4 flex items-center gap-2 rounded border border-gray-200 px-2 py-3">
+    <div className="mb:gap-4 mb:p-4 mb-4 mt-3 flex items-center gap-2 rounded border border-gray-200 px-2 py-3">
       <div className="inline-flex items-center justify-center rounded-full border-[6px] border-solid border-primary-50 bg-primary-100 p-1.5 text-primary">
         <StarsIcon />
       </div>

app/components/dashboard/custodians.tsx

@@ -76,7 +76,7 @@ function Row({
                 src={
                   custodian?.user?.profilePicture
                     ? custodian?.user?.profilePicture
-                    : "/images/default_pfp.jpg"
+                    : "/static/images/default_pfp.jpg"
                 }
                 className={"size-10 rounded-[4px]"}
                 alt={`${custodian.name}'s profile`}

app/components/dashboard/empty-state.tsx

@@ -2,7 +2,7 @@ export function EmptyState({ text }: { text: string }) {
   return (
     <div className="flex size-full min-h-[200px] flex-col items-center justify-center">
       <img
-        src="/images/empty-state.svg"
+        src="/static/images/empty-state.svg"
         alt="Empty state"
         className="h-auto w-[45px]"
       />

app/components/errors/content.tsx

@@ -37,7 +37,7 @@ const InnerContent = ({ title, message, showReload }: ErrorContentProps) => {
   return (
     <div className="flex size-full items-center justify-center">
       <div className="flex flex-col items-center text-center">
-        <img src="/images/error-icon.svg" alt={title} className="mb-5" />
+        <img src="/static/images/error-icon.svg" alt={title} className="mb-5" />
         <h2 className="mb-2">{title}</h2>
         <p className="max-w-[550px]">
           {NODE_ENV === "production"

app/components/errors/index.tsx

@@ -73,6 +73,7 @@ export const ErrorBoundryComponent = ({
           )
         }
       />
+
     );
   } else {
     return (

app/components/forms/calendar-input.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { DayPicker } from "react-day-picker";
+
+import { tw } from "~/utils";
+
+type CalendarProps = {
+  className?: any;
+  classNames?: any;
+  showOutsideDays?: boolean;
+  selected: any;
+  onSelect: any;
+  [x: string]: any;
+};
+
+const Calendar: React.ForwardRefRenderFunction<HTMLElement, CalendarProps> = (
+  {
+    className,
+    classNames,
+    showOutsideDays = true,
+    selected,
+    onSelect,
+    ...props
+  },
+  _ref // This is the forwarded ref
+) => (
+  <>
+    <DayPicker
+      onSelect={(_range: unknown, d: Date) => {
+        onSelect(d);
+      }}
+      selected={selected}
+      showOutsideDays={showOutsideDays}
+      className={tw(
+        "border-indigo z-100 z-50 border-4 bg-slate-200 p-3",
+        className
+      )}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: tw(
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: tw(
+          "[&:has([aria-selected])]:bg-accent relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: tw("size-8 p-0 font-normal aria-selected:opacity-100"),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "text-muted-foreground opacity-50",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: () => <ChevronLeftIcon className="size-4" />,
+        IconRight: () => <ChevronRightIcon className="size-4" />,
+      }}
+      {...props}
+    />
+  </>
+);
+
+export { Calendar };

app/components/forms/input.tsx

@@ -1,3 +1,4 @@
+import type { RefObject } from "react";
 import { forwardRef } from "react";
 
 import { tw } from "~/utils";
@@ -95,18 +96,21 @@ const Input = forwardRef(function Input(
     ref,
     ...rest,
   };
-  // @TODO dont know how to fix that.
-  // @ts-ignore
-  let input = <input {...inputProps} />;
+
+  let input = (
+    <input
+      {...inputProps}
+      ref={ref as RefObject<HTMLInputElement> | undefined}
+    />
+  );
 
   if (inputType === "textarea") {
     input = (
-      // @TODO dont know how to fix that.
-      // @ts-ignore
       <textarea
         {...inputProps}
         maxLength={rest.maxLength || 250}
         rows={rest.rows || 8}
+        ref={ref as RefObject<HTMLTextAreaElement> | undefined}
       />
     );
   }

app/components/forms/select.tsx

@@ -75,7 +75,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.Item
       ref={ref}
       className={tw(
-        "relative flex cursor-default select-none items-center rounded p-1 text-sm font-medium outline-none focus:bg-gray-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ",
+        "relative flex cursor-default select-none items-center rounded p-1 text-sm font-medium outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-gray-50 ",
         className
       )}
       {...props}

app/components/forms/switch.tsx

@@ -12,7 +12,7 @@ const Switch = React.forwardRef<
   return (
     <SwitchPrimitives.Root
       className={tw(
-        "switch focus-visible:ring-offset-background peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent  bg-gray-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-400",
+        "switch focus-visible:ring-offset-background peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent  bg-gray-100 transition-colors data-[state=checked]:bg-primary-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}

app/components/layout/maintenance-mode.tsx

@@ -5,7 +5,7 @@ export default function MaintenanceMode() {
   return (
     <div className="size-screen relative px-4 py-16 md:p-16">
       <img
-        src="/images/bg-overlay1.png"
+        src="/static/images/bg-overlay1.png"
         alt="background"
         className="absolute left-0 top-0 -z-10 size-full object-cover"
       />

app/components/layout/sidebar/chat-with-an-expert.tsx

@@ -32,7 +32,7 @@ export const ChatWithAnExpert = () => {
         turnaround, global shipping, various materials.
       </p>
       <img
-        src="/images/carlos-support.jpg"
+        src="/static/images/carlos-support.jpg"
         alt="Carlos support shelf.nu"
         className="my-4 rounded-lg"
       />

app/components/layout/sidebar/sidebar.tsx

@@ -56,7 +56,7 @@ export default function Sidebar() {
       >
         <Link to="." title="Home" className="block h-[32px]">
           <img
-            src="/images/logo-full-color(x2).png"
+            src="/static/images/logo-full-color(x2).png"
             alt="logo"
             className="h-full"
           />
@@ -95,7 +95,7 @@ export default function Sidebar() {
               onClick={toggleMobileNav}
             >
               <img
-                src="/images/shelf-symbol.png"
+                src="/static/images/shelf-symbol.png"
                 alt="Shelf Logo"
                 className="mx-1.5 inline h-[32px]"
               />

app/components/list/empty-state.tsx

@@ -33,7 +33,7 @@ export const EmptyState = ({ customContent, modelName }: CustomEmptyState) => {
     <div className="flex h-full flex-col justify-center gap-[32px] px-4 py-[100px] text-center">
       <div className="flex flex-col items-center">
         <img
-          src="/images/empty-state.svg"
+          src="/static/images/empty-state.svg"
           alt="Empty state"
           className="h-auto w-[172px]"
         />

app/components/list/filters/category/category-checkbox-dropdown.tsx

@@ -168,7 +168,7 @@ const CheckboxItem = ({
     <label
       key={category.id}
       htmlFor={category.name}
-      className="relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm font-medium outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-100 "
+      className="relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm font-medium outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-100 focus:bg-gray-100 "
     >
       <Badge color={category.color} withDot={false} noBg>
         {category.name}

app/components/list/filters/tag/tag-checkbox-dropdown.tsx

@@ -158,7 +158,7 @@ const CheckboxItem = ({
     <label
       key={category.id}
       htmlFor={category.name}
-      className="relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm font-medium outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-100 "
+      className="relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm font-medium outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-100 focus:bg-gray-100 "
     >
       <Badge color={category.color} noBg>
         {category.name}

app/components/location/map-placeholder.tsx

@@ -10,7 +10,7 @@ export const MapPlaceholder = ({
 }) => (
   <div className="relative">
     <img
-      src="/images/no-location-image.jpg"
+      src="/static/images/no-location-image.jpg"
       alt="No scanned location"
       className="w-full rounded-none"
     />