Merge pull request midday-ai#247 from midday-ai/feature/fixes-v2

Feature/fixes v2

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,

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>

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({

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),

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")

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]"

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} />

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,55 +26,42 @@ 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) {
     return (
       <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"

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>
   );
 }

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>

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,
   };

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",

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}
     >