Updated query hooks for teams and websites.

next.config.js

@@ -3,13 +3,25 @@ require('dotenv').config();
 const path = require('path');
 const pkg = require('./package.json');
 
+const basePath = process.env.BASE_PATH || '';
+const forceSSL = process.env.FORCE_SSL || '';
+const collectApiEndpoint = process.env.COLLECT_API_ENDPOINT || '';
+const defaultLocale = process.env.DEFAULT_LOCALE || '';
+const trackerScriptName = process.env.TRACKER_SCRIPT_NAME || '';
+const cloudMode = process.env.CLOUD_MODE || '';
+const cloudUrl = process.env.CLOUD_URL || '';
+const frameAncestors = process.env.ALLOWED_FRAME_URLS || '';
+const disableLogin = process.env.DISABLE_LOGIN || '';
+const disableUI = process.env.DISABLE_UI || '';
+const hostURL = process.env.HOST_URL || '';
+
 const contentSecurityPolicy = [
   `default-src 'self'`,
   `img-src *`,
   `script-src 'self' 'unsafe-eval' 'unsafe-inline'`,
   `style-src 'self' 'unsafe-inline'`,
   `connect-src 'self' api.umami.is cloud.umami.is`,
-  `frame-ancestors 'self' ${process.env.ALLOWED_FRAME_URLS || ''}`,
+  `frame-ancestors 'self' ${frameAncestors}`,
 ];
 
 const headers = [
@@ -26,7 +38,7 @@ const headers = [
   },
 ];
 
