From 561c031e0f290d7c63e17b6a645e8b145cf2e4d1 Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Mon, 26 Feb 2024 15:04:54 -0500
Subject: [PATCH] feat: data management page

---
 packages/locales/lib/human/en.json            | 25 ++++-
 src/assets/mui/theme.js                       |  7 +-
 src/components/App.jsx                        |  4 +-
 src/components/ClearStorage.jsx               | 27 -----
 src/components/ReactRouter.jsx                | 25 +++--
 src/components/Reset.jsx                      | 10 ++
 .../layout/dialogs/ResetFilters.jsx           | 82 +++++++++-------
 .../layout/general/BasicListButton.jsx        |  6 +-
 src/features/data/components/Notification.jsx | 25 +++++
 src/features/data/components/ResetFilters.jsx | 54 ++++++++++
 src/features/data/components/ResetGeneral.jsx | 98 +++++++++++++++++++
 src/features/data/components/Shared.jsx       | 87 ++++++++++++++++
 src/features/data/components/TopRow.jsx       | 67 +++++++++++++
 src/features/data/hooks/store.js              | 43 ++++++++
 src/features/data/index.jsx                   | 42 ++++++++
 src/hooks/useMemory.js                        |  4 +-
 src/hooks/useRefresh.js                       | 10 +-
 src/hooks/useStorage.js                       |  2 +-
 src/services/functions/resetState.js          | 84 ++++++++++++++++
 19 files changed, 615 insertions(+), 87 deletions(-)
 delete mode 100644 src/components/ClearStorage.jsx
 create mode 100644 src/components/Reset.jsx
 create mode 100644 src/features/data/components/Notification.jsx
 create mode 100644 src/features/data/components/ResetFilters.jsx
 create mode 100644 src/features/data/components/ResetGeneral.jsx
 create mode 100644 src/features/data/components/Shared.jsx
 create mode 100644 src/features/data/components/TopRow.jsx
 create mode 100644 src/features/data/hooks/store.js
 create mode 100644 src/features/data/index.jsx
 create mode 100644 src/services/functions/resetState.js

diff --git a/packages/locales/lib/human/en.json b/packages/locales/lib/human/en.json
index b0092ba98..fad3ed842 100644
--- a/packages/locales/lib/human/en.json
+++ b/packages/locales/lib/human/en.json
@@ -737,5 +737,28 @@
   "filter_help": "Filter Help",
   "kilometers": "Kilometers",
   "miles": "Miles",
-  "distance_unit": "Distance Unit"
+  "distance_unit": "Distance Unit",
+  "data_management": "Data Management",
+  "reset_or_manage_text": "You can either hard reset your filters or you can view the data management page which will allow you to reset individual categories.",
+  "reset_audio": "Reset Audio",
+  "reset_all": "Reset All",
+  "reset_icons": "Reset Icons",
+  "reset_position": "Reset Position",
+  "reset_ui": "Reset UI",
+  "reset_options": "Reset Options",
+  "reset_menus": "Reset Menus",
+  "reset_settings": "Reset Settings",
+  "reset_pokemon": "Reset Pokémon",
+  "reset_pokestops": "Reset PokéStops",
+  "reset_gyms": "Reset Gyms",
+  "reset_nests": "Reset Nests",
+  "reset_portals": "Reset Portals",
+  "reset_routes": "Reset Routes",
+  "reset_scan_areas": "Reset Scan Areas",
+  "reset_scan_cells": "Reset Scan Cells",
+  "reset_devices": "Reset Devices",
+  "reset_weather": "Reset Weather",
+  "reset_s2cells": "Reset S2 Cells",
+  "reset_spawnpoints": "Reset Spawnpoints",
+  "reset_submission_cells": "Reset Submission Cells"
 }
