src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelEditForm.tsx

@@ -56,7 +56,7 @@ export function FunnelEditForm({
   const defaultValues = {
     name: data?.name || '',
     window: data?.parameters?.window || 60,
-    steps: data?.parameters?.steps || [{ type: 'path', value: '' }],
+    steps: data?.parameters?.steps || [{ type: 'path', value: '/' }],
   };
 
   return (
@@ -82,10 +82,12 @@ export function FunnelEditForm({
           validate: value => value.length > 1 || 'At least two steps are required',
         }}
       >
-        {({ fields, append, remove }) => {
+        {({ fields, append, remove, getValues }) => {
           return (
             <Grid gap>
               {fields.map(({ id }: { id: string }, index: number) => {
+                const type = getValues(`steps.${index}.type`);
+
                 return (
                   <Grid key={id} columns="260px 1fr auto" gap>
                     <Column>
@@ -101,8 +103,7 @@ export function FunnelEditForm({
                         name={`steps.${index}.value`}
                         rules={{ required: formatMessage(labels.required) }}
                       >
-                        {({ field, context }) => {
+                        {({ field }) => {
-                          const type = context.watch(`steps.${index}.type`);
                           return <LookupField websiteId={websiteId} type={type} {...field} />;
                         }}
                       </FormField>
@@ -117,7 +118,7 @@ export function FunnelEditForm({
               })}
               <Row>
                 <Button
-                  onPress={() => append({ type: 'path', value: '' })}
+                  onPress={() => append({ type: 'path', value: '/' })}
                   isDisabled={fields.length >= FUNNEL_STEPS_MAX}
                 >
                   <Icon>

src/app/(main)/websites/[websiteId]/(reports)/goals/GoalAddButton.tsx

@@ -17,8 +17,9 @@ export function GoalAddButton({ websiteId }: { websiteId: string }) {
       <Modal>
         <Dialog
           aria-label="add goal"
+          variant="modal"
           title={formatMessage(labels.goal)}
-          style={{ minWidth: 400, minHeight: 300 }}
+          style={{ minWidth: 800, minHeight: 300 }}
         >
           {({ close }) => <GoalEditForm websiteId={websiteId} onClose={close} />}
         </Dialog>

src/components/common/DateDistance.tsx

@@ -1,18 +1,13 @@
 import { Text } from '@umami/react-zen';
 import { formatDistanceToNow } from 'date-fns';
 import { useLocale, useTimezone } from '@/components/hooks';
-import { isInvalidDate } from '@/lib/date';
 
 export function DateDistance({ date }: { date: Date }) {
   const { formatTimezoneDate } = useTimezone();
   const { dateLocale } = useLocale();
 
-  if (!isInvalidDate(date)) {
-    return null;
-  }
-
   return (
-    <Text title={formatTimezoneDate(date?.toISOString(), 'PPPpp')}>
+    <Text title={formatTimezoneDate(date.toISOString(), 'PPPpp')}>
       {formatDistanceToNow(date, { addSuffix: true, locale: dateLocale })}
     </Text>
   );

src/lib/date.ts

@@ -369,7 +369,3 @@ export function getDateRangeValue(startDate: Date, endDate: Date) {
 export function getMonthDateRangeValue(date: Date) {
   return getDateRangeValue(startOfMonth(date), endOfMonth(date));
 }
-
-export function isInvalidDate(date: any) {
-  return date instanceof Date && isNaN(date.getTime());
-}