feat: debt module for frontend

Author: berenteb

frontend/src/App.tsx

@@ -45,6 +45,7 @@ import RaceByTeamPage from './pages/race/raceByTeam.page.tsx'
 import CreateTeamPage from './pages/teams/createTeam.page.tsx'
 import EditMyTeamPage from './pages/teams/editMyTeam.page.tsx'
 import MyTeamPage from './pages/teams/myTeam.page.tsx'
+import DebtPage from './pages/debt/debt.page.tsx'
 
 export function App() {
   return (
@@ -62,6 +63,9 @@ export function App() {
                   <Route path=":id" element={<CommunityPage />} />
                   <Route index element={<CommunityListPage />} />
                 </Route>
+                <Route path={Paths.DEBT}>
+                  <Route index element={<DebtPage />} />
+                </Route>
                 <Route path={Paths.ORGANIZATION}>
                   <Route path=":id" element={<OrganizationPage />} />
                   <Route index element={<OrganizationListPage />} />

frontend/src/api/contexts/config/types.ts

@@ -260,7 +260,10 @@ export interface Token {
   defaultTestIcon: string
 }
 
-export interface Debt {}
+export interface Debt {
+  topMessage: string
+  title: string
+}
 
 export interface UserHandling {}
 

frontend/src/api/hooks/debt/useDebtQuery.ts

@@ -0,0 +1,16 @@
+import axios from 'axios'
+import { useQuery } from '@tanstack/react-query'
+import { ApiPaths } from '../../../util/paths'
+import { DebtDto } from '../../../util/views/debt.view.ts'
+import { QueryKeys } from '../queryKeys'
+
+export const useDebtQuery = () => {
+  return useQuery<DebtDto, Error>({
+    queryKey: [QueryKeys.DEBTS],
+    queryFn: async () => {
+      const response = await axios.get<DebtDto>(ApiPaths.DEBTS)
+      return response.data
+    },
+    refetchOnMount: 'always'
+  })
+}

frontend/src/api/hooks/queryKeys.ts

@@ -28,5 +28,6 @@ export enum QueryKeys {
   COMMUNITY = 'COMMUNITY',
   ORGANIZATION = 'ORGANIZATION',
   ACCESS_KEY = 'ACCESS_KEY',
-  HOME_NEWS = 'HOME_NEWS'
+  HOME_NEWS = 'HOME_NEWS',
+  DEBTS = 'DEBTS'
 }

frontend/src/pages/debt/components/debt-list-item.tsx

@@ -0,0 +1,42 @@
+import { Box, HStack, Text, useColorModeValue } from '@chakra-ui/react'
+import * as FaIcons from 'react-icons/fa'
+import { FaCircleCheck, FaCircleXmark } from 'react-icons/fa6'
+import { useOpaqueBackground } from '../../../util/core-functions.util.ts'
+import { DebtView } from '../../../util/views/debt.view.ts'
+
+interface DebtListItemProps {
+  item: DebtView
+}
+
+export const DebtListItem = ({ item }: DebtListItemProps) => {
+  const bg = useOpaqueBackground(1)
+
+  const red = useColorModeValue('red.500', 'red.300')
+  const green = useColorModeValue('green.500', 'green.300')
+
+  return (
+    <Box borderRadius="lg" padding={4} backgroundColor={bg} marginTop={5}>
+      <HStack spacing={4} justify="space-between">
+        <Text isTruncated display="flex" alignItems="center" gap={1}>
+          <DebtIcon name="FaUser" />
+          {item.product}
+        </Text>
+        <Text>{item.price}&nbsp;JMF</Text>
+        {item.payed ? (
+          <Text color={green} display="flex" alignItems="center" gap={1} fontWeight="bold">
+            <FaCircleCheck /> Fizetve
+          </Text>
+        ) : (
+          <Text color={red} display="flex" alignItems="center" gap={1} fontWeight="bold">
+            <FaCircleXmark /> Fizetetlen
+          </Text>
+        )}
+      </HStack>
+    </Box>
+  )
+}
+
+function DebtIcon({ name }: { name: string }) {
+  const Icon = FaIcons[name as keyof typeof FaIcons] ?? null
+  return <Icon />
+}

frontend/src/pages/debt/debt.page.tsx

@@ -0,0 +1,51 @@
+import { Divider, Heading, Text } from '@chakra-ui/react'
+import { Helmet } from 'react-helmet-async'
+import { useConfigContext } from '../../api/contexts/config/ConfigContext.tsx'
+import { useDebtQuery } from '../../api/hooks/debt/useDebtQuery.ts'
+import { useProfileQuery } from '../../api/hooks/profile/useProfileQuery.ts'
+import { ComponentUnavailable } from '../../common-components/ComponentUnavailable.tsx'
+import { CmschPage } from '../../common-components/layout/CmschPage.tsx'
+import Markdown from '../../common-components/Markdown.tsx'
+import { PageStatus } from '../../common-components/PageStatus.tsx'
+import { ProfileQR } from '../profile/components/ProfileQR.tsx'
+import { DebtListItem } from './components/debt-list-item.tsx'
+
+const DebtPage = () => {
+  const debtComponent = useConfigContext()?.components.debt
+  const profileComponent = useConfigContext()?.components.profile
+  const profileQuery = useProfileQuery()
+  const { data, isError, isLoading } = useDebtQuery()
+
+  if (!debtComponent) return <ComponentUnavailable />
+
+  const title = debtComponent.title || 'Tartozások'
+
+  if (isError || isLoading || !data) return <PageStatus isLoading={isLoading} isError={isError} title={title} />
+
+  return (
+    <CmschPage>
+      <Helmet title={title} />
+      <Heading as="h1" variant="main-title">
+        {title}
+      </Heading>
+      {profileQuery.data && (
+        <>
+          <Divider my={8} borderWidth={2} />
+          <ProfileQR profile={profileQuery.data} component={profileComponent} />
+          <Divider my={8} borderWidth={2} />
+        </>
+      )}
+      {debtComponent.topMessage && <Markdown text={debtComponent.topMessage} />}
+      {data.debts.map((item) => (
+        <DebtListItem key={item.product + item.price} item={item} />
+      ))}
+      {data.debts.length === 0 && (
+        <Text align="center" mt={10} fontWeight="bold">
+          Nincs tranzakciód eddig, szaladj és vegyél valami zurát!
+        </Text>
+      )}
+    </CmschPage>
+  )
+}
+
+export default DebtPage

frontend/src/pages/profile/components/ProfileQR.tsx

@@ -1,9 +1,7 @@
-import { ProfileView } from '../../../util/views/profile.view'
 import {
   Box,
   Button,
   Center,
-  Divider,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -13,16 +11,16 @@ import {
   Text,
   useDisclosure
 } from '@chakra-ui/react'
-import QRCode from 'react-qr-code'
 import { FaQrcode } from 'react-icons/fa'
+import QRCode from 'react-qr-code'
 import { Profile } from '../../../api/contexts/config/types'
 import { WalletButton } from '../../../common-components/WalletButton'
+import { ProfileView } from '../../../util/views/profile.view'
 
 export const ProfileQR = ({ profile, component }: { profile: ProfileView; component: Profile }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   return (
     <>
-      <Divider my={10} borderWidth={2} w={'100%'} />
       <Center flexDirection="column">
         <Text fontSize="3xl" fontWeight={500}>
           {component.qrTitle}

frontend/src/pages/profile/profile.page.tsx

@@ -144,8 +144,13 @@ const ProfilePage = ({}: Props) => {
         </>
       )}
 
-      {component.showQr && profile.cmschId && <ProfileQR profile={profile} component={component} />}
-      {(component.showTasks || component.showRiddles || component.showTokens) && <Divider my={10} borderWidth={2} />}
+      {component.showQr && profile.cmschId && (
+        <>
+          <Divider my={8} borderWidth={2} />
+          <ProfileQR profile={profile} component={component} />
+        </>
+      )}
+      {(component.showTasks || component.showRiddles || component.showTokens) && <Divider my={8} borderWidth={2} />}
       <Flex justify="center" alignItems="center" flexWrap="wrap">
         {component.showTasks && (
           <Center p={3}>

frontend/src/util/paths.ts

@@ -26,7 +26,8 @@ export enum Paths {
   MY_TEAM = 'my-team',
   TEAM_ADMIN = 'team-admin',
   ACCESS_KEY = 'access-key',
-  MAP = 'map'
+  MAP = 'map',
+  DEBT = 'debt'
 }
 
 export enum AbsolutePaths {
@@ -56,7 +57,8 @@ export enum AbsolutePaths {
   QR_FIGHT = '/qr-fight',
   LEADER_BOARD = '/leaderboard',
   ACCESS_KEY = '/access-key',
-  MAP = '/map'
+  MAP = '/map',
+  DEBT = '/debt'
 }
 
 export enum ApiPaths {
@@ -90,5 +92,6 @@ export enum ApiPaths {
   DELETE_PUSH_NOTIFICATION_TOKEN = '/api/pushnotification/delete-token',
   MY_TEAM = '/api/team/my',
   TEAM = '/api/team',
-  ALL_TEAMS = '/api/teams'
+  ALL_TEAMS = '/api/teams',
+  DEBTS = '/api/debts',
 }

frontend/src/util/views/debt.view.ts

@@ -5,6 +5,9 @@ export interface DebtView {
   representativeName: string
   payed: boolean
   shipped: boolean
-  log: string
-  materialIcon: string
+  icon: string
+}
+
+export interface DebtDto {
+  debts: DebtView[]
 }