diff --git a/src/assets/mui/theme.js b/src/assets/mui/theme.js
index 543d02959..c56cd60a5 100644
--- a/src/assets/mui/theme.js
+++ b/src/assets/mui/theme.js
@@ -152,8 +152,7 @@ const components = {
  * @returns {import('@mui/material').Theme}
  */
 export default function useCustomTheme() {
-  const primary = useMemory((s) => s.theme.primary)
-  const secondary = useMemory((s) => s.theme.secondary)
+  const { primary, secondary } = useMemory((s) => s.theme)
   const darkMode = useStorage((s) => s.darkMode)
 
   if (darkMode) {
@@ -177,6 +176,10 @@ export default function useCustomTheme() {
               main: secondary,
               contrastText: '#fff',
             },
+            info: {
+              main: '#2AB5F6',
+              contrastText: '#fff',
+            },
             discord: {
               main: '#5865F2',
               green: '#57F287',
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 80e4e94b5..0e8f581c5 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -19,9 +19,7 @@ import '@services/events'
 import ErrorBoundary from './ErrorBoundary'
 import ReactRouter from './ReactRouter'
 import HolidayEffects from './HolidayEffects'
-/**
- * @type {Record<string, string>}
- */
+
 const LOADING_LOCALES = {
   de: 'Übersetzungen werden geladen',
   en: 'Loading Translations',
diff --git a/src/components/ClearStorage.jsx b/src/components/ClearStorage.jsx
deleted file mode 100644
index 292ec3785..000000000
--- a/src/components/ClearStorage.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// @ts-check
-import * as React from 'react'
-import { Navigate } from 'react-router-dom'
-
-import { useMemory } from '@hooks/useMemory'
-import { useStorage } from '@hooks/useStorage'
-
-export default function ClearStorage() {
-  React.useEffect(() => {
-    localStorage.clear()
-    sessionStorage.clear()
-
-    const { filters, menus } = useMemory.getState()
-    useStorage.setState({
-      filters: structuredClone(filters),
-      menus: structuredClone(menus),
-      location: [
-        CONFIG.map.general.startLat || 0,
-        CONFIG.map.general.startLon || 0,
-      ],
-      zoom: CONFIG.map.general.startZoom,
-    })
-    useMemory.setState({ Icons: null, Audio: null })
-  }, [])
-
-  return <Navigate to="/" />
-}
diff --git a/src/components/ReactRouter.jsx b/src/components/ReactRouter.jsx
index 699c01a90..071aaa80a 100644
--- a/src/components/ReactRouter.jsx
+++ b/src/components/ReactRouter.jsx
@@ -6,8 +6,9 @@ import Auth from './layout/auth/Auth'
 import Login from './layout/auth/Login'
 import Blocked from './layout/auth/Blocked'
 import Errors from './Errors'
-import ClearStorage from './ClearStorage'
+import DataManagement from '../features/data'
 import Config from './Config'
+import ResetAll from './Reset'
 
 const Playground = React.lazy(() => import('../features/playground'))
 
@@ -21,13 +22,23 @@ const loginRoute = (
     <Login />
   </Config>
 )
-const resetRoute = <ClearStorage />
+const dataRoute = (
+  <Config>
+    <DataManagement />
+  </Config>
+)
 const blockedRoute = (
   <Config>
     <Blocked />
   </Config>
 )
+const playgroundRoute = (
+  <Config>
+    <Playground />
+  </Config>
+)
 const errorRoute = <Errors />
+const resetRoute = <ResetAll />
 
 export default function ReactRouter() {
   return (
@@ -35,14 +46,8 @@ export default function ReactRouter() {
       <Route path="/" element={authRoute} />
       <Route path="reset" element={resetRoute} />
       <Route path="login" element={loginRoute} />
-      <Route
-        path="playground"
-        element={
-          <Config>
-            <Playground />
-          </Config>
-        }
-      />
+      <Route path="data-management" element={dataRoute} />
+      <Route path="playground" element={playgroundRoute} />
       <Route path="blocked/:info" element={blockedRoute} />
       <Route path="@/:lat/:lon" element={authRoute} />
       <Route path="@/:lat/:lon/:zoom" element={authRoute} />
diff --git a/src/components/Reset.jsx b/src/components/Reset.jsx
new file mode 100644
index 000000000..a67888b32
--- /dev/null
+++ b/src/components/Reset.jsx
@@ -0,0 +1,10 @@
+// @ts-check
+import * as React from 'react'
+import { Navigate } from 'react-router-dom'
+
+import { hardReset } from '@services/functions/resetState'
+
+export default function ResetAll() {
+  hardReset()
+  return <Navigate to="/" />
+}
diff --git a/src/components/layout/dialogs/ResetFilters.jsx b/src/components/layout/dialogs/ResetFilters.jsx
index 100d32b71..a27aa7176 100644
--- a/src/components/layout/dialogs/ResetFilters.jsx
+++ b/src/components/layout/dialogs/ResetFilters.jsx
@@ -1,8 +1,10 @@
+// @ts-check
 import * as React from 'react'
 import DialogContent from '@mui/material/DialogContent'
 import Typography from '@mui/material/Typography'
+import Grid2 from '@mui/material/Unstable_Grid2'
 import Button from '@mui/material/Button'
-import { Navigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
 import { useLayoutStore } from '@hooks/useLayoutStore'
@@ -11,54 +13,64 @@ import Header from '../general/Header'
 import Footer from '../general/Footer'
 import { DialogWrapper } from './DialogWrapper'
 
-export default function ResetFilters() {
-  const { t } = useTranslation()
-  const [redirect, setRedirect] = React.useState(false)
+const handleClose = () => useLayoutStore.setState({ resetFilters: false })
 
-  const handleClose = React.useCallback(
-    () => useLayoutStore.setState({ resetFilters: false }),
-    [],
-  )
+const FOOTER_OPTIONS =
+  /** @type {import('../general/Footer').FooterButton[]} */ ([
+    {
+      name: 'close',
+      action: handleClose,
+      color: 'primary',
+      align: 'right',
+    },
+  ])
 
-  if (redirect) {
-    return <Navigate push to="/reset" />
-  }
+export default function ResetFilters() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
 
   return (
     <DialogWrapper dialog="resetFilters" variant="small">
-      <Header titles={[t('filters_reset_title')]} />
-      <DialogContent>
-        <Typography variant="subtitle1" align="center">
-          {t('filters_reset_text')}
-        </Typography>
-        <br />
-        <Typography align="center">
+      <Header titles={t('filters_reset_title')} />
+      <Grid2
+        component={DialogContent}
+        className="flex-center"
+        container
+        rowGap={2}
+      >
+        <Grid2 xs={12} mt={2}>
+          <Typography variant="subtitle1" align="center">
+            {t('reset_or_manage_text')}
+          </Typography>
+        </Grid2>
+        <Grid2 xs={12} sm={6} className="flex-center">
+          <Button
+            variant="contained"
+            color="info"
+            size="small"
+            onClick={() => {
+              handleClose()
+              navigate('/data-management')
+            }}
+          >
+            {t('data_management')}
+          </Button>
+        </Grid2>
+        <Grid2 xs={12} sm={6} className="flex-center">
           <Button
-            style={{ minWidth: 100 }}
             variant="contained"
-            color="primary"
+            color="error"
             size="small"
             onClick={() => {
-              setRedirect(true)
               handleClose()
+              navigate('/reset')
             }}
           >
             {t('confirm_filters_reset')}
           </Button>
-        </Typography>
-        <br />
-      </DialogContent>
-      <Footer
-        options={[
-          {
-            name: 'close',
-            action: handleClose,
-            color: 'primary',
-            align: 'right',
-          },
-        ]}
-        role="webhook_footer"
-      />
+        </Grid2>
+      </Grid2>
+      <Footer options={FOOTER_OPTIONS} />
     </DialogWrapper>
   )
 }
diff --git a/src/components/layout/general/BasicListButton.jsx b/src/components/layout/general/BasicListButton.jsx
index 6f38e971b..6bb9f32d8 100644
--- a/src/components/layout/general/BasicListButton.jsx
+++ b/src/components/layout/general/BasicListButton.jsx
@@ -9,13 +9,15 @@ import { useTranslation } from 'react-i18next'
 /**
  * @param {{ label?: string } & import('@mui/material').ListItemButtonProps} props
  */
-export function BasicListButton({ children, label, ...props }) {
+export function BasicListButton({ children, label, color, ...props }) {
   const { t } = useTranslation()
   return (
     <ListItem disablePadding>
       <ListItemButton {...props}>
         {children && <ListItemIcon>{children}</ListItemIcon>}
-        {label && <ListItemText primary={t(label)} />}
+        {label && (
+          <ListItemText primary={t(label)} primaryTypographyProps={{ color }} />
+        )}
       </ListItemButton>
     </ListItem>
   )
diff --git a/src/features/data/components/Notification.jsx b/src/features/data/components/Notification.jsx
new file mode 100644
index 000000000..ccd0c957a
--- /dev/null
+++ b/src/features/data/components/Notification.jsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
+import { useDataManagementStore } from '../hooks/store'
+
+const handleClose = (_, reason) => {
+  if (reason === 'clickaway') {
+    return
+  }
+  useDataManagementStore.setState({ notification: false })
+}
+
+export function DataManagementNotification() {
+  const open = useDataManagementStore((s) => s.notification)
+  const message = useDataManagementStore((s) => s.message)
+  const severity = useDataManagementStore((s) => s.severity)
+
+  return (
+    <Snackbar open={open} autoHideDuration={5000} onClose={handleClose}>
+      <Alert onClose={handleClose} severity={severity} variant="filled">
+        {message}
+      </Alert>
+    </Snackbar>
+  )
+}
diff --git a/src/features/data/components/ResetFilters.jsx b/src/features/data/components/ResetFilters.jsx
new file mode 100644
index 000000000..995561e45
--- /dev/null
+++ b/src/features/data/components/ResetFilters.jsx
@@ -0,0 +1,54 @@
+// @ts-check
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useMemory } from '@hooks/useMemory'
+import { resetFilter, resetFilters } from '@services/functions/resetState'
+import Utility from '@services/Utility'
+
+import {
+  ButtonWithNotification,
+  ChildContainer,
+  StyledDivider,
+  StyledSubHeader,
+} from './Shared'
+import { useDataManagementStore } from '../hooks/store'
+
+export function ResetFilters() {
+  const { t } = useTranslation()
+  const perms = useMemory((s) => s.auth.perms)
+  const filters = useMemory((s) => s.filters)
+  const isHovering = useDataManagementStore((s) => s.resetFiltersHover)
+
+  return (
+    <ChildContainer>
+      <StyledSubHeader>Filters</StyledSubHeader>
+      {Object.keys(filters)
+        .filter((perm) => perms[perm])
+        .map((/** @type {import('@rm/types').Categories} */ key) => (
+          <ButtonWithNotification
+            key={key}
+            onClick={() => resetFilter(key)}
+            color="warning.main"
+            label={t(`reset_${Utility.camelToSnake(key)}`)}
+            category="filter"
+            isHovering={isHovering}
+          />
+        ))}
+      <StyledDivider />
+      <ButtonWithNotification
+        onClick={resetFilters}
+        label="Reset All"
+        color="error.main"
+        category="filter"
+        all
+        onMouseEnter={() =>
+          useDataManagementStore.setState({ resetFiltersHover: true })
+        }
+        onMouseLeave={() =>
+          useDataManagementStore.setState({ resetFiltersHover: false })
+        }
+      />
+    </ChildContainer>
+  )
+}
diff --git a/src/features/data/components/ResetGeneral.jsx b/src/features/data/components/ResetGeneral.jsx
new file mode 100644
index 000000000..687b86283
--- /dev/null
+++ b/src/features/data/components/ResetGeneral.jsx
@@ -0,0 +1,98 @@
+// @ts-check
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  resetAllGeneral,
+  resetAudio,
+  resetIcons,
+  resetLocation,
+  resetMenus,
+  resetSettings,
+  resetUI,
+  resetUserSettings,
+} from '@services/functions/resetState'
+
+import {
+  ButtonWithNotification,
+  ChildContainer,
+  StyledDivider,
+  StyledSubHeader,
+} from './Shared'
+import { useDataManagementStore } from '../hooks/store'
+
+export function ResetGeneral() {
+  const { t } = useTranslation()
+  const isHovering = useDataManagementStore((s) => s.resetGeneralHover)
+
+  return (
+    <ChildContainer>
+      <StyledSubHeader>General</StyledSubHeader>
+      <ButtonWithNotification
+        onClick={resetSettings}
+        label={t('reset_settings')}
+        color="warning.main"
+        category="general"
+        isHovering={isHovering}
+      />
+      <ButtonWithNotification
+        onClick={resetMenus}
+        label={t('reset_menus')}
+        color="warning.main"
+        category="general"
+        isHovering={isHovering}
+      />
+      <ButtonWithNotification
+        onClick={resetUserSettings}
+        label={t('reset_options')}
+        color="warning.main"
+        category="general"
+        isHovering={isHovering}
+      />
+      <ButtonWithNotification
+        onClick={resetUI}
+        label={t('reset_ui')}
+        color="warning.main"
+        category="general"
+        isHovering={isHovering}
+      />
+      <ButtonWithNotification
+        onClick={resetLocation}
+        label={t('reset_position')}
+        color="warning.main"
+        category="general"
+        isHovering={isHovering}
+      />
+      <StyledDivider />
+      <StyledSubHeader>Assets</StyledSubHeader>
+      <ButtonWithNotification
+        onClick={resetIcons}
+        label={t('reset_icons')}
+        color="warning.main"
+        category="general"
+        isHovering={isHovering}
+      />
+      <ButtonWithNotification
+        onClick={resetAudio}
+        label={t('reset_audio')}
+        color="warning.main"
+        category="general"
+        isHovering={isHovering}
+      />
+      <StyledDivider />
+      <ButtonWithNotification
+        onClick={resetAllGeneral}
+        label={t('reset_all')}
+        color="error.main"
+        category="general"
+        all
+        onMouseEnter={() =>
+          useDataManagementStore.setState({ resetGeneralHover: true })
+        }
+        onMouseLeave={() =>
+          useDataManagementStore.setState({ resetGeneralHover: false })
+        }
+      />
+    </ChildContainer>
+  )
+}
diff --git a/src/features/data/components/Shared.jsx b/src/features/data/components/Shared.jsx
new file mode 100644
index 000000000..51bb41b21
--- /dev/null
+++ b/src/features/data/components/Shared.jsx
@@ -0,0 +1,87 @@
+// @ts-check
+import * as React from 'react'
+import Grid from '@mui/material/Unstable_Grid2'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListSubheader from '@mui/material/ListSubheader'
+import { styled } from '@mui/material/styles'
+import CheckIcon from '@mui/icons-material/Check'
+import ClearIcon from '@mui/icons-material/Clear'
+
+import { BasicListButton } from '@components/layout/general/BasicListButton'
+
+import { setNotification, useDataManagementStore } from '../hooks/store'
+
+export const StyledDivider = styled(Divider)(({ theme }) => ({
+  margin: theme.spacing(1, 0),
+  borderColor: 'ActiveBorder',
+}))
+
+export const StyledSubHeader = styled(ListSubheader)(({ theme }) => ({
+  color: theme.palette.secondary.main,
+  fontSize: '1.5rem',
+}))
+
+export const BORDER_SX = /** @type {import('@mui/material').SxProps} */ ({
+  border: 'ActiveBorder 2px solid',
+  borderRadius: 4,
+  p: 2,
+  width: '100%',
+  m: 2,
+})
+
+/**
+ *
+ * @param {{ children: React.ReactNode }} props
+ * @returns
+ */
+export function ChildContainer({ children }) {
+  return (
+    <Grid container xs={12} sm={6}>
+      <List sx={BORDER_SX}>{children}</List>
+    </Grid>
+  )
+}
+
+/**
+ * @param {{
+ *  label?: string,
+ *  isHovering?: boolean,
+ *  all?: boolean
+ *  category?: import('../hooks/store').DataCategory
+ * } & import('@mui/material').ListItemButtonProps} props
+ */
+export function ButtonWithNotification({
+  label,
+  category,
+  all,
+  onClick,
+  isHovering,
+  ...props
+}) {
+  const hasBeenReset = useDataManagementStore(
+    (s) => !!(s.resetList[label] || s.resetList[category] || s.resetList.all),
+  )
+  /** @type {import('@mui/material').ListItemButtonProps['onClick']} */
+  const fullOnClick = React.useCallback(
+    (e) => {
+      if (onClick) onClick(e)
+      setNotification(label, all ? category : '')
+    },
+    [onClick, label, category, all],
+  )
+  return (
+    <BasicListButton
+      onClick={fullOnClick}
+      label={label}
+      sx={{ bgcolor: isHovering ? 'rgba(255, 255, 255, 0.08)' : 'inherit' }}
+      {...props}
+    >
+      {hasBeenReset ? (
+        <CheckIcon color="success" />
+      ) : (
+        <ClearIcon color="error" />
+      )}
+    </BasicListButton>
+  )
+}
diff --git a/src/features/data/components/TopRow.jsx b/src/features/data/components/TopRow.jsx
new file mode 100644
index 000000000..23be3e261
--- /dev/null
+++ b/src/features/data/components/TopRow.jsx
@@ -0,0 +1,67 @@
+// @ts-check
+import * as React from 'react'
+import { useNavigate } from 'react-router-dom'
+import Grid from '@mui/material/Unstable_Grid2'
+import Divider from '@mui/material/Divider'
+import Button from '@mui/material/Button'
+import { useTranslation } from 'react-i18next'
+
+import { hardReset } from '@services/functions/resetState'
+
+import { BORDER_SX } from './Shared'
+import { setNotification, useDataManagementStore } from '../hooks/store'
+
+export function TopRow() {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+  return (
+    <Grid
+      container
+      alignItems="center"
+      justifyContent="space-evenly"
+      xs={12}
+      columns={13}
+      sx={BORDER_SX}
+    >
+      <Grid
+        xs={6}
+        component={Button}
+        size="large"
+        color="success.main"
+        onClick={() => navigate('/')}
+      >
+        {t('go_back')}
+      </Grid>
+      <Divider
+        orientation="vertical"
+        flexItem
+        sx={{ borderColor: 'ActiveBorder' }}
+      />
+      <Grid
+        xs={6}
+        size="large"
+        component={Button}
+        color="error.main"
+        onClick={() => {
+          hardReset()
+          setNotification(t('reset_all'), 'all')
+          navigate('/')
+        }}
+        onMouseEnter={() =>
+          useDataManagementStore.setState({
+            resetFiltersHover: true,
+            resetGeneralHover: true,
+          })
+        }
+        onMouseLeave={() =>
+          useDataManagementStore.setState({
+            resetFiltersHover: false,
+            resetGeneralHover: false,
+          })
+        }
+      >
+        {t('reset_all')}
+      </Grid>
+    </Grid>
+  )
+}
diff --git a/src/features/data/hooks/store.js b/src/features/data/hooks/store.js
new file mode 100644
index 000000000..d7c979333
--- /dev/null
+++ b/src/features/data/hooks/store.js
@@ -0,0 +1,43 @@
+// @ts-check
+import { create } from 'zustand'
+
+/**
+ * @typedef {'all' | 'general' | 'filter'} DataCategory
+ * @typedef {{
+ *  resetGeneralHover: boolean
+ *  resetFiltersHover: boolean
+ *  resetList: Record<string, boolean>
+ *  notification: boolean
+ *  severity: import('@mui/material').AlertProps['severity'],
+ *  message: string
+ * }} DataManagementStore
+ */
+
+/** @type {DataManagementStore} */
+const DEFAULT_STATE = {
+  resetGeneralHover: false,
+  resetFiltersHover: false,
+  resetList: {},
+  notification: false,
+  severity: 'success',
+  message: '',
+}
+
+/** @type {import("zustand").UseBoundStore<import("zustand").StoreApi<DataManagementStore>>} */
+export const useDataManagementStore = create(() => ({ ...DEFAULT_STATE }))
+
+/**
+ * @param {string} label
+ * @param {DataCategory | ''} [category]
+ */
+export const setNotification = (label, category) => {
+  useDataManagementStore.setState((prev) => ({
+    notification: true,
+    severity: 'success',
+    message: label,
+    resetList: { ...prev.resetList, [category || label]: true },
+  }))
+}
+
+export const restoreDefault = () =>
+  useDataManagementStore.setState({ ...DEFAULT_STATE })
diff --git a/src/features/data/index.jsx b/src/features/data/index.jsx
new file mode 100644
index 000000000..fe090f887
--- /dev/null
+++ b/src/features/data/index.jsx
@@ -0,0 +1,42 @@
+// @ts-check
+import * as React from 'react'
+import Grid from '@mui/material/Unstable_Grid2'
+import Typography from '@mui/material/Typography'
+import { useTranslation } from 'react-i18next'
+
+import useRefresh from '@hooks/useRefresh'
+
+import { TopRow } from './components/TopRow'
+import { ResetGeneral } from './components/ResetGeneral'
+import { ResetFilters } from './components/ResetFilters'
+import { DataManagementNotification } from './components/Notification'
+import { restoreDefault } from './hooks/store'
+
+export default function DataManager() {
+  const { t } = useTranslation()
+  useRefresh(true)
+
+  React.useEffect(() => {
+    restoreDefault()
+  }, [])
+
+  return (
+    <Grid
+      container
+      height="100vh"
+      width="100%"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Grid container alignItems="stretch" justifyContent="center">
+        <Typography variant="h3" py={1} width="100%" align="center">
+          {t('data_management')}
+        </Typography>
+        <TopRow />
+        <ResetGeneral />
+        <ResetFilters />
+      </Grid>
+      <DataManagementNotification />
+    </Grid>
+  )
+}
diff --git a/src/hooks/useMemory.js b/src/hooks/useMemory.js
index 5994bf2b8..b51043d64 100644
--- a/src/hooks/useMemory.js
+++ b/src/hooks/useMemory.js
@@ -33,9 +33,9 @@ import { create } from 'zustand'
  *   menus: Record<string, any>
  *   filters: import('@rm/types').AllFilters,
  *   masterfile: import('@rm/masterfile').Masterfile
- *   polling: Record<string, number>
+ *   polling: import('@rm/types').Config['api']['polling'],
  *   gymValidDataLimit: number
- *   settings: Record<string, any>
+ *   settings: Record<keyof import('./useStorage').UseStorage['settings'], { name: string }>
  *   userSettings: Record<string, any>
  *   clientError: string,
  *   timeOfDay: import('@rm/types').TimesOfDay,
diff --git a/src/hooks/useRefresh.js b/src/hooks/useRefresh.js
index f6b0deecd..182f8abd5 100644
--- a/src/hooks/useRefresh.js
+++ b/src/hooks/useRefresh.js
@@ -9,13 +9,13 @@ import UAssets from '@services/Icons'
 import { useMemory } from './useMemory'
 import { useStorage } from './useStorage'
 
-export default function useRefresh() {
+export default function useRefresh(once = false) {
   const active = useMemory((s) => s.active)
   const online = useMemory((s) => s.online)
 
   const hasIcons = useMemory((s) => !!s.Icons)
 
-  const { data, stopPolling, startPolling, refetch, error } = useQuery(
+  const { data, loading, stopPolling, startPolling, refetch, error } = useQuery(
     getMapData,
     {
       fetchPolicy: active && online ? 'network-only' : 'cache-only',
@@ -23,11 +23,11 @@ export default function useRefresh() {
   )
 
   useEffect(() => {
-    if (active && online) {
+    if (active && online && !once) {
       startPolling(1000 * 60 * 60)
       return () => stopPolling()
     }
-  }, [active, online])
+  }, [active, online, once])
 
   useEffect(() => {
     if (!hasIcons && online) {
@@ -104,4 +104,6 @@ export default function useRefresh() {
       }))
     }
   }, [data])
+
+  return loading
 }
diff --git a/src/hooks/useStorage.js b/src/hooks/useStorage.js
index 852c15647..e2a41327d 100644
--- a/src/hooks/useStorage.js
+++ b/src/hooks/useStorage.js
@@ -33,7 +33,7 @@ import { persist, createJSONStorage } from 'zustand/middleware'
  *   audio: Record<string, string>
  *   userSettings: Record<string, any>
  *   profiling: boolean
- *   stateLogging: boolean
+ *   stateTraceLog: boolean
  *   desktopNotifications: boolean
  *   setAreas: (areas?: string | string[], validAreas?: string[], unselectAll?: boolean) => void,
  *   setPokemonFilterMode: (legacyFilter: boolean, easyMode: boolean) => void,
diff --git a/src/services/functions/resetState.js b/src/services/functions/resetState.js
new file mode 100644
index 000000000..e1febd120
--- /dev/null
+++ b/src/services/functions/resetState.js
@@ -0,0 +1,84 @@
+// @ts-check
+import { useMemory } from '@hooks/useMemory'
+import { useStorage } from '@hooks/useStorage'
+
+/** @param {keyof import('@hooks/useStorage').UseStorage & keyof import('@hooks/useMemory').UseMemory} key */
+const resetState = (key) => {
+  const state = useMemory.getState()[key]
+  useStorage.setState({
+    [key]:
+      key === 'settings'
+        ? Object.fromEntries(
+            Object.entries(state).map(([k, v]) => [k, Object.keys(v)[0]]),
+          )
+        : structuredClone(state),
+  })
+}
+
+/** @param {'Audio' | 'Icons'} key */
+const resetAssets = (key) => {
+  useMemory.setState({ [key]: null })
+  useStorage.setState({ [key.toLowerCase()]: {} })
+}
+
+export const resetSettings = () => resetState('settings')
+
+export const resetMenus = () => resetState('menus')
+
+export const resetUserSettings = () => resetState('userSettings')
+
+export const resetFilters = () => resetState('filters')
+
+export const resetIcons = () => resetAssets('Icons')
+
+export const resetAudio = () => resetAssets('Audio')
+
+export const resetUI = () =>
+  useStorage.setState({
+    holidayEffects: {},
+    tabs: {},
+    searches: {},
+    popups: {},
+    search: '',
+    searchTab: '',
+    sidebar: '',
+    scanAreasMenu: '',
+    motdIndex: 0,
+    profiling: false,
+    tutorial: false,
+    stateTraceLog: false,
+    darkMode: !!window?.matchMedia('(prefers-color-scheme: dark)').matches,
+  })
+
+export const resetLocation = () => {
+  const { config } = useMemory.getState()
+  useStorage.setState({
+    location: [config.general.startLat || 0, config.general.startLon || 0],
+    zoom: config.general.startZoom || 18,
+  })
+}
+
+export const resetAllGeneral = () => {
+  resetSettings()
+  resetMenus()
+  resetUserSettings()
+  resetIcons()
+  resetAudio()
+  resetUI()
+  resetLocation()
+}
+
+/** @param {import('@rm/types').Categories} key */
+export const resetFilter = (key) => {
+  const reference = useMemory.getState().filters[key]
+  useStorage.setState((prev) => ({
+    filters: { ...prev.filters, [key]: structuredClone(reference) },
+  }))
+}
+
+export const hardReset = () => {
+  localStorage.clear()
+  sessionStorage.clear()
+  resetAllGeneral()
+  resetFilters()
+}