From 703e119cf7364162845bdf43a4386212e9036761 Mon Sep 17 00:00:00 2001
From: Pontus Abrahamsson <pontus@lostisland.co>
Date: Fri, 6 Sep 2024 12:04:15 +0200
Subject: [PATCH 1/2] fixes

---
 .../src/actions/ai/chat/tools/burn-rate.tsx   |  4 +-
 .../actions/ai/chat/tools/ui/burn-rate-ui.tsx |  6 +--
 apps/dashboard/src/actions/schema.ts          |  4 +-
 .../src/actions/verify-otp-action.ts          | 21 +++------
 .../src/components/feedback-form.tsx          |  2 +-
 .../src/components/notification-center.tsx    |  8 ++--
 apps/dashboard/src/components/otp-sign-in.tsx | 47 +++++++------------
 .../src/components/tables/vault/tag.tsx       | 14 +++++-
 .../src/components/widgets/vault/vault.tsx    |  2 +-
 apps/dashboard/src/hooks/use-notifications.ts | 12 ++---
 apps/dashboard/src/locales/en.ts              |  6 +--
 packages/ui/src/components/input-otp.tsx      |  2 +-
 12 files changed, 57 insertions(+), 71 deletions(-)

diff --git a/apps/dashboard/src/actions/ai/chat/tools/burn-rate.tsx b/apps/dashboard/src/actions/ai/chat/tools/burn-rate.tsx
index baefd8b28a..bbef6a9d65 100644
--- a/apps/dashboard/src/actions/ai/chat/tools/burn-rate.tsx
+++ b/apps/dashboard/src/actions/ai/chat/tools/burn-rate.tsx
@@ -48,10 +48,10 @@ export function getBurnRateTool({ aiState, currency, dateFrom, dateTo }: Args) {
         }),
       ]);
 
