Fixed goals query.

src/app/(main)/websites/[websiteId]/WebsiteNav.tsx

@@ -1,6 +1,6 @@
 import { Icon, Text, Row, NavMenu, NavMenuItem } from '@umami/react-zen';
 import {
-  Overview,
+  Eye,
   Lightning,
   User,
   Clock,
@@ -24,7 +24,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
     {
       id: 'overview',
       label: formatMessage(labels.overview),
-      icon: <Overview />,
+      icon: <Eye />,
       path: '',
     },
     {

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

@@ -16,7 +16,7 @@ import {
   AlertDialog,
 } from '@umami/react-zen';
 import { useMessages, useResultQuery } from '@/components/hooks';
-import { Edit, More, Trash, File, Lightning, User, Eye } from '@/components/icons';
+import { Edit, More, Trash, File, Lightning, User } from '@/components/icons';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { formatLongNumber } from '@/lib/format';
 import { GoalAddForm } from '@/app/(main)/websites/[websiteId]/goals/GoalAddForm';
@@ -62,7 +62,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
             </Row>
           </Column>
           <Column>
-            <ActionsButton id={id} websiteId={websiteId} />
+            <ActionsButton id={id} name={name} websiteId={websiteId} />
           </Column>
         </Grid>
         <Row alignItems="center" justifyContent="space-between" gap>
@@ -77,7 +77,9 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
             <Text>{parameters.value}</Text>
           </Row>
           <Row alignItems="center" gap>
-            <Icon>{isPage ? <Eye /> : <User />}</Icon>
+            <Icon>
+              <User />
+            </Icon>
             <Text title={`${data?.num} / ${data?.total}`}>{`${formatLongNumber(
               data?.num,
             )} / ${formatLongNumber(data?.total)}`}</Text>
@@ -99,8 +101,16 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
   );
 }
 
-const ActionsButton = ({ id, websiteId }: { id: string; websiteId: string }) => {
-  const { formatMessage, labels } = useMessages();
+const ActionsButton = ({
+  id,
+  name,
+  websiteId,
+}: {
+  id: string;
+  name: string;
+  websiteId: string;
+}) => {
+  const { formatMessage, labels, messages } = useMessages();
   const [showEdit, setShowEdit] = useState(false);
   const [showDelete, setShowDelete] = useState(false);
   const { mutate, touch } = useDeleteQuery(`/reports/${id}`);
@@ -154,7 +164,11 @@ const ActionsButton = ({ id, websiteId }: { id: string; websiteId: string }) =>
       </MenuTrigger>
       <Modal isOpen={showEdit || showDelete} isDismissable={true}>
         {showEdit && (
-          <Dialog variant="modal" style={{ minHeight: 375, minWidth: 300 }}>
+          <Dialog
+            title={formatMessage(labels.goal)}
+            variant="modal"
+            style={{ minHeight: 375, minWidth: 400 }}
+          >
             <GoalAddForm id={id} websiteId={websiteId} onClose={handleClose} />
           </Dialog>
         )}
@@ -163,7 +177,9 @@ const ActionsButton = ({ id, websiteId }: { id: string; websiteId: string }) =>
             title={formatMessage(labels.delete)}
             onConfirm={handleDelete}
             onCancel={handleClose}
-          />
+          >
+            {formatMessage(messages.confirmDelete, { target: name })}
+          </AlertDialog>
         )}
       </Modal>
     </>

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

@@ -15,7 +15,11 @@ export function GoalAddButton({ websiteId }: { websiteId: string }) {
         <Text>{formatMessage(labels.addGoal)}</Text>
       </Button>
       <Modal>
-        <Dialog variant="modal" title={formatMessage(labels.addGoal)} style={{ width: '400px' }}>
+        <Dialog
+          variant="modal"
+          title={formatMessage(labels.addGoal)}
+          style={{ minHeight: 375, minWidth: 400 }}
+        >
           {({ close }) => <GoalAddForm websiteId={websiteId} onClose={close} />}
         </Dialog>
       </Modal>

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

@@ -10,7 +10,6 @@ import {
   Radio,
   Text,
   Icon,
-  Loading,
 } from '@umami/react-zen';
 import { useApi, useMessages, useModified, useReportQuery } from '@/components/hooks';
 import { File, Lightning } from '@/components/icons';
@@ -54,7 +53,7 @@ export function GoalAddForm({
   };
 
   if (id && !data) {
-    return <Loading position="page" icon="dots" />;
+    return null;
   }
 
   return (

src/components/hooks/queries/useReportQuery.ts

@@ -12,5 +12,6 @@ export function useReportQuery(reportId: string) {
         ...data,
       });
     },
+    enabled: !!reportId,
   });
 }

src/components/hooks/queries/useReportsQuery.ts

@@ -4,23 +4,12 @@ import { useModified } from '../useModified';
 
 export function useReportsQuery({ websiteId, teamId }: { websiteId?: string; teamId?: string }) {
   const { modified } = useModified(`reports`);
-  const { get, del, useMutation } = useApi();
-  const queryResult = usePagedQuery({
+  const { get } = useApi();
+
+  return usePagedQuery({
     queryKey: ['reports', { websiteId, teamId, modified }],
     queryFn: (params: any) => {
       return get('/reports', { websiteId, teamId, ...params });
     },
   });
-  const { mutate } = useMutation({ mutationFn: (reportId: string) => del(`/reports/${reportId}`) });
-
-  const deleteReport = (reportId: any) => {
-    mutate(reportId, {
-      onSuccess: () => {},
-    });
-  };
-
-  return {
-    ...queryResult,
-    deleteReport,
-  };
 }

src/components/hooks/usePagedQuery.ts

@@ -12,7 +12,7 @@ export function usePagedQuery<T = any>({
   const { query: queryParams } = useNavigation();
   const [params, setParams] = useState<PageParams>({
     search: '',
-    page: +queryParams.page || 1,
+    page: +queryParams?.page || 1,
   });
 
   const { useQuery } = useApi();

src/queries/sql/reports/getGoal.ts

@@ -30,7 +30,7 @@ async function relationalQuery(websiteId: string, criteria: GoalCriteria) {
     `
     select count(*) as num,
     (
-      select count(${isPage ? '*' : 'distinct session_id'})
+      select count(distinct session_id)
       from website_event
       where website_id = {websiteId:UUID}
       and event_type = ${eventType}
@@ -59,10 +59,9 @@ async function clickhouseQuery(websiteId: string, criteria: GoalCriteria) {
     `
     select count(*) as num,
     (
-      select count(${isPage ? '*' : 'distinct session_id'})
+      select count(distinct session_id)
       from website_event
       where website_id = {websiteId:UUID}
-      and event_type = ${eventType}
       ${dateQuery}
     ) as total
     from website_event