Add goal management functionality in analytics (#100)

* Add goal management functionality in analytics

- Introduced goal creation, deletion, and updating capabilities in the analytics API, allowing users to define conversion goals based on path or event types.
- Implemented corresponding React hooks for managing goals, including fetching, creating, updating, and deleting goals.
- Enhanced the UI with a dedicated Goals page and components for listing and managing goals, improving user experience in tracking conversions.
- Updated package dependencies to include necessary libraries for form handling and validation.

* Enhance goals management with pagination and sorting

- Added pagination and sorting capabilities to the goals fetching logic in the analytics API, allowing users to navigate through goals more efficiently.
- Updated the GoalsPage component to manage current page state and handle page changes, improving user experience.
- Modified the GoalsList component to display pagination metadata and navigation controls, facilitating better goal management.
- Adjusted the server-side getGoals function to support pagination and sorting parameters, ensuring accurate data retrieval.

* Refactor GoalsPage and GoalCard components for improved UI and functionality

- Updated GoalsPage to include a SubHeader component and adjusted layout for better responsiveness.
- Enhanced loading and empty state handling in GoalsPage for a smoother user experience.
- Modified GoalCard to use icons for goal types, improving visual clarity and consistency in the UI.

* Refactor CreateGoalButton and GoalCard components for improved modal handling

- Updated CreateGoalButton to utilize a trigger prop for the GoalFormModal, simplifying modal state management.
- Refactored GoalCard to integrate GoalFormModal for editing goals, enhancing user interaction and reducing state complexity.
- Removed unnecessary state management and modal handling from both components, streamlining the codebase.

* Refactor GoalCard and Clickhouse initialization for improved code clarity

- Removed unnecessary imports in GoalCard component, streamlining the code.
- Updated Clickhouse initialization to include a new 'props' JSON field alongside 'properties', enhancing data structure for analytics.
- Added a utility function in PageviewQueue to parse properties, improving error handling and data integrity.

* enable clickhouse

* fix ch build

* fix ch build

* fix ch build

* wip

* wip

* wip

* Enable json

* add network

* add network

* Refactor Clickhouse configuration and remove unused properties from data models

* Refactor property value handling in analytics queries to utilize native JSON types in ClickHouse, improving type safety and performance.

client/src/api/analytics/useDeleteGoal.ts

@@ -0,0 +1,32 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { BACKEND_URL } from "../../lib/const";
+import { authedFetchWithError } from "../utils";
+import { useStore } from "../../lib/store";
+
+export function useDeleteGoal() {
+  const queryClient = useQueryClient();
+  const { site } = useStore();
+
+  return useMutation<{ success: boolean }, Error, number>({
+    mutationFn: async (goalId: number) => {
+      try {
+        return await authedFetchWithError<{ success: boolean }>(
+          `${BACKEND_URL}/goal/${goalId}`,
+          {
+            method: "DELETE",
+          }
+        );
+      } catch (error) {
+        throw new Error(
+          error instanceof Error ? error.message : "Failed to delete goal"
+        );
+      }
+    },
+    onSuccess: () => {
+      // Invalidate goals query to refetch without the deleted goal
+      queryClient.invalidateQueries({
+        queryKey: ["goals", site],
+      });
+    },
+  });
+}