-      const avarageBurnRate = calculateAvgBurnRate(burnRateData);
+      const averageBurnRate = calculateAvgBurnRate(burnRateData);
 
       const props = {
-        avarageBurnRate,
+        averageBurnRate,
         currency,
         startDate,
         endDate,
diff --git a/apps/dashboard/src/actions/ai/chat/tools/ui/burn-rate-ui.tsx b/apps/dashboard/src/actions/ai/chat/tools/ui/burn-rate-ui.tsx
index 00395ded88..e522450477 100644
--- a/apps/dashboard/src/actions/ai/chat/tools/ui/burn-rate-ui.tsx
+++ b/apps/dashboard/src/actions/ai/chat/tools/ui/burn-rate-ui.tsx
@@ -6,13 +6,13 @@ import { FormatAmount } from "@/components/format-amount";
 import { addMonths, format } from "date-fns";
 
 type Props = {
-  avarageBurnRate: number;
+  averageBurnRate: number;
   currency: string;
   data: any;
   months: number;
 };
 
-export function BurnRateUI({ avarageBurnRate, currency, months, data }: Props) {
+export function BurnRateUI({ averageBurnRate, currency, months, data }: Props) {
   if (!data?.length) {
     return (
       <BotCard>
@@ -24,7 +24,7 @@ export function BurnRateUI({ avarageBurnRate, currency, months, data }: Props) {
     <BotCard className="font-sans space-y-4">
       <p className="font-mono">
         Based on your historical data, your avarage burn rate is{" "}
-        <FormatAmount amount={avarageBurnRate} currency={currency} /> per month.
+        <FormatAmount amount={averageBurnRate} currency={currency} /> per month.
         Your expected runway is {months} months, ending in{" "}
         {format(addMonths(new Date(), months), "PP")}.
       </p>
diff --git a/apps/dashboard/src/actions/schema.ts b/apps/dashboard/src/actions/schema.ts
index f17b530733..bfd0910a4d 100644
--- a/apps/dashboard/src/actions/schema.ts
+++ b/apps/dashboard/src/actions/schema.ts
@@ -372,10 +372,8 @@ export const setupUserSchema = z.object({
 });
 
 export const verifyOtpSchema = z.object({
-  type: z.enum(["phone", "email"]),
   token: z.string(),
-  phone: z.string().optional(),
-  email: z.string().optional(),
+  email: z.string(),
 });
 
 export const searchSchema = z.object({
diff --git a/apps/dashboard/src/actions/verify-otp-action.ts b/apps/dashboard/src/actions/verify-otp-action.ts
index e35c177f13..9027dad51d 100644
--- a/apps/dashboard/src/actions/verify-otp-action.ts
+++ b/apps/dashboard/src/actions/verify-otp-action.ts
@@ -11,23 +11,14 @@ import { verifyOtpSchema } from "./schema";
 export const verifyOtpAction = actionClient
   .schema(verifyOtpSchema)
 
-  .action(async ({ parsedInput: { type, email, token, phone } }) => {
+  .action(async ({ parsedInput: { email, token } }) => {
     const supabase = createClient();
 
-    const options =
-      type === "email"
-        ? {
-            email,
-            token,
-            type: "email",
-          }
-        : {
-            phone,
-            token,
-            type: "sms",
-          };
-
-    await supabase.auth.verifyOtp(options);
+    await supabase.auth.verifyOtp({
+      email,
+      token,
+      type: "email",
+    });
 
     cookies().set(Cookies.PreferredSignInProvider, "otp", {
       expires: addYears(new Date(), 1),
diff --git a/apps/dashboard/src/components/feedback-form.tsx b/apps/dashboard/src/components/feedback-form.tsx
index 3d23dd0910..dfb275f8d1 100644
--- a/apps/dashboard/src/components/feedback-form.tsx
+++ b/apps/dashboard/src/components/feedback-form.tsx
@@ -19,7 +19,7 @@ export function FeedbackForm() {
 
   return (
     <Popover>
-      <PopoverTrigger asChild className="hidden md:block">
+      <PopoverTrigger asChild className="hidden md:flex-inline">
         <Button
           variant="outline"
           className="rounded-full font-normal h-[32px] p-0 px-3 text-xs text-[#878787]"
diff --git a/apps/dashboard/src/components/notification-center.tsx b/apps/dashboard/src/components/notification-center.tsx
index 4d7794433c..2bdd8d6b2b 100644
--- a/apps/dashboard/src/components/notification-center.tsx
+++ b/apps/dashboard/src/components/notification-center.tsx
@@ -186,7 +186,7 @@ function NotificationItem({
 export function NotificationCenter() {
   const [isOpen, setOpen] = useState(false);
   const {
-    hasUnseenNotificaitons,
+    hasUnseenNotifications,
     notifications,
     markMessageAsRead,
     markAllMessagesAsSeen,
@@ -202,10 +202,10 @@ export function NotificationCenter() {
   );
 
   useEffect(() => {
-    if (isOpen && hasUnseenNotificaitons) {
+    if (isOpen && hasUnseenNotifications) {
       markAllMessagesAsSeen();
     }
-  }, [hasUnseenNotificaitons, isOpen]);
+  }, [hasUnseenNotifications, isOpen]);
 
   return (
     <Popover onOpenChange={setOpen} open={isOpen}>
@@ -215,7 +215,7 @@ export function NotificationCenter() {
           size="icon"
           className="rounded-full w-8 h-8 flex items-center relative"
         >
-          {hasUnseenNotificaitons && (
+          {hasUnseenNotifications && (
             <div className="w-1.5 h-1.5 bg-[#FFD02B] rounded-full absolute top-0 right-0" />
           )}
           <Icons.Notifications size={16} />
diff --git a/apps/dashboard/src/components/otp-sign-in.tsx b/apps/dashboard/src/components/otp-sign-in.tsx
index 7caf570518..a76f502cb3 100644
--- a/apps/dashboard/src/components/otp-sign-in.tsx
+++ b/apps/dashboard/src/components/otp-sign-in.tsx
@@ -15,7 +15,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 const formSchema = z.object({
-  value: z.string().min(1),
+  email: z.string().email(),
 });
 
 type Props = {
@@ -26,48 +26,34 @@ export function OTPSignIn({ className }: Props) {
   const verifyOtp = useAction(verifyOtpAction);
   const [isLoading, setLoading] = useState(false);
   const [isSent, setSent] = useState(false);
-  const [phone, setPhone] = useState();
-  const [email, setEmail] = useState();
-  const [type, setType] = useState<"email" | "phone">();
+  const [email, setEmail] = useState<string>();
   const supabase = createClient();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      value: "",
+      email: "",
     },
   });
 
-  async function onSubmit({ value }: z.infer<typeof formSchema>) {
+  async function onSubmit({ email }: z.infer<typeof formSchema>) {
     setLoading(true);
 
-    const isPhone = value.startsWith("+");
+    setEmail(email);
 
-    setType(isPhone ? "phone" : "email");
-
-    if (isPhone) {
-      setPhone(value);
-    } else {
-      setEmail(value);
-    }
-
-    const options = isPhone ? { phone: value } : { email: value };
-
-    await supabase.auth.signInWithOtp(options);
+    await supabase.auth.signInWithOtp({ email });
 
     setSent(true);
     setLoading(false);
   }
 
   async function onComplete(token: string) {
-    if (type) {
-      verifyOtp.execute({
-        type,
-        token,
-        phone,
-        email,
-      });
-    }
+    if (!email) return;
+
+    verifyOtp.execute({
+      token,
+      email,
+    });
   }
 
   if (isSent) {
@@ -75,6 +61,7 @@ export function OTPSignIn({ className }: Props) {
       <div className={cn("flex flex-col space-y-4 items-center", className)}>
         <InputOTP
           maxLength={6}
+          autoFocus
           onComplete={onComplete}
           disabled={verifyOtp.status === "executing"}
           render={({ slots }) => (
@@ -93,9 +80,9 @@ export function OTPSignIn({ className }: Props) {
         <button
           onClick={() => setSent(false)}
           type="button"
-          className="text-sm"
+          className="text-sm text-primary"
         >
-          Try again
+          Resend code
         </button>
       </div>
     );
@@ -107,12 +94,12 @@ export function OTPSignIn({ className }: Props) {
         <div className={cn("flex flex-col space-y-4", className)}>
           <FormField
             control={form.control}
-            name="value"
+            name="email"
             render={({ field }) => (
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder="Enter phone number or email"
+                    placeholder="Enter email address"
                     {...field}
                     autoCapitalize="false"
                     autoCorrect="false"
diff --git a/apps/dashboard/src/components/tables/vault/tag.tsx b/apps/dashboard/src/components/tables/vault/tag.tsx
index 87633cb291..6194e41be2 100644
--- a/apps/dashboard/src/components/tables/vault/tag.tsx
+++ b/apps/dashboard/src/components/tables/vault/tag.tsx
@@ -1,14 +1,17 @@
 "use client";
 
 import { useI18n } from "@/locales/client";
+import { cn } from "@midday/ui/cn";
 import { Skeleton } from "@midday/ui/skeleton";
 
 export function Tag({
   name,
   isLoading,
+  className,
 }: {
   name?: string;
   isLoading?: boolean;
+  className?: string;
 }) {
   const t = useI18n();
 
@@ -21,8 +24,15 @@ export function Tag({
   }
 
   return (
-    <div className="p-1 text-[#878787] bg-[#F2F1EF] text-[11px] dark:bg-[#1D1D1D] px-3 py-1 rounded-full cursor-default font-mono inline-block">
-      {t(`tags.${name}`)}
+    <div
+      className={cn(
+        "p-1 text-[#878787] bg-[#F2F1EF] text-[11px] dark:bg-[#1D1D1D] px-3 py-1 rounded-full cursor-default font-mono inline-flex max-w-full",
+        className,
+      )}
+    >
+      <span className="line-clamp-1 truncate inline-block">
+        {t(`tags.${name}`)}
+      </span>
     </div>
   );
 }
diff --git a/apps/dashboard/src/components/widgets/vault/vault.tsx b/apps/dashboard/src/components/widgets/vault/vault.tsx
index ac30b4d2b7..7e70f357a4 100644
--- a/apps/dashboard/src/components/widgets/vault/vault.tsx
+++ b/apps/dashboard/src/components/widgets/vault/vault.tsx
@@ -33,7 +33,7 @@ export function Vault({ files }: Props) {
                     <span className="text-sm line-clamp-1">{file.name}</span>
                   </div>
 
-                  <div className="ml-auto">
+                  <div className="ml-auto w-[40%] flex justify-end">
                     <Tag name={file.tag} />
                   </div>
                 </div>
diff --git a/apps/dashboard/src/hooks/use-notifications.ts b/apps/dashboard/src/hooks/use-notifications.ts
index f5d7ead7e0..2c1d002404 100644
--- a/apps/dashboard/src/hooks/use-notifications.ts
+++ b/apps/dashboard/src/hooks/use-notifications.ts
@@ -20,7 +20,7 @@ export function useNotifications() {
             ...notification,
             read: true,
           };
-        })
+        }),
       );
 
       headlessService.markAllMessagesAsRead({
@@ -44,7 +44,7 @@ export function useNotifications() {
           }
 
           return notification;
-        })
+        }),
       );
 
       headlessService.markNotificationsAsRead({
@@ -77,7 +77,7 @@ export function useNotifications() {
         prevNotifications.map((notification) => ({
           ...notification,
           seen: true,
-        }))
+        })),
       );
       headlessService.markAllMessagesAsSeen({
         listener: () => {},
@@ -94,7 +94,7 @@ export function useNotifications() {
 
       const { data: userData } = await getUserQuery(
         supabase,
-        session?.user?.id
+        session?.user?.id,
       );
 
       if (userData) {
@@ -141,8 +141,8 @@ export function useNotifications() {
     markAllMessagesAsRead,
     markMessageAsRead,
     markAllMessagesAsSeen,
-    hasUnseenNotificaitons: notifications.some(
-      (notification) => !notification.seen
+    hasUnseenNotifications: notifications.some(
+      (notification) => !notification.seen,
     ),
     notifications,
   };
diff --git a/apps/dashboard/src/locales/en.ts b/apps/dashboard/src/locales/en.ts
index 2ac8cd0724..260a054924 100644
--- a/apps/dashboard/src/locales/en.ts
+++ b/apps/dashboard/src/locales/en.ts
@@ -96,7 +96,7 @@ export default {
     budget_reports: "Budget Reports",
     audit_reports: "Audit Reports",
     tax_returns: "Tax Returns",
-    invoices_and_receipts: "Invoices and Receipts",
+    invoices_and_receipts: "Invoices & Receipts",
     employee_handbook: "Employee Handbook",
     payroll_records: "Payroll Records",
     performance_reviews: "Performance Reviews",
@@ -141,12 +141,12 @@ export default {
     lab_notebooks: "Lab Notebooks",
     experiment_results: "Experiment Results",
     product_design_documents: "Product Design Documents",
-    prototypes_and_models: "Prototypes and Models",
+    prototypes_and_models: "Prototypes & Models",
     testing_reports: "Testing Reports",
     newsletters: "Newsletters",
     email_correspondence: "Email Correspondence",
     support_tickets: "Support Tickets",
-    faqs_and_knowledge: "FAQs and Knowledge",
+    faqs_and_knowledge: "FAQs & Knowledge",
     user_guides: "User Guides",
     warranty_information: "Warranty Information",
     swot_analysis: "SWOT Analysis",
diff --git a/packages/ui/src/components/input-otp.tsx b/packages/ui/src/components/input-otp.tsx
index 08202215a4..2eb6581372 100644
--- a/packages/ui/src/components/input-otp.tsx
+++ b/packages/ui/src/components/input-otp.tsx
@@ -35,7 +35,7 @@ const InputOTPSlot = React.forwardRef<
       className={cn(
         "relative flex h-16 w-16 items-center justify-center border-y border-r border-input text-2xl transition-all first:rounded-l-md first:border-l last:rounded-r-md",
         isActive && "z-10 ring-1 ring-ring",
-        className
+        className,
       )}
       {...props}
     >

From b24631b44f66a62811622e75e497f0485490cbfe Mon Sep 17 00:00:00 2001
From: Pontus Abrahamsson <pontus@lostisland.co>
Date: Fri, 6 Sep 2024 12:51:29 +0200
Subject: [PATCH 2/2] Make file name unique

---
 apps/dashboard/src/app/api/webhook/inbox/route.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/app/api/webhook/inbox/route.ts b/apps/dashboard/src/app/api/webhook/inbox/route.ts
index 87748fe248..ca20925f62 100644
--- a/apps/dashboard/src/app/api/webhook/inbox/route.ts
+++ b/apps/dashboard/src/app/api/webhook/inbox/route.ts
@@ -164,7 +164,12 @@ export async function POST(req: Request) {
       const { content, mimeType, size, fileName, name } =
         await prepareDocument(attachment);
 
-      const uniqueFileName = `${nanoid(4)}_${fileName}`;
+      // Add a random 4 character string to the end of the file name
+      // to make it unique before the extension
+      const uniqueFileName = fileName.replace(
+        /(\.[^.]+)$/,
+        (ext) => `_${nanoid(4)}${ext}`,
+      );
 
       const { data } = await supabase.storage
         .from("vault")