feat: add station page

Author: DasProffi

web/components/layout/ContentPanel.tsx

@@ -1,27 +1,27 @@
-import type { HTMLAttributes } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 
 type ContentPanelProps = HTMLAttributes<HTMLDivElement> & {
-  title?: string,
-  description?: string,
+  titleElement?: ReactNode,
+  description?: ReactNode,
 }
 
 /**
  * The base for every content section of the page
  */
 export const ContentPanel = ({
                                children,
-                               title,
+                               titleElement,
                                description,
                                ...props
                              }: ContentPanelProps) => {
   return (
     <div {...props} className={clsx('flex-col-2 w-full h-full pt-6', props.className)}>
       <div className="flex-col-0">
-        <h1 className="typography-title-lg">{title}</h1>
-        <p className="typography-label-md text-description">
+        <h1 className="typography-title-lg">{titleElement}</h1>
+        <div className="typography-label-md text-description">
           {description ?? <span className="invisible">placeholder</span>}
-        </p>
+        </div>
       </div>
       {children}
     </div>

web/hooks/useAuth.tsx

@@ -41,15 +41,11 @@ export const AuthProvider = ({
   const { isLoading, identity } = authState
 
   const pathname = usePathname()
-  const isUnprotected = unprotectedURLs.some(pattern =>
+  const isUnprotected = !!pathname && unprotectedURLs.some(pattern =>
     pathname.startsWith(pattern))
-  const isIgnored = ignoredURLs.some(pattern =>
+  const isIgnored = !!pathname && ignoredURLs.some(pattern =>
     pathname.startsWith(pattern))
 
-  console.log(pathname, {
-    isUnprotected,
-    isIgnored,
-  })
   useEffect(() => {
     if(isIgnored) {
       return

web/hooks/useTasksContext.tsx

@@ -56,8 +56,8 @@ export const TasksContextProvider = ({ children }: PropsWithChildren) => {
     setState(prevState => ({
       ...prevState,
       sidebar: {
-        isShowingWards: pathName.startsWith('/wards') || prevState.sidebar.isShowingWards,
-        isShowingTeams: pathName.startsWith('/teams') || prevState.sidebar.isShowingTeams,
+        isShowingWards: !!pathName && (pathName.startsWith('/wards') || prevState.sidebar.isShowingWards),
+        isShowingTeams: !!pathName && (pathName.startsWith('/teams') || prevState.sidebar.isShowingTeams),
       },
     }))
   }, [pathName])

web/i18n/translations.ts

@@ -28,6 +28,7 @@ export type TasksTranslationEntries = {
   'logout': string,
   'myTasks': string,
   'nBed': (values: { count: number }) => string,
+  'nCurrentlyPatients': (values: { count: number }) => string,
   'noPatient': string,
   'nOrganization': (values: { count: number }) => string,
   'notAssigned': string,
@@ -53,6 +54,7 @@ export type TasksTranslationEntries = {
   'settingsDescription': string,
   'stagingModalDisclaimerMarkdown': string,
   'status': string,
+  'tasks': string,
   'taskStatus': (values: { status: string }) => string,
   'teams': string,
   'visibility': string,
@@ -84,6 +86,15 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
         'other': `${count} Betten`,
       })
     },
+    'nCurrentlyPatients': ({ count }): string => {
+      let _out: string = ''
+      _out += `Aktuell `
+      _out += TranslationGen.resolvePlural(count, {
+        '=1': `${count} Patient`,
+        'other': `${count} Patienten`,
+      })
+      return _out
+    },
     'noPatient': `Kein Patient`,
     'nOrganization': ({ count }): string => {
       return TranslationGen.resolvePlural(count, {
@@ -134,6 +145,7 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
     'settingsDescription': `Hier kannst du die App Konfiguration ändern.`,
     'stagingModalDisclaimerMarkdown': `Diese öffentliche Instanz von helpwave tasks ist für \\b{Entwicklungs- und Vorschauzwecke} gedacht. Bitte stellen Sie sicher, dass Sie \\b{ausschließlich nicht-vertrauliche Testdaten} eingeben. Diese Instanz kann \\negative{\\b{jederzeit gelöscht}} werden.`,
     'status': `Status`,
+    'tasks': `Aufgaben`,
     'taskStatus': ({ status }): string => {
       return TranslationGen.resolveSelect(status, {
         'overdue': `Überfällig`,
@@ -169,6 +181,15 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
         'other': `${count} Beds`,
       })
     },
+    'nCurrentlyPatients': ({ count }): string => {
+      let _out: string = ''
+      _out += `Currently `
+      _out += TranslationGen.resolvePlural(count, {
+        '=1': `${count} Patient`,
+        'other': `${count} Patients`,
+      })
+      return _out
+    },
     'noPatient': `No Patient`,
     'nOrganization': ({ count }): string => {
       return TranslationGen.resolvePlural(count, {
@@ -219,6 +240,7 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
     'settingsDescription': `Here you can change the app configuration.`,
     'stagingModalDisclaimerMarkdown': `This public instance of helpwave tasks is for \\b{development and preview purposes}. Please make sure to \\b{only} enter \\b{non-confidential testing data}. This instance can be \\negative{\\b{deleted at any time}}`,
     'status': `Status`,
+    'tasks': `Tasks`,
     'taskStatus': ({ status }): string => {
       return TranslationGen.resolveSelect(status, {
         'overdue': `Overdue`,

web/locales/de-DE.arb

@@ -89,5 +89,14 @@
   "wards": "Stationen",
   "overview": "Übersicht",
   "teams": "Teams",
-  "logout": "Logout"
+  "logout": "Logout",
+  "nCurrentlyPatients": "Aktuell {count, plural, =1{# Patient} other{# Patienten}}",
+  "@nCurrentlyPatients": {
+    "placeholders": {
+      "count": {
+        "type": "number"
+      }
+    }
+  },
+  "tasks": "Aufgaben"
 }

web/locales/en-US.arb

@@ -88,5 +88,14 @@
   "wards": "Wards",
   "overview": "Overview",
   "teams": "Teams",
-  "logout": "Logout"
+  "logout": "Logout",
+  "nCurrentlyPatients": "Currently {count, plural, =1{# Patient} other{# Patients}}",
+  "@nCurrentlyPatients": {
+    "placeholders": {
+      "count": {
+        "type": "number"
+      }
+    }
+  },
+  "tasks": "Tasks"
 }

web/pages/404.tsx

@@ -10,7 +10,7 @@ const NotFound: NextPage = () => {
   const translation = useTasksTranslation()
   return (
     <Page pageTitle={titleWrapper(translation('pages.404.notFound'))}>
-      <ContentPanel title={translation('pages.404.notFound')}>
+      <ContentPanel titleElement={translation('pages.404.notFound')}>
         <div className="flex-col-2 items-center justify-center h-full">
           <HelpwaveLogo className="w-64 h-64" animate="bounce"/>
           <p className="text-lg font-inter">{translation('pages.404.notFoundDescription1')}...</p>

web/pages/index.tsx

@@ -12,7 +12,7 @@ const Dashboard: NextPage = () => {
   const { data, isLoading } = useMyQueryQuery()
   return (
     <Page pageTitle={titleWrapper(translation('homePage'))}>
-      <ContentPanel title={translation('homePage')} description="The beginning of something">
+      <ContentPanel titleElement={translation('homePage')} description="The beginning of something">
         {isLoading ? 'Loading' : data?.patients.toString()}
         <div className="h-3000"></div>
       </ContentPanel>

web/pages/patients/index.tsx

@@ -222,7 +222,7 @@ const PatientsPage: NextPage = () => {
   return (
     <Page pageTitle={titleWrapper(translation('patients'))}>
       <ContentPanel
-        title={translation('patients')}
+        titleElement={translation('patients')}
         description={translation('nPatient', { count: patients.length })}
       >
         <Table

web/pages/settings/index.tsx

@@ -32,7 +32,7 @@ const SettingsPage: NextPage = () => {
         onClose={() => setIsThemeDialogOpen(false)}
       />
       <ContentPanel
-        title={translation('settings')}
+        titleElement={translation('settings')}
         description={translation('settingsDescription')}
       >
         <h2 className="typography-title-md">{translation('preferences')}</h2>