-if (process.env.FORCE_SSL) {
+if (forceSSL) {
   headers.push({
     key: 'Strict-Transport-Security',
     value: 'max-age=63072000; includeSubDomains; preload',
@@ -35,15 +47,15 @@ if (process.env.FORCE_SSL) {
 
 const rewrites = [];
 
-if (process.env.COLLECT_API_ENDPOINT) {
+if (collectApiEndpoint) {
   rewrites.push({
-    source: process.env.COLLECT_API_ENDPOINT,
+    source: collectApiEndpoint,
     destination: '/api/send',
   });
 }
 
-if (process.env.TRACKER_SCRIPT_NAME) {
-  const names = process.env.TRACKER_SCRIPT_NAME?.split(',').map(name => name.trim());
+if (trackerScriptName) {
+  const names = trackerScriptName?.split(',').map(name => name.trim());
 
   if (names) {
     names.forEach(name => {
@@ -58,36 +70,37 @@ if (process.env.TRACKER_SCRIPT_NAME) {
 const redirects = [
   {
     source: '/settings',
-    destination: process.env.CLOUD_MODE
-      ? `${process.env.CLOUD_URL}/settings/websites`
-      : '/settings/websites',
+    destination: cloudMode ? `${cloudUrl}/settings/websites` : '/settings/websites',
+    permanent: true,
+  },
+  {
+    source: '/teams/:id',
+    destination: '/teams/:id/websites',
     permanent: true,
   },
 ];
 
-if (process.env.CLOUD_MODE && process.env.CLOUD_URL && process.env.DISABLE_LOGIN) {
+if (cloudMode && cloudUrl && disableLogin) {
   redirects.push({
     source: '/login',
-    destination: process.env.CLOUD_URL,
+    destination: cloudUrl,
     permanent: false,
   });
 }
 
-const basePath = process.env.BASE_PATH;
-
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: false,
   env: {
-    basePath: basePath || '',
-    cloudMode: process.env.CLOUD_MODE || '',
-    cloudUrl: process.env.CLOUD_URL || '',
+    basePath,
+    cloudMode,
+    cloudUrl,
     configUrl: '/config',
     currentVersion: pkg.version,
-    defaultLocale: process.env.DEFAULT_LOCALE || '',
-    disableLogin: process.env.DISABLE_LOGIN || '',
-    disableUI: process.env.DISABLE_UI || '',
-    hostUrl: process.env.HOST_URL || '',
+    defaultLocale,
+    disableLogin,
+    disableUI,
+    hostURL,
   },
   basePath,
   output: 'standalone',

src/app/(main)/dashboard/Dashboard.tsx

@@ -3,20 +3,17 @@ import { Button, Icon, Icons, Loading, Text } from 'react-basics';
 import Link from 'next/link';
 import PageHeader from 'components/layout/PageHeader';
 import Pager from 'components/common/Pager';
-import WebsiteChartList from '../../(main)/websites/[id]/WebsiteChartList';
+import WebsiteChartList from 'app/(main)/websites/[id]/WebsiteChartList';
 import DashboardSettingsButton from 'app/(main)/dashboard/DashboardSettingsButton';
 import DashboardEdit from 'app/(main)/dashboard/DashboardEdit';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import { useApi } from 'components/hooks';
 import useDashboard from 'store/dashboard';
-import { useMessages } from 'components/hooks';
-import { useLocale } from 'components/hooks';
-import { useFilterQuery } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLocale, useLogin, useFilterQuery } from 'components/hooks';
 
 export function Dashboard() {
   const { formatMessage, labels, messages } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
   const { showCharts, editing } = useDashboard();
   const { dir } = useLocale();
   const { get } = useApi();

src/app/(main)/reports/ReportDeleteButton.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
 import { useApi, useMessages } from 'components/hooks';
-import { setValue } from 'store/cache';
+import { touch } from 'store/cache';
+import ConfirmationForm from 'components/common/ConfirmationForm';
 
 export function ReportDeleteButton({
   reportId,
@@ -12,14 +12,16 @@ export function ReportDeleteButton({
   reportName: string;
   onDelete?: () => void;
 }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { del, useMutation } = useApi();
-  const { mutate } = useMutation({ mutationFn: reportId => del(`/reports/${reportId}`) });
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: reportId => del(`/reports/${reportId}`),
+  });
 
   const handleConfirm = (close: () => void) => {
     mutate(reportId as any, {
       onSuccess: () => {
-        setValue('reports', Date.now());
+        touch('reports');
         onDelete?.();
         close();
       },
@@ -28,16 +30,23 @@ export function ReportDeleteButton({
 
   return (
     <ModalTrigger>
-      <Button>
+      <Button variant="quiet">
         <Icon>
           <Icons.Trash />
         </Icon>
         <Text>{formatMessage(labels.delete)}</Text>
       </Button>
-      <Modal>
-        {close => (
-          <ConfirmDeleteForm
-            name={reportName}
+      <Modal title={formatMessage(labels.deleteReport)}>
+        {(close: () => void) => (
+          <ConfirmationForm
+            message={
+              <FormattedMessage
+                {...messages.confirmDelete}
+                values={{ target: <b>{reportName}</b> }}
+              />
+            }
+            isLoading={isPending}
+            error={error}
             onConfirm={handleConfirm.bind(null, close)}
             onClose={close}
           />

src/app/(main)/reports/ReportsTable.tsx

@@ -1,13 +1,12 @@
 import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
 import LinkButton from 'components/common/LinkButton';
-import { useMessages } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLogin } from 'components/hooks';
 import { REPORT_TYPES } from 'lib/constants';
 import ReportDeleteButton from './ReportDeleteButton';
 
 export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomain?: boolean }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
   const breakpoint = useBreakpoint();
 
   return (

src/app/(main)/reports/funnel/FunnelChart.tsx

@@ -1,7 +1,6 @@
 import { JSX, useCallback, useContext, useMemo } from 'react';
 import { Loading, StatusLight } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useTheme } from 'components/hooks';
+import { useMessages, useTheme } from 'components/hooks';
 import BarChart from 'components/metrics/BarChart';
 import { formatLongNumber } from 'lib/format';
 import { ReportContext } from '../[id]/Report';

src/app/(main)/settings/layout.tsx

@@ -1,12 +1,11 @@
 'use client';
 import { usePathname } from 'next/navigation';
-import { useUser } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useLogin, useMessages } from 'components/hooks';
 import SideNav from 'components/layout/SideNav';
 import styles from './layout.module.css';
 
 export default function SettingsLayout({ children }) {
-  const { user } = useUser();
+  const { user } = useLogin();
   const pathname = usePathname();
   const { formatMessage, labels } = useMessages();
   const cloudMode = !!process.env.cloudMode;

src/app/(main)/settings/profile/DateRangeSetting.tsx

@@ -1,8 +1,7 @@
 import DateFilter from 'components/input/DateFilter';
 import { Button, Flexbox } from 'react-basics';
-import { useDateRange } from 'components/hooks';
+import { useDateRange, useMessages } from 'components/hooks';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
-import { useMessages } from 'components/hooks';
 import { DateRange } from 'lib/types';
 
 export function DateRangeSetting() {

src/app/(main)/settings/profile/LanguageSetting.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import { Button, Dropdown, Item, Flexbox } from 'react-basics';
-import { useLocale } from 'components/hooks';
+import { useLocale, useMessages } from 'components/hooks';
 import { DEFAULT_LOCALE } from 'lib/constants';
 import { languages } from 'lib/lang';
-import { useMessages } from 'components/hooks';
 import styles from './LanguageSetting.module.css';
 
 export function LanguageSetting() {

src/app/(main)/settings/profile/PasswordEditForm.tsx

@@ -1,7 +1,6 @@
 import { useRef } from 'react';
 import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 
 export function PasswordEditForm({ onSave, onClose }) {
   const { formatMessage, labels, messages } = useMessages();

src/app/(main)/settings/profile/ProfileSettings.tsx

@@ -5,12 +5,11 @@ import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting';
 import LanguageSetting from 'app/(main)/settings/profile/LanguageSetting';
 import ThemeSetting from 'app/(main)/settings/profile/ThemeSetting';
 import PasswordChangeButton from './PasswordChangeButton';
-import { useUser } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useLogin, useMessages } from 'components/hooks';
 import { ROLES } from 'lib/constants';
 
 export function ProfileSettings() {
-  const { user } = useUser();
+  const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
   const cloudMode = Boolean(process.env.cloudMode);
 

src/app/(main)/settings/profile/TimezoneSetting.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { Dropdown, Item, Button, Flexbox } from 'react-basics';
 import { listTimeZones } from 'timezone-support';
-import { useTimezone } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useTimezone, useMessages } from 'components/hooks';
 import { getTimezone } from 'lib/date';
 import styles from './TimezoneSetting.module.css';
 

src/app/(main)/settings/teams/TeamAddForm.tsx

@@ -8,8 +8,7 @@ import {
   SubmitButton,
 } from 'react-basics';
 import { setValue } from 'store/cache';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 
 export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
   const { formatMessage, labels } = useMessages();

src/app/(main)/settings/teams/TeamDeleteForm.tsx

@@ -1,29 +1,28 @@
-import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import { setValue } from 'store/cache';
+import { useApi, useMessages } from 'components/hooks';
+import { touch } from 'store/cache';
+import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
+
+const CONFIRM_VALUE = 'DELETE';
 
 export function TeamDeleteForm({
   teamId,
-  teamName,
   onSave,
   onClose,
 }: {
   teamId: string;
-  teamName: string;
-  onSave: () => void;
-  onClose: () => void;
+  onSave?: () => void;
+  onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { labels, formatMessage } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({
     mutationFn: (data: any) => del(`/teams/${teamId}`, data),
   });
 
-  const handleSubmit = async data => {
-    mutate(data, {
+  const handleConfirm = async () => {
+    mutate(null, {
       onSuccess: async () => {
-        setValue('teams', Date.now());
+        touch('teams');
         onSave?.();
         onClose?.();
       },
@@ -31,17 +30,15 @@ export function TeamDeleteForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <p>
-        <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
-      </p>
-      <FormButtons flex>
-        <SubmitButton variant="danger" disabled={isPending}>
-          {formatMessage(labels.delete)}
-        </SubmitButton>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
-      </FormButtons>
-    </Form>
+    <TypeConfirmationForm
+      confirmationValue={CONFIRM_VALUE}
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      isLoading={isPending}
+      error={error}
+      buttonLabel={formatMessage(labels.delete)}
+      buttonVariant="danger"
+    />
   );
 }
 

src/app/(main)/settings/teams/TeamJoinForm.tsx

@@ -8,8 +8,7 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { setValue } from 'store/cache';
 
 export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {

src/app/(main)/settings/teams/TeamLeaveButton.tsx

@@ -1,7 +1,5 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useLocale } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLocale, useLogin } from 'components/hooks';
 import TeamDeleteForm from './TeamLeaveForm';
 
 export function TeamLeaveButton({
@@ -15,7 +13,7 @@ export function TeamLeaveButton({
 }) {
   const { formatMessage, labels } = useMessages();
   const { dir } = useLocale();
-  const { user } = useUser();
+  const { user } = useLogin();
 
   return (
     <ModalTrigger>
@@ -26,7 +24,7 @@ export function TeamLeaveButton({
         <Text>{formatMessage(labels.leave)}</Text>
       </Button>
       <Modal title={formatMessage(labels.leaveTeam)}>
-        {close => (
+        {(close: () => void) => (
           <TeamDeleteForm
             teamId={teamId}
             userId={user.id}

src/app/(main)/settings/teams/TeamLeaveForm.tsx

@@ -1,7 +1,6 @@
-import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import { setValue } from 'store/cache';
+import { useApi, useMessages } from 'components/hooks';
+import { touch } from 'store/cache';
+import ConfirmationForm from 'components/common/ConfirmationForm';
 
 export function TeamLeaveForm({
   teamId,
@@ -22,10 +21,10 @@ export function TeamLeaveForm({
     mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
   });
 
-  const handleSubmit = async () => {
+  const handleConfirm = async () => {
     mutate(null, {
       onSuccess: async () => {
-        setValue('team:members', Date.now());
+        touch('team:members');
         onSave();
         onClose();
       },
@@ -33,17 +32,16 @@ export function TeamLeaveForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <p>
+    <ConfirmationForm
+      buttonLabel={formatMessage(labels.leave)}
+      message={
         <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
-      </p>
-      <FormButtons flex>
-        <SubmitButton variant="danger" disabled={isPending}>
-          {formatMessage(labels.leave)}
-        </SubmitButton>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
-      </FormButtons>
-    </Form>
+      }
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      isLoading={isPending}
+      error={error}
+    />
   );
 }
 

src/app/(main)/settings/teams/TeamsDataTable.tsx

@@ -1,8 +1,7 @@
 'use client';
 import DataTable from 'components/common/DataTable';
 import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
-import { useApi } from 'components/hooks';
-import { useFilterQuery } from 'components/hooks';
+import { useApi, useFilterQuery } from 'components/hooks';
 import useCache from 'store/cache';
 
 export function TeamsDataTable() {

src/app/(main)/settings/teams/TeamsHeader.tsx

@@ -2,14 +2,13 @@
 import { Flexbox } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
-import { useUser } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useLogin, useMessages } from 'components/hooks';
 import TeamsJoinButton from './TeamsJoinButton';
 import TeamsAddButton from './TeamsAddButton';
 
 export function TeamsHeader({ allowCreate = true }: { allowCreate?: boolean }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
 
   return (
     <PageHeader title={formatMessage(labels.teams)}>

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -1,13 +1,12 @@
 'use client';
 import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
 import Link from 'next/link';
-import { useMessages } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLogin } from 'components/hooks';
 import { ROLES } from 'lib/constants';
 
 export function TeamsTable({ data = [] }: { data: any[] }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
   const breakpoint = useBreakpoint();
 
   return (

src/app/(main)/settings/teams/[id]/TeamData.tsx

@@ -2,11 +2,9 @@ import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import TeamDeleteForm from '../TeamDeleteForm';
 
-export function TeamData({ teamId }: { teamId: string; onSave?: (value: string) => void }) {
+export function TeamData({ teamId }: { teamId: string }) {
   const { formatMessage, labels, messages } = useMessages();
 
-  const handleSave = () => {};
-
   return (
     <ActionForm
       label={formatMessage(labels.deleteTeam)}
@@ -15,9 +13,7 @@ export function TeamData({ teamId }: { teamId: string; onSave?: (value: string)
       <ModalTrigger>
         <Button variant="danger">{formatMessage(labels.delete)}</Button>
         <Modal title={formatMessage(labels.deleteTeam)}>
-          {(close: () => void) => (
-            <TeamDeleteForm teamId={teamId} teamName={''} onSave={handleSave} onClose={close} />
-          )}
+          {(close: () => void) => <TeamDeleteForm teamId={teamId} onClose={close} />}
         </Modal>
       </ModalTrigger>
     </ActionForm>

src/app/(main)/settings/teams/[id]/TeamEditForm.tsx

@@ -7,28 +7,37 @@ import {
   TextField,
   Button,
   Flexbox,
+  useToasts,
 } from 'react-basics';
 import { getRandomChars } from 'next-basics';
 import { useRef, useState } from 'react';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 
 const generateId = () => getRandomChars(16);
 
-export function TeamEditForm({ teamId, data, onSave, readOnly }) {
-  const { formatMessage, labels } = useMessages();
+export function TeamEditForm({
+  teamId,
+  data,
+  readOnly,
+}: {
+  teamId: string;
+  data?: { name: string; accessCode: string };
+  readOnly?: boolean;
+}) {
+  const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation({
     mutationFn: (data: any) => post(`/teams/${teamId}`, data),
   });
   const ref = useRef(null);
   const [accessCode, setAccessCode] = useState(data.accessCode);
+  const { showToast } = useToasts();
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
         ref.current.reset(data);
-        onSave?.(data);
+        showToast({ message: formatMessage(messages.saved), variant: 'success' });
       },
     });
   };

src/app/(main)/settings/teams/[id]/TeamMemberRemoveButton.tsx

@@ -1,5 +1,4 @@
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 import { setValue } from 'store/cache';
 

src/app/(main)/settings/teams/[id]/TeamMembers.tsx

@@ -1,5 +1,4 @@
-import { useApi } from 'components/hooks';
-import { useFilterQuery } from 'components/hooks';
+import { useApi, useFilterQuery } from 'components/hooks';
 import DataTable from 'components/common/DataTable';
 import useCache from 'store/cache';
 import TeamMembersTable from './TeamMembersTable';

src/app/(main)/settings/teams/[id]/TeamMembersTable.tsx

@@ -1,6 +1,5 @@
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLogin } from 'components/hooks';
 import { ROLES } from 'lib/constants';
 import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 
@@ -14,7 +13,7 @@ export function TeamMembersTable({
   readOnly: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
   const breakpoint = useBreakpoint();
 
   const roles = {

src/app/(main)/settings/teams/[id]/TeamSettings.tsx

@@ -1,66 +1,49 @@
 'use client';
-import { useEffect, useState } from 'react';
-import { Item, Loading, Tabs, useToasts, Flexbox } from 'react-basics';
+import { useState } from 'react';
+import { Item, Loading, Tabs, Flexbox } from 'react-basics';
+import TeamsContext from 'app/(main)/teams/TeamsContext';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
-import { useUser } from 'components/hooks';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useLogin, useTeam, useMessages } from 'components/hooks';
 import TeamEditForm from './TeamEditForm';
 import TeamMembers from './TeamMembers';
 import TeamWebsites from './TeamWebsites';
 import TeamData from './TeamData';
 
 export function TeamSettings({ teamId }: { teamId: string }) {
-  const { formatMessage, labels, messages } = useMessages();
-  const { user } = useUser();
-  const [values, setValues] = useState(null);
+  const { formatMessage, labels } = useMessages();
+  const { user } = useLogin();
+  const { data: team, isLoading } = useTeam(teamId);
   const [tab, setTab] = useState('details');
-  const { get, useQuery } = useApi();
-  const { showToast } = useToasts();
-  const { data, isLoading } = useQuery({
-    queryKey: ['team', teamId],
-    queryFn: () => {
-      if (teamId) {
-        return get(`/teams/${teamId}`);
+
+  if (isLoading) {
+    return <Loading position="page" />;
   }
-    },
-  });
-  const canEdit = data?.teamUser?.find(
+
+  const canEdit = team?.teamUser?.find(
     ({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
   );
 
-  const handleSave = data => {
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
-    setValues(state => ({ ...state, ...data }));
-  };
-
-  useEffect(() => {
-    if (data) {
-      setValues(data);
-    }
-  }, [data]);
-
-  if (isLoading || !values) {
-    return <Loading />;
-  }
-
   return (
+    <TeamsContext.Provider value={team}>
       <Flexbox direction="column">
-      <PageHeader title={values?.name} />
-      <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
+        <PageHeader title={team?.name} />
+        <Tabs
+          selectedKey={tab}
+          onSelect={(value: any) => setTab(value)}
+          style={{ marginBottom: 30 }}
+        >
           <Item key="details">{formatMessage(labels.details)}</Item>
           <Item key="members">{formatMessage(labels.members)}</Item>
           <Item key="websites">{formatMessage(labels.websites)}</Item>
           <Item key="data">{formatMessage(labels.data)}</Item>
         </Tabs>
-      {tab === 'details' && (
-        <TeamEditForm teamId={teamId} data={values} onSave={handleSave} readOnly={!canEdit} />
-      )}
+        {tab === 'details' && <TeamEditForm teamId={teamId} data={team} readOnly={!canEdit} />}
         {tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
         {tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
         {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
       </Flexbox>
+    </TeamsContext.Provider>
   );
 }
 

src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.tsx

@@ -1,5 +1,4 @@
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 
 export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {

src/app/(main)/settings/users/UserAddForm.tsx

@@ -10,9 +10,8 @@ import {
   SubmitButton,
   Button,
 } from 'react-basics';
-import { useApi } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { ROLES } from 'lib/constants';
-import { useMessages } from 'components/hooks';
 
 export function UserAddForm({ onSave, onClose }) {
   const { post, useMutation } = useApi();

src/app/(main)/settings/users/UserDeleteButton.tsx

@@ -1,6 +1,5 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLogin } from 'components/hooks';
 import UserDeleteForm from './UserDeleteForm';
 
 export function UserDeleteButton({
@@ -13,11 +12,11 @@ export function UserDeleteButton({
   onDelete?: () => void;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
 
   return (
     <ModalTrigger disabled={userId === user?.id}>
-      <Button disabled={userId === user?.id}>
+      <Button disabled={userId === user?.id} variant="quiet">
         <Icon>
           <Icons.Trash />
         </Icon>

src/app/(main)/settings/users/UserDeleteForm.tsx

@@ -1,35 +1,33 @@
-import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
+import ConfirmationForm from 'components/common/ConfirmationForm';
+import { touch } from 'store/cache';
 
 export function UserDeleteForm({ userId, username, onSave, onClose }) {
-  const { formatMessage, FormattedMessage, labels, messages } = useMessages();
+  const { FormattedMessage, messages, labels, formatMessage } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
 
-  const handleSubmit = async (data: any) => {
-    mutate(data, {
+  const handleConfirm = async () => {
+    mutate(null, {
       onSuccess: async () => {
-        onSave();
-        onClose();
+        touch('users');
+        onSave?.();
+        onClose?.();
       },
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <p>
+    <ConfirmationForm
+      message={
         <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{username}</b> }} />
-      </p>
-      <FormButtons flex>
-        <SubmitButton variant="danger" disabled={isPending}>
-          {formatMessage(labels.delete)}
-        </SubmitButton>
-        <Button disabled={isPending} onClick={onClose}>
-          {formatMessage(labels.cancel)}
-        </Button>
-      </FormButtons>
-    </Form>
+      }
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      buttonLabel={formatMessage(labels.delete)}
+      isLoading={isPending}
+      error={error}
+    />
   );
 }
 

src/app/(main)/settings/users/UserEditForm.tsx

@@ -9,9 +9,8 @@ import {
   SubmitButton,
   PasswordField,
 } from 'react-basics';
-import { useApi } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { ROLES } from 'lib/constants';
-import { useMessages } from 'components/hooks';
 
 export function UserEditForm({
   userId,
@@ -19,8 +18,8 @@ export function UserEditForm({
   onSave,
 }: {
   userId: string;
-  data: any[];
-  onSave: (data: any) => void;
+  data: object;
+  onSave?: (data: any) => void;
 }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
@@ -44,7 +43,7 @@ export function UserEditForm({
     });
   };
 
-  const renderValue = value => {
+  const renderValue = (value: string) => {
     if (value === ROLES.user) {
       return formatMessage(labels.user);
     }

src/app/(main)/settings/users/UserWebsites.tsx

@@ -1,28 +0,0 @@
-import Page from 'components/layout/Page';
-import { useApi } from 'components/hooks';
-import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
-import { useFilterQuery } from 'components/hooks';
-import DataTable from 'components/common/DataTable';
-
-export function UserWebsites({ userId }) {
-  const { get } = useApi();
-  const queryResult = useFilterQuery({
-    queryKey: ['user:websites', userId],
-    queryFn: (params: any) => get(`/users/${userId}/websites`, params),
-  });
-  const hasData = queryResult.result && queryResult.result.data.length !== 0;
-
-  return (
-    <Page isLoading={queryResult.query.isLoading} error={queryResult.query.error}>
-      {hasData && (
-        <DataTable queryResult={queryResult}>
-          {({ data }) => (
-            <WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
-          )}
-        </DataTable>
-      )}
-    </Page>
-  );
-}
-
-export default UserWebsites;

src/app/(main)/settings/users/UsersDataTable.tsx

@@ -1,17 +1,10 @@
 'use client';
-import { useApi } from 'components/hooks';
-import { useFilterQuery } from 'components/hooks';
 import DataTable from 'components/common/DataTable';
 import UsersTable from './UsersTable';
-import useCache from 'store/cache';
+import useUsers from 'components/hooks/queries/useUsers';
 
-export function UsersDataTable({ showActions }: { showActions: boolean }) {
-  const { get } = useApi();
-  const modified = useCache((state: any) => state?.users);
-  const queryResult = useFilterQuery({
-    queryKey: ['users', { modified }],
-    queryFn: (params: { [key: string]: any }) => get(`/admin/users`, params),
-  });
+export function UsersDataTable({ showActions }: { showActions?: boolean }) {
+  const queryResult = useUsers();
 
   return (
     <DataTable queryResult={queryResult}>

src/app/(main)/settings/users/UsersTable.tsx

@@ -2,8 +2,7 @@ import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { ROLES } from 'lib/constants';
-import { useMessages } from 'components/hooks';
-import { useLocale } from 'components/hooks';
+import { useMessages, useLocale } from 'components/hooks';
 import UserDeleteButton from './UserDeleteButton';
 
 export function UsersTable({
@@ -35,12 +34,16 @@ export function UsersTable({
           })
         }
       </GridColumn>
+      <GridColumn name="websites" label={formatMessage(labels.websites)} width={'120px'}>
+        {row => row._count.website}
+      </GridColumn>
       {showActions && (
         <GridColumn name="action" label=" " alignment="end">
           {row => {
             const { id, username } = row;
             return (
               <>
+                <UserDeleteButton userId={id} username={username} />
                 <Link href={`/settings/users/${id}`}>
                   <Button>
                     <Icon>
@@ -49,7 +52,6 @@ export function UsersTable({
                     <Text>{formatMessage(labels.edit)}</Text>
                   </Button>
                 </Link>
-                <UserDeleteButton userId={id} username={username} />
               </>
             );
           }}

src/app/(main)/settings/users/[id]/UserSettings.tsx

@@ -1,58 +1,28 @@
 'use client';
-import { Key, useEffect, useState } from 'react';
-import { Item, Loading, Tabs, useToasts } from 'react-basics';
+import { Key, useState } from 'react';
+import { Item, Loading, Tabs } from 'react-basics';
 import UserEditForm from '../UserEditForm';
 import PageHeader from 'components/layout/PageHeader';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import UserWebsites from '../UserWebsites';
+import { useMessages, useUser } from 'components/hooks';
+import UserWebsites from './UserWebsites';
 
-export function UserSettings({ userId }) {
-  const { formatMessage, labels, messages } = useMessages();
-  const [edit, setEdit] = useState(false);
-  const [values, setValues] = useState(null);
+export function UserSettings({ userId }: { userId: string }) {
+  const { formatMessage, labels } = useMessages();
   const [tab, setTab] = useState<Key>('details');
-  const { get, useQuery } = useApi();
-  const { showToast } = useToasts();
-  const { data, isLoading } = useQuery({
-    queryKey: ['user', userId],
-    queryFn: () => {
-      if (userId) {
-        return get(`/users/${userId}`);
-      }
-    },
-    gcTime: 0,
-  });
+  const { data: user, isLoading } = useUser(userId, { gcTime: 0 });
 
-  const handleSave = (data: any) => {
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
-    if (data) {
-      setValues(state => ({ ...state, ...data }));
-    }
-
-    if (edit) {
-      setEdit(false);
-    }
-  };
-
-  useEffect(() => {
-    if (data) {
-      setValues(data);
-    }
-  }, [data]);
-
-  if (isLoading || !values) {
+  if (isLoading) {
     return <Loading />;
   }
 
   return (
     <>
-      <PageHeader title={values?.username} />
+      <PageHeader title={user?.username} />
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
         <Item key="details">{formatMessage(labels.details)}</Item>
         <Item key="websites">{formatMessage(labels.websites)}</Item>
       </Tabs>
-      {tab === 'details' && <UserEditForm userId={userId} data={values} onSave={handleSave} />}
+      {tab === 'details' && <UserEditForm userId={userId} data={user} />}
       {tab === 'websites' && <UserWebsites userId={userId} />}
     </>
   );

src/app/(main)/settings/users/[id]/UserWebsites.tsx

@@ -0,0 +1,18 @@
+'use client';
+import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
+import DataTable from 'components/common/DataTable';
+import { useWebsites } from 'components/hooks';
+
+export function UserWebsites({ userId }) {
+  const queryResult = useWebsites({ userId });
+
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => (
+        <WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
+      )}
+    </DataTable>
+  );
+}
+
+export default UserWebsites;

src/app/(main)/settings/websites/WebsiteSettings.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useContext, useEffect, useState, Key } from 'react';
+import { useState, Key } from 'react';
 import { Item, Tabs, useToasts, Button, Text, Icon, Icons, Loading } from 'react-basics';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
@@ -8,56 +8,42 @@ import WebsiteEditForm from './[id]/WebsiteEditForm';
 import WebsiteData from './[id]/WebsiteData';
 import TrackingCode from './[id]/TrackingCode';
 import ShareUrl from './[id]/ShareUrl';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import SettingsContext from '../SettingsContext';
+import { useWebsite, useMessages } from 'components/hooks';
+import { touch } from 'store/cache';
 
 export function WebsiteSettings({ websiteId, openExternal = false }) {
   const router = useRouter();
   const { formatMessage, labels, messages } = useMessages();
-  const { get, useQuery } = useApi();
   const { showToast } = useToasts();
-  const { websitesUrl, websitesPath, settingsPath } = useContext(SettingsContext);
-  const { data, isLoading } = useQuery({
-    queryKey: ['website', websiteId],
-    queryFn: () => get(`${websitesUrl}/${websiteId}`),
-    enabled: !!websiteId,
-    gcTime: 0,
-  });
-  const [values, setValues] = useState(null);
+
+  const { data: website, isLoading } = useWebsite(websiteId, { gcTime: 0 });
   const [tab, setTab] = useState<Key>('details');
 
   const showSuccess = () => {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
   };
 
-  const handleSave = (data: any) => {
+  const handleSave = () => {
     showSuccess();
-    setValues((state: any) => ({ ...state, ...data }));
+    touch('websites');
   };
 
   const handleReset = async (value: string) => {
     if (value === 'delete') {
-      router.push(settingsPath);
+      router.push('/settings/websites');
     } else if (value === 'reset') {
       showSuccess();
     }
   };
 
-  useEffect(() => {
-    if (data) {
-      setValues(data);
-    }
-  }, [data]);
-
-  if (isLoading || !values) {
+  if (isLoading) {
     return <Loading position="page" />;
   }
 
   return (
     <>
-      <PageHeader title={values?.name}>
-        <Link href={`${websitesPath}/${websiteId}`} target={openExternal ? '_blank' : null}>
+      <PageHeader title={website?.name}>
+        <Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
           <Button variant="primary">
             <Icon>
               <Icons.External />
@@ -73,10 +59,10 @@ export function WebsiteSettings({ websiteId, openExternal = false }) {
         <Item key="data">{formatMessage(labels.data)}</Item>
       </Tabs>
       {tab === 'details' && (
-        <WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
+        <WebsiteEditForm websiteId={websiteId} data={website} onSave={handleSave} />
       )}
       {tab === 'tracking' && <TrackingCode websiteId={websiteId} />}
-      {tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
+      {tab === 'share' && <ShareUrl websiteId={websiteId} data={website} onSave={handleSave} />}
       {tab === 'data' && <WebsiteData websiteId={websiteId} onSave={handleReset} />}
     </>
   );

src/app/(main)/settings/websites/Websites.tsx

@@ -1,10 +1,10 @@
 'use client';
-import { useUser } from 'components/hooks';
+import { useLogin } from 'components/hooks';
 import WebsitesDataTable from './WebsitesDataTable';
 import WebsitesHeader from './WebsitesHeader';
 
 export default function Websites() {
-  const { user } = useUser();
+  const { user } = useLogin();
   return (
     <>
       <WebsitesHeader showActions={user.role !== 'view-only'} />

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -1,8 +1,7 @@
 import { ReactNode } from 'react';
 import Link from 'next/link';
 import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useMessages, useLogin } from 'components/hooks';
 
 export interface WebsitesTableProps {
   data: any[];
@@ -22,7 +21,7 @@ export function WebsitesTable({
   children,
 }: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
   const breakpoint = useBreakpoint();
 
   return (
@@ -32,13 +31,12 @@ export function WebsitesTable({
       {showActions && (
         <GridColumn name="action" label=" " alignment="end">
           {row => {
-            const { id } = row;
-            const isOwner = row.userId === user.id || row.teamId === teamId;
+            const { id, userId } = row;
 
             return (
               <>
-                {allowEdit && isOwner && (
-                  <Link href={`/settings/${id}`}>
+                {allowEdit && !teamId && user.id === userId && (
+                  <Link href={`/settings/websites/${id}`}>
                     <Button>
                       <Icon>
                         <Icons.Edit />

src/app/(main)/settings/websites/[id]/ShareUrl.tsx

@@ -10,21 +10,20 @@ import {
 } from 'react-basics';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { getRandomChars } from 'next-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import SettingsContext from '../../SettingsContext';
 
 const generateId = () => getRandomChars(16);
 
 export function ShareUrl({ websiteId, data, onSave }) {
   const ref = useRef(null);
-  const { shareUrl, websitesUrl } = useContext(SettingsContext);
+  const { shareUrl } = useContext(SettingsContext);
   const { formatMessage, labels, messages } = useMessages();
   const { name, shareId } = data;
   const [id, setId] = useState(shareId);
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation({
-    mutationFn: (data: any) => post(`${websitesUrl}/${websiteId}`, data),
+    mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
   });
   const url = useMemo(
     () => `${shareUrl}${process.env.basePath}/share/${id}/${encodeURIComponent(name)}`,

src/app/(main)/settings/websites/[id]/TrackingCode.tsx

@@ -1,6 +1,5 @@
 import { TextArea } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useConfig } from 'components/hooks';
+import { useMessages, useConfig } from 'components/hooks';
 import { useContext } from 'react';
 import SettingsContext from '../../SettingsContext';
 

src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx

@@ -1,16 +1,7 @@
-import {
-  Button,
-  Form,
-  FormRow,
-  FormButtons,
-  FormInput,
-  SubmitButton,
-  TextField,
-} from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
 import { useContext } from 'react';
 import SettingsContext from '../../SettingsContext';
+import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
 
 const CONFIRM_VALUE = 'DELETE';
 
@@ -23,40 +14,32 @@ export function WebsiteDeleteForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { formatMessage, labels } = useMessages();
   const { websitesUrl } = useContext(SettingsContext);
   const { del, useMutation } = useApi();
-  const { mutate, error } = useMutation({
+  const { mutate, isPending, error } = useMutation({
     mutationFn: (data: any) => del(`${websitesUrl}/${websiteId}`, data),
   });
 
-  const handleSubmit = async (data: any) => {
-    mutate(data, {
+  const handleConfirm = async () => {
+    mutate(null, {
       onSuccess: async () => {
-        onSave();
-        onClose();
+        onSave?.();
+        onClose?.();
       },
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <p>
-        <FormattedMessage
-          {...messages.actionConfirmation}
-          values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
+    <TypeConfirmationForm
+      confirmationValue={CONFIRM_VALUE}
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      isLoading={isPending}
+      error={error}
+      buttonLabel={formatMessage(labels.delete)}
+      buttonVariant="danger"
     />
-      </p>
-      <FormRow label={formatMessage(labels.confirm)}>
-        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
-      <FormButtons flex>
-        <SubmitButton variant="danger">{formatMessage(labels.delete)}</SubmitButton>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
-      </FormButtons>
-    </Form>
   );
 }
 

src/app/(main)/settings/websites/[id]/WebsiteResetForm.tsx

@@ -1,16 +1,5 @@
-import {
-  Button,
-  Form,
-  FormRow,
-  FormButtons,
-  FormInput,
-  SubmitButton,
-  TextField,
-} from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import { useContext } from 'react';
-import SettingsContext from '../../SettingsContext';
+import { useApi, useMessages } from 'components/hooks';
+import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
 
 const CONFIRM_VALUE = 'RESET';
 
@@ -23,40 +12,30 @@ export function WebsiteResetForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
-  const { websitesUrl } = useContext(SettingsContext);
+  const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error } = useMutation({
-    mutationFn: (data: any) => post(`${websitesUrl}/${websiteId}/reset`, data),
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: (data: any) => post(`/websites/${websiteId}/reset`, data),
   });
 
-  const handleSubmit = async (data: any) => {
-    mutate(data, {
+  const handleConfirm = async () => {
+    mutate(null, {
       onSuccess: async () => {
-        onSave();
-        onClose();
+        onSave?.();
+        onClose?.();
       },
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <p>
-        <FormattedMessage
-          {...messages.actionConfirmation}
-          values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
+    <TypeConfirmationForm
+      confirmationValue={CONFIRM_VALUE}
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      isLoading={isPending}
+      error={error}
+      buttonLabel={formatMessage(labels.reset)}
     />
-      </p>
-      <FormRow label={formatMessage(labels.confirm)}>
-        <FormInput name="confirm" rules={{ validate: value => value === CONFIRM_VALUE }}>
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
-      <FormButtons flex>
-        <SubmitButton variant="danger">{formatMessage(labels.reset)}</SubmitButton>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
-      </FormButtons>
-    </Form>
   );
 }
 

src/app/(main)/teams/[id]/websites/TeamWebsites.tsx

@@ -1,14 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import TeamsContext from 'app/(main)/teams/TeamsContext';
-import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
-
-export default function TeamWebsites() {
-  const team = useContext(TeamsContext);
-
-  if (!team) {
-    return null;
-  }
-
-  return <WebsitesDataTable teamId={team.id} />;
-}

src/app/(main)/teams/[id]/websites/page.tsx

@@ -1,11 +1,11 @@
-import TeamWebsites from './TeamWebsites';
+import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
 import WebsitesHeader from 'app/(main)/settings/websites/WebsitesHeader';
 
 export default function TeamWebsitesPage({ params: { id } }: { params: { id: string } }) {
   return (
     <>
       <WebsitesHeader teamId={id} />
-      <TeamWebsites />
+      <WebsitesDataTable teamId={id} />
     </>
   );
 }

src/app/(main)/websites/WebsitesBrowse.tsx

@@ -1,9 +1,9 @@
 'use client';
 import WebsitesDataTable from '../settings/websites/WebsitesDataTable';
-import { useUser } from 'components/hooks';
+import { useLogin } from 'components/hooks';
 
 export function WebsitesBrowse() {
-  const { user } = useUser();
+  const { user } = useLogin();
   const allowEdit = !process.env.cloudMode;
 
   return <WebsitesDataTable userId={user.id} allowEdit={allowEdit} />;

src/components/common/ConfirmDeleteForm.tsx

@@ -1,35 +0,0 @@
-import { useState } from 'react';
-import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
-import { useMessages } from 'components/hooks';
-
-export interface ConfirmDeleteFormProps {
-  name: string;
-  onConfirm?: () => void;
-  onClose?: () => void;
-}
-
-export function ConfirmDeleteForm({ name, onConfirm, onClose }: ConfirmDeleteFormProps) {
-  const [loading, setLoading] = useState(false);
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
-
-  const handleConfirm = () => {
-    setLoading(true);
-    onConfirm();
-  };
-
-  return (
-    <Form>
-      <p>
-        <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{name}</b> }} />
-      </p>
-      <FormButtons flex>
-        <LoadingButton isLoading={loading} onClick={handleConfirm} variant="danger">
-          {formatMessage(labels.delete)}
-        </LoadingButton>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
-      </FormButtons>
-    </Form>
-  );
-}
-
-export default ConfirmDeleteForm;

src/components/common/ConfirmationForm.tsx

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
+import { useMessages } from 'components/hooks';
+
+export interface ConfirmationFormProps {
+  message: ReactNode;
+  buttonLabel?: ReactNode;
+  buttonVariant?: 'none' | 'primary' | 'secondary' | 'quiet' | 'danger';
+  isLoading?: boolean;
+  error?: string | Error;
+  onConfirm?: () => void;
+  onClose?: () => void;
+}
+
+export function ConfirmationForm({
+  message,
+  buttonLabel,
+  buttonVariant,
+  isLoading,
+  error,
+  onConfirm,
+  onClose,
+}: ConfirmationFormProps) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Form error={error}>
+      <p>{message}</p>
+      <FormButtons flex>
+        <LoadingButton isLoading={isLoading} onClick={onConfirm} variant={buttonVariant}>
+          {buttonLabel || formatMessage(labels.ok)}
+        </LoadingButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default ConfirmationForm;

src/components/common/TypeConfirmationForm.tsx

@@ -0,0 +1,58 @@
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormRow,
+  FormInput,
+  TextField,
+  SubmitButton,
+} from 'react-basics';
+import { useMessages } from 'components/hooks';
+
+export function TypeConfirmationForm({
+  confirmationValue,
+  buttonLabel,
+  buttonVariant,
+  isLoading,
+  error,
+  onConfirm,
+  onClose,
+}: {
+  confirmationValue: string;
+  buttonLabel?: string;
+  buttonVariant?: 'none' | 'primary' | 'secondary' | 'quiet' | 'danger';
+  isLoading?: boolean;
+  error?: string | Error;
+  onConfirm?: () => void;
+  onClose?: () => void;
+}) {
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+
+  if (!confirmationValue) {
+    return null;
+  }
+
+  return (
+    <Form onSubmit={onConfirm} error={error}>
+      <p>
+        <FormattedMessage
+          {...messages.actionConfirmation}
+          values={{ confirmation: <b>{confirmationValue}</b> }}
+        />
+      </p>
+      <FormRow label={formatMessage(labels.confirm)}>
+        <FormInput name="confirm" rules={{ validate: value => value === confirmationValue }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton isLoading={isLoading} variant={buttonVariant}>
+          {buttonLabel || formatMessage(labels.ok)}
+        </SubmitButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default TypeConfirmationForm;

src/components/hooks/index.js

@@ -8,7 +8,9 @@ export * from './queries/useShareToken';
 export * from './queries/useTeam';
 export * from './queries/useTeamWebsites';
 export * from './queries/useUser';
+export * from './queries/useUsers';
 export * from './queries/useWebsite';
+export * from './queries/useWebsites';
 export * from './useCountryNames';
 export * from './useDateRange';
 export * from './useDocumentClick';

src/components/hooks/queries/useLogin.ts

@@ -1,9 +1,11 @@
+import useStore, { setUser } from 'store/app';
 import useApi from './useApi';
-import useUser from './useUser';
+
+const selector = (state: { user: any }) => state.user;
 
 export function useLogin() {
   const { get, useQuery } = useApi();
-  const { user, setUser } = useUser();
+  const user = useStore(selector);
 
   const query = useQuery({
     queryKey: ['login'],
@@ -14,6 +16,7 @@ export function useLogin() {
 
       return data;
     },
+    enabled: !user,
   });
 
   return { user, ...query };

src/components/hooks/queries/useUser.ts

@@ -1,11 +1,13 @@
-import useStore, { setUser } from 'store/app';
+import useApi from './useApi';
 
-const selector = (state: { user: any }) => state.user;
-
-export function useUser() {
-  const user = useStore(selector);
-
-  return { user, setUser };
+export function useUser(userId: string, options?: { [key: string]: any }) {
+  const { get, useQuery } = useApi();
+  return useQuery({
+    queryKey: ['users', userId],
+    queryFn: () => get(`/users/${userId}`),
+    enabled: !!userId,
+    ...options,
+  });
 }
 
 export default useUser;

src/components/hooks/queries/useUsers.ts

@@ -0,0 +1,19 @@
+import useApi from './useApi';
+import useFilterQuery from './useFilterQuery';
+import useCache from 'store/cache';
+
+export function useUsers() {
+  const { get } = useApi();
+  const modified = useCache((state: any) => state?.users);
+
+  return useFilterQuery({
+    queryKey: ['users', { modified }],
+    queryFn: (params: any) => {
+      return get('/admin/users', {
+        ...params,
+      });
+    },
+  });
+}
+
+export default useUsers;

src/components/hooks/queries/useWebsite.ts

@@ -1,11 +1,12 @@
 import useApi from './useApi';
 
-export function useWebsite(websiteId: string) {
+export function useWebsite(websiteId: string, options?: { [key: string]: any }) {
   const { get, useQuery } = useApi();
   return useQuery({
     queryKey: ['websites', websiteId],
     queryFn: () => get(`/websites/${websiteId}`),
     enabled: !!websiteId,
+    ...options,
   });
 }
 

src/components/hooks/queries/useWebsites.ts

@@ -9,7 +9,7 @@ export function useWebsites({ userId, teamId }: { userId?: string; teamId?: stri
   return useFilterQuery({
     queryKey: ['websites', { userId, teamId, modified }],
     queryFn: (params: any) => {
-      return get(teamId ? `/teams/${teamId}/websites` : '/websites', {
+      return get(teamId ? `/teams/${teamId}/websites` : `/users/${userId}/websites`, {
         ...params,
       });
     },

src/components/hooks/useDateRange.ts

@@ -4,8 +4,8 @@ import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
 import websiteStore, { setWebsiteDateRange } from 'store/websites';
 import appStore, { setDateRange } from 'store/app';
 import { DateRange } from 'lib/types';
-import useLocale from './useLocale';
-import { useApi } from 'components/hooks';
+import { useLocale } from './useLocale';
+import { useApi } from './queries/useApi';
 
 export function useDateRange(websiteId?: string) {
   const { get } = useApi();

src/components/input/ProfileButton.tsx

@@ -2,14 +2,14 @@ import { Icon, Button, PopupTrigger, Popup, Menu, Item, Text } from 'react-basic
 import { useRouter } from 'next/navigation';
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';
-import { useUser } from 'components/hooks';
+import { useLogin } from 'components/hooks';
 import { useLocale } from 'components/hooks';
 import { CURRENT_VERSION } from 'lib/constants';
 import styles from './ProfileButton.module.css';
 
 export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
-  const { user } = useUser();
+  const { user } = useLogin();
   const router = useRouter();
   const { dir } = useLocale();
   const cloudMode = Boolean(process.env.cloudMode);

src/components/messages.ts

@@ -1,6 +1,7 @@
 import { defineMessages } from 'react-intl';
 
 export const labels = defineMessages({
+  ok: { id: 'label.ok', defaultMessage: 'OK' },
   unknown: { id: 'label.unknown', defaultMessage: 'Unknown' },
   required: { id: 'label.required', defaultMessage: 'Required' },
   save: { id: 'label.save', defaultMessage: 'Save' },
@@ -50,6 +51,7 @@ export const labels = defineMessages({
   websiteId: { id: 'label.website-id', defaultMessage: 'Website ID' },
   resetWebsite: { id: 'label.reset-website', defaultMessage: 'Reset website' },
   deleteWebsite: { id: 'label.delete-website', defaultMessage: 'Delete website' },
+  deleteReport: { id: 'label.delete-report', defaultMessage: 'Delete report' },
   reset: { id: 'label.reset', defaultMessage: 'Reset' },
   addWebsite: { id: 'label.add-website', defaultMessage: 'Add website' },
   addMember: { id: 'label.add-member', defaultMessage: 'Add member' },

src/index.ts

@@ -50,7 +50,7 @@ export * from 'app/(main)/settings/websites/WebsitesTable';
 
 export * from 'app/(main)/settings/SettingsContext';
 
-export * from 'components/common/ConfirmDeleteForm';
+export * from 'components/common/TypeConfirmationForm';
 export * from 'components/common/DataTable';
 export * from 'components/common/Empty';
 export * from 'components/common/ErrorBoundary';

src/pages/api/admin/users.ts

@@ -44,7 +44,20 @@ export default async (
 
     const { page, query, pageSize } = req.query;
 
-    const users = await getUsers({ page, query, pageSize: +pageSize || undefined });
+    const users = await getUsers(
+      { page, query, pageSize: +pageSize || undefined },
+      {
+        include: {
+          _count: {
+            select: {
+              website: {
+                where: { deletedAt: null },
+              },
+            },
+          },
+        },
+      },
+    );
 
     return ok(res, users);
   }

src/queries/admin/user.ts

@@ -84,7 +84,7 @@ export async function getUsers(
       ...pageFilters,
       ...(options?.include && { include: options.include }),
     })
-    .then(a => {
+    .then((a: { [x: string]: any; password: any }[]) => {
       return a.map(({ password, ...rest }) => rest);
     });
 
@@ -163,7 +163,7 @@ export async function deleteUser(
     User,
   ]
 > {
-  const { client } = prisma;
+  const { client, transaction } = prisma;
   const cloudMode = process.env.CLOUD_MODE;
 
   const websites = await client.website.findMany({
@@ -190,7 +190,7 @@ export async function deleteUser(
   const teamIds = teams.map(a => a.id);
 
   if (cloudMode) {
-    return client.transaction([
+    return transaction([
       client.website.updateMany({
         data: {
           deletedAt: new Date(),
@@ -209,8 +209,7 @@ export async function deleteUser(
     ]);
   }
 
-  return client
-    .transaction([
+  return transaction([
     client.eventData.deleteMany({
       where: { websiteId: { in: websiteIds } },
     }),
@@ -263,8 +262,7 @@ export async function deleteUser(
         id: userId,
       },
     }),
-    ])
-    .then(async (data: any) => {
+  ]).then(async (data: any) => {
     if (cache.enabled) {
       const ids = websites.map(a => a.id);
 

src/store/cache.ts

@@ -2,8 +2,12 @@ import { create } from 'zustand';
 
 const store = create(() => ({}));
 
-export function setValue(key, value) {
+export function setValue(key: string, value: any) {
   store.setState({ [key]: value });
 }
 
+export function touch(key: string) {
+  setValue(key, Date.now());
+}
+
 export default store;