Add frontend pages imporvements

frontend/src/hooks/index.ts

@@ -0,0 +1,5 @@
+// Export commonly used hooks
+export { default as useLocalStorage } from './useLocalStorage';
+export { default as useDebounce } from './useDebounce';
+export { default as useSubscription } from './useSubscription';
+export { useTenantId, useTenantInfo, useRequiredTenant } from './useTenantId';

frontend/src/hooks/useTenantId.ts

@@ -0,0 +1,49 @@
+/**
+ * Custom hook to consistently get tenant ID from tenant store
+ * Provides a standardized way to access tenant ID across the application
+ */
+import { useCurrentTenant } from '../stores/tenant.store';
+
+/**
+ * Hook to get the current tenant ID
+ * @returns {string} The current tenant ID, or empty string if not available
+ */
+export const useTenantId = (): string => {
+  const currentTenant = useCurrentTenant();
+  return currentTenant?.id || '';
+};
+
+/**
+ * Hook to get both tenant and tenant ID
+ * @returns {object} Object containing currentTenant and tenantId
+ */
+export const useTenantInfo = () => {
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+
+  return {
+    currentTenant,
+    tenantId,
+    hasTenant: !!currentTenant,
+  };
+};
+
+/**
+ * Hook to ensure tenant is available before proceeding
+ * Useful for components that absolutely require a tenant to function
+ * @returns {object} Object with tenant info and loading state
+ */
+export const useRequiredTenant = () => {
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+  const isReady = !!tenantId;
+
+  return {
+    currentTenant,
+    tenantId,
+    isReady,
+    isLoading: !isReady, // Indicates if we're still waiting for tenant
+  };
+};
+
+export default useTenantId;